Photoshop Question posted in
The official user guide can be found here.

How to create android app home screen with 4 icons? – Photoshop

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    you can do above task simply by LinearLayout by following steps
    1.divide layout vertically in four parts(1st and 3rd part for image and 2nd and 4th part for text)
    2.divide each vertical part into 2 horizontal part.

    I have done a similar task using the same it worked perfect for me.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search