Modern Android App Development with Kotlin/

...

/

Building Layout of Login Screen

Building Layout of Login Screen

Follow step-by-step instructions to create a layout for the login screen, which consists of a username input field, a password input field, and a login button.

We'll cover the following...

Final result preview

To give you an idea of what we want to achieve, here is a preview of the layout that we are going to build.

Root layout

Let’s create a new activity_login.xml layout file inside the app/src/main/res/layout folder. As a root layout, we are going to use ConstraintLayout:

Press + to interact
<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.ConstraintLayout>

Input fields

While Android SDK provides the EditText view as an input field, we are going to use TextInputLayout and its direct child TextInputEditText from the Material Components library because of the richer API and better visual parity with Material Design.

Let’s declare username TextInputLayout and TextInputEditText inside ConstraintLayout along with some specific XML attributes:

  • The id attribute is used to
...