android-layoutandroid-gridlayout

Creating responsive grid layout in android studio


<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#804fc4"
    tools:context=".MainActivity">
    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity = "center"
        android:columnCount="2"
        android:layout_margin="@dimen/_10sdp"
        android:rowCount="5">

        <Button
            android:layout_width="@dimen/_130sdp"
            android:layout_height="@dimen/_50sdp"
            android:layout_margin="@dimen/_7sdp"
            android:text="button"
            android:textSize="@dimen/_10sdp"/>

        <Button
            android:layout_width="@dimen/_130sdp"
            android:layout_height="@dimen/_50sdp"
            android:layout_margin="@dimen/_7sdp"
            android:text="button"
            android:textSize="@dimen/_10sdp"/>

        <Button
            android:layout_width="@dimen/_130sdp"
            android:layout_height="@dimen/_50sdp"
            android:layout_margin="@dimen/_7sdp"
            android:text="button"
            android:textSize="@dimen/_10sdp"/>

        <Button
            android:layout_width="@dimen/_130sdp"
            android:layout_height="@dimen/_50sdp"
            android:layout_margin="@dimen/_7sdp"
            android:text="button"
            android:textSize="@dimen/_10sdp"/>


    </GridLayout>
</ScrollView>

I'm trying to create a grid layout that can fit in most of the devices. But children on right side are getting less margin compared to the children on left side. I've tried using gravity attribute but it didn't work. How can I give each side same amount of margin?

Here is the pic of how it looks https://i.sstatic.net/hCLut.png


Solution

  • The problem is that you are assigning specific widths to the buttons when they should be allowed to vary. Try the following using

    android:layout_width="0dp"
    android:layout_columnWeight="1"
    android:layout_gravity="fill_horizontal"
    

    as XML attributes for the buttons. Also, make the width of the GridLayout match_parent.

    <ScrollView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#804fc4"
        tools:context=".MainActivity">
        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity = "center"
            android:columnCount="2"
            android:layout_margin="@dimen/_10sdp"
            android:rowCount="5">
    
            <Button
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:layout_height="@dimen/_50sdp"
                android:layout_margin="@dimen/_7sdp"
                android:text="button"
                android:textSize="@dimen/_10sdp"/>
    
            <Button
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:layout_margin="@dimen/_7sdp"
                android:text="button"
                android:textSize="@dimen/_10sdp"/>
    
            <Button
                android:layout_width="@dimen/_130sdp"
                android:layout_height="@dimen/_50sdp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:layout_margin="@dimen/_7sdp"
                android:text="button"
                android:textSize="@dimen/_10sdp"/>
    
            <Button
                android:layout_width="@dimen/_130sdp"
                android:layout_height="@dimen/_50sdp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:layout_margin="@dimen/_7sdp"
                android:text="button"
                android:textSize="@dimen/_10sdp"/>
        </GridLayout>
    </ScrollView>