An Introduction to Android Layouts

Before we dive any further into Android, I want to briefly go over Android Layouts as layout of your app is equally if not more important than the actual working of your app.

What’s a Layout?

Layout is what defines the look of your app. You can use the drag and drop GUI objects and properties section of Android Studio to build your layouts to an extent but although convenient you will soon find out that you will need to tweak the XML code of your layout quite often to actually make your app look the way you want it to look.

Where to find the layout file of your app?

If you remember from previous post where we build the “Hello World” app, Android actually creates a default layout file for us (activity_main.xml) when we create a new project. You can find it inside the layout folder of your app structure as shown below. Remember you can name this file anything you want when creating a new project.

 

The file can be edited/modified either by editing the code or by using the Android Studio’s layout editor. You can switch between the modes using the buttons at the bottom of IDE as shown below.

Design Mode takes you to the drag and drop editor while Text mode is where you can see and edit the actual XML code. By default Android creates a relative layout for us, more on that later in the post.

Default code for layout

By default Android defines a simple relative layout for us. Below is the code that IDE generates when creating a new project.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.andtuts.helloworld.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

As you can see that’s a lot of code for just a simple textbox that says “Hello World”. Let’s take a look at some of the key things we need to know.

As you can see the code beginning with <RelativeLayout tells android that you are defining a relative layout. You will define other layouts in a similar way.

Another key thing to note is the width and height properties that are required. By default they are set to “match_parent”.

match_parent

Means exactly what it says that the layout should be as big as the parent which, in the code above, is the screen or the size of your android device. So, it means make my layout as big as the visible screen of the android device which can vary depending on the device. You can also set it to wrap_content which will make it as big as the views within the layout or you can also define its size in dp units. we will cover dp units in later posts.

Now that you have a rough understanding of layouts, let’s take a look at couple of main layouts in android including Relative and Linear. Some of the layouts supported by Android can be seen in the screenshot below.

Relative Layout

Relative layout simply means that layout views are positioned relative to the parent or sibling views.

What’s a view?

A view is simply a rectangular area on the screen or the layout of your app which defines some element or event on screen. A textview is a simple example of view. You can read more about it here.

If you define a relative layout for your app then you can position the views left or right of views or below your parent or sibling views. I will expand more on this in future posts.

What’s a parent?

A parent view is essentially the view that contains the view. e.g if you have only have a single textview in your layout as is the case in the code above then your parent is the screen.

One advantage of positioning a view relative to parent is that your view will always appear consistently in the same place regardless of screen size or orientation of screen on which the app is viewed.

You can also position the view relative to other views instead of the parent but you need to provide an id to the view that will act as the anchor.

You can read more about relative layouts here .

 

Linear Layout

In a linear layout all views or children of parent  are displayed next to each other either horizontally or vertically.

You can change relative layout to linear layout easily just by going to Text mode and changing relative layout to linear and usually android studio will automatically close the tag and make the required changes.

You can read more about linear layout here.

There’s of course a lot more to layouts than just this brief introduction. I will go over each layout in detail in the future but you should have a basic understanding of layouts by now. I will also continue to update this post with new things as I get to know them.

Let me know your comments or concerns in comments below. If anything doesn’t work or has changed in recent versions, let me know that too.