Android login screen UI design with awesome animation

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

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.