I am making a chat application. For that, if the message is of image type, I want to wrap the height and fix the width. But the problem is that since image takes some time to load, there is a shift in chat messages until the image is loaded and so there is a jerk. How do I handle this?

<android.support.constraint.ConstraintLayout
    android:id="@+id/parent_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/send_message_box"
    android:maxWidth="228dp">

    <android.support.v7.widget.AppCompatImageView
            android:id="@+id/iv_message"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_width="200dp"
            android:layout_height="0dp"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            android:padding="11dp"
            android:visibility="gone" />
</android.support.constraint.ConstraintLayout>

This is the image layout I am using.

2 Answers

0
Community On

You could fix the height and display a placeholder image till the image gets loaded. You get this functionality of displaying a placeholder image(till the image gets loaded) with Picasso, check this https://square.github.io/picasso/

0
Reaz Murshed On

You can set up an initial height using a default image while your images are getting downloaded. After the image is downloaded, it will take the height of the image if you set the height as wrap_content. Hence you need to modify your ImageView like the following.

<ImageView
    android:id="@+id/iv_message"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter"
    android:src="@mipmap/ic_image_loader_placeholder" />

Please modify the ImageView as per your requirement.

You might also look at this Github project where I have implemented a similar idea. I had to call an API of Flickr and load the images into the RecyclerView. Hope that helps!