CODEWITHSUNDEEP
androidandroid-constraintlayout
dor506
dor506

Reputation: 5414

ConstraintLayout - proportional width/height to self?

I'm trying to figure out how to achieve the following behaviour using constraint layout:

  1. Place a view in the center of the ConstraintLayout parent
  2. Make the view width to be half of the parent's width
  3. Make the view height equals to its width

(i.e - place a square in the center)

I tried to use this combination:

  android:layout_width="0dp"
  android:layout_height="0dp"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintDimensionRatio="2:1"

But I'm not sure how to continue from here

Upvotes: 25

Views: 18900

Answers (4)

leonheess
leonheess

Reputation: 21520

I don't see why you'd have to use complex Guideline systems when you could also just use:

app:layout_constraintWidth_percent="0.5"

for half the width of the parent and

app:layout_constraintDimensionRatio="1:1"

to achieve the same height as the width. This dimension ratio takes all numbers and even doubles.

Here is the entire code with center:

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

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5" />

</android.support.constraint.ConstraintLayout>

Upvotes: 8

serg3z
serg3z

Reputation: 1862

You can do without Guideline it is easy.

Just use app:layout_constraintWidth_percent="0.5"

It is work in version ConstraintLayout:1.1.0-beta5 and later.

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/dark_red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5" />

</android.support.constraint.ConstraintLayout>

enter image description here

Upvotes: 30

Yurii Kyrylchuk
Yurii Kyrylchuk

Reputation: 819

You can achieve this behavior using guidelines(Constraint to a guildeline). You should set two vertical guidelines with percentage (first - 25% & second - 75%) which will give you a half of parent's width. Then you should constraint your view to those guidelines by start/end. Also you should constraint it to parent by top/bottom and set your view's dimension ratio to 1:1 to make it square and centered.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.75" />

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="@id/guideline2"
        app:layout_constraintStart_toStartOf="@id/guideline1"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Upvotes: 1

repitch
repitch

Reputation: 1888

To make your child's width be a half from parent's, use Guidelines: left one is 0.25 percentage, and the right one is 0.75

Then, place your view between those guidelines.

And finally, set layout_constraintDimensionRatio to '1:1':

enter image description here

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.Guideline
        android:id="@+id/guideline_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline_right"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.75"/>

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="@id/guideline_left"
        app:layout_constraintRight_toRightOf="@id/guideline_right"
        app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

Upvotes: 12

Related Questions