Search code examples
androidandroid-layoutandroid-relativelayout

Relative Layout: How to center view in the remaining space to the right of an element?


I am trying to center my 'SKIP' button in the center of the remaining space to the right of the little Android icon. How can I do this in a relative layout?

enter image description here

Here's my current XML

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/min_touch_target_size"
    android:layout_alignParentBottom="true"
    android:background="@android:color/transparent"
    android:orientation="horizontal"
    >

    <ImageView
        android:src="@drawable/ic_android"
        android:id="@+id/circle_page_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        />

    <Button
        android:text="SKIP"
        style="@style/intro_feature_ad_button_style.right_anchor"
        android:id="@+id/skip_button" />
</RelativeLayout>

Solution

  • Wrap the button in a FrameLayout that has android:layout_alignParentEnd="true" and android:layout_toEndOf="@+id/circle_page_indicator". The Button needs to have android:layout_gravity="center"

    Screenshot

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/min_touch_target_size"
        android:layout_alignParentBottom="true"
        android:background="@android:color/transparent" 
        >
        <ImageView
            android:src="@drawable/ic_android"
            android:id="@+id/circle_page_indicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true" 
            />
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_toEndOf="@+id/circle_page_indicator" 
            >
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="skip"
                android:id="@+id/skip_button"
                android:layout_gravity="center" 
                />
        </FrameLayout>
    </RelativeLayout>