This article will give you a fair understanding of Constraint, Linear, Relative Layout

By Aishwarya S — “Tech Fanatic”

Android app development has become increasingly popular over the years, with millions of users downloading and using apps on their devices every day. One important aspect of creating a successful app is designing an intuitive and visually appealing user interface (UI). In this blog, we will explore three different layout managers in Android: Constraint Layout, Linear Layout, and Relative Layout. We will discuss the advantages and disadvantages of each layout, and provide a step-by-step guide on how to use them to build a simple UI for an app. By the end of this blog, you will have a better understanding of these layout managers and how they can be used to create stunning and user-friendly UI designs for your Android app development projects. Let’s talk about Constraint, Linear, and Relative Layouts in Android, and how they can be used to build a simple UI for an app. First, let’s define what these layouts are:

Constraint Layout:

A flexible layout manager that allows you to create complex layouts with a flat view hierarchy. It’s highly customizable and efficient, and it’s often used for complex UI designs.

Linear Layout:

A simple layout manager that arranges views in a single row or column. It’s easy to use and great for simple UI designs.

Relative Layout:

A layout manager that arranges views relative to each other or relative to the parent layout. It’s highly customizable and great for complex UI designs.

For this example, we’ll build a simple UI that displays a text view, an image view, and a button. Let’s start with Constraint Layout. Here’s how you can build the UI using Constraint Layout:

1. Open Android Studio and create a new project.
2. In the layout file, add a Constraint Layout as the root element.
3. Add a text view, an image view, and a button to the layout.
4. Set constraints for each view so that they are positioned where you want them to be. For example, you can constrain the text view to the top of the layout, the image view to the bottom of the text view, and the button to the bottom of the layout.

Customise the UI as desired, using the many properties available in Constraint Layout. First, let’s start with the Constraint Layout 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"
android:layout_width="match_parent"
android:layout_height="match_parent">


<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, World!"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>


<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher_foreground"
app:layout_constraintTop_toBottomOf="@id/textView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>


<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

Now let’s move on to Linear Layout. Here’s how you can build the same UI using Linear Layout:

1. Open Android Studio and create a new project.
2. In the layout file, add a Linear Layout as the root element.
3. Add a text view, an image view, and a button to the layout, in the order you want them to appear.
4. Customise the UI as desired, using the many properties available in Linear Layout.

Here is the code for it:

<?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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, World!"/>

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher_foreground"/>

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"/>

</LinearLayout>

Finally, let’s look at how to build the same UI using Relative Layout:

1. Open Android Studio and create a new project.
2. In the layout file, add a Relative Layout as the root element.
3. Add a text view, an image view, and a button to the layout.
4. Set rules for each view so that they are positioned where you want them to be. For example, you can align the text view to the top of the layout, align the image view to the bottom of the text view, and align the button to the bottom of the layout.

Customise the UI as desired, using the many properties available in Relative Layout.

<?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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, World!"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher_foreground"
android:layout_below="@id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"/>

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="32dp"/>
</RelativeLayout>

As you can see, all three layouts can be used to build the same UI, but they offer different advantages and disadvantages depending on the complexity of the UI design. Constraint Layout is best for complex UI designs, while Linear Layout is best for simple designs, and Relative Layout is great for designs that require relative positioning. So, there you have it! Constraint, Linear, and Relative Layouts in Android, all with the same simple UI example. Hopefully, this has given you a better understanding of these layout managers and how they can be used in your own app development projects. In conclusion, understanding the different layout managers available in Android is crucial for any app developer, as it allows for more efficient and effective creation of UI designs. Constraint Layout is best suited for complex UI designs, while Linear Layout is perfect for simple designs, and Relative Layout is great for designs that require relative positioning. By utilising the strengths of each layout manager, developers can create beautiful and functional UIs that enhance the user experience of their apps. Whether you’re a beginner or an experienced developer, knowing how to use these layouts will be essential in creating high-quality Android applications.

---

References :

. https://data-flair.training/blogs/android-layout-and-views/ [embed]https://developer.android.com/develop/ui/views/layout/declaring-layout[/embed][embed]https://developer.android.com/develop/ui/views/layout/declaring-layout[/embed][embed]https://developer.android.com/develop/ui/views/layout/declaring-layout[/embed]

---

Meet The Team!!

Author Aishwarya S Editor Seema Jain

---

We at CaratLane are solving some of the most intriguing challenges to make our mark in the relatively uncharted omnichannel jewellery industry. If you are interested in tackling such obstacles, feel free to drop your updated resume/CV to careers@caratlane.com!