Android Glide placeholder size the same with different image size

I spent all day for this issue :(

In my Android application, I download the images with different size from the server. For example, Image A has 500x330 size, Image B has 500x700 size and so on. I also added some text below the images. I am using a placeholder image with 500x400 size.

I can load the images and show placeholder by using Glide:

XML:

<android.support.v7.widget.AppCompatImageView
android:id="@+id/myImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />


Kotlin:

GlideApp.with(myImage.context)
.load(url)
.skipMemoryCache(false)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(myImage)


Issue:

While the image is loading, the placeholder is shown with 400 height. When finish loading, users will see changes height from 400 to 700 for example. Then users also see that the text below the images are jumping up or down depend on the image size:(

Question:

How can I scale or keep the placeholder the same size with every loading images which I want to show on the UI. So that the UI does not change after loading?

Notes: I don't want to hard code the height of my images static like this layout_height="100dp". They should be kept the same size and radio as they are.

If Glide cannot do that. Do you guys have any other suggestions?

Thank you so much.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.