CODEWITHSUNDEEP
androidalignmentandroid-relativelayout
FoamyGuy
FoamyGuy

Reputation: 46846

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

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.

Upvotes: 32

Views: 16154

Answers (4)

TomaszKoltun
TomaszKoltun

Reputation: 43

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

enter image description here

Upvotes: 1

Omer
Omer

Reputation: 684

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>

Upvotes: 2

Danil.B
Danil.B

Reputation: 900

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>

Upvotes: 1

Bobbake4
Bobbake4

Reputation: 24847

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>

Upvotes: 32

Related Questions