Why is my android custom view not square?

Question

I created a custom view to display a gameboard for a game I'm developing. The gameboard needs to be a square at all times. So with and height should be the same. I followed this tutorial to achieve this.

I added the following code to my custom view:

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

    int width = getMeasuredWidth();
    int height = getMeasuredHeight();
    int widthWithoutPadding = width - getPaddingLeft() - getPaddingRight();
    int heigthWithoutPadding = height - getPaddingTop() - getPaddingBottom();

    int maxWidth = (int) (heigthWithoutPadding * RATIO);
    int maxHeight = (int) (widthWithoutPadding / RATIO);

    if (widthWithoutPadding > maxWidth) {
        width = maxWidth + getPaddingLeft() + getPaddingRight();
    } else {
        height = maxHeight + getPaddingTop() + getPaddingBottom();
    }

    setMeasuredDimension(width, height);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    Paint p = new Paint();
    p.setStyle(Paint.Style.STROKE);
    p.setStrokeWidth(3);
    canvas.drawRect(0, 0, getMeasuredWidth() - 1, getMeasuredHeight() - 1, p);
}

The layout with my custom view looks like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <view
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        class="com.peerkesoftware.nanograms.controls.GameBoard"
        android:id="@+id/view"
        android:background="@android:color/holo_purple"/>

</RelativeLayout>

The square that is drawn in the onDraw method is always a square. That works fine.

In the layout I add the custom view and give the view a background color. When I display it on a device in portrait mode everything works fine and the background color is filling up the square I draw in the onDraw method.

When I switch the device to landscape mode the square is still a square, but the area of the background color is bigger then that. It's has the same height, but has more width. But I have no idea why. The getMeasuredWidth() and getMeasuredHeight() methods return the correct values. How can it be that the view is still bigger then that?

Answer 1

For some reason your view doesn't work in RelativeLayout. For landscape orientation measurement ends up with following constraints (on my phone):

width = MeasureSpec: EXACTLY 404; height = MeasureSpec: AT_MOST 388

Because of this actual width ends up different than measured width (on my phone measured=388, actual=404). That's why you see background extending beyond your rect. You can check it yourself by adding some logging to onDraw and onMeasure.

Also, respecting measure mode doesn't help, measurement still ends with same result as above.

The solution is to use a different layout. LinearLayout and FrameLayout worked for me. Also it's a good idea to use actual view size in onDraw, with getWidth() and getHeight().

If you really need the RelativeLayout, you can add a child FrameLayout to hold your view like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <view
            android:id="@+id/view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            class="com.peerkesoftware.nanograms.controls.GameBoard"
            android:background="@android:color/holo_purple" />
    </FrameLayout>
</RelativeLayout>