GODJN Solutions Pvt. Ltd.

Proliferate Gratification!

Detailed Lecture: Understanding ConstraintLayout in Android

1. Introduction to ConstraintLayout

1.1. Overview
- ConstraintLayout is a powerful, flexible layout in Android that allows you to create complex
and responsive UI layouts with a flat view hierarchy.
- Introduced in Android Studio 2.2, it aims to simplify the design process and reduce nested
view hierarchies.

1.2. Advantages
- Flexibility: Can create a variety of layouts, from simple to complex.
- Performance: Reduces the number of nested views, which can improve performance.
- Ease of Use: Integrated with the Layout Editor in Android Studio, providing a visual design
interface.

---

2. Basic Concepts of ConstraintLayout

2.1. Constraints
- Constraints define how views are positioned relative to other views or the parent layout.
- Each view must have at least two constraints (usually one horizontal and one vertical).

2.2. Anchors
- Constraint anchors are used to define constraints on a view.
- Anchors can be left, right, top, bottom, baseline, center, etc.

2.3. Attributes
WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]
Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

- `app:layout_constraintLeft_toLeftOf`
- `app:layout_constraintRight_toRightOf`
- `app:layout_constraintTop_toTopOf`
- `app:layout_constraintBottom_toBottomOf`

2.4. Example
<?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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OM"
android:textColor="#FF0000"
android:textSize="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]

Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

3. Creating Complex Layouts with ConstraintLayout

3.1. Chain
- Chains are a way to position multiple views in a linear manner, either vertically or horizontally.
- Types of chains: Spread, Spread Inside, and Packed.

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

<Button android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintHorizontal_chainStyle="spread"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button2"
android:text="Button 2"
app:layout_constraintStart_toEndOf="@+id/button1"
app:layout_constraintEnd_toStartOf="@+id/button3"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button3"
android:text="Button 3"
app:layout_constraintStart_toEndOf="@+id/button2"
app:layout_constraintEnd_toEndOf="parent"
/>

</androidx.constraintlayout.widget.ConstraintLayout>

WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]

Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

3.2. Guideline
- Guidelines help align views with a fixed or percentage-based position.

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

<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.4" />
<TextView
WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]
Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Below Guideine"
app:layout_constraintTop_toBottomOf="@+id/guideline"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Above Guideine"
app:layout_constraintBottom_toTopOf="@+id/guideline"
app:layout_constraintLeft_toLeftOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

3.3. Barrier
- Barriers are dynamic guidelines that adjust their position based on the size and position of
views.

WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]

Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

<?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/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text View 1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView2"
android:text="Text View 2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView1" />

<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier"
app:barrierDirection="end"
app:constraint_referenced_ids="textView1, textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
android:text="Button"
app:layout_constraintTop_toBottomOf="@id/textView1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="@id/barrier"/>

</androidx.constraintlayout.widget.ConstraintLayout>

WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]

Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

4. Hands-on Exercises

4.1. Exercise 1: Login Screen Layout

- Create a login screen with `EditText` for username and password, and a `Button` for login.
- Position the `EditText` fields using constraints to the top and center of the screen.
- Align the `Button` below the `EditText` fields.

<?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"
WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]
Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

android:layout_width="match_parent"
android:layout_height="match_parent">

<EditText
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="text"
android:text="Username"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<EditText
android:id="@+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:ems="10"
android:inputType="text"
android:text="Password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/username" />

<Button
android:id="@+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/password" />

</androidx.constraintlayout.widget.ConstraintLayout>

WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]

Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

4.2. Exercise 2: Profile Page

<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"
android:id="@+id/main"
>

<!-- Toolbar -->

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]
Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

<ImageView
android:id="@+id/logo"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/logo1"
android:contentDescription="logo"
android:maxWidth="50dp"
android:minHeight="50dp"/>

<!-- Add action buttons here if needed -->

</androidx.appcompat.widget.Toolbar>

<!-- Stories Section -->

<HorizontalScrollView
android:id="@+id/storiesSection"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:padding="8dp"
app:layout_constraintTop_toBottomOf="@+id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">

<!-- Sample story item -->

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="4dp">

<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/lion"
android:background="@drawable/way"
android:padding="2dp"
android:scaleType="centerCrop"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="User"
android:textSize="12sp"/>

</LinearLayout>

<!-- Repeat for other stories -->

</LinearLayout>
WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]
Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

</HorizontalScrollView>

<!-- Feed Post -->

<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@+id/storiesSection"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">

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

<!-- Sample Post -->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="8dp">

<!-- User Info -->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp">

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/om1"
android:scaleType="centerCrop"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
android:text="username"
android:textStyle="bold"/>

</LinearLayout>

<!-- Post Image -->

<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="@drawable/way"
android:scaleType="centerCrop"/>

<!-- Action Buttons -->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp">
WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]
Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/logo1"
android:layout_marginEnd="16dp"/>

<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/lion"
android:layout_marginEnd="16dp"/>

<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/way"/>

</LinearLayout>

<!-- Post Description -->

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="This is a sample post description."
android:textSize="14sp"/>

</LinearLayout>

<!-- Repeat for other posts -->

</LinearLayout>
</ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]

Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

Summary

By the end of Day 5, students should have a solid understanding of ConstraintLayout and its
advanced features. They should be able to create complex layouts efficiently using constraints,
chains, guidelines, and barriers, enhancing the UI and performance of their Android
applications.

---

Homework

1. Create a Custom Layout: Design a layout for a profile screen using ConstraintLayout.
2. Experiment: Modify the constraints, chains, and guidelines to see how they affect the layout.
WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]
Gera’s Imperium Alpha, Kharadi, Pune [email protected]
 GODJN Solutions Pvt. Ltd.
Proliferate Gratification!

3. Read: Explore the official Android documentation on

[ConstraintLayout](https://developer.android.com/training/constraint-layout).

WhatsApp: +91 7208106107 Gandharva, Shree Nagar, Thane [email protected]

Gera’s Imperium Alpha, Kharadi, Pune [email protected]