Android UI Screen

Question

Good Day,

I'm new in Android UI development. May I have any knowledge on how will I achieve this kind of UI Screen:

Thanks in advance.

score 0 · Answer 1 · answered Apr 21 '16 at 08:45

You can find all you need in creating that layout in the following links:

Google Play Style Tabs using TabLayout (Android M)
Action Bar Tabs

As for the layout of each tab you can do something like this (as structure)

<RelativeLayout>
    <LinearLayout> // or you can use a fragment
    //Screen 1 content
    </LinearLayout>
    <SubTabs>
    <SubTabs>
</RelativeLayout>

For the sub-tab content:

<?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"
     android:weightSum="2">

<ListView
    android:id="@+id/list1"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_marginBottom="10dp"/> //replace margin with your value

<ListView
    android:id="@+id/list2"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_marginBottom="10dp"/> //replace margin with your value

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:layout_gravity="center"/>

</LinearLayout>

score 0 · Accepted Answer · answered Apr 21 '16 at 09:28

Here is the code with TextView.

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

    <LinearLayout
        android:id="@+id/upparLayout1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#9DAD0C"
        android:orientation="horizontal"
        android:weightSum="3">

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="#9DAD0C"
            android:text="Tab1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="#717D11"
            android:text="Tab2" />
    </LinearLayout>

    <TextView
        android:id="@+id/screen1"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/upparLayout1"
        android:background="#CD5E93"
        android:text="Screen1" />

    <LinearLayout
        android:id="@+id/middleLayout"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_below="@+id/screen1"
        android:background="#9F165A"
        android:orientation="horizontal"
        android:weightSum="2">

        <TextView
            android:layout_width="0dp"
            android:layout_height="120dp"
            android:layout_weight="1"
            android:text="SubTab1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="120dp"
            android:layout_weight="1"
            android:text="SubTab2" />
    </LinearLayout>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_below="@+id/middleLayout"
        android:background="#A9BB2B"
        android:text="List Based on Sub Tab" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_below="@+id/textView2"
        android:layout_centerHorizontal="true"
        android:background="#A9BB2B"
        android:text="List Based on Sub Tab" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_below="@+id/textView3"
        android:layout_centerHorizontal="true"
        android:background="#A9BB2B"
        android:text="Button" />

</RelativeLayout>

Android UI Screen

2 Answers2