Home/

...

/

Building Layout

Building Layout

This lesson will cover how to create a layout for the login screen, which consists of username input field, password input field and login button.

Final result preview #

To make it easier to understand 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 app/src/main/res/layout folder. As a root layout, we are going to use ConstraintLayout:

<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 EditText view as an input field, we are going to use TextInputLayout and its direct child TextInputEditText from Material Components library because of richer API and better visual parity ...