Android custom checkbox (or ToggleButton) with numbers inside

Question

I'm writing an app that will have 60 checkboxes, numbered 1-60. My goal is to achieve something like this:

Is there a way to achieve this without having to draw 60 .png files with the number inside? Could I draw only the edges and add the numbers as a text property of the button?

I tried customizing a ToggleButton (got the idea from here)

<ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/toggle_selector"
    android:background="@null"
    android:paddingLeft="10dp"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:textOn="60"
    android:textOff="60" />

toogle_selector.xml

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

but as a result, the text was placed at the right of the button. Is it possible to place the text on top of the image?

Maybe remove the "paddingLeft" item? – Christine Oct 27 '15 at 22:22 — Christine, Oct 27 '15 at 22:22
@Christine, just tried, but didn't make any difference – Lelo Oct 27 '15 at 22:39 — Lelo, Oct 27 '15 at 22:39

score 1 · Accepted Answer · answered Oct 28 '15 at 01:14

You can do it with relative layout with textview on top of Toggle button like this. Replace margins and size as per your need

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background_floating_material_dark"
    tools:context="com.contag.app.fragment.NavDrawerFragment">
    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/toggle_selector"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:textOn="@null"
        android:textOff="@null"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:id="@+id/toggleButton"
        android:layout_marginTop="26dp"
        android:layout_marginStart="156dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="60"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="15sp"
        android:id="@+id/textView"
        android:layout_alignLeft="@+id/toggleButton"
        android:layout_alignTop="@+id/toggleButton"
        android:layout_alignRight="@+id/toggleButton"
        android:layout_alignBottom="@+id/toggleButton"
        android:gravity="center" />
</RelativeLayout>

Android custom checkbox (or ToggleButton) with numbers inside

1 Answers1