Develop Reference

What is wrong with this XML code? - Android Studio

I created a soundboard with 200 Sounds and a BottomNavigationBar.
On some devices like the Huawei P8 Lite and the Samsung galaxy s7 it looks like this:
https://gyazo.com/2a08bcd731fb1cfeb07e72f75bc05e7e
And on my nox player and bluestacks it looks like this:
https://gyazo.com/e26327d7ba0ed366f15c61bd3130ae39
Here is the XML code with only 2 colums and 3 rows just to keep it in summery (Normaly there are 100 rows)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2"
android:orientation="vertical"
android:layout_marginTop="50dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_weight = "1"
android:layout_height="100dp"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/mybutton"
android:onClick="Button1"
android:padding="3dp"
android:text="Button1"
android:textColor="#ffffff"
android:textSize="20dp" />
<Button
android:id="#+id/Button2"
android:layout_weight = "1"
android:layout_height="100dp"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/mybutton"
android:onClick="Button2"
android:padding="5dp"
android:text="Button2"
android:textColor="#ffffff"
android:textSize="20dp" />
<Button
android:id="#+id/Button3"
android:layout_weight = "1"
android:layout_height="100dp"
android:layout_column="0"
android:layout_column="1"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/mybutton"
android:onClick="Button3"
android:padding="5dp"
android:text="Button3"
android:textColor="#ffffff"
android:textSize="20dp" />
<Button
android:id="#+id/Button4"
android:layout_weight = "1"
android:layout_height="100dp"
android:layout_column="0"
android:layout_column="0"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/mybutton"
android:onClick="Button3"
android:padding="5dp"
android:text="Button4"
android:textColor="#ffffff"
android:textSize="20dp" />
<Button
android:id="#+id/Button5"
android:layout_weight = "1"
android:layout_height="100dp"
android:layout_column="0"
android:layout_column="0"
android:layout_row="2"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/mybutton"
android:onClick="Button5"
android:padding="5dp"
android:text="Button5"
android:textColor="#ffffff"
android:textSize="20dp" />
<Button
android:id="#+id/Button6"
android:layout_weight = "1"
android:layout_height="100dp"
android:layout_column="0"
android:layout_column="1"
android:layout_row="2"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/mybutton"
android:onClick="Button6"
android:padding="5dp"
android:text="Button6"
android:textColor="#ffffff"
android:textSize="20dp" />
</GridLayout>
</ScrollView>
On Devices with Android 6 its working perfekt, but on Devices with Android 4 its showing nothing.
How can I solve this error? I want that the App is available on every device from Android 4.
Warning!This is not to be an advertising but it would realy help if you could tell me if this error occurs.
Googe Play: Gronkh Soundboard
Please download and tell me if the error accours, please write your version with it.
After that you can uninstall the app.
Sorry for my bad English.

You can tr this code. I have removed some attributes which is i don't think required. Hope it will help
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/imageView"
android:fillViewport="true">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="2">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:onClick="Button1"
android:padding="3dp"
android:text="Button1"
android:textColor="#ffffff"
android:textSize="20dp" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:onClick="Button1"
android:padding="3dp"
android:text="Button1"
android:textColor="#ffffff"
android:textSize="20dp" />
...
</GridLayout>
</ScrollView>

button size are different in emulator from real device

I am a beginner and I created 8 buttons on gridLayout.The size of buttons are different here is a xml code:
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="0"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="Hello"
android:id="#+id/hello"
android:onClick="buttonTapped"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="How are you"
android:id="#+id/howareyou"
android:onClick="buttonTapped"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="good evening"
android:id="#+id/goodevening"
android:onClick="buttonTapped"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="please"
android:id="#+id/please"
android:onClick="buttonTapped"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="2"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="my name is"
android:id="#+id/mynameis"
android:onClick="buttonTapped"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="2"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="do you
speak english"
android:id="#+id/doyouspeakenglish"
android:onClick="buttonTapped"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="3"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="welcome"
android:id="#+id/welcome"
android:onClick="buttonTapped"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="3"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="i live in"
android:id="#+id/ilivein"
android:onClick="buttonTapped"/>
</GridLayout>
and here is the screenShot on Lg g3
real device Lg g3
and here is the screenShot on emulator emulator
what is the problem?

try LinearLayout with weightsum
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="4"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2"
android:padding="5dp"
>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Hello"
android:id="#+id/hello"
android:layout_marginRight="5dp"
android:layout_marginTop="6dp"
android:layout_marginBottom="3dp"
android:onClick="buttonTapped"
/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="How are you"
android:id="#+id/howareyou"
android:layout_marginLeft="5dp"
android:layout_marginTop="6dp"
android:layout_marginBottom="3dp"
android:onClick="buttonTapped"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2"
android:padding="5dp"
>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="good evening"
android:id="#+id/goodevening"
android:layout_marginRight="5dp"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:onClick="buttonTapped"
/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="please"
android:id="#+id/please"
android:layout_marginLeft="5dp"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:onClick="buttonTapped"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2"
android:padding="5dp"
>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="my name is"
android:id="#+id/mynameis"
android:layout_marginRight="5dp"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:onClick="buttonTapped"
/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="do you
speak english"
android:id="#+id/doyouspeakenglish"
android:layout_marginLeft="5dp"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:onClick="buttonTapped"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2"
android:padding="5dp"
>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="welcome"
android:id="#+id/welcome"
android:layout_marginRight="5dp"
android:layout_marginTop="3dp"
android:layout_marginBottom="6dp"
android:onClick="buttonTapped"
/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Hello"
android:layout_marginLeft="5dp"
android:layout_marginTop="3dp"
android:layout_marginBottom="6dp"
android:onClick="buttonTapped"
/>
</LinearLayout>
</LinearLayout>

you should fix your height and width of the button in dimension file for various resolution example:
values folder:
<dimen name="width">90dp</dimen>
<dimen name="height">75dp</dimen>
values-hdpi folder:
<dimen name="width">100dp</dimen>
<dimen name="height">85dp</dimen>
like this do for mdpi,,xhdpi,xxhdpi and put this in your button.
android:layout_width="#dimen/width"
android:layout_height="#dimen/height"

Why the grid view appear different in the emulator?

Why does the emulator have different sizes of buttons other than the designed ones here is the XML? This is a serious problem with the grid views and I've encountered it many times but I can't find the answer.
Where is the problem?
<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.life.braintrainer.MainActivity">
<Button
android:id="#+id/startButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#26eb47"
android:onClick="start"
android:padding="40dp"
android:text="Go!"
android:textSize="70sp"
android:visibility="invisible" />
<TextView
android:id="#+id/timerTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#e6ff26"
android:padding="10dp"
android:text="30s"
android:textSize="30sp" />
<TextView
android:id="#+id/pointsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/timerTextView"
android:background="#fe8a0e"
android:padding="10dp"
android:text="0/0"
android:textSize="30sp" />
<TextView
android:id="#+id/sumTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/pointsTextView"
android:layout_centerHorizontal="true"
android:padding="15dp"
android:text="30 + 12"
android:textColor="#312e2e"
android:textSize="25sp" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/sumTextView"
android:layout_alignParentStart="true"
android:columnCount="2"
android:rowCount="2">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowWeight="1"
android:background="#27f13f"
android:onClick="chooseAnswer"
android:tag="0"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowWeight="1"
android:background="#0a2ef9"
android:onClick="chooseAnswer"
android:tag="1"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="1"
android:layout_rowWeight="1"
android:background="#f43ffb"
android:onClick="chooseAnswer"
android:tag="2"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="1"
android:layout_rowWeight="1"
android:background="#2cdefe"
android:onClick="chooseAnswer"
android:tag="3"
android:text="3"
android:textSize="80sp" />
</GridLayout>
<TextView
android:id="#+id/resultTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/startButton"
android:layout_centerHorizontal="true"
android:text="Correct!"
android:textSize="40sp" />
</RelativeLayout>

Android ListView Item Layout getting screwed up

I tried to customize the layout of my ListView so I made up the following layout file:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="100dp"
tools:context=".workout.WorkoutPlanFragment"
android:paddingRight="10dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/edit_view"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_column="0"
android:layout_row="0"
android:visibility="gone">
<ImageView
android:layout_width="40dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_delete"
android:layout_column="0"
android:layout_row="0"
android:layout_rowSpan="3"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:layout_marginRight="15dp"
android:layout_marginLeft="15dp"
android:id="#+id/image_view_delete_workout_plan"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image_view_move_down"
android:src="#drawable/ic_down" android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image_view_move_up"
android:src="#drawable/ic_up" android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"/>
</LinearLayout>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/workout_plan_fragment" android:layout_column="1" android:layout_row="0">
<ImageView
android:layout_width="93dp"
android:layout_height="match_parent"
android:src="#drawable/img_workout"
android:id="#+id/imageView5"
android:layout_column="0" android:layout_row="0" android:layout_rowSpan="3"
android:paddingBottom="4dp" android:paddingTop="4dp" android:layout_marginRight="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Someting"
android:alpha="1"
android:id="#+id/text_view_plan_name" android:layout_gravity="center_vertical"
android:layout_column="1" android:layout_row="0"
android:textColor="#5a70ff"
android:textSize="26dp" android:layout_marginTop="5dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="asdf"
android:id="#+id/text_view_anz_exercises" android:layout_row="1" android:layout_column="1"
android:layout_rowWeight="0.1" android:alpha="1" android:textSize="15dp"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall" android:text="blablablablablabla"
android:id="#+id/text_view_last_workout" android:layout_row="2" android:layout_column="1"
android:layout_marginBottom="5dp"/>
</GridLayout>
When I use this layout on a Fragment or just check it in the design tab it looks totally fine like this:
But as soon as I apply this layout to a ListView item it turns out looking like that:
I already tried replacing the GridLayout by a LinearLayout or something like that but it always looks like that...
How can I make the ListView item look like the designed Layout?

Try this code.
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingRight="10dp" />
<LinearLayout
android:id="#+id/edit_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_column="0"
android:layout_row="0"
android:orientation="horizontal"
android:visibility="gone">
<ImageView
android:id="#+id/image_view_delete_workout_plan"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_row="0"
android:layout_rowSpan="3"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/image_view_move_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/image_view_move_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<GridLayout
android:id="#+id/workout_plan_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0">
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginRight="10dp"
android:layout_row="0"
android:layout_rowSpan="3"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/text_view_plan_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="center_vertical"
android:layout_marginTop="5dp"
android:layout_row="0"
android:alpha="1"
android:text="Someting"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#5a70ff"
android:textSize="26dp" />
<TextView
android:id="#+id/text_view_anz_exercises"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:layout_rowWeight="0.1"
android:alpha="1"
android:text="asdf"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="15dp" />
<TextView
android:id="#+id/text_view_last_workout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_marginBottom="5dp"
android:layout_row="2"
android:text="blablablablablabla"
android:textAppearance="?android:attr/textAppearanceSmall" />
</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>

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.

Consider instead using a vertical LinearLayout containing horizontal LinearLayouts (or more GridLayouts) for each row. Then each row view can have a layout_weight set to the same value so they are all allocated the same amount of space. In that case also set their layout_height to 0.

You can add:
android:layout_columnWeight="1"
android:layout_rowWeight="1"
in each Button. Like this:
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="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_columnWeight="1"
android:layout_rowWeight="1"
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_columnWeight="1"
android:layout_rowWeight="1"
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_columnWeight="1"
android:layout_rowWeight="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_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="3"
android:layout_gravity="centerl"
android:id="#+id/dcr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DR"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_rowWeight="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_columnWeight="1"
android:layout_rowWeight="1"
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_columnWeight="1"
android:layout_rowWeight="1"
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_columnWeight="1"
android:layout_rowWeight="1"
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_columnWeight="1"
android:layout_rowWeight="1"
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_columnWeight="1"
android:layout_rowWeight="1"
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_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="3"
android:layout_gravity="center"
android:id="#+id/fcr" />
</GridLayout>