Why is there is strange padding/margin around toggle button?

Question

It's a weird toggle button. As you can see in the picture I did not set any margin/padding, but it just has a small 2dp of margin/padding around the toggle button. I want to align it to right with the button group above, how should I do it?

<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|end"
            android:layout_margin="20dp"
            android:clipToPadding="false"
            android:orientation="vertical">

            <co.ceryle.segmentedbutton.SegmentedButtonGroup
                android:id="@+id/dynamic_drawable_group"
                android:layout_width="150dp"
                android:layout_height="30dp"
                android:elevation="2dp"
                app:sbg_animateSelector="fastOutSlowIn"
                app:sbg_animateSelectorDuration="400"
                app:sbg_backgroundColor="@color/white"
                app:sbg_position="0"
                app:sbg_radius="2dp"
                app:sbg_rippleColor="#42bfcc"
                app:sbg_selectorColor="#42bfcc">

                <co.ceryle.segmentedbutton.SegmentedButton
                    android:id="@+id/left_button"
                    android:layout_width="75dp"
                    android:layout_height="30dp"
                    android:layout_weight="1"
                    app:sb_drawableGravity="right"
                    app:sb_drawablePadding="0dp"
                    app:sb_drawableTint="@color/white"
                    app:sb_drawableTint_onSelection="@color/black"
                    app:sb_text="Normal"
                    app:sb_textColor="#42bfcc"
                    app:sb_textColor_onSelection="@color/white"
                    app:sb_textGravity="center"
                    app:sb_textSize="17sp" />

                <co.ceryle.segmentedbutton.SegmentedButton
                    android:id="@+id/right_button"
                    android:layout_width="75dp"
                    android:layout_height="30dp"
                    android:layout_weight="1"
                    app:sb_drawableGravity="right"
                    app:sb_drawableTint="@color/white"
                    app:sb_drawableTint_onSelection="@color/black"
                    app:sb_text="Satellite"
                    app:sb_textColor="#42bfcc"
                    app:sb_textColor_onSelection="@color/white"
                    app:sb_textSize="17sp" />
            </co.ceryle.segmentedbutton.SegmentedButtonGroup>

            <ToggleButton
                android:id="@+id/btn_streetview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:minEms="0"
                android:minHeight="0dp"
                android:minLines="0"
                android:minWidth="0dp"
                android:textOff="StreetView Off"
                android:textOn="StreetView On"
                android:textSize="17sp"
                android:theme="@style/toggle"
                android:visibility="visible" />


        </LinearLayout>

In the code I did not add any margin or padding. Couldn't figure out why there is that.

@pskink use background drawables would completely change the look of the toggle button, I want to preserve the look of the toggle button. — MarkL, Aug 08 '18 at 17:29
ok, why would you want to change the "natural" padding set by device designers? in this case your app would look strange compared to other apps — pskink, Aug 08 '18 at 17:50
@grrigore i try setting the padding and margin to 0dp but it still exisits — MarkL, Aug 08 '18 at 18:05
@MarkLiang this is because the background images have that "padding" (empty space surrounding the content) - if you for testing add `android:background="#f00"` you will see the real `ToggleButton` bounds — pskink, Aug 08 '18 at 18:06
@pskink the reason why I want to change the padding is because I want to align the toggle button to the right, with the button group above it. Thx, I'll try setting the background and try — MarkL, Aug 08 '18 at 18:18

grrigore · Accepted Answer · 2018-08-08T18:18:41.200

That is the default padding for a ToggleButton. However, I managed to obtain this layout by adding android:background="@null" or android:background="@android:color/transparent".

This is the code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|end"
    android:layout_margin="20dp"
    android:clipToPadding="false"
    android:orientation="vertical">

    <co.ceryle.segmentedbutton.SegmentedButtonGroup
        android:id="@+id/dynamic_drawable_group"
        android:layout_width="150dp"
        android:layout_height="30dp"
        android:elevation="2dp"
        app:sbg_animateSelector="fastOutSlowIn"
        app:sbg_animateSelectorDuration="400"
        app:sbg_backgroundColor="@color/white"
        app:sbg_position="0"
        app:sbg_radius="2dp"
        app:sbg_rippleColor="#42bfcc"
        app:sbg_selectorColor="#42bfcc">

        <co.ceryle.segmentedbutton.SegmentedButton
            android:id="@+id/left_button"
            android:layout_width="75dp"
            android:layout_height="30dp"
            android:layout_weight="1"
            app:sb_drawableGravity="right"
            app:sb_drawablePadding="0dp"
            app:sb_drawableTint="@color/white"
            app:sb_drawableTint_onSelection="@color/black"
            app:sb_text="Normal"
            app:sb_textColor="#42bfcc"
            app:sb_textColor_onSelection="@color/white"
            app:sb_textGravity="center"
            app:sb_textSize="17sp" />

        <co.ceryle.segmentedbutton.SegmentedButton
            android:id="@+id/right_button"
            android:layout_width="75dp"
            android:layout_height="30dp"
            android:layout_weight="1"
            app:sb_drawableGravity="right"
            app:sb_drawableTint="@color/white"
            app:sb_drawableTint_onSelection="@color/black"
            app:sb_text="Satellite"
            app:sb_textColor="#42bfcc"
            app:sb_textColor_onSelection="@color/white"
            app:sb_textSize="17sp" />
    </co.ceryle.segmentedbutton.SegmentedButtonGroup>

    <ToggleButton
        android:id="@+id/btn_streetview"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@null"
        android:textOff="StreetView Off"
        android:textOn="StreetView On"
        android:textSize="17sp"
        android:theme="@style/toggle"
        android:visibility="visible" />
</LinearLayout>

I think these changes into the code might change the behaviour of your ToggleButton. Take a look at this answer for more.

LE: Follow this tutorial here to create a custom ToggleButton.

yeah, but setting the backrground to null would erase the orignal look of the toggle button(button with a thin indicator in the bottom). Thx though, I set the toggle button with a longer hardcoded width to make it look align... — MarkL, Aug 08 '18 at 18:21
@MarkLiang have a look at the tutorial in the answer. I think you can customize that too. — grrigore, Aug 08 '18 at 18:25

score 0 · Answer 2 · answered Aug 08 '18 at 17:35

0

It's strange, but if you see this in various devices and android apis then the only solution (although last solution) is to set negative margins:

android:layout_marginStart="-2dp"
android:layout_marginEnd="-2dp"
android:layout_marginTop="-2dp"
android:layout_marginBottom="-2dp"

answered Aug 08 '18 at 17:35

but I'm not sure if the offset is 2dp in all devices...what if some devices is off by like 4dp? [update:] i try setting negative margins, the weird margin/padding still exists – MarkL Aug 08 '18 at 17:38
That's why you have to test it in many devices and also apis. It is not uncommon behavior. The fab also has a problem like that in older android versions. – Aug 08 '18 at 17:40

Why is there is strange padding/margin around toggle button?

2 Answers2