Android login screen design xml source code
Material design login screen android studio make it an android stylish login screen
Material design login screen android studio make it an android stylish login screen
login page in android studio source code
Step 1: Add Dependency at build.gradle
implementation 'com.google.android.material:material:1.2.0-alpha05'
Step 2: Add This Button Design at the drawable folder button_design.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/white"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="@color/white" />
</shape>
</item>
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<solid android:color="@color/black"/>
<corners android:radius="5dp" />
</shape>
</item>
</ripple>
Step 3: login_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:padding="30dp"
android:transitionName="transition_login_btn"
tools:context=".LoginScreen">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/genral_back_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:fontFamily="@font/cera_pro_black"
android:text="Login"
android:textAllCaps="true"
android:textColor="@color/black"
android:textSize="40sp" />
<LinearLayout
android:layout_marginTop="80dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
app:boxStrokeColor="@color/black"
app:endIconTint="@color/black"
android:hint="Username"
app:hintTextColor="@color/black"
app:startIconTint="@color/black"
app:startIconDrawable="@drawable/ic_person_userid_24dp"
app:boxStrokeWidthFocused="2dp"
app:endIconMode="clear_text"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:textColor="@color/black"
android:inputType="number"
android:maxLength="6"
android:textSize="16sp"
android:fontFamily="@font/cerapro_medium"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_marginTop="2dp"
android:layout_width="match_parent"
app:boxStrokeColor="@color/black"
android:hint="Password"
app:hintTextColor="@color/black"
app:endIconTint="@color/black"
app:startIconTint="@color/black"
app:startIconDrawable="@drawable/ic_password_24dp"
app:boxStrokeWidthFocused="2dp"
app:endIconMode="password_toggle"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:inputType="textPassword"
android:textSize="16sp"
android:textColor="@color/black"
android:fontFamily="@font/cerapro_medium"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
<RelativeLayout
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:layout_centerVertical="true"
android:textColor="@color/black"
android:buttonTint="@color/black"
android:text="Remember Me"
style="@style/Widget.AppCompat.CompoundButton.CheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:layout_alignParentEnd="true"
android:background="@android:color/transparent"
android:text="Forget Password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<Button
android:textColor="@color/white"
android:layout_marginTop="20dp"
android:background="@drawable/btn_design"
android:text="Login"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<Button
android:layout_marginTop="20dp"
android:layout_gravity="center"
android:background="@android:color/transparent"
android:text="Create\nAccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
 |
| Output |
