In this small tip, I will present the way to make a Login screen (usually is the first screen of app) with some animations, it can be more attractive!
Designing layout (XML file)
activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?colorPrimary"
android:padding="@dimen/activity_horizontal_margin">
<LinearLayout
android:id="@+id/container"
android:layout_marginTop="100dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
tools:ignore="HardcodedText">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:alpha="0"
android:text="This is a Login Activity"
android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
android:textColor="@android:color/white"
android:textSize="22sp"
tools:alpha="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
android:alpha="0"
android:gravity="center"
android:text="with some Animations"
android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse"
android:textSize="20sp"
tools:alpha="1" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:hint="user name"
android:inputType="text"
android:scaleX="0"
android:scaleY="0" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:hint="Password"
android:inputType="textPassword"
android:scaleX="0"
android:scaleY="0" />
<Button
android:id="@+id/login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:scaleX="0"
android:scaleY="0"
android:text="Login"
android:theme="@style/button_style" />
</LinearLayout>
<ImageView
android:id="@+id/img_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:contentDescription="@string/app_name"
android:src="@drawable/logo"
tools:visibility="gone" />
</FrameLayout>
Set animations in programmatically code
ImageView is slightly above of the center of the screen, this could be influenced by system bars, I've put a margin top of 12dp which just coincides with the half of the height of the status bar. In the Activity code, making this animation, translates the ImageView that contains the same resource of the <layer-list>:
ViewCompat.animate(logoImageView)
.translationY(-250)
.setStartDelay(STARTUP_DELAY)
.setDuration(ANIM_ITEM_DURATION).setInterpolator(
new DecelerateInterpolator(1.2f)).start();
LoginActivity.java
Styles resource for app, this screen has no Action Bar:
package info.devexchanges.onboardingscreen;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPropertyAnimatorCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.DecelerateInterpolator;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
public class LoginActivity extends AppCompatActivity {
public static final int STARTUP_DELAY = 300;
public static final int ANIM_ITEM_DURATION = 1000;
public static final int EDITTEXT_DELAY = 300;
public static final int BUTTON_DELAY = 500;
public static final int VIEW_DELAY = 400;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
ImageView logoImageView = (ImageView) findViewById(R.id.img_logo);
ViewGroup container = (ViewGroup) findViewById(R.id.container);
ViewCompat.animate(logoImageView)
.translationY(-250)
.setStartDelay(STARTUP_DELAY)
.setDuration(ANIM_ITEM_DURATION).setInterpolator(
new DecelerateInterpolator(1.2f)).start();
for (int i = 0; i < container.getChildCount(); i++) {
View v = container.getChildAt(i);
ViewPropertyAnimatorCompat viewAnimator;
if (v instanceof EditText) {
viewAnimator = ViewCompat.animate(v)
.scaleY(1).scaleX(1)
.setStartDelay((EDITTEXT_DELAY * i) + 500)
.setDuration(500);
} else if (v instanceof Button) {
viewAnimator = ViewCompat.animate(v)
.scaleY(1).scaleX(1)
.setStartDelay((BUTTON_DELAY * i) + 500)
.setDuration(500);
} else {
viewAnimator = ViewCompat.animate(v)
.translationY(50).alpha(1)
.setStartDelay((VIEW_DELAY * i) + 500)
.setDuration(1000);
}
viewAnimator.setInterpolator(new DecelerateInterpolator()).start();
}
}
}
styles.xml
Colors resource:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="button_style" parent="Theme.AppCompat">
<item name="colorControlHighlight">@color/high_light</item>
<item name="colorButtonNormal">@color/normal</item>
</style>
</resources>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#4bd421</color>
<color name="normal">#FF4BD421</color>
<color name="high_light">#FF2B611B</color>
</resources>
Final thoughts
