Android ( JAVA , XML , API)

LinearLayout vs. ConstraintLayout vs. RelativeLayout which is better to use in android designing?

male avatar

taher

Published On : 2022-06-22
blog header

LinearLayout vs. ConstraintLayout vs. RelativeLayout which is better to use in android designing?

1) LinearLayout
1.1) what is linearlayout in android?

LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute.

All children of a LinearLayout are stacked one after the other, so a vertical or horizontal list will only have one child per row / column , no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding).

what is LinearLayout in android explain in detail with example?

In android, LinearLayout is a ViewGroup that aligns all children of the view either vertically or horizontally, according to the requirement. It arranges the children in a single row or column.

In LinearLayout, we can specify the orientation of the layout either by using setOrientation() method or by using android:orientation attribute.

By default, the orientation is horizontal, i.e., the children are arranged in a row from left to right.


1.2) how to use linearlayout in android designing?

Following is the example of LinearLayout ViewGroup in android.

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to Tutorial Point"
android:layout_gravity="center_horizontal"
android:textColor="#ff0000"
android:textStyle="bold"
android:textSize="20sp"
android:layout_marginTop="20dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android LinearLayout"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp" />
</LinearLayout>

If you observe above code snippet, we are using LinearLayout to align the TextView and Button in vertical direction.

 


1.3) how to use different layouts inside linearlayout?

The following example shows how to create a vertical layout to contain three text fields. The first TextView uses the default layout_weight of zero, so no extra space is allocated to it. The second TextView uses a layout_weight of 1, which means that it receives any extra space that is left over after the first TextView is allocated its space. The third TextView uses a layout_weight of 2, which means that it receives twice as much of the extra space than the second TextView.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:textColor="@color/black"
android:textSize="20dp"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:layout_weight="1"
android:textColor="@color/black"
android:textSize="20dp"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:layout_weight="2"
android:textColor="@color/black"
android:textSize="20dp"/>

</LinearLayout>

 

 

2) ConstraintLayout
2.1)what is constraintlayout in android?
ConstraintLayout is a Layout class introduced in Android P. This is a container that allows you to define a single layout that contains multiple views.

constraintlayout is a layout manager which is different from linearlayout or relativelayout.
it is a view group which allows you to position and size widgets in a flexible way.
it has benefits of flat view hierarchy.
it is fast compared to relative layout and it is flexible compared to linearlayout.
it is easy to use.it has different constraints that can be applied to the views.
it has five new attributes which are app:layout_constraintTop_toTopOf,
app:layout_constraintTop_toBottomOf,
app:layout_constraintBottom_toTopOf,
app:layout_constraintBottom_toBottomOf and
app:layout_constraintVertical_bias.
these attributes are used to make widgets more flexible.

2.2)how to use constraintlayout in android designing?
ConstraintLayout is a new type of layout for Android, which allows us to create large and complex layouts with a flat view hierarchy, and also allows us to position and size widgets in a very flexible way. The ConstraintLayout widget is included in the support library and is provided in the same package, so we don't need to import anything extra.
For example, the following code snippet shows the XML layout file for a simple layout that includes two buttons for amount and currency, and a text view for displaying the conversion result:
<?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">

 

<Button
android:id="@+id/buttonAmount"
android:layout_width="wrap_content"

android:layout_height="wrap_content"
android:layout_marginTop="316dp"
android:layout_marginBottom="367dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/buttonCurrency"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:layout_marginStart="4dp"
android:layout_marginBottom="40dp"
android:text="TextView"
android:textColor="@color/black"
android:textSize="20dp"
app:layout_constraintBottom_toTopOf="@+id/buttonAmount"
app:layout_constraintStart_toStartOf="@+id/buttonCurrency" />

<Button
android:id="@+id/buttonCurrency"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="36dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

2.3)how to use different layouts inside constraintlayout?

ConstraintLayout is a new type of layout for Android, which allows us to create large and complex layouts with a flat view hierarchy, and also allows us to position and size widgets in a very flexible way. The ConstraintLayout widget is included in the support library and is provided in the same package, so we don't need to import anything extra.
For example, the following code snippet shows the XML layout file for a simple layout that includes two buttons for amount and currency, and a text view for displaying the conversion result:
<?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">

<Button
android:id="@+id/buttonAmount"
android:layout_width="wrap_content"

android:layout_height="wrap_content"
android:layout_marginTop="316dp"
android:layout_marginBottom="367dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/buttonCurrency"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:layout_marginStart="4dp"
android:layout_marginBottom="40dp"
android:text="TextView"
android:textColor="@color/black"
android:textSize="20dp"
app:layout_constraintBottom_toTopOf="@+id/buttonAmount"
app:layout_constraintStart_toStartOf="@+id/buttonCurrency" />

<Button
android:id="@+id/buttonCurrency"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="36dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

3) RelativeLayout

3.1) what is relativelayout in android?
RelativeLayout is a view group that displays child views in relative positions.
The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).


RelativeLayout is a view group that displays child views in relative positions.
The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left of center).


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

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Hello World" />

</RelativeLayout>

 

 

3.2) how to use different layouts inside RelativeLayout?
Yes, the RelativeLayout can be used in conjunction with other layouts to build even more complex layouts.

In this example we have a RelativeLayout that contains a LinearLayout that holds a TextView that is centered both horizontally and vertically.

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

<LinearLayout
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Hello World" />
</LinearLayout>

</RelativeLayout>

 

 

4) Which one is better?
what is better between linearlayout, constraintlayout and relativelayout?
- Linear Layout: The linear layout is the most basic of Android layouts. It’s just a way to arrange your widgets on the screen.
- Relative Layout: The relative layout is the most flexible layout option in Android. It allows you to position your widgets in relation to one another and/or the parent layout.
- Constraint Layout: The constraint layout is the newest and most powerful of the Android layouts. It’s another flexible layout, but it offers much more power and flexibility than the relative layout.
which layout is fast?
Constraint Layout

which layout is slow?
Relative Layout

which layout is easy to use?
Linear Layout

As I developer engineer what i suggest is using Linear Layout is efficient and fast developing . rather than using constraint and RelativeLayout




Leave a comment

Comments

No Comments Yet

About Us

We are Saify technologies a software development company located in india . Who develops custom Web , Mobile applications. We are specialized in Artificial intelligence technology. We have completed many projects on ecommerce with many different technology stacks which includes JAVA, Flutter , PHP, Python , C#,Swift and many more