Constraint Layout align two views vertically and horizontally

Question

I'm trying to align two views one behind the other, centered vertically and horizontally. The size of the views are set dynamically to the size of the screen, this is the XML of the screen:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">


<ImageView
    android:id="@+id/yellow"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#faff68"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.6"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="@id/purple"
    app:layout_constraintLeft_toLeftOf="@id/purple"
    app:layout_constraintRight_toRightOf="@id/purple"
    app:layout_constraintTop_toTopOf="@id/purple" />

<ImageView
    android:id="@+id/purple"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#c303fa"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.5"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

The result is not as expected

How can the yellow image be centered behind the purple image using Constraint Layout? (I know how to achieve it in other layouts)

I've updated my answer to show how you can use [Circular Positioning](https://developer.android.com/reference/android/support/constraint/ConstraintLayout#CircularPositioning) to achieve what you want. Do check it out, Cheers. — Chrisvin Jem, Aug 31 '19 at 12:47

Chrisvin Jem · Accepted Answer · 2019-08-31T12:38:54.950

Update -

You can use Circular Positioning to center your larger view behind your smaller view.

<ImageView
    android:id="@+id/yellow"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#faff68"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.5"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="@id/purple"
    app:layout_constraintLeft_toLeftOf="@id/purple"
    app:layout_constraintRight_toRightOf="@id/purple"
    app:layout_constraintTop_toTopOf="@id/purple"
    app:layout_constraintCircle="@id/purple"
    app:layout_constraintCircleRadius="0dp"/>

<ImageView
    android:id="@+id/purple"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#c303fa"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.4"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Instead of trying to center the larger view behind the smaller view, you could fix your larger view and center your smaller view in front of it.

Something along the following lines should work,

<ImageView
    android:id="@+id/yellow"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#faff68"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.5"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<ImageView
    android:id="@+id/purple"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#c303fa"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.4"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="@id/yellow"
    app:layout_constraintLeft_toLeftOf="@id/yellow"
    app:layout_constraintRight_toRightOf="@id/yellow"
    app:layout_constraintTop_toTopOf="@id/yellow" />

score 0 · Answer 2 · answered Aug 31 '19 at 12:10

Try this way

 <ImageView
    android:id="@+id/yellow"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#faff68"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.6"
    app:layout_constraintBottom_toBottomOf="@id/purple"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@id/purple" />

<ImageView
    android:id="@+id/purple"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#c303fa"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.5"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

But in this case the yellow image isn't in the same proportions as the purple one. — SuperFrog, Aug 31 '19 at 12:16

score 0 · Answer 3 · answered Aug 31 '19 at 12:11

0

If you want the yellow to be the same size as the other image just change this line in your yellow image

app:layout_constraintHeight_percent="0.6"

To this:

app:layout_constraintHeight_percent="0.5"

All you need to do is to make the value of app:layout_constraintHeight_percent the same on both images.

In your case, one image was with the size of 50% screen size and the other was with 60% so they didn't looked the same size

answered Aug 31 '19 at 12:11

Tamir Abutbul

7,301
7
25
53

No, I don't want them to be the same size. The yellow is suppose to look like the border of the purple. – SuperFrog Aug 31 '19 at 12:15
So maybe just tell the yellow image to be larger by 1 or 2 % than the purple one, this will make your yellow once ot look like the border. – Tamir Abutbul Aug 31 '19 at 12:17
For example, on your purple one use `app:layout_constraintHeight_percent="0.5"` and on the yellow one use `app:layout_constraintHeight_percent="0.52"`(larger by 2%) – Tamir Abutbul Aug 31 '19 at 12:18
That's what I did, only I set it to 0.6 as an example. If I set it to 0.52 the general result will be the same. – SuperFrog Aug 31 '19 at 12:19
If the only thing you need to do it so make a yellow border why not use custom background as mentioned [here](https://stackoverflow.com/a/3264140/8274756) , do you really need the extra view for anything else? – Tamir Abutbul Aug 31 '19 at 12:21
Because this is just an example. I've stumbled into this issue in different scenarios using Constraint Layout and I'm trying to find the general solution. I can solve this case in many different ways, but this isn't what I'm aiming to in this question. – SuperFrog Aug 31 '19 at 12:23
I think I understand now, you can make both of your views the same size and just give the top view margins, this will give the background view the border looking effect. – Tamir Abutbul Aug 31 '19 at 12:28
Not exactly, I'm not thinking of specific scenario, but a general one. That's something I've used extensively in Relative Layout through the years, and I need to understand if and how it can be achieved in Constraint Layout. – SuperFrog Aug 31 '19 at 12:30
Could you add an example of it while using Relative Layout? Or maybe Image of what you want to achieve. Maybe I did not understand your question properly and I am only confusing you. – Tamir Abutbul Aug 31 '19 at 12:32
In Relative Layout it would probably be something such as android:layout_alignStart="@+id/purple" android:layout_alignEnd="@+id/purple" android:layout_alignTop="@+id/purple" android:layout_alignBottom="@+id/purple" – SuperFrog Aug 31 '19 at 12:42

score 0 · Answer 4 · answered Aug 31 '19 at 12:15

replace your yellow image with this

<ImageView
    android:id="@+id/yellow"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#faff68"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.6"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"

I don't want to align it to the parent as the image can be placed in many other parts of the screen in other scenarios. — SuperFrog, Aug 31 '19 at 12:17

Constraint Layout align two views vertically and horizontally

4 Answers4