App

Login Screen design modern UI UX android Android Studio 2022 for beginners

Latest login screen for your upcoming project. This section explains, how to create a login screen and how to manage screens.

2022-03-27
Share this

Following is the sample way to define control in XML layout file in android application.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@drawable/bg_back"
    android:orientation="vertical"
    android:paddingStart="@dimen/normal_30"
    android:paddingEnd="@dimen/normal_30"
    android:paddingTop="@dimen/normal_50"
    android:paddingBottom="@dimen/normal_50"
    android:gravity="center"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="@dimen/normal_big_a_font"
            android:textColor="@color/white"
            android:layout_marginBottom="@dimen/normal_30"
            android:text="@string/signin"/>


        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/normal_30"
            android:hint="Email Id"
            android:textColorHint="@color/disable">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/user_login_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"
                android:textSize="@dimen/normal_font"
                android:textColor="@color/white"
                android:padding="@dimen/normal_20"
                android:background="@drawable/edittext_bottom_line"
                />

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Password"
            android:textColorHint="@color/disable">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/user_login_passcode"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword"
                android:textColor="@color/white"
                android:padding="@dimen/normal_20"
                android:textSize="@dimen/normal_font"
                android:background="@drawable/edittext_bottom_line"
                />

        </com.google.android.material.textfield.TextInputLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/normal_30"
            android:orientation="horizontal"
            android:layout_gravity="center_vertical"
            android:weightSum="2">

            <TextView
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:textSize="@dimen/normal_font"
                android:textColor="@color/disable"
                android:gravity="center_vertical"
                android:text="@string/forgetpass"/>


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="end"
                android:gravity="end">

                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/round_button"
                    android:src="@drawable/ic_baseline_arrow_forward_24"
                    android:tint="@color/white"
                    android:padding="@dimen/normal_20"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

Read next

Using Custom and Downloadable Fonts in Android

To work with Custom Font, you need to install the latest version of Android Studio. A font resource defines a custom font that you can use in your app. Fonts can be individual font files or a collection of font files

App
Thu, 14 Apr 2022

Modal Bottom Sheet in Androidx with Examples - Working with BottomSheet

A user can view the full Bottom Sheet by dragging the sheet up vertically. Bottom Sheets are a lesser known part of the Design support library.
Thu, 21 Apr 2022

Using Custom and Downloadable Fonts in Android

To work with Custom Font, you need to install the latest version of Android Studio. A font resource defines a custom font that you can use in your app. Fonts can be individual font files or a collection of font files
Thu, 14 Apr 2022