Circular Shape within Rectangle

Question

I have the following drawable being displayed within a rectangular togglebutton:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">

            <solid android:color="@color/cerulean_blue"/>
            <stroke android:color="@android:color/transparent"/>

            <corners
                android:radius="@dimen/number_selection_rounding_radius"/>
        </shape>
    </item>
    <item android:left="10dp" android:right="10dp" android:top="5dp" android:bottom="5dp">
        <shape android:shape="oval">

            <solid android:color="@color/light_background"/>
            <stroke android:color="@android:color/transparent"/>

        </shape>
    </item>
</layer-list>

This produces an oval as the inner shape. I would like to make it a circle regardless of the shape of the view. I have tried specifying various values for the size element within the shape. I understand this should affect the scaling but it has absolutely no effect regarless of the values used.

Is it possible to maintain a perfect circle in this case, or do I need to do this programmatically?

You can make it as perfect circle, just make the top=10dp and bottom=10dp — HAXM, Jan 18 '17 at 05:33

score 0 · Answer 1 · answered Jan 18 '17 at 04:35

I gave up on the rectangular toggle buttons and forced them to be square with this class:

    public class SquareToggleButton extends ToggleButton {
    public SquareToggleButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public SquareToggleButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareToggleButton(Context context) {
        super(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int desiredSize = Math.max(widthSize,heightSize);

        int width;
        int height;

        // Measure Width
        if (widthMode == MeasureSpec.EXACTLY) {
            // Must be this size
            width = widthSize;
        } else if (widthMode == MeasureSpec.AT_MOST) {
            // Can't be bigger than...
            width = Math.min(desiredSize, widthSize);
        } else {
            // Be whatever you want
            width = desiredSize;
        }

        // Measure Height
        if (heightMode == MeasureSpec.EXACTLY) {
            // Must be this size
            height = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
            // Can't be bigger than...
            height = Math.min(desiredSize, heightSize);
        } else {
            // Be whatever you want
            height = desiredSize;
        }

        int side = Math.max(width,height);

        setMeasuredDimension(side, side);
    }
}

Circular Shape within Rectangle

1 Answers1