Align checkbox button to center of view

Question

I'm trying to create custom checkboxes and I need to align it to the center of the checbox that will have its dynamic size according to the available width. Can someone tell me how I can do this? Is there something missing that I missed?

layout

<androidx.constraintlayout.widget.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="">

<TextView
    android:id="@+id/tv_amount_tickets"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="32dp"
    android:layout_marginEnd="16dp"
    android:text="Test"
    android:textSize="16sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<EditText
    android:id="@+id/til_amount_tickets"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:hint="test"
    android:imeOptions="actionDone"
    android:inputType="number"
    android:maxLines="1"
    app:layout_constraintEnd_toEndOf="@+id/tv_amount_tickets"
    app:layout_constraintStart_toStartOf="@+id/tv_amount_tickets"
    app:layout_constraintTop_toBottomOf="@+id/tv_amount_tickets" />

<TextView
    android:id="@+id/tv_ticket"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:text="test"
    android:textSize="16sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="@+id/til_amount_tickets"
    app:layout_constraintStart_toStartOf="@+id/til_amount_tickets"
    app:layout_constraintTop_toBottomOf="@+id/til_amount_tickets" />

<androidx.appcompat.widget.AppCompatCheckBox
    android:id="@+id/checkBox"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:background="@drawable/bg_checkbox_selector"
    android:button="@drawable/checkbox_star_outline_selector"
    android:foregroundGravity="center"
    android:gravity="center"
    android:minHeight="48dp"
    app:layout_constraintEnd_toStartOf="@+id/checkBox2"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tv_ticket" />

<androidx.appcompat.widget.AppCompatCheckBox
    android:id="@+id/checkBox2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:background="@drawable/bg_checkbox_selector"
    android:button="@drawable/checkbox_star_outline_selector"
    android:foregroundGravity="center"
    android:gravity="center"
    android:minHeight="48dp"
    app:layout_constraintEnd_toStartOf="@+id/checkBox3"
    app:layout_constraintStart_toEndOf="@+id/checkBox"
    app:layout_constraintTop_toBottomOf="@+id/tv_ticket" />

<androidx.appcompat.widget.AppCompatCheckBox
    android:id="@+id/checkBox3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:background="@drawable/bg_checkbox_selector"
    android:button="@drawable/checkbox_star_outline_selector"
    android:foregroundGravity="center"
    android:gravity="center"
    android:minHeight="48dp"
    app:layout_constraintEnd_toStartOf="@+id/checkBox4"
    app:layout_constraintStart_toEndOf="@+id/checkBox2"
    app:layout_constraintTop_toBottomOf="@+id/tv_ticket" />

<androidx.appcompat.widget.AppCompatCheckBox
    android:id="@+id/checkBox4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp"
    android:background="@drawable/bg_checkbox_selector"
    android:button="@drawable/checkbox_star_outline_selector"
    android:foregroundGravity="center"
    android:gravity="center"
    android:minHeight="48dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/checkBox3"
    app:layout_constraintTop_toBottomOf="@+id/tv_ticket" />

icon button selector

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
  <item android:drawable="@drawable/ic_star_outline"
    android:state_checked="false" />
  <item android:drawable="@drawable/ic_star_outline_white"
    android:state_checked="true"/>
  <item android:drawable="@drawable/ic_star_outline"/>
</selector>

background selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/bg_checkbox"
    android:state_checked="false"/>
  <item android:drawable="@drawable/bg_checkbox_selected"
    android:state_checked="true"/>
  <item android:drawable="@drawable/bg_checkbox"/>
</selector>

background

<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
  <corners android:radius="3dp"/>
  <solid android:color="#FFFFFFFF"/>
  <stroke android:width="0.5dp" android:color="#FF8492A6"/>
</shape>

background selected

<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
  <corners android:radius="3dp"/>
  <solid android:color="@color/colorPrimary"/>
  <stroke android:width="0.5dp" android:color="#FF8492A6"/>
</shape>

Hello, try to read this answer, the problem may be the same: https://stackoverflow.com/a/13411359/7507788 — Giorgio Bertolotti, Mar 15 '19 at 17:49
I was able to resolve using ToggleButton instead of Checkbox. Thank you very much. @GiorgioBertolotti — Thomas Marques, Mar 15 '19 at 21:18
Possible duplicate of [Center CheckBox drawable within itself](https://stackoverflow.com/questions/13411288/center-checkbox-drawable-within-itself) — leorleor, Mar 15 '19 at 21:20

score 2 · Answer 1 · answered Mar 15 '19 at 18:11

You can achieve desired effect by making the following changes to your layout:

Wrap each AppCompatCheckBox into RelativeLayout
Move all the ConstraintLayout specific attributes from child to parent, including margins and 0dp width (you will also have to assign IDs to your RelativeLayouts and use them)
Make sure all AppCompatCheckBox width is wrap_content
Assign desired background of AppCompatCheckBox to corresponding RelativeLayout
Make sure each AppCompatCheckBox is layout_centerInParent = "true"

That's about it!

Align checkbox button to center of view

1 Answers1

Linked