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 :-

• android login screen design
• android login screen design xml
• android login screen design example
• android login screen design source code
• android-login screen design xml github
• android login screen template free download
• login fragment android studio

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 

• Android Studio Bumblebee New Features 2022
• Codeplayon Jetpack Compose Tutorial 
• Codeplayon Android Tutorial 
• Codeplayon Flutter Tutorial 
• Codeplayon on Github