Set aspect ratio programmatically for imageView

Question

I have a problem with showing a landscape image without centerCrop. I tried PercentFramelayout, and set aspect ratio programmatically like this:

laParams.percentLayoutInfo.aspectRatio = img.width.toFloat() / img.height.toFloat()

The result is ok -- the application showed all landscape images without centerCrop:

But sometimes I get the wrong aspect ratio:

I tried android:adjustViewBounds ="true" but it does not help me. And I used ConstraintLayout, setting the aspect ratio in XML like this:

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    >

    <android.support.v7.widget.AppCompatImageView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/photo"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="h,16:9"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

        />
</android.support.constraint.ConstraintLayout>

I got good result, but I load images different size. Images should be without CenterCrop and FitXY. I didn't find any good answers about set aspect ratio programmatically for Constraintlayout I want to show images like instagram or vk.

Dore

Hi Muhammadjon if my answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. – Illhumored

Answer 1

just changing the layoutParams also works

 (view.layoutParams as ConstraintLayout.LayoutParams).dimensionRatio = "16:9"

Pimply

This works. Also can set the "H"/"W" to set only height or width. And can set the value as float instead. Had some issues trying to constrain it, but eventually done with this too – Struggle

Answer 2

Late answer, as usual, but this might be useful to someone.

You can set the ratio property programatically by doing the following:

ConstraintSet set = new ConstraintSet();
set.clone(mLayout);
set.setDimensionRatio(mView.getId(), "16:9");
set.applyTo(mLayout);

What I am doing above is getting the layout's existing ConstraintSet and adding the ratio constraint programmatically before reapplying the ConstraintSet unto the ConstraintLayout (mLayout).

You should get the ConstraintLayout (mLayout) by using the findViewById() method (and manually adding the id property to your ConstraintLayout in your .xml).

Illhumored

we can also use: set.setDimensionRatio(mLayout.getChildAt(0).getId(), "16:9"); if you have the child position in the layout – Sutton

Which layout id you are passing in mView.getId()? – Hebdomadary

@ChintanParmar the id of the view on which you want to apply the aspect ratio – Illhumored

Answer 3

you can also check the below code

val layoutParams = imageView.layoutParams as ConstraintLayout.LayoutParams
layoutParams.dimensionRatio = "H,2:1"
imageView.layoutParams = layoutParams

Iodide

Answer 4

val parent = ViewGroup(context)
val view   = View(context)

view.apply {
     id           = View.generateViewId()
     layoutParams = ViewGroup.LayoutParams(0, 0)
}

parent.apply {
     id = View.generateViewId()
     removeAllViews()
     addView(rootViewGroup)
}

ConstraintSet().apply {
     clone(parent)

     val viewId   = rootViewGroup.id
     val parentId = parent.id

        connect(viewId, START,  parentId, START)
        connect(viewId, END,    parentId, END)
        connect(viewId, TOP,    parentId, TOP)
        connect(viewId, BOTTOM, parentId, BOTTOM)

        setDimensionRatio(rootId, "1:1")

        applyTo(parent)
}

Interblend