Home » Android » layout – How to center a Custom View on Android?

layout – How to center a Custom View on Android?

Posted by: admin June 15, 2020 Leave a comment

Questions:

I am trying to center the view for different resolutions using the layout, and gravity properties, but it’s not working. Is there a way to make the custom view center horizontally across different resolutions?

Do I need to do something on the onMeasure method ?

Here is one of the things I am trying right now, the view is to the left of the center..

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <RelativeLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="50dp"
        android:gravity="center_horizontal">

        <com.application.app.ui.CustomView
            android:id="@+id/ivCoinAnimation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"/>


    </RelativeLayout>


</FrameLayout>
How to&Answers:

Assuming you have a View inside a layout like FrameLayout, you would set View‘s layout_gravity to center. Don’t mix it up with gravity!

Also, it may indeed be necessary to override onMeasure(). Read it’s documentation to decide if you need to override it. If you do, be aware that the parameters are encoded with View.MeasureSpec.

Answer:

You should implement in your custom View class

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

In it you should calculate height and width for your custom View.
If you need to central your custom View in parent layout – make sure that:

  • custom View height != parent View height

AND/OR

  • custom View width != parent View width

For example:

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

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        final int height = mCircleRadius * 2; //calculated
        final int width = getMeasuredWidth(); //parent width

        setMeasuredDimension(width, height);
    }

Now you can use next for your custom View:

android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

enter image description here

P.S. You see that android:layout_centerHorizontal="true" gives no effect. The reason is using parent width in onMeasure instead of calculating exact width.

Answer:

Here is an example how to center two buttons on the screen. This should work with your CustomView, too.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_vertical">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <Button android:text="Button" android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
        <Button android:text="Button" android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>

    </LinearLayout>
</LinearLayout>