TextView below ToggleButton inside RadioGroup

Question

As the title says, I need to align the text just below the ToggleButton which are under a RadioGroup.

I want the status text below each circle. I tried with combination of RelativeLayout etc. but didn't worked out.

Here's my layout part:

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        android:paddingTop="10dp">

        <RadioGroup
            android:id="@+id/toggleGroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">


            <ToggleButton
                android:id="@+id/toggleOnlineStatus"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:background="@drawable/style_toggle_button"
                android:checked="true"
                android:textOff=""
                android:textOn="" />

            <TextView
                android:id="@+id/tvOnline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/toggleOnlineStatus"
                android:layout_centerHorizontal="true"
                android:text="Away" />

            <ToggleButton
                android:id="@+id/toggleAwayStatus"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:background="@drawable/style_toggle_button"
                android:textOff=""
                android:textOn="" />

            <TextView
                android:id="@+id/tvAway"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="Away" />

            <ToggleButton
                android:id="@+id/toggleDNDStatus"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:background="@drawable/style_toggle_button"
                android:textOff=""
                android:textOn="" />

            <TextView
                android:id="@+id/tvDND"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="DND" />

            <ToggleButton
                android:id="@+id/toggleXAStatus"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:background="@drawable/style_toggle_button"
                android:textOff=""
                android:textOn="" />

            <TextView
                android:id="@+id/tvXA"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="XA" />


        </RadioGroup>


    </LinearLayout>

Answer 1

You can use android:drawableTop attribute in ToggleButton element:

        <ToggleButton
            android:id="@+id/toggleOnlineStatus"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/style_toggle_button"
            android:checked="true"
            android:textOff="Online"
            android:textOn="Online" />

Answer 2

You can consider using a layout like below instead of add TextView widgets inside RadioGroup with orientation horizontal.

Take a look at this example and see if it is what you are looking for.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingTop="10dp">


    <RadioGroup
        android:id="@+id/toggleGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ToggleButton
            android:id="@+id/toggleOnlineStatus"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:background="@drawable/add"
            android:checked="true"
            android:layout_margin="12dp"
            android:textOff=""
            android:textOn="" />

        <ToggleButton
            android:id="@+id/toggleAwayStatus"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:background="@drawable/add"
            android:layout_margin="12dp"
            android:textOff=""
            android:textOn="" />

        <ToggleButton
            android:id="@+id/toggleDNDStatus"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:background="@drawable/add"
            android:layout_margin="12dp"
            android:textOff=""
            android:textOn="" />

        <ToggleButton
            android:id="@+id/toggleXAStatus"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:background="@drawable/add"
            android:layout_margin="12dp"
            android:textOff=""
            android:textOn="" />

    </RadioGroup>

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

        <TextView
            android:id="@+id/tvOnline"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Online" />

        <TextView
            android:id="@+id/tvAway"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Away" />

        <TextView
            android:id="@+id/tvDND"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Away" />

        <TextView
            android:id="@+id/tvXA"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Away" />

    </LinearLayout>

This display is below.