Search code examples
androidandroid-layoutandroid-studioandroid-gridlayout

Android: GridLayout rows are all bunched together


Im making using a Grid Layout on an app. The Columns work fine but the rows are giving me a problem.

I want 4 rows spread evenly on the image I am using. But for some reason the rows are all bunched up with only the last row ahead of the others. Its my first time using a GridLayout and i cant see what im doing wrong.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/imageView"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:src="@drawable/pitch"/>

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:rowCount="4"
    android:numColumns="5"
    android:id="@+id/formation"
    android:layout_alignBottom="@+id/imageView">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Gk"
        android:layout_row="0"
        android:layout_column="1"
        android:layout_gravity="center"
        android:id="@+id/gk"
        android:layout_columnSpan="3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="DL"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_gravity="center"
        android:id="@+id/dl" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="DC"
        android:layout_row="1"
        android:layout_column="1"
        android:layout_gravity="center"
        android:id="@+id/dcl" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="DC"
        android:layout_row="1"
        android:layout_column="3"
        android:layout_gravity="center"
        android:id="@+id/dcr" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="DR"
        android:layout_row="1"
        android:layout_column="4"
        android:layout_gravity="center"
        android:id="@+id/dr" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ML"
        android:layout_row="2"
        android:layout_column="0"
        android:layout_gravity="center"
        android:id="@+id/ml" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MC"
        android:layout_row="2"
        android:layout_column="1"
        android:layout_gravity="center"
        android:id="@+id/mcl" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MC"
        android:layout_row="2"
        android:layout_column="3"
        android:layout_gravity="center"
        android:id="@+id/mcr" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MR"
        android:layout_row="2"
        android:layout_column="4"
        android:layout_gravity="center"
        android:id="@+id/mr" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FC"
        android:layout_row="3"
        android:layout_column="1"
        android:layout_gravity="center"
        android:id="@+id/fcl" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FC"
        android:layout_row="3"
        android:layout_column="3"
        android:layout_gravity="center"
        android:id="@+id/fcr" />

</GridLayout>

enter image description here


Solution

  • Suggest you to use linearlayout instead of gridlayout, to set image in background you need to use FrameLayout as in below code,

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/next"
                android:scaleType="centerCrop" />
        </FrameLayout>
    
        <LinearLayout
            android:id="@+id/formation"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:weightSum="4">
    
            <LinearLayout
                android:id="@+id/formation1"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center">
    
                <Button
                    android:id="@+id/gk"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="Gk" />
            </LinearLayout>
    
            <LinearLayout
                android:id="@+id/formation2"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center">
    
                <Button
                    android:id="@+id/dl"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="DL" />
    
                <Button
                    android:id="@+id/dcl"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="DC" />
    
                <Button
                    android:id="@+id/dcr"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="DC" />
    
                <Button
                    android:id="@+id/dr"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="DR" />
            </LinearLayout>
    
            <LinearLayout
                android:id="@+id/formation3"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center">
    
                <Button
                    android:id="@+id/ml"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="ML" />
    
                <Button
                    android:id="@+id/mcl"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="MC" />
    
                <Button
                    android:id="@+id/mcr"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="MC" />
    
                <Button
                    android:id="@+id/mr"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="MR" />
            </LinearLayout>
    
            <LinearLayout
                android:id="@+id/formation4"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center">
    
                <Button
                    android:id="@+id/fcl"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="FC" />
    
                <Button
                    android:id="@+id/fcr"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="FC" />
            </LinearLayout>
        </LinearLayout>
    
    </RelativeLayout>
    

    hope this is usefull.