Preface

Earlier we talked about RadioButton and RadioGroup, which use the properties of the radio button group to achieve the effect of Tab switching at the bottom of WeChat.To keep in mind, today we're going to talk about the second similar control, CheckBox, whose class inheritance relationship, as is customary, is as follows:

public class CheckBox extends CompoundButton
java.lang.Object
   ↳ android.view.View
        ↳ android.widget.TextView
             ↳ android.widget.Button
                  ↳ android.widget.CompoundButton
                       ↳ android.widget.CheckBox

We found that CheckBox has the same inheritance relationship as RadioButton, so CheckBox is also a check box, which we usually call a check box.

Basic Use

Let's show you a piece of code to show the effect.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">
    
    <CheckBox
        app:layout_constraintHorizontal_chainStyle="packed"
        android:id="@+id/cb_hobby"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        app:layout_constraintRight_toLeftOf="@id/tv_hobby"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_hobby"
        android:layout_width="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/cb_hobby"
        android:text="Swimming"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

Here we use ConstraintLayout, described in the previous blog post, to achieve the effect that CheckBox and TextView together center the entire parent layout.If you're not familiar with how this constraint layout works, check out the previous posts Layout "The Big Killer" - ConstraintLayout

The result is shown as follows:

If the checked property of CheckBox is set to true by default, it means that it is selected by default. How do I get this control selected in the page?By setting up the listener, of course, the code is attached here:

/**
 * Demonstrate usage of CheckBox, etc.
 *
 * @author xmkh
 */
public class CheckActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_check);
        CheckBox cbHobby = findViewById(R.id.cb_hobby);
        final TextView tvHobby = findViewById(R.id.tv_hobby);
        //Set Check Status Monitor for Checkboxes
        cbHobby.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {
                tvHobby.setText(isChecked ? "Selected" : "Unchecked");
            }
        });
    }
}

The result is shown as follows:

practice

In practice, we don't typically use our own style, just as we set a UI style for RadioButton.Usually in the registration interface you will always see a check box for whether or not you agree to the User Registration Agreement. What can we do if we want to implement the style shown below?

Let's follow this example to achieve an interface layout.

We are going to check and uncheck two pictures ic_login_agreement_check.png and ic_login_agreement_uncheck.png

Create a new style file under res/drawable/folder, selector_cb_login_agreement.xml, with style file code attached

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/ic_login_agreement_check" android:state_checked="true"/>
 <item android:drawable="@mipmap/ic_login_agreement_uncheck" />
</selector>

Set the Button style of CheckBox, complete code as follows:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".RegisterCheckActivity">
    <!--Main Settings CheckBox Of button Style is customized selector_cb_login_agreement that will do-->
    <CheckBox
        android:id="@+id/cb_login_agreement"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:button="@drawable/selector_cb_login_agreement"
        app:layout_constraintEnd_toStartOf="@+id/tv_login_agreement"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:textColor="#A6600C"
        android:id="@+id/tv_login_agreement"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I have read and agree to the XX User Registration Agreement"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="@id/cb_login_agreement"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/cb_login_agreement"
        app:layout_constraintTop_toTopOf="@id/cb_login_agreement" />
</android.support.constraint.ConstraintLayout>

The final result is as follows:

epilogue

Now that's the end of our CheckBox sharing. I hope that your little buddies will be able to think and practice more while learning the basic Android controls.Keep it up, I'm sure you'll change from a little white to a big bull!Follow our WXGZH: Let's watch the flowers and learn more together.