Creating responsive grid layout in android studio

user_19847189 0
Viewed 36
<?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.stack.imgur.com/hCLut.png

android-gridlayout android-layout
1 Answers

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>
user_62879100
Related