Grid view with 2 colums without writing any code in the Activitys? - Android Studio

Question

sorry for my little knowledge. I tried to create a soundboard, so I decided to design it lik this: https://gyazo.com/2a08bcd731fb1cfeb07e72f75bc05e7e

Everything worked well, I tested it on my Huawei P8 Lite and on the Samsung galaxy s7 and everything was fine. But if I try it on Bluestacks or Noxplayer it looks like this: https://gyazo.com/84d878061234c25ae872d4ed2491f2f4

Here is the code I used to get this:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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_width="100dp"
                android:layout_height="100dp"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_column="0"
                android:layout_row="0"
                android:onClick="button1"
                android:text="Button"/>

            <Button
                android:id="@+id/Button2"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_column="1"
                android:layout_row="0"
                android:onClick="Button2"
                android:text="Button"/>

            <Button
                android:id="@+id/Button3"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_column="0"
                android:layout_row="1"
                android:onClick="Button3"
                android:text="Button"/>

            <Button
                android:id="@+id/Button4"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_rowWeight="1"
                android:layout_columnWeight="1"
                android:layout_column="1"
                android:layout_row="1"
                android:onClick="Button4"
                android:text="Button"/>

              //and 200 buttons more

    </GridLayout>

</ScrollView>

I know something is wrong with that code for example the "GridLayout". But I don't know how to programm it corectly. Many people tried to explain it and said i should use an RecyclerView or an GridView, but no one changed my example code to the right code. Everyone sendet me a Link with like 300 lines of explanaitions. The thing is I'm very bad in English so I cant understand what they want to explain me. I would be very glad if someone can explain this to me by way of an example.

I think the problem are these two lines:

android:layout_width="100dp"
android:layout_height="100dp"

but if I set them both to "fill_parent" the button stretches out of the edge. Is it possible to write that code that it fits every screen size, and that without writing any code in the MainActivity?

I would be so happy if someone could show me how to do it right :)

P.S Don't flame me I'm a 15 year old german boy, thats why I'm so bad in English.

Answer 1

I highly recommend to you to use a RecyclerView with GridLayoutManager, but if you don't want to implement a RecyclearView but change your code you should try to change this two lines of code :

android:layout_width="100dp"
android:layout_height="100dp"

If you set width and height to 100dp, the buttons will always be 100dp. So you should use LinearLayout as parent layout and use android:layout_weight for every single button, like this:

android:layout_width="0dp"
android:layout_weight = "1";
android:layout_height="100dp"

In this way the button on the same raw will split the amount of space.

Answer 2

Instead of GridLayout, I would suggest you to go with RecyclerView. With RecyclerView, you can use GridLayoutManager.

This would help you maintaining screen compatibility and also adding any number of values into the list. No need of managing it through xml layout design.