Fit imageView to image size after resizing it

Question

I am implementing something called InApp messages, now I am trying to fit ImageView to image size after resizing.

This is my imageView:

<?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/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:layout_marginStart="15dp"
    android:layout_marginTop="40dp"
    android:padding="6dp">

   --other components--

    <ImageView
        android:id="@+id/middleLayoutImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/border"
        android:padding="5dp"
        app:layout_constraintBottom_toTopOf="@+id/middleLayoutText"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/topWrapper"
        app:layout_constraintVertical_chainStyle="packed" />

   --other components--

</android.support.constraint.ConstraintLayout>

To download img and put into this view I am using Picasso:

        Picasso.with(getApplicationContext())
            .load(inputurl)
            .into(imageView);

Now my activity looks like this: Before fitting

Now I want to resize it with aspect ratio to width of the parent Layout. I've tried a lot od combinations with no success:

android:scaleType="fitXY" - stretched img
picasso fit().centerCrop() - centerCrop
picasso fit().centerInside() - centerInside

and more combination with android:adjustViewBounds scaleTypes etc.

I want to achieve something like this: Resized correctly - in this case, I've used picasso: .resize(2000,500).centerInside() - but it will work only in this case.. How to do it automatically ? Thanks in advance for help:)

edit:

    ImageView imageView = (ImageView) findViewById(R.id.middleLayoutImage);

    String inputurl = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQtqf1EUqH4eQNNqYFbSawpiR5bypfOhvlatgS0mC3Ve1nk2adbw"; //http://www.gatesms.eu/img/android.png";
    Picasso.with(getApplicationContext())
            .load(inputurl)
            .resize(2000,500)
            .centerInside()
            .into(imageView);

Look on "edit" part above, this one give me result which i expected, but this solution works only in this case. — P. Grzanka
In ConstraintLayout you cannot use match_parent, change width to match_constriant or 0dp — elmorabea

Xenolion Xenolion · Accepted Answer · 2017-12-21T16:03:11

For Picasso to fit your Image correctly you should know the size of your Image. But for this case You do not know the size of the Image then for good UI design you should have a placeholder (An image to show while Picasso is loading another) keep that image in your drawable folder lets call it placeholder and set it as a src or alternatively using Picasso itself like this:

Picasso.with(getActivity()) 
.load(imageUrl) 
.placeholder(R.drawable.placeholder) 
.error(R.drawable.error) 
.resize(screenWidth, imageHeight)
.fit()
.centerCrop() 
.into(imageView);

Now what?

Now because you have another Image in the imageView Picasso now knows the height and width so that It can fit your Image well. But if you do not provide any image then the results are very small images or improperly stretched ones. I have also added an optional error image that will be displaced if Picasso fails to make the request like my be No network Connection you can omit it if you want.

Do not forget the android:adjustViewBounds in XML too.

Fit imageView to image size after resizing it

1 Answers