Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 Layout in Android?



It is used to display screen structure( layout) in Android Application, Layout can be Linear, Relative, Grid, Table, Absolute, Frame, and Constraint Layout in Android.



We can create Layout initially in the android application because Layout provides Parent and Child Container in the Android application.


The default orientation of the Linear Layout is Horizontal.


1) Linear Layout:-

It is used to display elements using Linear sequence and its orientation can be verticle and horizontal.

Linear Layout is the simplest layout in android applications.

We can easily place a Linear Layout as a Parent Layout and Child Layout.


1)

<LinearLayout

android:orientation="verticle"

>




</LinearLayout>



2)   Linear Layout using Nested Sequence.


<LinearLayout

android:orientation="verticle"

>

<LinearLayout

android:orientation="verticle"

>


</LinearLayout>


<LinearLayout

android:orientation="verticle"

>


</LinearLayout>

</LinearLayout>



2) Relative Layout:-


This is the most flexible layout in the android application, using this layout we can place android widget using any position using below, above, left, and right properties.

We can co-relate elements based on Relative Layout based on dimension.

We can use another layout or relative layout as a child layout in an application.


Code for Relative Layout:-


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity12"
android:paddingTop="40dp"
>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/txtname1"
android:layout_above="@id/txtemail"

android:hint="Enter dsafsafdsf"></EditText>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/txtemail"
android:layout_marginTop="50dp"
android:hint="Enter Email">

</EditText>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/txtname"
android:layout_below="@id/txtemail"

android:hint="Enter name"></EditText>


<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/txtmobile"
android:layout_below="@id/txtname"

android:hint="Enter Mobileno">

</EditText>

</RelativeLayout>




3)   Table Layout:-


This Layout is used to display records using multiple Table Rows. we can arrange the screen of android using a table view pattern.It provides only TableRow to arrange data row-wise.


Syntax of TableLayout:-


<TableLayout>

<TableRow>


</TableRow>


<TableRow>


</TableRow>


<TableRow>


</TableRow>


</TableLayout>


Example of <TableLayout>

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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="match_parent"
android:layout_height="match_parent"
tools:context=".TableExample">

<TableRow>
<TextView
android:text="WELCOME IN SCS"
android:id="@+id/txtdisplaydata"
>

</TextView>


</TableRow>
<TableRow>
<ImageView
android:src="@drawable/sss"
></ImageView>


</TableRow>
<TableRow>
<ImageView
android:src="@drawable/sss"
></ImageView>


</TableRow>

</TableLayout>


4)  GridLayout:-

Using this layout we can arrange data using rows and columns using layout_row and layout_column property.

This layout always will be used as a Child Layout in Android applications.



<GridLayout>




</GridLayout>



Example of GridLayout:-


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"
android:layout_height="match_parent"
tools:context=".GridLayoutExample">

<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="ONE"
android:id="@+id/bgl"
android:layout_width="wrap_content"

android:layout_row="1"
android:layout_column="1"
></Button>

<Button
android:text="TWO"
android:id="@+id/bg2"
android:layout_row="1"
android:layout_column="2"
></Button>

<Button
android:text="THREE"
android:id="@+id/bg3"
android:layout_row="2"
android:layout_column="1"
></Button>

<Button
android:text="FOUR"
android:id="@+id/bg4"
android:layout_row="2"
android:layout_column="2"
></Button>
</GridLayout>
</RelativeLayout>


5) Absolute Layout:-

This layout will work based on a coordinate system using x co-ordinate and y co-ordinate.

This layout basically used in android graphics applications.

<AbsolouteLayout>

</AbsolouteLayout>


Example of Absolute Layout in Android Applications:-


<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout 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="match_parent"
android:layout_height="match_parent"
tools:context=".AbsolouteLayoutExample">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btnabs"
android:layout_x="50dp"
android:layout_y="100dp"
android:text="ONE"
></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btnabs1"
android:layout_x="50dp"
android:layout_y="200dp"
android:text="ONE"
></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btnabs2"
android:layout_x="50dp"
android:layout_y="300dp"
android:text="ONE"
></Button>
</AbsoluteLayout>




6)  FrameLayout:-


It is also called Full-screen Layout in the android application, it is used to display single content or container content for ImageView, VideoView in the android application.

<FrameLayout>

</FrameLayout>


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="match_parent"
android:layout_height="match_parent"
tools:context=".FrameLayoutExample">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bg"
>

</ImageView>

</FrameLayout>



 7) Constraint Layout:-

This is called modern layout in android application, it provides auto-layout features to make the responsive screen.

It is the upgraded form of Relative Layout of android, by default activity contains constraint layout.

This layout can be easily managed by a drag and drop approach.





Complete Code of Constraint Layout:-


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
android:layout_height="match_parent"
tools:context=".ConstraintLayoutExample">

<Button
android:id="@+id/button"
android:layout_width="184dp"
android:layout_height="61dp"
android:layout_marginTop="116dp"
android:text="Button",
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/button3"
app:layout_constraintTop_toTopOf="parent" />

android:layout_height="61dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button"
app:layout_constraintVertical_bias="0.109" />

</androidx.constraintlayout.widget.ConstraintLayout>






























Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post