Search code examples
androidandroid-layoutmaterial-designgrid-layoutdashboard

How to create android app home screen with 4 icons?


I have 4 icons. I want to create 4 rectangles with icons on it. Also I want to add text below icons. Which components should I use? How to implement it? I trie GridLayout and TableLayout but I don't have any idea how to do it. I want to design native app using material design.

I designed demo dashboard in photoshop. My app home screen should look like following enter image description here

Please help! I am android beginner.


Solution

  • Edited Try This Code...

    <?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="0dp"
            android:layout_weight="0.5">
    
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:gravity="center"
                android:background="@android:color/darker_gray"
                android:layout_weight="0.5">
    
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                android:layout_weight="0.5"/>
                </LinearLayout>
    
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:gravity="center"
                android:background="@android:color/black"
                android:layout_weight="0.5">
    
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/ic_launcher"
                    android:layout_weight="0.5"/>
            </LinearLayout>
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5">
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:gravity="center"
                android:background="@android:color/black"
                android:layout_weight="0.5">
    
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/ic_launcher"
                    android:layout_weight="0.5"/>
            </LinearLayout>
    
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:gravity="center"
                android:background="@android:color/darker_gray"
                android:layout_weight="0.5">
    
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/ic_launcher"
                    android:layout_weight="0.5"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>