Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Create stylish (animation) login page

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 387
    Comment on it

     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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: