Android RelativeLayout align center of one view on top right corner of another view

Question

I have experience with RelativeLayout but I've never run across a way to solve the problem I am presented with (aside from hard coding margin values, which I want to avoid.)

I want to try to create something like the following image in a RelativeLayout:

enter image description here

The box is its own View and I want to get the View that contains the orange circle to be centered on the top right corner of the View that contains the blue box.

I tried with android:alignTop="boxView" and android:alignRight="boxView" but that put my orange circle completely within my box. I want it to be so that the circle is centered above the top right corner of the box.

Anybody know how I can get that outcome with a RelativeLayout? preferably without having to hardcode margins away from the edge of the screen for the orange dot view.

Why do you not want to use margin for this. Margin seems like the perfect way to accomplish this. — Bobbake4, May 01 '12 at 16:09
I only do not want to give it a margin for how far from the edge of the screen. If I could align it to the box and then shift it over and up by half of its diameter with a margin that would be ideal actually. But I can only figure out how to do it by telling it how far away from the edge of the screen to be, rather than how far away from the point I want to align on. — FoamyGuy, May 01 '12 at 16:14

score 32 · Accepted Answer · answered May 01 '12 at 16:15

This code creates what you are looking for but does use margins. Now you can set the margin in code if this is a dynamic structure you are creating. As you can see I used negative margins to move the upper right shape outside of the blue box. These need to be half the height of the circle you are trying to move. You can do all of this in code to center the circle in the upper right corner.

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

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:background="#0000FF"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="26dp"
            android:layout_height="26dp"
            android:layout_alignRight="@+id/linearLayout1"
            android:layout_alignTop="@+id/linearLayout1"
            android:layout_marginRight="-13dp"
            android:layout_marginTop="-13dp"
            android:background="#FF00FF"
            android:orientation="vertical" >
        </LinearLayout>

    </RelativeLayout>

Note that this doesn't really work if the second view is sized by an image, since drawables don't have a consistent size in DP (their size in pixels jumps from one DPI bucket to the next instead of scaling continuously). So you can't just do 26dp / 2 = 13dp. One workaround is to pick a size that's definitely bigger than the image, and add a wrapper layout around the view with that definite size (with the original view centered in it), then you can calculate half of it. — Karu, May 11 '15 at 03:54
Negative margins are not officially supported and don't work properly on some devices. https://issuetracker.google.com/issues/37103660 — Shroud, Mar 22 '18 at 20:36

score 2 · Answer 2 · answered Mar 11 '21 at 18:55

Best and proper way to do:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/_10sdp">

    <View
        android:id="@+id/viewBox"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:background="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <View
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:src="@drawable/ic_close"
        app:layout_constraintBottom_toTopOf="@+id/viewBox"
        app:layout_constraintLeft_toRightOf="@+id/viewBox"
        app:layout_constraintRight_toRightOf="@+id/viewBox"
        app:layout_constraintTop_toTopOf="@+id/viewBox" />

</androidx.constraintlayout.widget.ConstraintLayout>

score 1 · Answer 3 · answered Sep 19 '19 at 19:51

You could use ConstraintLayout circular positioning, just align your view on 45 degrees angle and adjust radius:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:background="@color/colorAccent"
        android:id="@+id/view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:background="@color/colorPrimary"
        android:id="@+id/alignedView"
        android:layout_width="30dp"
        android:layout_height="30dp"
        app:layout_constraintCircle="@id/view"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="60dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

score 1 · Answer 4 · answered Nov 02 '21 at 13:10

It's very easy to acheive that using constraint layout.

just set start and end constraint of circle to the same point and top and bottom to the same point (eg top right corner of textview) like below:

<TextView
    android:id="@+id/newWarningLabel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="left|center"
    android:lines="2"
    android:text="testtest"
    android:textColor="@color/white"
    android:textSize="12sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    android:id="@+id/alertCounter"
    android:layout_width="20dp"
    app:layout_constraintStart_toStartOf="@id/newWarningLabel"
    app:layout_constraintEnd_toStartOf="@id/newWarningLabel"
    app:layout_constraintTop_toTopOf="@id/newWarningLabel"
    app:layout_constraintBottom_toTopOf="@id/newWarningLabel"
    android:layout_height="20dp"
    android:gravity="center"
    android:textColor="@color/white"
    android:textStyle="bold"
    android:textSize="10sp"
    android:visibility="visible"
    android:text="1"
    android:background="@drawable/red_circle"/>

Android RelativeLayout align center of one view on top right corner of another view

4 Answers4

Linked