androidbuttontiles

Android- How to create 4 square buttons in one row with icons on top of them?


Im trying to create an app which will have 4 square buttons in one row with an icon on top of these buttons. Which is the best way to approach this? I'm trying to do something like this as shown in the image

enter image description here

Thank You


Solution

  • Set your drawable image on place of @mipmap/ic_launcher_round

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="4sp"
            android:orientation="horizontal"
            android:weightSum="4">
    
    
            <ImageButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4sp"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher_round" />
    
            <ImageButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4sp"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher_round" />
    
            <ImageButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4sp"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher_round" />
    
            <ImageButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4sp"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher_round" />
    
    
        </LinearLayout>
    
    </LinearLayout>