Design sketch:
1. UI Interface Design
Using Relative Layout layout, mainly about the design of the middle input account and password.
Two Linear Layouts are used to adjust the position by adding controls to them.
The gray line is implemented through the control View.
The image of the delete button is hidden first, and it will be displayed naturally if the data is input.
android:visibility="invisible"There are also style s and color s that you add yourself.
button.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--Setting Background Colors-->
<solid android:color="#2634c2" />
<!--Setting fillet-->
<corners android:radius="10dip" />
<stroke android:width="1dp" android:color="#4e4d56" />
</shape>color.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#5c5f6c</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="colorButton">#2634c2</color>
<color name="background">#ddefeeee</color>
</resources>
style.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimaryDark</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="MyEditText" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">@android:color/darker_gray</item>
<item name="colorControlActivated">@android:color/darker_gray</item>
</style>
<style name="MyCheckBox" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">@android:color/darker_gray</item>
<item name="colorControlActivated">@android:color/darker_gray</item>
</style>
</resources>
UI interface code:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="@+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="50dp"
android:layout_centerHorizontal="true"
app:srcCompat="@drawable/dragon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="170dp"
android:text="Shuangmu Feilin, Tiantian Mind"
android:textSize="20dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_marginTop="230dp"
android:background="@color/background"
>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="@drawable/user"
android:layout_marginLeft="40dp"
android:layout_marginRight="5dp"
/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginRight="3dp"
android:layout_marginLeft="5dp"
android:background="#979595"
/>
<EditText
android:id="@+id/user"
android:layout_width="290dp"
android:layout_height="50dp"
android:layout_marginLeft="8dp"
android:background="@null"
android:hint="Input account..."
android:textSize="14sp"
android:theme="@style/MyEditText"
/>
<ImageView
android:id="@+id/delete"
android:layout_width="25dp"
android:layout_height="35dp"
android:src="@drawable/delete"
android:layout_marginRight="20dp"
android:visibility="invisible"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_marginTop="270dp"
android:id="@+id/linearLayout"
android:background="@color/background"
>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="@drawable/password"
android:layout_marginLeft="40dp"
android:layout_marginRight="5dp"
/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginRight="3dp"
android:layout_marginLeft="5dp"
android:background="#979595"
/>
<EditText
android:id="@+id/pssword"
android:layout_width="290dp"
android:layout_height="50dp"
android:layout_marginLeft="8dp"
android:background="@null"
android:hint="Input password..."
android:inputType="textPassword"
android:textSize="14sp"
android:theme="@style/MyEditText"
/>
<ImageView
android:id="@+id/delete1"
android:layout_width="25dp"
android:layout_height="35dp"
android:src="@drawable/delete"
android:layout_marginRight="20dp"
android:visibility="invisible"
/>
</LinearLayout>
<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/linearLayout"
android:layout_marginEnd="39dp"
android:layout_marginRight="39dp"
android:layout_marginTop="20dp"
android:text="Keep account number and password in mind"
android:textColor="@color/colorPrimary"
android:theme="@style/MyCheckBox"
/>
<Button
android:id="@+id/login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="400dp"
android:background="@drawable/button"
android:gravity="center"
android:onClick="login"
android:text="Sign in"
android:textColor="@android:color/white"
android:textSize="20dp" />
</RelativeLayout>
2. Logical Realization
Hide the top blue box of the application:
getSupportActionBar().hide();
Create a new SharedPreferences object in the onCreate() function to store and read data.
mSp = this.getSharedPreferences("config", this.MODE_PRIVATE);The main purpose is to acquire the control and realize the logic of hiding and deleting the control and realizing the deletion.
addTextChangedListener() gets the input status of EditText and responds accordingly.
private void initView() {
mUser = findViewById(R.id.user);
mPssword = findViewById(R.id.pssword);
mLogin = findViewById(R.id.login);
mRememberInfo = findViewById(R.id.checkBox);
mDelete = findViewById(R.id.delete);
mDelete1 = findViewById(R.id.delete1);
mDelete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mUser.setText("");
}
});
mDelete1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mPssword.setText("");
}
});
mUser.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if (s.length() > 0) {
//Display Clear Button
mDelete.setVisibility(View.VISIBLE);
} else {
//Hidden Clear Button
mDelete.setVisibility(View.INVISIBLE);
}
}
@Override
public void afterTextChanged(Editable s) {
}
});
mPssword.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if (s.length() > 0) {
//Display Clear Button
mDelete1.setVisibility(View.VISIBLE);
} else {
//Hidden Clear Button
mDelete1.setVisibility(View.INVISIBLE);
}
}
@Override
public void afterTextChanged(Editable s) {
}
});
}Logical implementation of login button:
TextUtils.isEmpty() detects whether the string is empty.
If the check box for remembering the account and password is selected, the input is saved in the file.
putString() needs keys and values. Value is the data we need to store. key is used to find the corresponding data. In what order the data is stored, it needs to be read out in what order.
if(mRememberInfo.isChecked()) {
SharedPreferences.Editor editor = mSp.edit();
editor.putString("user", user);
editor.putString("password", password);
editor.commit();
} public void login(View view) {
String user = mUser.getText().toString().trim();
String password = mPssword.getText().toString().trim();
if(TextUtils.isEmpty(user) || TextUtils.isEmpty(password)) {
Toast.makeText(MainActivity.this, "Account and password cannot be empty!", Toast.LENGTH_SHORT).show();
}
else {
if("10086".equals(user) && "10010".equals(password)) {
if(mRememberInfo.isChecked()) {
SharedPreferences.Editor editor = mSp.edit();
editor.putString("user", user);
editor.putString("password", password);
editor.commit();
}
Toast.makeText(MainActivity.this,"Login successfully!", Toast.LENGTH_SHORT).show();
}
else {
SharedPreferences.Editor editor = mSp.edit();
editor.putString("user", "");
editor.putString("password", "");
editor.commit();
Toast.makeText(MainActivity.this,"Login failed!", Toast.LENGTH_SHORT).show();
}
}
}If the box for remembering the account and password is selected, the next login will show the account and password after the exit of app, provided that the account and password entered last time are correct.
public void restoreInfor() {
String user = mSp.getString("user", "");
String pwd = mSp.getString("password", "");
mUser.setText(user);
mPssword.setText(pwd);
}