Categories
Android

Create a profile layout using ConstraintLayout

For apps that integrate personal information, it's important to let the user view and edit their profile. In this tutorial, we'll create a profile screen for a given user using ConstraintLayout, Kotlin and Android Studio. Ready? Let's begin!

Create a new Android Studio project, specifying Basic Activity as a project type.

Android Studio's setup wizard.

Next, confirm that we're using Kotlin.

Use Kotlin.

After pressing Finish, you should see the standard Android Studio workspace: files in the left, preview on the right, and code in the center. Open content_main.xml, which opens by default, and let's examine the code. We have a ConstraintLayout tag and a TextView tag.

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Let's replace the TextView with an ImageView. See the Preview on the right side of the screen. But also notice the red underline under ImageView. This indicates an error, something we need to fix.

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#999" />

</androidx.constraintlayout.widget.ConstraintLayout>
See the error in the code under <ImageView.

To center the ImageView we need to set constraints on the left and right, but also on the top.

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#999"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

We can do that with layout_constraintStart_toStartOf, layout_constraintTop_toTopOf and layout_constraintEnd_toEndOf. By specifying parent on each of these three tags, we defer to the dimensions of the parent ConstraintLayout tag. In this case, the entire screen. This will work.

Next, let's create a TextView.

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Daniel Malone" />

This will contain our user's full name.

Our TextView.
<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#999"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Daniel Malone" />

</androidx.constraintlayout.widget.ConstraintLayout>

To center the TextView, we'll specify the exact same attributes as we did our ImageView. But first, let's give both our ImageView and TextView and id.

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <ImageView
        android:id="@+id/profilePhoto"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#999"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/fullName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Daniel Malone" />

</androidx.constraintlayout.widget.ConstraintLayout>

To position our user's full name below the profile image, we need to set layout_constraintTop_toBottomOf, giving it the id of the ImageView.

    <TextView
        android:id="@+id/fullName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Daniel Malone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/profilePhoto" />

To preview our profile photo, add the following line to the ImageView.

tools:src="@tools:sample/avatars"
Our ImageView with a sample photo.

To stylize our screen, let's add some margin and setup the TextView's attributes.

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <ImageView
        android:id="@+id/profilePhoto"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="24dp"
        android:background="#999"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars" />

    <TextView
        android:id="@+id/fullName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Daniel Malone"
        android:textColor="#000"
        android:textSize="32sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/profilePhoto" />

</androidx.constraintlayout.widget.ConstraintLayout>

We should now add an email address to the screen.

    <TextView
        android:id="@+id/email"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="daniel@example.com"
        android:textAlignment="center"
        android:textColor="#000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fullName" />

Then let's add a line for visual styling.

    <View
        android:id="@+id/lineOne"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="24dp"
        android:background="#888"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/email" />

After our line, we can add some more fields, like age


    <TextView
        android:id="@+id/age"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="24 years old"
        android:textColor="#000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/lineOne" />

interests


    <View
        android:id="@+id/lineTwo"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="24dp"
        android:background="#888"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/age" />

    <TextView
        android:id="@+id/interests"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="likes to play with dirt"
        android:textColor="#000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/lineTwo" />

and music


    <View
        android:id="@+id/lineThree"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="24dp"
        android:background="#888"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/interests" />

    <TextView
        android:id="@+id/music"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="digs Justin Bieber"
        android:textColor="#000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/lineThree" />

The entire code now looks like this.

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <ImageView
        android:id="@+id/profilePhoto"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="24dp"
        android:background="#999"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars" />

    <TextView
        android:id="@+id/fullName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Daniel Malone"
        android:textColor="#000"
        android:textSize="32sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/profilePhoto" />

    <TextView
        android:id="@+id/email"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="daniel@example.com"
        android:textAlignment="center"
        android:textColor="#000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fullName" />

    <View
        android:id="@+id/lineOne"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="24dp"
        android:background="#888"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/email" />

    <TextView
        android:id="@+id/age"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="24 years old"
        android:textColor="#000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/lineOne" />

    <View
        android:id="@+id/lineTwo"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="24dp"
        android:background="#888"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/age" />

    <TextView
        android:id="@+id/interests"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="likes to play with dirt"
        android:textColor="#000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/lineTwo" />

    <View
        android:id="@+id/lineThree"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="24dp"
        android:background="#888"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/interests" />

    <TextView
        android:id="@+id/music"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="digs Justin Bieber"
        android:textColor="#000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/lineThree" />

</androidx.constraintlayout.widget.ConstraintLayout>

To use a real photo, copy and paste a photo into the drawables folder.

Now we can use the photo. Modify the ImageView to the following.

    <ImageView
        android:id="@+id/profilePhoto"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="24dp"
        android:background="#999"
        android:src="@drawable/daniel_malone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Here is our final 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <ImageView
        android:id="@+id/profilePhoto"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="24dp"
        android:background="#999"
        android:src="@drawable/daniel_malone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/fullName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Daniel Malone"
        android:textColor="#000"
        android:textSize="32sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/profilePhoto" />

    <TextView
        android:id="@+id/email"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="daniel@example.com"
        android:textAlignment="center"
        android:textColor="#000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fullName" />

    <View
        android:id="@+id/lineOne"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="24dp"
        android:background="#888"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/email" />

    <TextView
        android:id="@+id/age"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="24 years old"
        android:textColor="#000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/lineOne" />

    <View
        android:id="@+id/lineTwo"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="24dp"
        android:background="#888"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/age" />

    <TextView
        android:id="@+id/interests"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="likes to play with dirt"
        android:textColor="#000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/lineTwo" />

    <View
        android:id="@+id/lineThree"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="24dp"
        android:background="#888"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/interests" />

    <TextView
        android:id="@+id/music"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="digs Justin Bieber"
        android:textColor="#000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/lineThree" />

</androidx.constraintlayout.widget.ConstraintLayout>

We removed the sample photo and added a src of the drawable we just pasted into Android Studio. Now run the app and view our final changes!

Good job!

Related posts:

My Android Studio 4.0 Tutorial now Live on YouTube
Android Studio 3.6 Tutorial now Live on YouTube
Coding challenge: display a list using CardViews
What is a Kotlin data class?
How to get GPS coordinates
How to add rounded corners to buttons
Build a RecyclerView in Kotlin
Replacing findViewById with Kotlin synthetic imports
Baby Kevin at H-E-B Digital
Learn Kotlin for Android
Android Ecommerce App: Using DrawerLayout
Build an Ecommerce Android App

By Daniel Malone

Daniel Malone is an Android Developer in Austin, Texas. He enjoys writing code, whether it be HTML, CSS, JavaScript, PHP, Java, XML or Kotlin. Daniel started writing code at age 12. By the time he was 15, he had a technology news website that received about 200 visitors a day. His first computer was a Dell Dimension 3000, with an 80GB hard drive, 512MB RAM and a broken DVD drive.