Components

Checkbox(Android)

Boxes for checking and unchecking multiple values in forms.

Basic Checkbox

The ThumbprintCheckBox class is used for a simple checkbox with button and text. The button can be checked, unchecked or in an indeterminate state.

basic_checkbox

XML:

<com.thumbtack.thumbprint.views.checkbox.ThumbprintCheckBox
    android:id="@+id/checkbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/checkbox" />

Checked

The checked property indicates if the checkbox is checked.

checked_box

XML:

<com.thumbtack.thumbprint.views.checkbox.ThumbprintCheckBox
    android:id="@+id/checkbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/checkbox" />

Code:

checkbox.isChecked = true

Indeterminate

Indeterminate checkboxes are used when not all items in a field are selected. The isIndeterminate attribute is used to specify that.

indeterminate_checkbox

XML:

<com.thumbtack.thumbprint.views.checkbox.ThumbprintCheckBox
    android:id="@+id/indeterminateCheckbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/indeterminate_checkbox"
    app:isIndeterminate="true" />

Code:

checkbox.isIndeterminate = true

Disabled

Checkboxes can be disabled with the standard Android enabled property.

disabled_checkbox

XML:

<com.thumbtack.thumbprint.views.checkbox.ThumbprintCheckBox
    android:id="@+id/checkboxDisabled"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:enabled="false"
    android:text="@string/checkbox_disabled" />

Code:

checkbox.enabled = false

Error

Checkboxes can visually represent an error state with the isError property.

error_checkbox

XML:

<com.thumbtack.thumbprint.views.checkbox.ThumbprintCheckBox
    android:id="@+id/errorCheckbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/error_checkbox"
    app:isError="true" />

Code:

checkbox.isError = true

Arbitrary Content in Checkbox

You can also have a checkbox with more complex content, such as multiple lines of styled text, images, and other arbitrary content. This is done with the ThumbprintContainerCheckBox class. It implements a horizontal LinearLayout with the checkbox button at the start of the layout.

arbitrary_checkbox

XML:

<com.thumbtack.thumbprint.views.checkbox.ThumbprintContainerCheckBox
    android:id="@+id/singleLine1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="top">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/single_line_top_start" />
    </com.thumbtack.thumbprint.views.checkbox.ThumbprintContainerCheckBox>

You can control the vertical alignment of the button with its content by specifying the android:gravity attribute to ThumbprintContainerCheckBox. The values supported are top, center_vertical and bottom. Additionally, you can set the width and height of the button with the app:button_layout_width and app:button_layout_height attributes, which support either a dimension or the values match_parent or wrap_content. And just like with the simple checkbox, you can specify indeterminate and error states with app:isError and app:isIndeterminate. Specifying app:isError will only render the button as red; the child content will render as normal.