Wednesday, 15 March 2017

HB Blog 131: Material Design For Registration - Login Module.

Registration and login has been most important and very first step in a mobile application. There are various ways through which we can achieve these functionality. Not only functionality wise but also applications look and feel is very important. While Android and other mobile application users increasing, we are moving more over towards UI/UX interfaces. Android has been using material design in various patterns.

In these tutorial, I will show how to use material design for login and registration screens.

We need single page application which uses proper animations for screen transitions and provide easy to use and understand way. Using these sample code use can easily design registration-login module.


Refer the below link for complete sample code:-

Download Sample Code

Have a look on few code snippets,

//MainActivity.java  
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
import android.transition.Explode;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

import butterknife.ButterKnife;
import butterknife.InjectView;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    @InjectView(R.id.et_username)
    EditText etUsername;
    @InjectView(R.id.et_password)
    EditText etPassword;
    @InjectView(R.id.bt_go)
    Button btGo;
    @InjectView(R.id.cv)
    CardView cv;
    @InjectView(R.id.fab)
    FloatingActionButton fab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

    }

    @OnClick({R.id.bt_go, R.id.fab})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.fab:
                getWindow().setExitTransition(null);
                getWindow().setEnterTransition(null);

                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    ActivityOptions options =
                            ActivityOptions.makeSceneTransitionAnimation(this, fab, fab.getTransitionName());
                    startActivity(new Intent(this, RegisterActivity.class), options.toBundle());
                } else {
                    startActivity(new Intent(this, RegisterActivity.class));
                }
                break;
            case R.id.bt_go:
                Explode explode = new Explode();
                explode.setDuration(500);

                getWindow().setExitTransition(explode);
                getWindow().setEnterTransition(explode);
                ActivityOptionsCompat oc2 = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
                Intent i2 = new Intent(this,LoginSuccessActivity.class);
                startActivity(i2, oc2.toBundle());
                break;
        }
    }
}

//RegisterActivity.java  
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
import android.transition.Transition;
import android.transition.TransitionInflater;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.AccelerateInterpolator;

import butterknife.ButterKnife;
import butterknife.InjectView;

public class RegisterActivity extends AppCompatActivity {

    @InjectView(R.id.fab)
    FloatingActionButton fab;
    @InjectView(R.id.cv_add)
    CardView cvAdd;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);
        ButterKnife.inject(this);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            ShowEnterAnimation();
        }
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                animateRevealClose();
            }
        });
    }

    private void ShowEnterAnimation() {
        Transition transition = TransitionInflater.from(this).inflateTransition(R.transition.fabtransition);
        getWindow().setSharedElementEnterTransition(transition);

        transition.addListener(new Transition.TransitionListener() {
            @Override
            public void onTransitionStart(Transition transition) {
                cvAdd.setVisibility(View.GONE);
            }

            @Override
            public void onTransitionEnd(Transition transition) {
                transition.removeListener(this);
                animateRevealShow();
            }

            @Override
            public void onTransitionCancel(Transition transition) {

            }

            @Override
            public void onTransitionPause(Transition transition) {

            }

            @Override
            public void onTransitionResume(Transition transition) {

            }


        });
    }

    public void animateRevealShow() {
        Animator mAnimator = ViewAnimationUtils.createCircularReveal(cvAdd, cvAdd.getWidth()/2,0, fab.getWidth() / 2, cvAdd.getHeight());
        mAnimator.setDuration(500);
        mAnimator.setInterpolator(new AccelerateInterpolator());
        mAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }

            @Override
            public void onAnimationStart(Animator animation) {
                cvAdd.setVisibility(View.VISIBLE);
                super.onAnimationStart(animation);
            }
        });
        mAnimator.start();
    }

    public void animateRevealClose() {
        Animator mAnimator = ViewAnimationUtils.createCircularReveal(cvAdd,cvAdd.getWidth()/2,0, cvAdd.getHeight(), fab.getWidth() / 2);
        mAnimator.setDuration(500);
        mAnimator.setInterpolator(new AccelerateInterpolator());
        mAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                cvAdd.setVisibility(View.INVISIBLE);
                super.onAnimationEnd(animation);
                fab.setImageResource(R.drawable.plus);
                RegisterActivity.super.onBackPressed();
            }

            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
            }
        });
        mAnimator.start();
    }
    @Override
    public void onBackPressed() {
        animateRevealClose();
    }
}

//activity_main.xml  
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    tools:context="cn.fanrunqi.materiallogin.MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:cardCornerRadius="6dp"
        app:cardElevation="3dp"
        app:cardUseCompatPadding="true"
        android:layout_centerInParent="true"
        android:id="@+id/cv">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
        <RelativeLayout
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="45dp">
            <View
                android:layout_alignParentStart="true"
                android:layout_width="8dp"
                android:layout_height="match_parent"
                android:background="#2fa881"
                />
            <TextView
                android:layout_centerVertical="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="50dp"
                android:text="@string/login"
                android:textColor="#FFCC00"
                android:textSize="18sp"
                android:textStyle="bold"
                />
        </RelativeLayout>
        <LinearLayout
            android:layout_marginTop="10dp"
            android:paddingStart="50dp"
            android:paddingEnd="30dp"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp">
            <android.support.design.widget.TextInputLayout
                android:textColorHint="#c5c5c5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <EditText
                    android:textSize="13sp"
                    android:hint="@string/Username"
                    android:textColor="#2fa881"
                    android:id="@+id/et_username"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPersonName"
                    android:background="@drawable/selector_bg_edit"
                    android:textCursorDrawable="@drawable/bg_input_cursor"
                    android:paddingBottom="2dp"
                    />
            </android.support.design.widget.TextInputLayout>
        </LinearLayout>
            <LinearLayout
                android:paddingStart="50dp"
                android:paddingEnd="30dp"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="50dp">
                <android.support.design.widget.TextInputLayout
                    android:textColorHint="#c5c5c5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <EditText
                        android:textSize="13sp"
                        android:hint="@string/Password"
                        android:textColor="#2fa881"
                        android:id="@+id/et_password"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:inputType="textPassword"
                        android:background="@drawable/selector_bg_edit"
                        android:textCursorDrawable="@drawable/bg_input_cursor"
                        android:paddingBottom="2dp"
                        />
                </android.support.design.widget.TextInputLayout>
            </LinearLayout>
            <RelativeLayout
                android:layout_marginTop="25dp"
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="60dp">
                <Button
                    android:id="@+id/bt_go"
                    android:background="@drawable/bt_shape"
                    android:stateListAnimator="@drawable/state_list_animator_z"
                    android:layout_width="150dp"
                    android:layout_height="50dp"
                    android:text="@string/go"
                    android:textColor="#d3d3d3"
                    >
                </Button>
            </RelativeLayout>
            <TextView
                android:layout_marginTop="5dp"
                android:layout_gravity="center_horizontal"
                android:textColor="#9a9a9a"
                android:textSize="12sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/forgot_your_password"
                />
        </LinearLayout>
        </android.support.v7.widget.CardView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        android:src="@drawable/plus"
        android:transitionName="loginFab"
        android:layout_alignTop="@id/cv"
        android:layout_marginTop="25dp"
        android:layout_alignEnd="@id/cv"
        android:layout_marginEnd="-20dp"
        />

</RelativeLayout>

//activity_register.xml  
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg">

    <android.support.v7.widget.CardView
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:cardCornerRadius="6dp"
        app:cardElevation="3dp"
        app:cardUseCompatPadding="true"
        android:layout_centerInParent="true"
        android:id="@+id/cv">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
        <RelativeLayout
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="45dp">
            <View
                android:layout_alignParentStart="true"
                android:layout_width="8dp"
                android:layout_height="match_parent"
                android:background="#2fa881"
                />
            <TextView
                android:layout_centerVertical="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="50dp"
                android:text="@string/login"
                android:textColor="#FFCC00"
                android:textSize="18sp"
                android:textStyle="bold"
                />
        </RelativeLayout>
        <LinearLayout
            android:layout_marginTop="10dp"
            android:paddingStart="50dp"
            android:paddingEnd="30dp"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp">
            <android.support.design.widget.TextInputLayout
                android:textColorHint="#c5c5c5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <EditText
                    android:textSize="13sp"
                    android:hint="@string/Username"
                    android:textColor="#2fa881"
                    android:id="@+id/et_username"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPersonName"
                    android:background="@drawable/selector_bg_edit"
                    android:textCursorDrawable="@drawable/bg_input_cursor"
                    android:paddingBottom="2dp"
                    />
            </android.support.design.widget.TextInputLayout>
        </LinearLayout>
            <LinearLayout
                android:paddingStart="50dp"
                android:paddingEnd="30dp"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="50dp">
                <android.support.design.widget.TextInputLayout
                    android:textColorHint="#c5c5c5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <EditText
                        android:textSize="13sp"
                        android:hint="@string/Password"
                        android:textColor="#2fa881"
                        android:id="@+id/et_password"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:inputType="textPassword"
                        android:background="@drawable/selector_bg_edit"
                        android:textCursorDrawable="@drawable/bg_input_cursor"
                        android:paddingBottom="2dp"
                        />
                </android.support.design.widget.TextInputLayout>
            </LinearLayout>
            <RelativeLayout
                android:layout_marginTop="25dp"
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="60dp">
                <Button
                    android:id="@+id/bt_go"
                    android:background="@drawable/bt_shape"
                    android:stateListAnimator="@drawable/state_list_animator_z"
                    android:layout_width="150dp"
                    android:layout_height="50dp"
                    android:text="@string/go"
                    android:textColor="#d3d3d3"
                    >
                </Button>
            </RelativeLayout>
            <TextView
                android:layout_marginTop="5dp"
                android:layout_gravity="center_horizontal"
                android:textColor="#9a9a9a"
                android:textSize="12sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/forgot_your_password"
                />
        </LinearLayout>
        </android.support.v7.widget.CardView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        android:src="@drawable/plus"
        android:transitionName="loginFab"
        android:layout_alignTop="@id/cv"
        android:layout_marginTop="25dp"
        android:layout_alignEnd="@id/cv"
        android:layout_marginEnd="-20dp"
        />

</RelativeLayout>
Tags: , , , , , , , , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)