Types of Layouts In Anroid (Android studio)

In this Tutorial, we will understand the layouts present in android studio.

Types of Layouts

• Linear Layout
• Relative Layout
• Constraint Layout
• Frame Layout
• Table Layout
•  
• Constraint layout

These layouts have constraints where constraints gives freedom to adjust your widget according to your device size.

On other hand other layouts such as linear or relative doesn’t comes up with the customization

To understand the concept of constraints lets create a button to understand the example

To Create button in constraint layout by writing below code

<?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=".MainActivity">    <Button        android:id="@+id/b1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Hello"        android:textAlignment="center"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintHorizontal_bias="0.547"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.499" /></androidx.constraintlayout.widget.ConstraintLayout>

 

To add Constraints in layout use the below code in layout.xml

app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" 

                                                

No matter what your device screen size is,the button will auto fits and aligned in center

 

Linear Layout

These layouts are specific to to orientation. all the widgets or Childs are align in to a single direction vertically or horizontally.

These layouts are often used by android designer’s but due to its drawback now days constraints are the best layouts so far

Example of linear layout 

 

Here we are not able to move our button in center as we are using linear layout ,either we can add multiple buttons vertically or horizontally

 

Relative Layouts

All layout elements inside RelativeLayout are relative, not in line with LinearLayout

Arranges elements relative to parent or other elements

Example

Create a button next to image view and add a text view below that ,this can be done by relative layout

Example

<?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=".MainActivity">    <Button        android:id="@+id/b1"        android:layout_width="98dp"        android:layout_height="102dp"        android:layout_alignParentBottom="true"        android:layout_marginBottom="397dp"        android:text="button" />    <ImageView        android:layout_width="206dp"        android:layout_height="146dp"        android:layout_alignParentEnd="true"        android:layout_alignParentRight="true"        android:layout_alignParentBottom="true"        android:layout_marginEnd="105dp"        android:layout_marginRight="105dp"        android:layout_marginBottom="369dp"        android:background="@color/colorAccent" />    <TextView        android:layout_width="210dp"        android:layout_height="70dp"        android:layout_alignParentEnd="true"        android:layout_alignParentRight="true"        android:layout_alignParentBottom="true"        android:layout_marginEnd="107dp"        android:layout_marginRight="107dp"        android:layout_marginBottom="267dp"        android:text="This is example"        android:textSize="30sp" /></RelativeLayout>

 

In Relative layout you need to add margins and alignment to make it support to other device apart from you are making for.

Frame Layout

Frame layouts are frame specific layouts. these layouts are used when user want Childs in a specific frame all the Childs use the same frame 

<?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="wrap_content"    android:layout_height="match_parent"    tools:context=".MainActivity">    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></FrameLayout>

 

Table Layout

These layouts are used to create tables in your android app,

Example

<?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=".MainActivity">    <TableRow>        <Button android:text="table1" />        <Button android:text="table1" />        <Button android:layout_height="wrap_content" android:text="table1" />        <Button android:layout_width="144dp" android:layout_height="wrap_content" android:text="table1" />    </TableRow>    <TableRow>        <Button android:text="table1" />        <Button android:text="table1" />        <Button android:layout_height="wrap_content" android:text="table1" />        <Button android:layout_width="144dp" android:layout_height="wrap_content" android:text="table1" />    </TableRow>    <TableRow>        <Button android:text="table1" />        <Button android:text="table1" />        <Button android:layout_height="wrap_content" android:text="table1" />        <Button android:layout_width="144dp" android:layout_height="wrap_content" android:text="table1" />    </TableRow>    <TableRow>        <Button android:text="table1" />        <Button android:text="table1" />        <Button android:layout_height="wrap_content" android:text="table1" />        <Button android:layout_width="144dp" android:layout_height="wrap_content" android:text="table1" />    </TableRow></TableLayout>

 

<Table row are used to define rows and columns 

 

Thanks for read……….