DesigningLayouts

Designing layouts – 2

Well as in the previous tutorial, LinearLayout helps in designing our Login screen. Here we shall use RelativeLayout for the same. Unlike LinearLayout, RelativeLayout is not bound by the orientation, rather it manages views under it relatively. It means, the views are arranged relative to each other in the direction they are placed. The attribute orientation does not work with RelativeLayout.

We shall use the same set of Views to define our layout:

Parent layout – RelativeLayout

input field to enter username – EditText

input field to enter password – EditText

button to submit the details – Button

Firstly, the parent layout is taken as RelativeLayout inside the XML file. Hence it acts as parent tag as shown below:

<?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="match_parent">
</RelativeLayout>

The two input fields (EditTexts) placed inside the RelativeLayout will appear as shown below:

<?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=“match_parent">

      <EditText android:layout_width="match_parent" android:layout_height=“wrap_content" android:hint=“@string/str_username”/>
      
      <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint=“@string/str_password”/>

</RelativeLayout>

2_EditTexts

Here you can observe that, after placing two EditTexts inside RelativeLayout, they get overlapped on each other. In case of LinearLayout, there will be orientation which helps in placing the fields vertically or horizontally.

Incase of RelativeLayout, once the first EditText is placed without any attributes inside it, it will be arranged towards the top left of the screen. So we need to place the next view below the first EditText. In order to place it like that, we need to refer the above View. Hence, it should be named to refer it. In android we have ‘id‘ attribute, which helps in naming the View to refer it for further need.

   

<EditText
         android:id="@+id/username"
         android:layout_width="match_parent"
         android:layout_height=“wrap_content"
         android:hint=“@string/str_username”/>

Each View under RelativeLayout will have enough attributes granted to arrange itself with relative to the other View. So in order to arrange the next EditText below the first one, we use the below code:

        

android:layout_below="@+id/username"
android:layout_below="@+id/username"

The attribute ‘layout_below’ helps in placing the second EditText right below the first one.

Next, the Button View should be placed right below the password EditText. So an id should be declared to the second EditText and the ‘layout_below’ attribute should be used for the Button View.

Hence, the complete code looks like this:

<?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="match_parent">

           <EditText android:id="@+id/username"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:hint=“@string/str_username”/>

           <EditText android:id="@+id/password"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:hint=“@string/str_password”
                     android:layout_below=“@id/username”/>

            <Button android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:text=“@string/login"
                     android:layout_below=“@id/password”/>
</RelativeLayout>

Complete preview:

2_relative

The Login screen layout designed with LinearLayout and RelativeLayout looks similar. But the attributes in both cases are different and so are approaches. Each Layout has its own ease of designing the screen we require. Its up to us to follow the best way to make it look better.

Download this tutorial

291 total views, 1 views today

Leave a Reply