DesigningLayouts

Designing layouts – 1

Well its cool that every awesome user interface design of mobile app is made using XML. In android, a good layout design is all about arranging XML tags meaningfully. The more meaningfully placed, the more beautiful the layout design will be. In our daily routine of app usage, we come across many number of app screens. Every screen is nothing but an XML file containing XML tags. Hence, here we shall learn about designing layouts meaningfully.

Every layout is nothing but a single or multiple XML files

As we see different screens, its obvious that there could be different types of layouts available in android. Android provides different types of layouts which help in arranging our views (the XML tags) meaningfully. Here are the layouts available in android:

1_layouts

When you create an xml file under layout folder of resources folder. Open the XML file and click on the design mode at the bottom. You can see the types of layouts present inside ‘Palette’ under ‘Layouts’.

7 Basic outline layouts are listed under Layouts. Here we shall learn about how some of basic layouts and how they appear. We shall go with LinearLayout and RelativeLayout as of now.

Linear layout, as the name depicts that the views arranged inside this layout will be linear to each other. Linearly arranged to each other which are either horizontal or vertical. The magic of meaningfully arranging the views inside a linear layout happens here. Lets take an example of designing a login screen layout using LinearLayout.

We need following for the login screen:

Layout to arrange views – LinearLayout

input field to enter username – EditText

input field to enter password – EditText

button to submit the details – Button

Here we start with designing using the above views. Initially we will take LinearLayout as a parent view inside which we shall arrange all the child elements.

 1_layoutpreview

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"     android:layout_width="match_parent"     android:layout_height="match_parent">

</LinearLayout>

The first and foremost criteria of LinearLayout is to set the “orientation” of it. Based on the orientation mentioned, the views inside the layout will be arranged. If it is Horizontal, then the views inside the LinearLayout will be placed automatically one after the other horizontally and same case when we choose as Vertical. As we see each line of code mentioned will make the design of the layout.

android:orientation=“vertical"

The above line makes the views placed inside the LinearLayout to be placed vertically to each other.

android:layout_width=“match_parent”

android:layout_height=“match_parent”

 

The width and height of the complete layout will be match to the screen size of the device.

In the next step, we shall place two Edittext views one after the other. lets see how they get arranged. Below is the code and the preview of layout design.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">

    <EditText android:layout_width="match_parent" android:layout_height="wrap_content" />

    <EditText android:layout_width="match_parent" android:layout_height="wrap_content" />

</LinearLayout>

 

1_edittexts

Every view of the layout has 2 mandatory attributes (layout_width, layout_height) to be mentioned.

So as you can see in the above screen, there are two input fields present one after the other vertically as the orientation of the parent layout is “vertical”. Checkout the attributes mentioned for the ‘EditText’ tags. The layout_width has match_parent where as layout_height has wrap_content. The height of the input field needs to be accordingly the height of the text entered inside it. Hence, wrap_content is an option available for it to wrap the height of the EditText.

Our username and password fields are ready, we need a button which will send the login request. We shall place the Button code below the two EditTexts.

   

<Button
         android:layout_width="match_parent"         
         android:layout_height="wrap_content" />

 

1_button

As you can see, the button is placed right below the EditTexts without specifying any other attribute to arrange it like that. It aligns accordingly as mentioned by its parent layout.

For any view to show the text, the attribute “text” is available to mention the same. But we cannot place the text directly as the parameter of the attribute “text”. Android provides us a separate XML file (strings.xml) to declare all the texts and then we can refer them in any required layout.

Strings.xml file appears as below which helps us in defining the text values. As every thing that is referred for layouts is mentioned as resources. It has <resources> as parent XML tag.

<resources>
    <string name=“str_username">Username</string>
    <string name=“str_password”>Password</string>
    <string name=“str_login”>Login</string>
</resources>

<string> is the XML tag that is used to define the text value. The name of the text value should be mentioned in the attribute ‘name’ and the text value of it lies between the starting and ending tags of <string> tag.

Here “str_username” is the ‘name’ of the text value ‘Username’

XML tag

attribute  |  parameter

value

string

name |  str_username

 Username
string name | str_password Password
string name | str_login Login

The name attribute parameter is used to refer the text value. So coming back to out layout, we need to mention the text as ‘Login’ to out button. The below parameter helps us in achieving that.

android:text=“@string/str_login”

 

The parameter of the attribute ‘text’ will show us the implementation of the resources concept. The concept is very simple as just referring to the resource present in the respective folder under the ‘resources’ folder. As str_login is present in strings file, @string is used to refer the file and then str_login to call it.

As to show the user which field refers to what, we shall show the hint in the EditText. ’hint’ is the attribute used to set the hint for the EditTexts.

android:hint=“@string/str_username”

 

Now, we have placed the required views that will make our login screen. Lets see how the complete code looks like.

The Complete Code:

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     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”/>

    <Button         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="@string/login"/>

</LinearLayout>

 

The complete preview:

1_preview`

LinearLayout with vertical orientation is easy enough to create a login screen as there requires less attributes to do so.

Download this tutorial

240 total views, 2 views today

Leave a Reply