androidandroid-togglebutton

How to move the image inside the toggle button next to the text?


enter image description here

I'm making a toggle button that changes the unit as the button is pressed. I put an image on the toggle button.

I used the drawableLeft property to put an image on the toggle button. (The image inside the toggle button is a temporary image.)

However, this property is attached to the far left side of the button and cannot be moved next to the text.

There is a drawablePadding property, but the text is moving, and the image and text are not centered.

There is an icon and iconGravity property inside the material button, which is possible, but These properties do not apply to ToggleButton.

Is there no way?

<ToggleButton
            android:id="@+id/unit"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:background="?android:selectableItemBackground"
            android:drawableLeft="@drawable/ic_add_routine"
            android:textOff="kg"
            android:textOn="lbs"
            android:textSize="14dp"
            android:layout_weight="1"/>

Solution

  • Please check this (Updated):

    <ToggleButton
        android:id="@+id/unit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="?android:selectableItemBackground"
        android:textOff="kg"
        android:textOn="lbs"
        android:paddingLeft="20dp"
        android:drawableStart="@drawable/ic_add_routine"
        android:drawableLeft="@drawable/ic_add_routine"
        android:gravity="left|center_vertical"/>
    

    Output: enter image description here