1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Drain Droids

Android Studio For Beginners.Mobile Apps.Android Games.

Saturday, February 9, 2019

How I Use Three Layout for UI Screen Design in Android Studio




In this tutorial, let quickly see how to make the above simple UI design .UI design is something to consider when making your android or any other platform applications.
Looking at the above, you will notice that we have 4 buttons in the upper part and each separated by horizontal divider.
And again we have two buttons on the lower part. Those buttons when clicked is expected to open another activity. But in this tutorial, we are not discussing about opening another activity on button click.
Sometimes, when choosing a layout, you can decide to use just one layout or multiple layout. The above design uses Three layout Which are LinearLayout,Tablelayout and RelativeLayout
Before we talk about the layout, copy and paste the code on your XML see the result.




<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
xmlns:app="http://schemas.android.com/apk/res-auto"
   
xmlns:tools="http://schemas.android.com/tools"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
tools:context=".MainActivity">

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

        <
LinearLayout
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:orientation="vertical" >

            <
Button
                
android:id="@+id/button"
               
android:layout_width="match_parent"
               
android:layout_height="wrap_content"
               
android:background="#000000"
               
android:textColor="#ffffff"
               
android:text="Button" />

            <
View
               
android:layout_width="match_parent"
               
android:layout_height="1dp"
               
android:background="@android:color/darker_gray"/>




            <
Button
               
android:id="@+id/button3"
               
android:layout_width="match_parent"
               
android:layout_height="wrap_content"
               
android:background="#000000"
               
android:textColor="#ffffff"
               
android:text="Button" />

            <
View
               
android:layout_width="match_parent"
               
android:layout_height="1dp"
               
android:background="@android:color/darker_gray"/>


            <
Button
               
android:id="@+id/button4"
               
android:layout_width="match_parent"
               
android:layout_height="wrap_content"
               
android:background="#000000"
               
android:textColor="#ffffff"
               
android:text="Button" />

            <
View
               
android:layout_width="match_parent"
               
android:layout_height="1dp"
               
android:background="@android:color/darker_gray"/>


            <
Button
               
android:id="@+id/button5"
               
android:layout_width="match_parent"
                
android:layout_height="wrap_content"
               
android:background="#000000"
               
android:textColor="#ffffff"
               
android:text="Button" />
            <
View
               
android:layout_width="match_parent"
               
android:layout_height="1dp"
               
android:background="@android:color/darker_gray"/>


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

                <
TableRow
                   
android:layout_width="fill_parent"
                   
android:layout_height="0dp"
                   
android:weightSum="1"
                   
android:layout_weight="0.5">
                    <
RelativeLayout
                        
android:layout_width="0dp"
                       
android:layout_height="match_parent"
                       
android:layout_weight="0.5">
                        <
Button
                           
android:layout_width="match_parent"
                            
android:layout_height="match_parent"
                           
android:id="@+id/button1"
                           
android:background="#000000"
                           
android:textColor="#ffffff"
                           
android:text="Botton 1"
                           
android:textSize="18sp"
                           
android:gravity="center|bottom"
                           
android:singleLine="false"
                           
android:paddingBottom="10dp"/>
                    </
RelativeLayout>
                    <
RelativeLayout
                       
android:layout_width="0dp"
                       
android:layout_height="match_parent"
                       
android:layout_weight="0.5">
                        <
Button
                           
android:layout_width="match_parent"
                           
android:layout_height="match_parent"
                           
android:background="#000000"
                           
android:textColor="#ffffff"
                           
android:id="@+id/button2"
                           
android:text="Botton 2"
                           
android:textSize="18sp"
                           
android:gravity="center|bottom"
                           
android:singleLine="false"
                           
android:paddingBottom="10dp"/>


                            android:layout_centerInParent="true"/>
                    </
RelativeLayout>
                </
TableRow>
            </
TableLayout>

        </
LinearLayout>
    </
ScrollView>

First thing I do is to implement the scroll View. This will enable user scroll up and down the screen.

Second thing I do is to implement LinearLayout to house the first 4 Buttons in which each buttons are separated by a divider.
Also, the LinearLayout housed the TableLayout and within the TableLayout, we introduced the first RelativeLaout which contains the first lower button and also introduced the second RelativeLayout which contains the second lower buttons.

Hope that was helpful.