Hello Android Lovers, In this “XML Layout – UI design for android” I am going to discuss how to design attractive XML Layout UI design in android like below image. This App template design as an UI android free app template for UI designs for android.
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 – Android UI
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 – UI android design
In my image, there is a custom Top Header. Lets design that. here is the code in UI android design
<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 – XML Layout – UI design for android
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 in design android UI
<?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.
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
If you are a newbie to Android. Follow and refer articles. Click below link to get started.
- Mobile Application Design and Development
- Data Handling in Mobile Application Development
- How to Create Welcome Screen in Android Studio
- How to create bottom Navigation Bar in Android
- Android OTP verification using firebase
- Adding Share Button – Android Studio
- How to download files Firebase to Android device
- How to create Music Player with Firebase
Other articles from different categories.
- Android Studio Articles – https://builditmasters.com/category/android-studio/
- Android Studio Firebase Tutorial – https://builditmasters.com/category/android-studio-firebase-tutorial/
- C Programming – https://builditmasters.com/category/programming/
- Flutter – https://builditmasters.com/category/flutter/
- GitHub Tutorials – https://builditmasters.com/category/github/
- Java Programming – https://builditmasters.com/category/java-programming/
- MERN / MEVN Stacks – https://builditmasters.com/category/mern_mevn_stacks/
- Tech News – https://builditmasters.com/category/tech-news/
- Theory Lessons – https://builditmasters.com/category/theory-lessons/
- Adobe Tutorials – https://builditmasters.com/category/adobe-tutorials/
- Best Website for Programming – https://builditmasters.com/category/best-website-for-programming/
- Different Programming Styles – https://builditmasters.com/category/different-programming-styles/
- Earn Money – https://builditmasters.com/category/earn-money/
- Social Word – https://builditmasters.com/category/social-world/
