In this article, we will begin our journey into the world of Android development by crafting a complex authentication screen. We will leverage knowledge from previous lessons to design the following screen:

I've divided the design into three zones, which is how I envision structuring this screen. In the center, there's the block containing input fields and a button (middle_block), flanked by top_block above and bottom_block below. Why this structure instead of a simple top-to-bottom layout? It's designed this way to allow for flexibility and adaptability on various screen sizes. The space above and below will serve as this empty space because blocks 1 and 2 are anchored not to the screen's edge but to the central block, which remains centered.

Let's modify our activity_main.xml file. We'll retain the root element as ConstraintLayout and embed our LinearLayout with a vertical orientation since all elements in middle_block are vertically aligned:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

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

        <EditText
            android:hint="example@email.com"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="Password"/>

        <EditText
            android:hint="********"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:text="Forgot password"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Sign in"
            android:textAllCaps="true"/>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

And here's the resulting layout:

In this layout, we've created a LinearLayout with a height of wrap_content and width of match_parent. It's anchored to all four sides of the parent container and contains six elements:

1. TextView - Email text
2. EditText - Email input field
3. TextView - Password text
4. EditText - Password input field
5. TextView - Forgot Password text
6. Button - Sign-in button

Now, let's modify our activity_main.xml to add top_block:

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

    <LinearLayout
        android:id="@+id/top_block"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/middle_block">

        <TextView
            android:text="Sign In"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <TextView
            android:text="Hi! Welcome back, you've been missed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/middle_block"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

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

        <EditText
            android:hint="example@email.com"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="Password"/>

        <EditText
            android:hint="********"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:text="Forgot Password"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Sign in"
            android:textAllCaps="true"/>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

And the preview looks like this:

ЧPlease note that we've used the android:id attribute to assign unique identifiers to our elements in XML, allowing us to work with them programmatically. Also, we've used android:gravity="center_horizontal" to center the content within LinearLayout.

Important: To declare an ID, we use android:id="@+id/middle_top_block", and to reference it, we use app:layout_constraintTop_toBottomOf="@id/middle_top_block". This way, we indicate that the top of our element is aligned with the bottom of the middle block.

Lets add bottom_block in similar way:

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

    <LinearLayout
        android:id="@+id/top_block"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/middle_block">

        <TextView
            android:text="Sign In"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <TextView
            android:text="Hi! Welcome back, you've been missed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/middle_block"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

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

        <EditText
            android:hint="example@email.com"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="Password"/>

        <EditText
            android:hint="********"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:text="Forgot Password"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Sign in"
            android:textAllCaps="true"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/bottom_block"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/middle_block">
        <TextView
            android:text="--------- Or Sign in with ---------"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <ImageView
                android:layout_width="64dp"
                android:layout_height="64dp"/>
            <ImageView
                android:layout_width="64dp"
                android:layout_height="64dp"/>
            <ImageView
                android:layout_width="64dp"
                android:layout_height="64dp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal">
            <TextView
                android:text="Don't have an account?"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <TextView
                android:text="Signup"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

And the preview looks like this:

We've added the third block with a top-to-bottom constraint to middle_block and a bottom constraint to the parent.
There's a placeholder for social media icons (ImageViews) and a section for "Don't have an account?" text. They are a LinearLayouts with horizontal orientation.

This concludes the first part. Stay tuned for the next lesson, where we'll configure all the elements.