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.