×

Introduction to Layouts

What are Layouts in Android ?

Consider layout as a box or structure which contains UI elements to represent the User Interface for your app. There are two ways to create User Interface for android apps.

1) Write the XML version with android vocabulary. Mostly preferred.
2) Drag and Drop UI elements on the view area.

How it looks likes writing an XML for UI ?

This XML creates a TextView and as you see there are various attributes applied to the TextView. These attributes are text , layout_width, layout_height used to assign text , width and height to the TextView.

<TextView
        android:id="@+id/textViewRef"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="My First Android App!"
    />

More about layout_width & layout_height attributes

layout_width and layout_height accepts these constants to assign width or height to the UI element. To understand these constants consider a label contains text = "hello world"

1) wrap_content :- Using wrap-content attribute width or height of label will be set to its exact dimensions of specified text.Red box is the parent view and green box is the specified label with text Hello world.


2) match_parent :- Using match_parent attribute width or height of label will be set to its dimensions of parent view.Green box is the parent view and in this case this is the width and height of the label with text Hello world.


3) Manually Specify measurements :- You can also specify exact measurements like 60dp width and 40dp height. dp indicates the density-independent pixel unit measurement.

Just understand the basics of how things are working . We will create one amazing app with detailed explanation on every topic.


Where to write this XML for UI ?

As discussed in previous tutorial, Android First App we explained where to write this XML for creating an UI of app.

In project window on left side , app > res > layout > activity_main.xml

activity_main is the name of my XML file. You can create with any name.

To create new XML file you can navigate to app > res>layout. Right click on layout then New > File> enter file name with extension .xml and Ok.



Your new xml file will be created inside layout and there you can create your UI by choosing the Text mode or Design mode at left bottom side of View area.


Inside new_activity_focus.xml, write this code to create a textView for example

<?xml version="1.0" encoding="utf-8"?>

    <TextView
        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="wrap_content"
        android:layout_height="wrap_content"
        android:text="My First Android App!"
    />

These three lines installs the dependencies by android tools and resources. If you do not write this these lines to your root you will get some errors.

 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"

How to load this XML Resource file ?

Inside app > java> codzify.com.firstandroidapp > MainActivity.java ,you can specify which xml file is to be loaded for the Ui of app inside onCreate() method . You can specify the calling of layout file using R.layout.xml_file_name inside setContentView as an parameter. The benefit of keeping xml file different is you can easily debug your UI separately.

package codzify.com.firstandroidapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.new_activity_focus);
    }
}

After running the app