/android/butterknife/signup-and-login-activity

We want to see how to design signup and login pages in xml then use Buterknife to bind our views and widgets.

Install Butterknife

1. Login Activity/Page

(a). activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_fitsSystemWindows="true"
    android_scrollbars="none"
    >

    <LinearLayout
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_orientation="vertical"
        android_paddingLeft="25dp"
        android_paddingRight="25dp"
        android_paddingTop="50dp"
        >

        <TextView
            android_layout_width="match_parent"
            android_layout_height="72dp"
            android_layout_marginBottom="25dp"
            android_background="@color/primary"
            android_gravity="center"
            android_text="@string/app_name"
            android_textColor="@color/white"
            android_textSize="@dimen/login_text_size"
            />

        <android.support.design.widget.TextInputLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_layout_marginBottom="8dp"
            android_layout_marginTop="8dp"
            >

            <EditText
                android_id="@+id/et_input_email"
                android_layout_width="match_parent"
                android_layout_height="wrap_content"
                android_hint="@string/email"
                android_inputType="textEmailAddress"
                />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_layout_marginBottom="8dp"
            android_layout_marginTop="8dp"
            >

            <EditText
                android_id="@+id/et_input_password"
                android_layout_width="match_parent"
                android_layout_height="wrap_content"
                android_hint="@string/password"
                android_inputType="textPassword"
                />
        </android.support.design.widget.TextInputLayout>

        <android.support.v7.widget.AppCompatButton
            android_id="@+id/btn_login"
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_layout_marginBottom="25dp"
            android_layout_marginTop="25dp"
            android_padding="12dp"
            android_text="@string/login"
            android_textAllCaps="false"
            />

        <LinearLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_orientation="horizontal"
            >

            <TextView
                android_id="@+id/tv_forgot_password"
                android_layout_width="0dp"
                android_layout_height="wrap_content"
                android_layout_marginBottom="25dp"
                android_layout_weight="1"
                android_gravity="center"
                android_text="@string/forgot_password"
                android_textSize="@dimen/middle"
                />

            <View
                android_layout_width="1dp"
                android_layout_height="match_parent"
                android_layout_marginBottom="25dp"
                android_background="@color/white"
                />

            <TextView
                android_id="@+id/tv_signup"
                android_layout_width="0dp"
                android_layout_height="wrap_content"
                android_layout_marginBottom="25dp"
                android_layout_weight="1"
                android_gravity="center"
                android_text="@string/sign_up"
                android_textSize="@dimen/middle"
                />
        </LinearLayout>

        <LinearLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_orientation="horizontal"
            android_layout_marginTop="50dp"
            >

            <View
                android_layout_width="0dp"
                android_layout_height="1dp"
                android_layout_marginRight="10dp"
                android_layout_weight="1"
                android_background="@color/white"
                android_layout_marginTop="12dp"
                />

            <TextView
                android_layout_width="wrap_content"
                android_layout_height="wrap_content"
                android_text="or"
                android_textColor="@color/iron"
                android_textSize="@dimen/middle"
                android_gravity="center"
                />

            <View
                android_layout_width="0dp"
                android_layout_height="1dp"
                android_layout_marginLeft="10dp"
                android_layout_weight="1"
                android_background="@color/white"
                android_layout_marginTop="12dp"
                />
        </LinearLayout>

        <LinearLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_layout_marginBottom="10dp"
            android_layout_marginTop="10dp"
            android_orientation="horizontal"
            >

            <ImageView
                android_layout_width="0dp"
                android_layout_height="50dp"
                android_layout_weight="1"
                android_src="@mipmap/ic_launcher"
                />

            <ImageView
                android_layout_width="0dp"
                android_layout_height="50dp"
                android_layout_weight="1"
                android_src="@mipmap/ic_launcher"
                />

            <ImageView
                android_layout_width="0dp"
                android_layout_height="50dp"
                android_layout_weight="1"
                android_src="@mipmap/ic_launcher"
                />

            <ImageView
                android_layout_width="0dp"
                android_layout_height="50dp"
                android_layout_weight="1"
                android_src="@mipmap/ic_launcher"
                />

        </LinearLayout>

    </LinearLayout>

</ScrollView>

(b). LoginActivity.java

import android.app.ProgressDialog;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Patterns;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import cn.aaronyi.ameneye.R;

public class LoginActivity extends AppCompatActivity {

    private static final int REQUEST_SIGN_UP = 0;
    @BindView(R.id.et_input_email)
    EditText _emailText;
    @BindView(R.id.et_input_password)
    EditText _passwordText;
    @BindView(R.id.btn_login)
    Button _loginButton;

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

    }

    @Override
    public void onBackPressed() {
//        super.onBackPressed();
        //防止用户关闭MainActivity
        moveTaskToBack(true);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
//        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == REQUEST_SIGN_UP) {
            if (resultCode == RESULT_OK) {
                // TODO: Implement successful signup logic here
                // By default we just finish the Activity and log them in automatically
                this.finish();
            }
        }

    }

    @OnClick(R.id.btn_login)
    public void login() {
        if (!validate()) {
            onLoginFailed();
            return;
        }

        _loginButton.setEnabled(false);
        final ProgressDialog progressDialog = new ProgressDialog(this, R.style.AppTheme_Dark_Dialog);
        progressDialog.setIndeterminate(true);
        progressDialog.setMessage("Authenticating...");
        progressDialog.show();

        String email = _emailText.getText().toString();
        String password = _passwordText.getText().toString();

        new android.os.Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                onLoginSuccess();
                progressDialog.dismiss();
            }
        }, 3000);

    }

    @OnClick(R.id.tv_signup)
    public void signUp() {
        Intent intent = new Intent(this,SignupActivity.class);
        startActivityForResult(intent,REQUEST_SIGN_UP);
    }

    private void onLoginSuccess() {
        _loginButton.setEnabled(true);
        finish();
    }

    private void onLoginFailed() {
        Toast.makeText(this, "Login failed", Toast.LENGTH_SHORT).show();
        _loginButton.setEnabled(true);
    }

    private boolean validate() {
        boolean valid = true;
        String email = _emailText.getText().toString();
        String password = _passwordText.getText().toString();

        if (email.isEmpty() || !Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
            _emailText.setError("enter a valid email address");
            valid = false;
        } else {
            _emailText.setError(null);
        }

        if (password.isEmpty() || password.length() < 6) {
            _passwordText.setError("the password length must be greater than six");
            valid = false;
        } else {
            _passwordText.setError(null);
        }

        return valid;
    }

}

3.Signup Activity/Page

(a). activity_signup.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    
    android_layout_width="fill_parent"
    android_layout_height="fill_parent"
    android_fitsSystemWindows="true"
    android_scrollbars="none"
    >

    <LinearLayout
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_orientation="vertical"
        android_paddingLeft="24dp"
        android_paddingRight="24dp"
        android_paddingTop="56dp">

        <TextView
            android_layout_width="match_parent"
            android_layout_height="72dp"
            android_layout_marginBottom="25dp"
            android_background="@color/primary"
            android_gravity="center"
            android_text="@string/app_name"
            android_textColor="@color/white"
            android_textSize="@dimen/login_text_size"
            />

        <!--  Name Label -->
        <android.support.design.widget.TextInputLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_layout_marginBottom="8dp"
            android_layout_marginTop="8dp">

            <EditText
                android_id="@+id/input_name"
                android_layout_width="match_parent"
                android_layout_height="wrap_content"
                android_hint="Name"
                android_inputType="textCapWords"/>
        </android.support.design.widget.TextInputLayout>

        <!-- Email Label -->
        <android.support.design.widget.TextInputLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_layout_marginBottom="8dp"
            android_layout_marginTop="8dp">

            <EditText
                android_id="@+id/input_email"
                android_layout_width="match_parent"
                android_layout_height="wrap_content"
                android_hint="Email"
                android_inputType="textEmailAddress"/>
        </android.support.design.widget.TextInputLayout>

        <!-- Password Label -->
        <android.support.design.widget.TextInputLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_layout_marginBottom="8dp"
            android_layout_marginTop="8dp">

            <EditText
                android_id="@+id/input_password"
                android_layout_width="match_parent"
                android_layout_height="wrap_content"
                android_hint="Password"
                android_inputType="textPassword"/>
        </android.support.design.widget.TextInputLayout>

        <!-- Signup Button -->
        <android.support.v7.widget.AppCompatButton
            android_id="@+id/btn_signup"
            android_layout_width="fill_parent"
            android_layout_height="wrap_content"
            android_layout_marginBottom="24dp"
            android_layout_marginTop="24dp"
            android_padding="12dp"
            android_text="Create Account"/>

        <TextView
            android_id="@+id/link_login"
            android_layout_width="fill_parent"
            android_layout_height="wrap_content"
            android_layout_marginBottom="24dp"
            android_gravity="center"
            android_text="Already a member? Login"
            android_textSize="16dip"/>

    </LinearLayout>
</ScrollView>

(b). SignupActivity.java

import android.app.ProgressDialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import cn.aaronyi.ameneye.R;

public class SignupActivity extends AppCompatActivity {

    @BindView(R.id.input_name)
    EditText _nameText;
    @BindView(R.id.input_email)
    EditText _emailText;
    @BindView(R.id.input_password)
    EditText _passwordText;
    @BindView(R.id.btn_signup)
    Button _signUpButton;

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

    }

    @OnClick(R.id.btn_signup)
    public void signUp() {

        if (!validate()) {
            onSignupFailed();
            return;
        }

        _signUpButton.setEnabled(false);

        final ProgressDialog progressDialog = new ProgressDialog(SignupActivity.this,
                R.style.AppTheme_Dark_Dialog);
        progressDialog.setIndeterminate(true);
        progressDialog.setMessage("Creating Account...");
        progressDialog.show();

        String name = _nameText.getText().toString();
        String email = _emailText.getText().toString();
        String password = _passwordText.getText().toString();

        // TODO: Implement your own signup logic here.

        new android.os.Handler().postDelayed(
                new Runnable() {
                    public void run() {
                        // On complete call either onSignupSuccess or onSignupFailed
                        // depending on success
                        onSignupSuccess();
                        // onSignupFailed();
                        progressDialog.dismiss();
                    }
                }, 3000);
    }

    @OnClick(R.id.link_login)
    public void toLogin() {
        // Finish the registration screen and return to the Login activity
        finish();
    }

    private void onSignupSuccess() {
        _signUpButton.setEnabled(true);
        setResult(RESULT_OK, null);
        finish();
    }

    private void onSignupFailed() {
        Toast.makeText(getBaseContext(), "Login failed", Toast.LENGTH_LONG).show();

        _signUpButton.setEnabled(true);
    }

    private boolean validate() {
        boolean valid = true;

        String name = _nameText.getText().toString();
        String email = _emailText.getText().toString();
        String password = _passwordText.getText().toString();

        if (name.isEmpty() || name.length() < 3) {
            _nameText.setError("at least 3 characters");
            valid = false;
        } else {
            _nameText.setError(null);
        }

        if (email.isEmpty() || !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
            _emailText.setError("enter a valid email address");
            valid = false;
        } else {
            _emailText.setError(null);
        }

        if (password.isEmpty() || password.length() < 4 || password.length() > 10) {
            _passwordText.setError("between 4 and 10 alphanumeric characters");
            valid = false;
        } else {
            _passwordText.setError(null);
        }

        return valid;
    }

}