Samir
Samir

Reputation: 3167

Drawing a square layout inside a circle

I am trying to make a relative layout bounded within a circle i.e the relative layout should be like the square shown in the figure below.

I am trying to set width and height of the layout as:

√((diameter)²/2) which is about 70 %

square inside a circle
(source: yogaflavoredlife.com)

public class SquareLayout extends RelativeLayout {
    public SquareLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int originalWidth = MeasureSpec.getSize(widthMeasureSpec);
        int originalHeight = MeasureSpec.getSize(heightMeasureSpec);
        int required = Math.min(originalWidth, originalHeight) * 7 / 10;

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(required, required);
    }
}

What I am getting is a rectangular layout instead of square layout:

Can anyone guide me where I am going wrong?

Sample usage:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <com.example.widget.SquareLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#F55C5C">

    </com.example.widget.SquareLayout>

</RelativeLayout>

Upvotes: 8

Views: 1286

Answers (1)

Samir
Samir

Reputation: 3167

Here's how I got the solution. First I created a square frame to hold all the layouts.

public class SquareFrame extends FrameLayout {
    public SquareFrame(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int originalWidth = MeasureSpec.getSize(widthMeasureSpec);
        int originalHeight = MeasureSpec.getSize(heightMeasureSpec);
        int required = Math.min(originalWidth, originalHeight);

        super.onMeasure(
            MeasureSpec.makeMeasureSpec(required, MeasureSpec.EXACTLY),
            MeasureSpec.makeMeasureSpec(required, MeasureSpec.EXACTLY));
    }
}

Then inserted all layouts within that square frame.

<com.example.widget.SquareFrame 
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#5CF5FC">

    <com.example.widget.SquareLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#F55C5C">

    </com.example.widget.SquareLayout>

</com.example.widget.SquareFrame>

Here is what I got a square, not a rectangle.

Upvotes: 1

Related Questions