CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
SuperFrog
SuperFrog

Reputation: 7674

Constraint Layout align two views vertically and horizontally

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 enter image description here

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

Upvotes: 1

Views: 1006

Answers (4)

Chrisvin Jem
Chrisvin Jem

Reputation: 4060

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

Upvotes: 1

Rahul
Rahul

Reputation: 26

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"

Upvotes: 0

Tamir Abutbul
Tamir Abutbul

Reputation: 7651

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

Upvotes: 0

Rajnish suryavanshi
Rajnish suryavanshi

Reputation: 3404

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

Upvotes: 0

Related Questions