Android UI Layout with Android Studio | AndroidMonks

Android UI Layout with Android Studio

You can implement a UI L ayout file in Android using Android Studio. Layout Files are nothing but XML files which holds various View/Viewgroups in the form of XML Tags-Attributes. This forms the backbone of an Android Application.

Every single Android Application running should definitely have a Layout file (Maybe not everything, but 99.9%). The layout file helps give the UI for the Android Application.

Creating a Layout file in Android is very simple when you use the Android Studio IDE. Check out the Step by Step procedure below to understand how an Android Layout file is created.

Pre-Requisite

Make sure you have the latest version of Android Studio IDE installed. This provides the environment for you to create your Application. I personally prefer using Android studio over other IDE’s. Find the article on How to Install Android Studio IDE for creating Android Applications to learn to set up your Engine and get going.

Step 1

We will have to basically understand what the Layout here means. The layout like mentioned above is a set of XML tags, nested with one another and used to implement a layer over layer of UI widgets/elements. The UI Widget could be a Text or an Image etc.

Once you have a sample project created, we jump on to create the Layout. Make sure you have the Android Studio IDE setup and the following Steps are created using that IDE only!

Locate the res folder in the Project structure Tab like below.

res folder in Android Studio IDE
res folder in Android Studio IDE

Step 2

On expanding this folder, you are presented with 4 different subdirectories. Our Aim at this point is to create a UI layout.

You press the layout subdirectory and will be creating the layout XML file inside this.

layout folder inside res
layout folder inside the res folder

Step 3

On right clicking the layout folder inside res. We will create the layout by navigating to the New section and navigating to the XML section in picture 2 below.

Open the New Section
Open the New Section

You find a mini section opening on navigating to the XML section. Click on it to open the Layout XML file.

Find the XML file in the res>layout>new
Find the XML file in the res>layout>new

Step 4

Once you click on the Layout XML file. You open up a dialog box, wherein you will be entering some details required about the layout file.

The Layout Filename is the name to identify your XML file inside the layout section(You can also think about this as the name of the UI showing up in your application).

The Root Tag represents the different type of Layouts that are available. You can read more about the Layouts in my post about Views and ViewLayout in Android. By default, a LinearLayout file is created which you can use for the UI Layout XML that is generated.

UI Layout XML Dialog
UI Layout XML Dialog

Name the Layout file of your choice and click finish.

Name your layout file
Name your layout file

Step 5

Upon processing, the UI Layout is created and we are done with this tutorial as well.

Empty Layout file is created as required
An empty Layout file is created as required

What Next?

Good Job on creating your First Layout file. We can move forward from here and do a lot of things. For starters, you can read about the post of View & ViewLayout and know how the Layout file is created and what different View and Layouts are present.

If you already know a little bit about them, jump over here and learn what an Activity is and how to create an Application in 3 Hours!!

“Learn and Be Curious”

Leave a Comment

Your email address will not be published. Required fields are marked *