Search code examples
androidandroid-layoutgridviewadapter

How do I achieve this layout?


I'm trying to create a soundboard which looks like this: https://gyazo.com/466fa8248aafe3232036b5586c070d30 What is the best way to achieve this? Currently I'm trying it with this code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginTop="50dp">


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:text="Kohle song"
                android:id="@+id/ojeangelasong"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:onClick="kohlesong"
                android:layout_columnWeight="300"
                android:layout_rowWeight="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"/>

            <Button
                android:text="Zum \nVideo"
                android:id="@+id/Button1"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_columnWeight="1"
                android:onClick="kohlesongLink"
                android:layout_rowWeight="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton" />
            <Button
                android:text="Zum \nVideo"
                android:id="@+id/Button2"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_columnWeight="1"
                android:onClick="shooterkingLink"
                android:layout_rowWeight="1"
                android:layout_row="1"
                android:layout_column="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"
                android:layout_marginTop="10dp"/>

            <Button
                android:text="Roboter song"
                android:id="@+id/neulandBtn"
                android:onClick="roboter"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_columnWeight="300"
                android:layout_rowWeight="1"
                android:layout_row="2"
                android:layout_column="0"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"
                android:layout_marginTop="10dp"/>

            <Button
                android:text="Zum \nVideo"
                android:id="@+id/Button5"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:onClick="roboterLink"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_row="2"
                android:layout_column="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"
                android:layout_marginTop="10dp"/>
            <Button
                android:text="Zum \nVideo"
                android:id="@+id/Button6"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:onClick="remixLink"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_row="3"
                android:layout_column="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"
                android:layout_marginTop="10dp"/>

            <Button
                android:text="Gronkh Remix"
                android:id="@+id/zusammenschnittBtn"
                android:onClick="remix"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_row="3"
                android:layout_column="0"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"
                android:layout_marginTop="10dp"/>


            <Button
                android:text="Remix vorschlagen"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:id="@+id/soundvorschlagen"
                android:layout_columnWeight="1"
                android:layout_columnSpan="2"
                android:layout_rowWeight="1"
                android:layout_marginBottom="70dp"
                android:onClick="soundvorschlagen"
                android:layout_row="4"
                android:layout_column="0"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/soundvorschlagen"
                android:layout_marginTop="10dp"
                />

            <Button
                android:text="Shooterking"
                android:id="@+id/autotuneremix"
                android:onClick="shooterking"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_row="1"
                android:layout_column="0"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"
                android:layout_marginTop="10dp"/>
        </GridLayout>

    </ScrollView>
</RelativeLayout>

But I think this is not so professional.


Solution

  • Try this:

    <?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="100">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:layout_weight="20"
            android:weightSum="100">
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent" 
                android:layout_weight="75"
                android:text="Button"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="25"
                android:text="Button"/> 
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:layout_weight="20"
            android:weightSum="100">
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="75"
                android:text="Button"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="25"
                android:text="Button"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:layout_weight="20"
            android:weightSum="100">
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="75"
                android:text="Button"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="25"
                android:text="Button"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:layout_weight="20"
            android:weightSum="100">
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="75"
                android:text="Button"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="25"
                android:text="Button"/>
        </LinearLayout>
        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="20"
            android:text="Button"/>
    
    </LinearLayout>
    

    enter image description here