Android XML Layout Design

Hello Android Lovers, In this article I am going to discuss how to design attractive XML Layout like below image.

In here you can see background image is different and that is not an image. those are layouts. There are Card layouts, Custom Top header, Custom Footer and different layouts. Let’s talk about one by one.

Let’s create a drawable background file

Right click on the drawable folder and create a new “Drawable Resource File”. Name it as “home_banner_back”. Here is the code.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:bottomLeftRadius="50dp"
        android:bottomRightRadius="50dp"/>
    <solid android:color="#00001a" />

</shape>

You can change the radius. Change it and see what happen. In my image there are 3 drawable files. As you can see, under the top slide image, there are two background layouts. And the other one is under the footer. So you can change it.

Lets create the Custom Top Header

In my image, there is a custom Top Header. Lets design that. here is the code.

 <RelativeLayout
            android:id="@+id/main001"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:layout_width="match_parent"
            android:layout_height="40dp">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginLeft="10dp"
                android:src="@drawable/top"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:orientation="horizontal"
                android:gravity="center"
                android:layout_height="wrap_content">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:src="@drawable/homelogo"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="cursive"
                    android:gravity="center"
                    android:text="Shree Ganesha"
                    android:textSize="20dp"
                    android:textStyle="bold" />

            </LinearLayout>
 </RelativeLayout>

Lets create the Banner

First of all we need to create a layout resource file. Because I am going to design the banner in there. So we can load the app without any slowing.

I am going to name it as “home_page_banner”. Here is the code.

<?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="200dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        app:cardElevation="6dp"
        app:cardCornerRadius="35dp">


    <LinearLayout
        android:layout_width="match_parent"
        android:background="@drawable/banner"
        android:orientation="vertical"

        android:layout_height="200dp">
        <RelativeLayout
            android:id="@+id/rel001banner"
            android:layout_width="wrap_content"
            android:layout_marginTop="60dp"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:textStyle="bold"
                android:text="We love Load Ganesha"
                android:textColor="#FFFFFF"
                android:textSize="18dp"
                />

        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/rel002banner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="80dp"
                android:layout_marginTop="5dp"
                android:text="May Load Ganesh bless you and your family with good fortune and wisdom and remove all obstacles."
                android:textColor="#FFFFFF" />
        </RelativeLayout>
    </LinearLayout>

    </androidx.cardview.widget.CardView>
</RelativeLayout>

Then go to your main file and create a layout for home banner resource file. here is the code.

 <RelativeLayout
                android:id="@+id/rel3"
                android:background="@drawable/home_banner_back"
                android:layout_width="match_parent"
                android:layout_height="260dp">

                <!--        main header-->
                <RelativeLayout
                    android:id="@+id/main002"
                    android:layout_width="match_parent"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="5dp"
                    android:layout_height="30dp">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="10dp"
                        android:layout_marginRight="20dp"
                        android:text="Welcome Load Ganesha Lovers,"
                        android:textSize="16dp"
                        android:textColor="#ffffff"
                        android:textStyle="bold" />
                </RelativeLayout>

                <!--        Banner-->
                <RelativeLayout
                    android:id="@+id/main003"
                    android:layout_below="@+id/main002"
                    android:layout_width="match_parent"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_height="wrap_content">
                    <include layout="@layout/home_page_banner"></include>
                </RelativeLayout>

 </RelativeLayout>

Using “include” tag you can include that “home_page_banner” layout.

<include layout="@layout/home_page_banner"></include>

Lets create “Event may you like” section

I am going to discuss how to create Card view in XML. Refer the code. you can understand what I done in here.

<RelativeLayout
                android:id="@+id/rel4"
                android:layout_width="match_parent"
                android:background="#000833"
                android:layout_below="@+id/rel5"
                android:layout_height="wrap_content">
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:background="@drawable/home_content_post"
                    android:layout_height="wrap_content">
                        <RelativeLayout
                            android:id="@+id/main008t"
                            android:layout_width="match_parent"
                            android:layout_marginTop="20dp"
                            android:layout_height="wrap_content">
                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginLeft="20dp"
                                    android:layout_marginRight="20dp"
                                    android:text="Events you may Like !"
                                    android:textSize="16dp"
                                    android:textStyle="bold" />
                                <ImageView
                                    android:layout_width="wrap_content"
                                    android:layout_alignParentRight="true"
                                    android:layout_marginRight="20dp"
                                    android:layout_height="wrap_content"
                                    android:src="@drawable/ic_go"/>
                                <ImageView
                                    android:layout_width="wrap_content"
                                    android:layout_alignParentRight="true"
                                    android:layout_marginRight="30dp"
                                    android:layout_height="wrap_content"
                                    android:src="@drawable/ic_go"/>
                        </RelativeLayout>

<!--                    Grid layout tika-->
                    <RelativeLayout
                            android:id="@+id/main004"
                            android:layout_below="@+id/main008t"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginRight="10dp"
                            android:layout_marginLeft="10dp">
                            <GridLayout
                                android:columnCount="1"
                                android:rowCount="1"
                                android:alignmentMode="alignMargins"
                                android:columnOrderPreserved="false"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content">
                                <androidx.cardview.widget.CardView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_columnWeight="1"
                                    android:layout_rowWeight="1"
                                    app:cardElevation="6dp"
                                    app:cardCornerRadius="12dp"
                                    android:layout_margin="9dp">
                                    <LinearLayout
                                        android:id="@+id/mantraLin"
                                        android:layout_width="match_parent"
                                        android:layout_height="match_parent"
                                        android:gravity="center"
                                        android:background="@drawable/rounded_border_main"
                                        android:orientation="vertical"
                                        android:padding="16dp">
                                        <ImageView
                                            android:layout_width="50dp"
                                            android:layout_height="wrap_content"
                                            android:src="@drawable/peay"/>
                                        <TextView
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            android:textAlignment="center"
                                            android:text="Mantra | Bhajans | Aarti | Songs"
                                            android:textColor="#3bc6ad"
                                            android:textSize="16dp"/>
                                        <TextView
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            android:textAlignment="center"
                                            android:text="Sync Audio"
                                            android:textSize="16dp"/>
                                    </LinearLayout>
                                </androidx.cardview.widget.CardView>

                            </GridLayout>
                        </RelativeLayout>

                    <RelativeLayout
                        android:id="@+id/main004gg"
                        android:layout_below="@+id/main004"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="10dp"
                        android:layout_marginLeft="10dp">
                            <GridLayout
                                android:columnCount="2"
                                android:rowCount="1"
                                android:alignmentMode="alignMargins"
                                android:columnOrderPreserved="false"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content">
                                <androidx.cardview.widget.CardView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_columnWeight="1"
                                    android:layout_rowWeight="1"
                                    app:cardElevation="6dp"
                                    app:cardCornerRadius="12dp"
                                    android:layout_margin="9dp">
                                    <LinearLayout
                                        android:id="@+id/li002"
                                        android:orientation="vertical"
                                        android:padding="16dp"
                                        android:gravity="center"
                                        android:background="@drawable/rounded_border_main"
                                        android:layout_width="match_parent"
                                        android:layout_height="match_parent">
                                        <ImageView
                                            android:layout_width="50dp"
                                            android:layout_height="wrap_content"
                                            android:src="@drawable/fest"/>
                                        <TextView
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            android:textAlignment="center"
                                            android:textColor="#3bc6ad"
                                            android:text="More"
                                            android:textSize="16dp"/>
                                        <TextView
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            android:textAlignment="center"
                                            android:text="Coming Soon"
                                            android:textSize="16dp"/>
                                    </LinearLayout>
                                </androidx.cardview.widget.CardView>
                                <androidx.cardview.widget.CardView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_columnWeight="1"
                                    android:layout_rowWeight="1"
                                    app:cardElevation="6dp"
                                    app:cardCornerRadius="12dp"
                                    android:layout_margin="9dp">
                                    <LinearLayout
                                        android:id="@+id/li001"
                                        android:orientation="vertical"
                                        android:padding="16dp"
                                        android:gravity="center"
                                        android:background="@drawable/rounded_border_main"
                                        android:layout_width="match_parent"
                                        android:layout_height="match_parent">
                                        <ImageView
                                            android:layout_width="50dp"
                                            android:layout_height="wrap_content"
                                            android:src="@drawable/about"/>
                                        <TextView
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            android:textAlignment="center"
                                            android:textColor="#3bc6ad"
                                            android:text="Ganesha"
                                            android:textSize="16dp"/>
                                        <TextView
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            android:textAlignment="center"
                                            android:text="About"
                                            android:textSize="16dp"/>
                                    </LinearLayout>
                                </androidx.cardview.widget.CardView>
                            </GridLayout>
                        </RelativeLayout>

                    </RelativeLayout>
            </RelativeLayout>

There are some drawable resource files. You can create it what ever you like.

Lets create the Custom Footer

In here, you see a drawable file. you can design what ever like. So lets back to code.

 <RelativeLayout
                android:id="@+id/bottomBar"
                android:layout_below="@+id/rel4"
                android:layout_width="match_parent"
                android:background="@drawable/home_bottom_bar"
                android:layout_height="100dp">
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:orientation="horizontal"
                        android:layout_height="wrap_content">
                        <LinearLayout
                            android:orientation="vertical"
                            android:layout_marginTop="20dp"
                            android:layout_marginLeft="30dp"
                            android:layout_marginRight="30dp"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content">
                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="Contact us"
                                android:textColor="#ffffff"
                                android:textSize="20dp"
                                android:textStyle="bold" />
                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:textColor="#ffffff"
                                android:text="Tel us what we need to improve"
                                android:textStyle="bold" />
                        </LinearLayout>
                        <ImageView
                            android:id="@+id/fbLogo"
                            android:layout_width="wrap_content"
                            android:layout_alignParentRight="true"
                            android:layout_marginRight="20dp"
                            android:layout_height="wrap_content"
                            android:src="@drawable/fblogo"/>

                    </LinearLayout>
            </RelativeLayout>

So that’s it. That is the end of “Android XML Layout Design” article.

Do you want to create a music player – Refer “How to create Music Player with Firebase

If you want to familiar to Android Studio – use “Let’s familiar with Mobile Application Development“.

Android Fragment – “Android Fragments 2021

Refer Android Firebase Article – https://builditmasters.com/category/android-studio-firebase-tutorial/

Download this App –https://play.google.com/store/apps/details?id=com.ozandabb.shreeganesh