Toggle Button With Text Below

Question

How to make a toggle button with text below? What I want is

This is my current code

<ToggleButton
 android:id="@+id/button_check_in"
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:background="@drawable/button_check_in"
 android:checked="false"
 android:text=""
 android:textOff=""
 android:textOn=""
 android:layout_marginRight="50dp"
 />

<--button_check_in.xml-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_tick_blue"
      android:state_checked="true"/>
<item android:drawable="@drawable/ic_tick_black"
      android:state_checked="false"/>
</selector>

Answer 1

You can try this.

<ToggleButton
    android:id="@+id/button_check_in"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:checked="false"
    android:drawableTop="@drawable/button_check_in"
    android:text=""
    android:textAllCaps="false"
    android:textOff="Follow"
    android:textOn="Followed" />

Answer 2

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    <ToggleButton
        android:id="@+id/button_check_in"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:checked="false"
        android:text=""
        android:textOff=""
        android:textOn=""
        android:layout_marginRight="50dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="Like"enter code here
        android:gravity="center"
        android:layout_gravity="center|start"/>

    </LinearLayout>

Answer 3

It doesn't work with toggle button.

You have to work with the Imageviews by implemnting boolean flags for each clicks.

If you are looking for a Menu/Navigation Please look into it BottomNavigationView

hope this helps