Skip to content
Codeplayon
  • Home
  • DSA
  • Jetpack
  • Flutter
  • Android
    • Android Tutorials
    • Android development
  • Kotlin
  • 5G
  • 4G LTE
    • IoT
  • e learning
  • Blog
Android splash screen Android login screen design

Android login screen design with animation – Android Studio 2022

October 27, 2018July 10, 2022 Codeplayon Android tutorial

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 

  • Android Studio Bumblebee New Features 2022
  • Codeplayon Jetpack Compose Tutorial 
  • Codeplayon Android Tutorial 
  • Codeplayon Flutter Tutorial 
  • Codeplayon on Github
Tagged Android login screen ui design with awesome animation Android Splash Screen Animation animation in android Awesome login screen beautiful android login and signup screens with material design source code How to implement an impressive login screen? Login Screen Login screen design Animation

Post navigation

Android splash screen UI design 2022
How to Integrate Paytm Payment Gateway in Android App 2022
  • How to create Simple manga example for MangaSee app built with Flutter 2023
  • 9xflix 2023 – Download & Watch Full HD Latest Bollywood, Telugu, Tamil, and Hollywood Movies Free
  • Filmywap 2023 – Latest Bollywood HD Movies Download Free 1080p 720p 480p Filmywap.com
  • iBOMMA Telugu, Latest HD Bollywood, Hollywood, Tamil Movies 2023 Download ibomma.com
  • Filmymeet Bollywood Movies 2023 Download 300MB 4K HD 1080p, 720p, 480p and HD HD Free
Proudly powered by WordPress | Theme: NewsAnchor by aThemes.