Layout In Android Studio

Prerequisite
If you not understand this lecture Layout in android studio .you should also read my previous lectures.  Project creation using android studio and Open new Activity on button click After read these lecture you will also  able to create layout of your app.
Overview
Layout are elements and panels that control the arrangements size dimensions of view that we are created.one benefit to use layout is that you can organized elements inside the layout.This means that the overall layout automatically resides or auto-sizes according to the window size. This benefits of use layout, such as  you build a user interface (UI) of any application using layout.
Introduction
In this lecture well we describe how to works multiple layouts in android. First we will describe android Layout description.what is layout.After that we will describes Relative layout and Linear Layout.And also describe scenario which option is better to create  Layouts.  After Reading this lecture you will understand Relative and Linear Layout and I hope you  will create layout of your activity and application.Android Layout Description
Layout represented the visual structure of any application.Using layout you can design any activity and     application.Android provides facility to design application according to your choice using layout.if you design any app then you need to know android layouts. Layout is also called view group.All the Buttons text field, text view…etc are used inside the layout.Layouts contained inside the res folder.Android activities are used layouts to show output on the screen. All the application design using layout. Most important  layouts in android.
Linear Layout

• Relative Layout

First will discussing about  simple interface in androidwe are going to learn  how to create a simple interface in android studio. we will create a simple interface similar to this one. for more detail about  simple interface This layout contains two interface first one is a edit text second is button third task that we perform is the view of component are horizontal lines .Edit text on the left side and button on the right side and also include a hint message which will automatically disappears when user enter a message.Now you will create a new project in android studio.Every project contain two file first is java class file and second is layout XML file.Your first step is open a layout XML file and change relative layout to linear layout.this is a Relative Layout  show in below pic.Relative layout change into Linear layout show in below picAfter change into linear layout you will remove all the padding component in linear layout and set the height and width match parent . Match parent means height and width similar to the parent and also include a property in layout XML file that is (android orientation horizontal ). this property lines the view of  component…..etc edit text and button. First thing we add a edit text and set height and width wrap content after complete this you will add hint message and also include a  hint message into string XML file.So you will find out the value folder expand this value folder and click on string XML file.Add string resource in string .XML file.  Write this code into string XML file.

1 2 3 4 5 6 7 8 9 10

<?xml version="1.0" encoding="utf-8"?> <resources>     <string name="app_name">test1</string>     <string name="hello_world">Hello world!</string>     <string name="action_settings">Settings</string> <string name="hint_message">Enter a message </string>     <string name="button_text">send</string>      </resources>

In this example we are going to create a simple UI that includes only (Edit text) and (Button)with Different attributes  And Write the following code in layout .XML file:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="horizontal">     <EditText         android:layout_width="0dp"         android:layout_height="wrap_content"         android:id="@+id/message_text"         android:hint="@string/hint_message"         android:layout_weight="1"         /> <Button     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:hint="@string/button_text"               /> </LinearLayout>

Now  you open the Graphical layout editor to preview the User Interface that you created.

Linear layout in android

Linear layout is one of the most important fundamental in android that provides facilities to developer to create there UI. Linear layout  is the layout that aligns all layout in one direction horizontal and vertical. Orientation is available in linear layout.

1. Horizontal         
2. vertical

Note   Default orientation is horizontal if you use linear layout and your UI elements are not show make sure your orientation is  vertical,So you will set orientation vertical.

We are going to learn  how to create a simple  linear layout. you can used linear layout and set the view component vertical and horizontal.So we create linear layout similar to this one that are show in below pis.for more detail about click on simple linear layout.

This layout contain four view component three edit text and a button these view component are vertical line and each row contain only one component . In this lecture I well show you how to create a layout similar to this one that are show in above pic. So open android studio and create  a  new project in android studio.Every project contain two file first is java class file and second is layout XML file.First of all we will  add string resource  So,going to value folder and open String .XML file.

Add string resource in string .XML file .Write this code into string XML file.

1 2 3 4 5 6 7 8 9

<resources>     <string name="app_name">bmw</string>     <string name="hello_world">Hello world!</string>     <string name="action_settings">Settings</string>     <string name="to">TO</string>     <string name="subject">Subject</string>     <string name="message">Message</string>     <string name="send">Send</string> </resources>

After this Next step going to open a layout.XML file and change Relative layout into Linear layout .

After this step we will add three edit text and button in layout XML file .And set the height and width match parent . Match parent means height and width similar to the parent .For any view we need to specify its height and width. If not specified, it will cause error. In the below declaration we have made both width and height attribute . we can  use width and height match parents). This means, we are telling the android system that this layout’s width and height is same as that of its parent. As use this property size of activity same as compare to parent activity. and if you will used wrap_content then scenario will change and width and height is equal to text that are enter we need to include also a  property (android orientation vertical) Because view component are vertical.In this example we are going to create a simple UI that includes only (Edit text) and (Button)with Different attributes

 And Write the following code in layout .XML file for simple linear layout:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"      android:orientation="vertical"     android:paddingLeft="16dp"     android:paddingRight="16dp" >     <EditText         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:hint="@string/to"         />     <EditText         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:hint="@string/subject"         />     <EditText         android:layout_width="356dp"         android:layout_height="0dp"         android:hint="@string/message"         android:layout_weight="1"         android:gravity="top" />     <Button         android:layout_width="120dp"         android:layout_height="wrap_content"         android:hint="@string/send"         android:layout_gravity="right"         /> </LinearLayout>

Layout Weight property

In linear layout we will use property android:layout weight .Assign  weight to each children. for example if you will use two button and one text field then you will assign same weight to each element.if you will assign weight 1 of first two  elements and last one you will not assign weight .then last text field will not show only first two property will show in linear layout .that’s why you will assign equal weight to each elements.

Note  if you set all children of linear layout vertically will equal space then you will set android:height=”0dp” and width also “0dp”for each children then all the element will set equal space .if you set all children of linear layout horizontally will equal space then you will set  width “1dp”  for each  elements then all the element will set equal space.

Now  you open the Graphical layout editor to preview the User Interface that you created.

Relative Layout

Relative Layout is the basic layout available to design layouts in android.that are used to define child at related position Using Relative Layout you can set position  view to be toLeftOf, toRightOf,below or above its siblings.if you design very complex layout in android then you will use Relative layout.Because you can replace a single Relative layout instead of several linear layout.A Relative Layout on the other hand, allows for a more random arrangement of child elements.This allows you to have a more flexible design layout approach.

The following figure should give you an understanding Relative Layout

or

So  we  will describe relative layout in android.I will explain a example that are describe Relative layout And I hope you will get idea how can use  relative layout in android. if you design a application and layout is  more complex then you will use relative layout.First of  all you will create a new layout . how can create a new layout detail is provides in steps.

Step1=New Layout->Right click ->on layout folder select option ->New ->and click ->Layout resource file->then a new window will appear.

Step2=step1->Writename->

Step3=step1=step2->ChangeRootElement->Relative _Layout->Ok

So a Relative _layout will create in below pic.

After create this layout your first set is set height and width match parent of this layout and add string resource of two buttons and three edit text in string .XML file.So  we open a string resource folder in values folder add string resource in string .XML file show in below pic.

1 2 3 4 5 6 7 8 9 10 11 12

<resources>     <string name="app_name">RelativeLayout</string>     <string name="hello_world">Hello world!</string>     <string name="action_settings">Settings</string>     <string name="first_name">First Name</string>     <string name="send_message2">send2</string>     <string name="send_message">Send1</string>     <string name="message">write Message</string>     <string name="number">write a number</string>     <string name="auto">select names</string>    </resources>

Here i am going to create two buttons and set height and width match . After this  we create a two Edit text and one autocomplete textview also Include a hint message to  Edit text field. we need to assign id to to each elements.In this example we are going to create a simple UI that includes only (Edit text) and (Button)with Different attributes.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"     android:layout_height="match_parent">     <Button         android:id="@+id/bn"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="@string/send_message"          <Button         android:id="@+id/bnn"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@+id/bn"         android:text="@string/send_message2"         />     <EditText         android:id="@+id/e1"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_below="@+id/bnn"         android:hint="@string/message"/>     <EditText         android:id="@+id/e2"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_below="@+id/e1"         android:hint="@string/number"/>     <AutoCompleteTextView         android:id="@+id/country"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_below="@+id/e2"         android:hint="@string/auto"         /> </RelativeLayout>

Now  you open the Graphical layout editor to preview the User Interface that you created.

Compare between Linear and relative layout

Linear layout is one of the most important fundamental in android that provides facilities to developer to create there UI. Linear layout  is the layout that aligns all layout in one direction horizontal and vertical. Orientation is available in linear layout. vertical and horizontal. It is used for situation  when children are rendered from left to right and top to bottom.

Relative Layout is the basic layout available to design layouts in android.that are used to define child at related position Using Relative Layout you can set position of view to be toLeftOf,toRightOf, below or above its siblings .A Relative Layout on the other hand, allows for a more random arrangement of child elements.This allows you to have a more flexible design layout approach.

Thank you  for reading this lecture Hope you got the idea.