Center in parent is not working for custom relative layout

Question

I'm trying to create custom layout "SquareBox" based on relative layout to hold a ImageView in center. And this custom layout will always be in square size (depend on ImageView's height and width).

protected void onMeasure(int width, int height) {
    super.onMeasure(width, height);
    int measuredWidth = getMeasuredWidth();
    int measuredHeight = getMeasuredHeight();
    int size;
    if (measuredWidth > measuredHeight) {
        size = measuredWidth;
    } else {
        size = measuredHeight;
    }
    setMeasuredDimension(size, size);
}

Here is my layout code:

  <com.example.tools.SquareBox
        android:id="@+id/square_box"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@android:color/darker_gray">

    <ImageView
        android:id="@+id/canvas_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        tools:src="@drawable/demo_image" />
</com.example.tools.SquareBox>

It is working fine but the image-view is not in center of this custom view. I've tried following: ->android:layout_centerInParent="true" for ImageView.

->android:gravity="center" for "SquareBox".

->Adding CENTER_IN_PARENT programmatically to ImageView in SquareBox's onMeasure method.

But nothing is working. What am i missing here?

Answer 1

I have emulated the square box behavior in another way. I think it's a workaround and It may be not the best solution but it works. I would like to know better and cleaner solution.

Layout File:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

    <RelativeLayout
        android:id="@+id/square_box_holder"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="0dp"
        android:layout_weight="3">

        <View
            android:id="@+id/square_box"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_centerInParent="true"
            android:background="@android:color/darker_gray" />


        <ImageView
            android:id="@+id/canvas_image"
            style="@style/CanvasImageStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_margin="0dp"
            android:adjustViewBounds="true"
            tools:src="@drawable/demo_image2" />

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </LinearLayout>
</LinearLayout>

Code to resize the view:

 squareImageView.setImageBitmap(getResultBitmap());
            squareBoxHolder.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    squareBoxHolder.getViewTreeObserver().removeOnPreDrawListener(this);
                    Log.i(TAG, "onPreDraw: squareBoxHolder");
                    squareBoxHolderSize = new Point(squareBoxHolder.getMeasuredWidth(), squareBoxHolder.getMeasuredHeight());
                    return true;
                }
            });
            squareImageView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    squareImageView.getViewTreeObserver().removeOnPreDrawListener(this);
                    Log.i(TAG, "onPreDraw: squareImageView");
                    int imageWidth = squareImageView.getMeasuredWidth();
                    int imageHeight = squareImageView.getMeasuredHeight();
                    int size;
                    ViewGroup.LayoutParams layoutParams = squareImageView.getLayoutParams();
                    if (imageWidth > imageHeight) {
                        if (imageWidth > squareBoxHolderSize.y) {
                            size = squareBoxHolderSize.y;
                            layoutParams.width = size;
                            squareImageView.setLayoutParams(layoutParams);
                        } else {
                            size = imageWidth;
                        }
                    } else {
                        if (imageHeight > squareBoxHolderSize.x) {
                            size = squareBoxHolderSize.x;
                            layoutParams.height = size;
                            squareImageView.setLayoutParams(layoutParams);
                        } else {
                            size = imageHeight;
                        }
                    }

                    layoutParams = squareBox.getLayoutParams();
                    layoutParams.height = size;
                    layoutParams.width = size;
                    squareBox.setLayoutParams(layoutParams);
                    return true;
                }
            });

Answer 2

Change your layout to this (change layout_width to match_parent) :

<com.example.tools.SquareBox
        android:id="@+id/square_box"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@android:color/darker_gray">

    <ImageView
        android:id="@+id/canvas_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        tools:src="@drawable/demo_image" />
</com.example.tools.SquareBox>

And change your custom layout to this:

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

    int size;
    if(widthMode == MeasureSpec.EXACTLY && widthSize > 0){
      size = widthSize;
    }
    else if(heightMode == MeasureSpec.EXACTLY && heightSize > 0){
      size = heightSize;
    }
    else{
      size = widthSize < heightSize ? widthSize : heightSize;
    }

    int finalMeasureSpec = MeasureSpec.makeMeasureSpec(size, MeasureSpec.EXACTLY);
    super.onMeasure(finalMeasureSpec, finalMeasureSpec);
  }

Answer 3

Try this:-android:layout_gravity="center_horizontal"