Hello developers, if you are looking for a login page UI design in Android then you are in the right place. In this Article we will provide an amazing login screen design for Android. We have provided the xml source code of login UI screen. In this Article we also provided drawable xml code used in this login screen design.
In today's digital age, login screens are an essential part of almost every mobile application, including Android applications. A login screen is a crucial aspect of the app's user interface that enables users to access the app's content and services by providing their login credentials. Hence, designing an intuitive and user-friendly login screen is crucial to ensure a smooth user experience.
Here you can see the login UI design below Image.
Android login UI design xml code
Here is the activity or fragment xml code for Android login Activity.
<?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">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:background="@drawable/login_drawable"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:gravity="center"
android:orientation="vertical"
android:layout_height="300dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="60dp"
android:src="@drawable/your_icon"
app:tint="#2646F4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:textStyle="bold"
android:letterSpacing="0.05"
android:text="Welcome to"/>
<TextView
android:layout_width="wrap_content"
android:text="APP NAME"
android:textStyle="bold"
android:letterSpacing="0.05"
android:textSize="25sp"
android:textColor="@color/login_background_color"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:letterSpacing="0.05"
android:layout_marginTop="4dp"
android:text="Small App Description"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
app:cardCornerRadius="10dp"
app:cardBackgroundColor="#FFFFFF"
android:layout_margin="20dp"
android:layout_height="60dp">
<LinearLayout
android:id="@+id/googleSign"
android:layout_width="match_parent"
android:gravity="center_vertical"
android:background="@drawable/ripple"
android:layout_height="match_parent">
<ImageView
android:layout_width="40dp"
android:layout_marginLeft="10dp"
android:src="@drawable/google_icon"
android:layout_height="40dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:layout_marginLeft="30dp"
android:letterSpacing="0.03"
android:textColor="@color/black"
android:alpha="0.8"
android:text="Continue with Google"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</LinearLayout>
</LinearLayout>Login drawable
Here is the login drawable xml code used in the login page.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/login_background_color" />
</shape>
</item>
<item
android:bottom="400dp"
android:left="-100dp"
android:right="-100dp"
android:top="-200dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="90"
android:endColor="#65FFFFFF"
android:startColor="#65FFFFFF" />
</shape>
</item>
<item
android:bottom="402dp"
android:left="-100dp"
android:right="-100dp"
android:top="-280dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>Here is ripple.xml file which is used for on click ripple effect in the LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="@android:integer/config_shortAnimTime"
android:color="#e0e0e0">
<item android:id="@android:id/mask">
<shape android:shape="rectangle" >
<solid android:color="@android:color/holo_green_light" />
</shape>
</item>
</ripple>Now you have to use google_icon.png in res/drawable folder of your project.
Thats it, Now you can use this login UI in your Android Studio project.
Importance of android login screen ui design.
Android login screen is a critical aspect of the user interface and can have a significant impact on the user experience. By following the best practices and design principles outlined in this article, you can create an intuitive, user-friendly login screen that provides a seamless and secure login experience for your users.
Best practices and design principles for Android Login Screen.
In this article, we will explore the best practices and design principles for creating an exceptional Android login screen.
1. Keep it Simple:
The first and foremost principle of designing an Android login screen is to keep it simple. Avoid overwhelming the user with too much information or too many options. Keep the login screen clean, minimalistic and focus on the essential elements such as the login form and the submit button.
2. Use the right colors:
Colors play a crucial role in designing a login screen. Use colors that are consistent with your app's branding and make sure that the text is legible against the background. Avoid using too many colors, which can be distracting and confusing for the user.
3. Make it Responsive:
With the increasing number of mobile devices and screen sizes, it is essential to make the login screen responsive. The login screen should be designed to fit different screen sizes, orientations and resolutions to provide a consistent user experience across all devices.
4. Provide clear feedback:
Provide clear feedback to the user after they submit their login credentials. Use appropriate messages to indicate whether the login was successful or not. If there is an error, provide clear instructions on how to rectify the issue.
Thank you for visiting our website
0 Comments