Modern Android Login UI in XML (MaterialCardView + Gradient Header)

Newkings January 07, 2026

Modern Android Login UI in XML (MaterialCardView + Gradient Header) — Full Line-by-Line Explanation

This post explains an Android login screen built using XML. The UI includes a purple gradient header with curved bottom corners, a scrollable form inside a MaterialCardView, underline-style EditText fields, circular social login buttons, and a register link.


1) Overview: What this layout builds

  • A purple gradient header at the top with curved bottom corners
  • A ScrollView (so the screen works well on small devices)
  • A white MaterialCardView that contains username + password fields
  • A “forgot password” clickable text
  • A primary “LOG IN” MaterialButton
  • Two circular social buttons (Facebook + Google)
  • A register link at the bottom

2) activity_login.xml — Explanation (Section-wise)

Root layout: LinearLayout

<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LoginActivity"
    android:orientation="vertical">

What it does:

  • xmlns:android, xmlns:app, xmlns:tools define namespaces for Android, Material/ConstraintLayout, and preview-only attributes.
  • android:id="@+id/main" assigns an ID to the root view (useful for insets, finding the view in code, etc.).
  • match_parent width/height makes the root fill the entire screen.
  • tools:context helps Android Studio preview.
  • orientation="vertical" stacks children vertically (even though your main child is a FrameLayout).


FrameLayout: layering background + scrollable content

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

Why FrameLayout? It lets you stack views on top of each other. Your layout stacks:

  1. A decorative gradient header View
  2. A ScrollView containing the full login form

Gradient header View

<View
    android:layout_width="match_parent"
    android:layout_height="420dp"
    android:background="@drawable/bg_gradient_curved" />
  • This is a plain View used only as a background header.
  • 420dp gives a tall header area behind the logo and title.
  • @drawable/bg_gradient_curved applies your custom gradient drawable with curved bottom corners.

ScrollView: supports small screens

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">
  • ScrollView enables scrolling when content doesn’t fit.
  • fillViewport="true" makes the content fill the screen height when possible (prevents awkward empty space).

ConstraintLayout: main content container

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingStart="24dp"
    android:paddingEnd="24dp"
    android:paddingBottom="24dp">
  • ConstraintLayout allows flexible positioning.
  • Padding provides modern spacing from the edges.
  • wrap_content height is fine because the ScrollView handles overflow.


3) Logo + Title

App logo ImageView

<ImageView
    android:id="@+id/appLoginImg"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_marginTop="60dp"
    android:src="@drawable/app_login_img"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:tint="@color/white" />
  • Centered using start/end constraints to parent.
  • layout_marginTop pushes it down for a nicer header spacing.
  • app:tint turns the icon white (best with vector drawables).

Title TextView

<TextView
    android:id="@+id/appTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="12dp"
    android:text="Login"
    android:textColor="@android:color/white"
    android:textSize="28sp"
    android:textStyle="bold"
    android:fontFamily="serif"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/appLoginImg" />
  • Placed under the logo using Top_toBottomOf.
  • Large white text for strong contrast on the gradient header.


4) White Card Container (MaterialCardView)

MaterialCardView settings

<com.google.android.material.card.MaterialCardView
    android:id="@+id/loginCard"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    app:cardBackgroundColor="@android:color/white"
    app:cardCornerRadius="20dp"
    app:cardElevation="6dp"
    app:layout_constraintTop_toBottomOf="@id/appTitle">
  • cardCornerRadius makes rounded corners.
  • cardElevation adds a shadow for depth.
  • Positioned below the title with constraints.

Inner LinearLayout

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="24dp">
  • Stacks all form elements vertically.
  • Adds internal padding for comfortable spacing.

Form heading

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Login Account"
    android:textColor="#000000"
    android:textSize="20sp"
    android:textStyle="bold"
    android:gravity="center"
    android:layout_marginBottom="20dp" />


5) Username Label + EditText

Username label

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="User Name or E-mail"
    android:textColor="#5A4FCF"
    android:textSize="13sp"
    android:layout_marginBottom="2dp" />

Username input

<EditText
    android:id="@+id/etUsername"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/edit_text_underline"
    android:hint=""
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:textSize="15sp"
    android:textColor="#333333"
    android:layout_marginBottom="18dp" />
  • @drawable/edit_text_underline gives a clean underline/border style.
  • Tip: you can add a hint like “Enter email” for better UX.


6) Password Label + Password EditText

Password label

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Password"
    android:textColor="#888888"
    android:textSize="13sp"
    android:layout_marginBottom="2dp" />

Password input

<EditText
    android:id="@+id/etPassword"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/edit_text_underline"
    android:hint=""
    android:inputType="textPassword"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:textSize="15sp"
    android:textColor="#333333"
    android:layout_marginBottom="8dp" />
  • inputType="textPassword" masks typed characters.


7) Forgot Password link

<TextView
    android:id="@+id/tvForgotPassword"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="In case you forgot password ?"
    android:textColor="#5A4FCF"
    android:textSize="11sp"
    android:layout_marginBottom="20dp"
    android:clickable="true"
    android:focusable="true" />
  • clickable and focusable make it behave like a link (you can attach an onClick listener in code).


8) Login Button (MaterialButton)

<com.google.android.material.button.MaterialButton
    android:id="@+id/btnLogin"
    android:layout_width="match_parent"
    android:layout_height="54dp"
    android:text="LOG IN"
    android:textColor="@android:color/white"
    android:textSize="15sp"
    android:textStyle="bold"
    app:backgroundTint="#4338CA"
    app:cornerRadius="27dp"
    android:layout_marginBottom="14dp" />
  • cornerRadius="27dp" makes a pill button (half of 54dp height).
  • backgroundTint sets the Material button color.


9) OR Divider

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="OR"
    android:textColor="#888888"
    android:textSize="13sp"
    android:gravity="center"
    android:layout_marginBottom="14dp" />


10) Social Login Buttons (Facebook + Google)

Row container

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center">

Facebook ImageButton

<ImageButton
    android:id="@+id/btnFacebook"
    android:layout_width="44dp"
    android:layout_height="44dp"
    android:layout_marginEnd="12dp"
    android:background="@drawable/circle_facebook"
    android:src="@drawable/facebook_img"
    android:scaleType="centerInside"
    android:padding="10dp"
    android:contentDescription="Facebook Login"
    app:tint="@color/white" />


Google ImageButton

<ImageButton
    android:id="@+id/btnGoogle"
    android:layout_width="44dp"
    android:layout_height="44dp"
    android:background="@drawable/circle_google"
    android:src="@drawable/google_img"
    android:scaleType="centerInside"
    android:padding="10dp"
    android:contentDescription="Google Login"
    app:tint="@color/white" />
  • contentDescription improves accessibility.
  • Circular backgrounds come from your custom shape drawables.


11) Register Section (below the card)

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:layout_marginBottom="20dp"
    android:orientation="vertical"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/loginCard">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Don't have an account ? "
    android:textColor="#333333"
    android:textSize="13sp" />

<TextView
    android:id="@+id/tvRegister"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="REGISTER"
    android:textColor="#5A4FCF"
    android:textSize="13sp"
    android:textStyle="bold"
    android:layout_gravity="center"
    android:clickable="true"
    android:focusable="true" />


3) Drawable XML Files — Explanation

A) bg_gradient_curved.xml (Gradient header with curved bottom)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:angle="135"
                android:startColor="#5E52D5"
                android:centerColor="#4F44C8"
                android:endColor="#4338CA"
                android:type="linear" />
            <corners
                android:bottomLeftRadius="40dp"
                android:bottomRightRadius="40dp"/>
        </shape>
    </item>
</layer-list>
  • Creates a linear gradient background.
  • Rounds only the bottom corners for a modern header look.

B) circle_facebook.xml (Blue circular background)

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#3B5998"/>
</shape>

C) circle_google.xml (Red circular background)

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#DB4437"/>
    <size android:width="48dp" android:height="48dp"/>
</shape>
  • The size tag is optional because the ImageButton defines its own size, but it doesn’t harm.

D) edit_text_underline.xml (Underline/border style for EditText)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-2dp" android:left="-2dp" android:right="-2dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#DDDDDD"/>
        </shape>
    </item>
</layer-list>
  • Draws a thin stroke that gives your EditText a clean line-style appearance.
  • Negative offsets push the line outward slightly to match the underline effect.


activity_login.xml (Full Code)

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LoginActivity"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white">

        <!-- Purple Gradient Background with Curved Bottom -->
        <View
            android:layout_width="match_parent"
            android:layout_height="420dp"
            android:background="@drawable/bg_gradient_curved" />

        <!-- Content ScrollView -->
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingStart="24dp"
                android:paddingEnd="24dp"
                android:paddingBottom="24dp">

                <!-- App Logo and Title -->
                <ImageView
                    android:id="@+id/appLoginImg"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    android:layout_marginTop="60dp"
                    android:src="@drawable/app_login_img"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:tint="@color/white" />

                <TextView
                    android:id="@+id/appTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:text="Login"
                    android:textColor="@android:color/white"
                    android:textSize="28sp"
                    android:textStyle="bold"
                    android:fontFamily="serif"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/appLoginImg" />

                <!-- White Card Container -->
                <com.google.android.material.card.MaterialCardView
                    android:id="@+id/loginCard"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="24dp"
                    app:cardBackgroundColor="@android:color/white"
                    app:cardCornerRadius="20dp"
                    app:cardElevation="6dp"
                    app:layout_constraintTop_toBottomOf="@id/appTitle">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:padding="24dp">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="Login Account"
                            android:textColor="#000000"
                            android:textSize="20sp"
                            android:textStyle="bold"
                            android:gravity="center"
                            android:layout_marginBottom="20dp" />

                        <!-- Username Input -->
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="User Name or E-mail"
                            android:textColor="#5A4FCF"
                            android:textSize="13sp"
                            android:layout_marginBottom="2dp" />

                        <EditText
                            android:id="@+id/etUsername"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:background="@drawable/edit_text_underline"
                            android:hint=""
                            android:paddingTop="8dp"
                            android:paddingBottom="8dp"
                            android:textSize="15sp"
                            android:textColor="#333333"
                            android:layout_marginBottom="18dp" />

                        <!-- Password Input -->
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="Password"
                            android:textColor="#888888"
                            android:textSize="13sp"
                            android:layout_marginBottom="2dp" />

                        <EditText
                            android:id="@+id/etPassword"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:background="@drawable/edit_text_underline"
                            android:hint=""
                            android:inputType="textPassword"
                            android:paddingTop="8dp"
                            android:paddingBottom="8dp"
                            android:textSize="15sp"
                            android:textColor="#333333"
                            android:layout_marginBottom="8dp" />

                        <!-- Forgot Password -->
                        <TextView
                            android:id="@+id/tvForgotPassword"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="In case you forgot password ?"
                            android:textColor="#5A4FCF"
                            android:textSize="11sp"
                            android:layout_marginBottom="20dp"
                            android:clickable="true"
                            android:focusable="true" />

                        <!-- Login Button -->
                        <com.google.android.material.button.MaterialButton
                            android:id="@+id/btnLogin"
                            android:layout_width="match_parent"
                            android:layout_height="54dp"
                            android:text="LOG IN"
                            android:textColor="@android:color/white"
                            android:textSize="15sp"
                            android:textStyle="bold"
                            app:backgroundTint="#4338CA"
                            app:cornerRadius="27dp"
                            android:layout_marginBottom="14dp" />

                        <!-- OR Divider -->
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="OR"
                            android:textColor="#888888"
                            android:textSize="13sp"
                            android:gravity="center"
                            android:layout_marginBottom="14dp" />

                        <!-- Social Login Buttons -->
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal"
                            android:gravity="center">

                            <ImageButton
                                android:id="@+id/btnFacebook"
                                android:layout_width="44dp"
                                android:layout_height="44dp"
                                android:layout_marginEnd="12dp"
                                android:background="@drawable/circle_facebook"
                                android:src="@drawable/facebook_img"
                                android:scaleType="centerInside"
                                android:padding="10dp"
                                android:contentDescription="Facebook Login"
                                app:tint="@color/white" />

                            <ImageButton
                                android:id="@+id/btnGoogle"
                                android:layout_width="44dp"
                                android:layout_height="44dp"
                                android:background="@drawable/circle_google"
                                android:src="@drawable/google_img"
                                android:scaleType="centerInside"
                                android:padding="10dp"
                                android:contentDescription="Google Login"
                                app:tint="@color/white" />

                        </LinearLayout>

                    </LinearLayout>

                </com.google.android.material.card.MaterialCardView>

                <!-- Register Link -->
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:layout_marginBottom="20dp"
                    android:orientation="vertical"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/loginCard">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Don't have an account ? "
                        android:textColor="#333333"
                        android:textSize="13sp" />

                    <TextView
                        android:id="@+id/tvRegister"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="REGISTER"
                        android:textColor="#5A4FCF"
                        android:textSize="13sp"
                        android:textStyle="bold"
                        android:layout_gravity="center"
                        android:clickable="true"
                        android:focusable="true" />

                </LinearLayout>

            </androidx.constraintlayout.widget.ConstraintLayout>

        </ScrollView>

    </FrameLayout>

</LinearLayout>

Output


Optional Improvements

  • Use TextInputLayout + TextInputEditText for modern Material input fields (floating label + error support)
  • Add inputType for username as textEmailAddress if you’re using email
  • Add proper hints for better autofill and user clarity
Tags

Post a Comment

0 Comments