CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
xcaei
xcaei

Reputation: 23

Issue with ConstraintLayout (max width, dimension ratio and chain style)

I am having an issue with ConstraintLayout and a specific view.

What is wanted : 3 imageviews in a 6:5 ratio, the first one is bigger with the two other stacked vertically on its right. The whole view has a maxed width of 414dp.

When trying to set the horizontal chain style at packed, the views don't display at all over 414dp. There is no issue under that limit or with a chain style other than packed.

Here are

Am I missing something ?

Upvotes: 2

Views: 4271

Answers (2)

Ben P.
Ben P.

Reputation: 54194

To achieve what you want, I believe you must nest a ConstraintLayout inside another ConstraintLayout.

The problem is that you can't have both app:layout_constraintWidth_percent and layout_constraintWidth_max defined on the same view; each of these is one option for how to constrain a view set to "match constraints".

MATCH_CONSTRAINT dimensions (Added in 1.1)

When a dimension is set to MATCH_CONSTRAINT, the default behavior is to have the resulting size take all the available space. Several additional modifiers are available:

  • layout_constraintWidth_min and layout_constraintHeight_min: will set the minimum size for this dimension
  • layout_constraintWidth_max and layout_constraintHeight_max: will set the maximum size for this dimension
  • layout_constraintWidth_percent and layout_constraintHeight_percent: will set the size of this dimension as a percentage of the parent

(From https://developer.android.com/reference/android/support/constraint/ConstraintLayout)

You can work around this by having your inner ConstraintLayout specify its maximum width, and then have the ImageView children of that inner ConstrainLayout specify their percentages.

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

    <android.support.constraint.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#eee"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_max="414dp">

        <ImageView
            android:id="@+id/main_imageview"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="fitXY"
            android:background="#caf"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintDimensionRatio="H,6:5"
            app:layout_constraintWidth_percent="0.666"/>

        <ImageView
            android:id="@+id/second_imageview"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="fitXY"
            android:background="#fac"
            app:layout_constraintTop_toTopOf="@+id/main_imageview"
            app:layout_constraintLeft_toRightOf="@+id/main_imageview"
            app:layout_constraintBottom_toTopOf="@+id/third_imageview"
            app:layout_constraintDimensionRatio="W,6:5"/>

        <ImageView
            android:id="@+id/third_imageview"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="fitXY"
            android:background="#afc"
            app:layout_constraintTop_toBottomOf="@+id/second_imageview"
            app:layout_constraintLeft_toRightOf="@+id/main_imageview"
            app:layout_constraintBottom_toBottomOf="@+id/main_imageview"
            app:layout_constraintDimensionRatio="W,6:5"/>

    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

enter image description here

enter image description here

Upvotes: 5

nikinci
nikinci

Reputation: 444

I think this is your need 3 imageview first one bigger. You can change layout_constraintHorizontal_weight properties check below

<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="wrap_content">

<ImageView
    android:id="@+id/imageView9"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@android:color/black"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintDimensionRatio="6:5"
    app:layout_constraintEnd_toStartOf="@+id/imageView10"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintHorizontal_weight="2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/imageView10"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintDimensionRatio="6:5"
    app:layout_constraintEnd_toStartOf="@+id/imageView11"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toEndOf="@+id/imageView9"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/imageView11"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@android:color/holo_orange_dark"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintDimensionRatio="6:5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toEndOf="@+id/imageView10"
    app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

Upvotes: 0

Related Questions