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:

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.

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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"/>