In the below Example, I have created a stylish login page. Here I have design first login activity_main.xml layout here I have added FrameLayout, LinearLayout, TextView, EditText and Button. Now In MainActivity I have used ViewCompat.animate function, For detail see below example it will clearly describe you to Create stylish (animation) login page in android.
Step(1)actvity_main.xml layout-
<?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>
Step(2)-Add button_style theme property in styles.xml file
<style name="button_style" parent="Theme.AppCompat">
<item name="colorControlHighlight">@color/high_light</item>
<item name="colorButtonNormal">@color/normal</item>
</style>
Step(3)-MainActivity-
public class MainActivity extends AppCompatActivity implements AppBarLayout.OnOffsetChangedListener {
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_main);
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();
}
}
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
}
}
0 Comment(s)