Android login screen design with animation – Android Studio 2022
Hey in this example I am sharing Android login screen UI design with awesome animation. you can just follow these simple steps a create login screen design in android. let create an android login screen for a beautiful UI design with awesome animation.
This is the second part of our Android Studio tutorial about a traveling android application. In this article , we’re creating the login screen android example with materials components and utilize an animation shared between the login screen and splash screen within android studio. Additionally, you can watch this Youtube video. Follow the video and get the code directly into your email. Join my mailing list to receive the latest updates and codes regarding android.
More search resulte :-
Creative Android Login Screen in Android Studio?
Login Screen is a security test which identifies and authenticates credentials that allow access to the application.
Everyone would like to design an application that will attract users. Android Studio offers a lot of components for designing an attractive screen. However, to improve the appearance of your screen, material components are utilized. In this post, you’ll learn how to build an account screen with materials components. To gain the complete information about the material component you need to click here.
Before you begin to create a Login Screen you can create the Splash Screen. Splash Screen is first screen that is displayed prior to the login. It can be seen on the GIF image above. To create a Splash Screen go through the post.
Okay, let’s get started.
Android login screen design with awesome animation
Step 1:- Start Android Studio
Step 2:- To Create a New Project Project Click On ==> File ==> NEW ==> New Project. and Create your login activity .
Step 3:- Add Dependency in your build.gradle .
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7:28.+' compile 'com.android.support:design:28.+' compile 'com.android.support:support-v4:28.+' compile 'com.android.support.constraint:constraint-layout:1.0.2' testCompile 'junit:junit:4.12' }
Add your value color file
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#FFEB3B</color> <color name="colorPrimaryDark">#FBC02D</color> <color name="colorAccent">#6200EA</color> <color name="white">#fff</color> <!-- 1st Gradient color --> <color name="colorPurple_A400">#D500F9</color> <color name="colorPurple_900">#4A148C</color> <!-- ./ 1st Gradient color --> <!-- 2nd Gradient color --> <color name="colorAmber_A400">#FFC400</color> <color name="colorAmber_900">#FF6F00</color> <!-- ./ 2nd Gradient color --> <!-- 3rd Gradient color --> <color name="colorGreen_A400">#00E676</color> <color name="colorGreen_900">#1B5E20</color> <!-- ./ 3rd Gradient color --> <!-- 4th Gradient color --> <color name="colorRed_A400">#FF1744</color> <color name="colorRed_900">#B71C1C</color> <!-- ./ 4th Gradient color --> </resources>
Step 4:- Create a Drawable file drawable_amber_gradient.xml Right Click on ==> drawable ==>New ==> drawable resource file .
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:angle="135" android:endColor="@color/colorAmber_A400" android:startColor="@color/colorAmber_900" /> </shape>
Step 5:- Create a Drawable file drawable_green_gradient.xml Right Click on ==> drawable ==>New ==> drawable resource file.
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:angle="0" android:endColor="@color/colorGreen_A400" android:startColor="@color/colorGreen_900" /> </shape>
Step 6:- Create a Drawable file drawable_purple_gradient.xml Right Click on ==> drawable ==>New ==> drawable resource file .
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:angle="90" android:endColor="@color/colorPurple_A400" android:startColor="@color/colorPurple_900" /> </shape>
Step 7 :- Create a Drawable file drawable_red_gradient.xml Right Click on ==> drawable ==>New ==> drawable resource file .
<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>
<gradient
android:angle=”45″
android:endColor=”@color/colorRed_A400″
android:startColor=”@color/colorRed_900″ />
</shape>
Step 8 :- Create a Drawable file drawable_gradient_animation_list.xml Right Click on ==> drawable ==>New ==> drawable resource file .
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/drawable_purple_gradient" android:duration="6000" /> <item android:drawable="@drawable/drawable_amber_gradient" android:duration="6000" /> <item android:drawable="@drawable/drawable_green_gradient" android:duration="6000" /> <item android:drawable="@drawable/drawable_red_gradient" android:duration="6000" /> </animation-list>
Step 9:- Open your xml file activity_log_in.xml. and add these code in your xml file .
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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/RelativeLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:background="@drawable/drawable_gradient_animation_list" tools:context="com.rocareindia.customermalik.LogInActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:theme="@style/Theme.Transparent"> <ImageView android:layout_width="150dp" android:layout_height="100dp" android:src="@drawable/logo_icon" android:tint="@color/white"/> <EditText android:id="@+id/UserEmail" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:padding="15dp" android:background="@drawable/shapeemail" android:drawableLeft="@drawable/ic_perm_identity_white_24dp" android:drawablePadding="10dp" android:inputType="textEmailAddress" android:singleLine="true" android:hint="Email" android:textColor="@color/white" android:textColorHint="@color/white" android:textColorHighlight="@color/white"/> <EditText android:id="@+id/UserPassword" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:singleLine="true" android:padding="15dp" android:inputType="textPassword" android:background="@drawable/shapeemail" android:drawableLeft="@drawable/ic_lock_outline_white_24dp" android:drawablePadding="10dp" android:hint="Password" android:textColor="@color/white" android:textColorHint="@color/white" android:textColorHighlight="@color/white"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Remember Me" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" android:layout_marginTop="0dp" android:textColor="@color/white" android:buttonTint="@color/white" android:checked="true"/> <TextView android:id="@+id/Forgot_Pass" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Forget Password" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" android:layout_marginTop="0dp" android:gravity="center" android:textColor="@color/white" android:drawableLeft="@drawable/ic_lock_outline_white_24dp" android:drawablePadding="6dp" android:padding="4dp"/> </LinearLayout> <Button android:id="@+id/Log_Btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Log In" android:shadowColor="@android:color/transparent" android:padding="15dp" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" android:background="@drawable/shapelogin"/> <Button android:id="@+id/Reg_Btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Sign Up" android:shadowColor="@android:color/transparent" android:padding="15dp" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:background="@drawable/shapesignup" android:textColor="@color/white"/> </LinearLayout> </RelativeLayout>
Step 10:- Open your java class Login.java and a cope add these code.
public class LogInActivity extends AppCompatActivity { private AnimationDrawable animationDrawable; RelativeLayout relativelayout; Button LoginBtn,RegBtn; EditText UserName,UserPass; TextView ForgotPass; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_log_in); relativelayout=(RelativeLayout)findViewById(R.id.RelativeLayout); // initializing animation drawable by getting background from RelativeLayout layout animationDrawable = (AnimationDrawable) relativelayout.getBackground(); // setting enter fade animation duration to 5 seconds animationDrawable.setEnterFadeDuration(5000); // setting exit fade animation duration to 2 seconds animationDrawable.setExitFadeDuration(2000); UserName=(EditText)findViewById(R.id.UserEmail); UserPass=(EditText)findViewById(R.id.UserPassword); LoginBtn=(Button)findViewById(R.id.Log_Btn); RegBtn=(Button)findViewById(R.id.Reg_Btn); RegBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent=new Intent(LogInActivity.this,Registration.class); startActivity(intent); finish(); } }); ForgotPass=(TextView)findViewById(R.id.Forgot_Pass); } @Override protected void onResume() { super.onResume(); if (animationDrawable != null && !animationDrawable.isRunning()) { // start the animation animationDrawable.start(); } } @Override protected void onPause() { super.onPause(); if (animationDrawable != null && animationDrawable.isRunning()) { // stop the animation animationDrawable.stop(); } } }
complete that run you app and test it.
Read More Tutorial