How to define a GUI layout using XML files in Android?

Introduction

GUI (Graphical User Interface) of any android application lets users interact with the various functionalities of android applications. The GUI is the main part of the application which is visible to the user. GUI of any android applications can be designed in several different ways such as using XML, Dart, Kotlin and many more. In this article we will take a look at How to define a GUI layout of an android application using XMl files.

Implementation

We will be creating a simple application in which we will be creating a text view for displaying the heading of our application. Then we will be creating an image view and one more text view for displaying the UI for our application. Now let’s move towards android studio for creating a new project.

Step 1 : Creating a new project in Android Studio

Navigate to Android studio as shown in below screen. In the below screen click on New Project to create a new Android Studio Project.

After clicking on New Project you will get to see the below screen.

Inside this screen we have to simply select Empty Activity and click on Next. After clicking on next you will get to see the screen below.

Inside this screen we have to simply specify the project name. Then the package name will be generated automatically.

Note − Make sure to select the Language as Java.

After specifying all the details click on Finish to create a new Android studio project.

Once our project has been created we will get to see 2 files which are open i.e activity_main.xml and MainActivity.java file.

Step 2 : Working with activity_main.xml

Navigate to activity_main.xml. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>activity_main.xml to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

   <!-- on below line creating a text view for displaying heading of the application -->
   <TextView
       android:id="@+id/idTVHeading"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_above="@id/idIVImage"
       android:layout_margin="20dp"
       android:padding="4dp"
       android:text="GUI Layout using XML in Android"
       android:textAlignment="center"
       android:textColor="@color/black"
       android:textSize="20sp"
       android:textStyle="bold" />

   <!-- on below line creating an image view for defining the GUI of the application -->
   <ImageView
       android:id="@+id/idIVImage"
       android:layout_width="200dp"
       android:layout_height="200dp"
       android:layout_centerInParent="true"
       android:layout_margin="20dp"
       android:src="@drawable/ic_android" />

   <!-- on below line creating a tet view for defining the GUI of the application -->
   <TextView
       android:id="@+id/idTVMessage"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_below="@id/idIVImage"
       android:layout_margin="20dp"
       android:gravity="center"
       android:text="Good Morning."
       android:textAlignment="center"
       android:textAllCaps="false"
       android:textColor="@color/black"
       android:textDirection="ltr"
       android:textSize="20sp"
       android:textStyle="normal" />
</RelativeLayout>

Explanation − In the above code we are creating a root layout as a Relative Layout. Inside this layout we are creating a text view which is used to display the heading of our application. After that we are creating an image view in which we are displaying the image of android. Lastly we are creating one more text view in which we are displaying the text view. Lastly we are adding a closing tag for the Relative Layout.

After adding the above code now we have to simply click on the green icon in the top bar to run our application on a mobile device.

Note − Make sure you are connected to your real device or emulator.

Output

Conclusion

In the above article we have taken a look on How to define the GUI layout of an Android application using XML files in Android.