Shimmer Effect not working on Height wrap_content

Question

I'm trying to implement the shimmer effect with the Height of wrap_content but the images are not loading, I know why it is not loading the images because the imageView has wrap_content and the shimmer also has wrap_content but I want the Height Should be wrap_content and not fixed.

After implementing a fixed height of eg 200dp in shimmer it works but after that images are not loading

I want to make it like Pinterest where the height is adjusted according to the image

XML Files

post_item_container_search.xml

<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/imagePostSearch"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="6dp"
    android:layout_marginTop="11dp"
    android:layout_marginEnd="6dp"
    android:contentDescription="@string/todo"
    app:shapeAppearanceOverlay="@style/RoundedCorner" />

post_item_containe_shimmer.xml

<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/imageShimmer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="11dp"
android:layout_marginTop="11dp"
android:background="#E7E7E7"
android:contentDescription="@string/todo"
app:shapeAppearanceOverlay="@style/RoundedCorner" />

this how it looks like after adding minHeight to both or in actual imageView

try out this library https://github.com/sharish/ShimmerRecyclerView — ahmad bajwa, Apr 19 '21 at 16:45
@SagarRawal It's probably because your imageview doesn't have definite size, try changing your imageview height to like 48dp for example. — YaMiN, Jun 03 '21 at 04:23
@YaMiN Do you mean I have to change the size in image view or in shimmer XML? — , Jun 03 '21 at 04:51
@YaMiN ok I have tried to make shimmer height to 200dp and the shimmer is working but after that images Is not loading I know why now but the problem is I have to make the image height wrap_content because I want to make it like Pinterest where the height is adjusted according to the mage height so if I make image height fix I will not get that the adjustable height element — , Jun 03 '21 at 05:12

Dheeraj Gupta · Answer 1 · 2021-06-03T11:20:38.757

By default, the wrapcontent doesn't have any size so it is 0dp you need to define 50dp or something for the height of shimmer then only you can see the shimmering.

Can refer this blog or try to use this

post_item_container_search.xml

 <com.google.android.material.imageview.ShapeableImageView
 xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/imagePostSearch"
         android:layout_width="200dp"
         android:layout_height="200dp"
         android:scaleType="fitCenter"
         android:layout_marginStart="6dp"
         android:layout_marginTop="11dp"
         android:layout_marginEnd="6dp"
         android:contentDescription="@string/todo"
         app:shapeAppearanceOverlay="@style/RoundedCorner" />

score 2 · Accepted Answer · answered Jun 06 '21 at 14:40

2

After implementing a fixed height of eg 200dp in shimmer it works but after that images are not loading

In that case, you should probably set an absolute width/height for the ImageView first. Later, you can set it back to WARP_CONTENT if you really need to. But first you'll need an estimated/absolute width/height for the view.

int height = bitmap.getHeight();
int width = bitmap.getWidth();

ShapeableImageView siv = findViewById(R.id.imagePostSearch);
ViewGroup.LayoutParams params = siv.getLayoutParams();
params.height = height;
params.width = width;

//To set it back to warp content or match parent:
params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
params.width = ViewGroup.LayoutParams.MATCH_PARENT;

answered Jun 06 '21 at 14:40

Darkman

2,941
2
9
14

do I have to implement this method in search fragment java file? – Jun 07 '21 at 04:53
Error :- int android.graphics.Bitmap.getHeight()' on a null object reference – Jun 07 '21 at 05:28
Inside an activity or fragment of course. Check [here](https://stackoverflow.com/questions/6495898/findviewbyid-in-fragment) to know how to get an id in a fragment. The bitmap is the image that you want to reload. You can use the shimmer image in this case. – Darkman Jun 07 '21 at 05:43
https://stackoverflow.com/questions/67866395/error-attempt-to-invoke-virtual-method-int-android-graphics-bitmap-getheight please see this question of mine with the error – Jun 07 '21 at 06:02

score 0 · Answer 3 · answered Jun 03 '21 at 05:37

0

Please keep android:minHeight for the ImageView as it will give you a minimum height and also android:height can be wrap_content so it grows if the image is larger than minHeight.

For example,

<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/imageShimmer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="100dp"
android:layout_marginStart="11dp"
android:layout_marginTop="11dp"
android:background="#E7E7E7"
android:contentDescription="@string/todo"
app:shapeAppearanceOverlay="@style/RoundedCorner" />

answered Jun 03 '21 at 05:37

Mohit Ajwani

1,328
12
24

i have tried it but then I'm not getting the adjustable height element – Jun 03 '21 at 05:41
Did you keep the `minHeight` on both the images - actual and shimmer? What is the size of the new image? – Mohit Ajwani Jun 03 '21 at 06:09
Brother, I have tried all three possible ways 1. adding minHieght in shimmer image View .2. adding minHieght in actual imageView 3. adding minHieght to both actual imageView and shimmer imageView – Jun 03 '21 at 07:02
,in 1st and 3rd option images are loading but not according what I want and in 2nd images are not loading at all – Jun 03 '21 at 07:10
Is it possible for you to attach screenshots/short video to the question showing what is happening? – Mohit Ajwani Jun 03 '21 at 07:12
I have added a photo of how it looks like when I add minHieght to shimmer image or in both – Jun 03 '21 at 07:48
@SagarRawal your layoutManager seems like LinearLayoutManager. Use the GridLayoutManager in this solution. – Mohit Ajwani Jun 03 '21 at 08:05
I have changed to grid layout but still the issue is going on – Jun 03 '21 at 08:16

sandeep dhami · Answer 4 · 2021-06-03T11:10:00.373

You can create a dummy view for shimmer with fixed height, make its visibility to visible and show it until the image loads, and once the image is loaded make the dummy view visibility gone.

//XML

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <shimmerView //You can use your own
            android:id="@+id/dummyShimmerView"
            android:layout_width="100dp"
            android:layout_height="100dp"/>

        <ImageView
            android:id="@+id/postImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"/>

    </RelativeLayout>

//dummyShimmerView visibility is visible byDefault
Glide.with(context)
            .load(url)
            .listener(object : RequestListener<Drawable> {
                override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean): Boolean {
                    //TODO: something on exception
                }
                override fun onResourceReady(resource: Drawable?, model: Any?, target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean {
                    Log.d(TAG, "OnResourceReady")
                    dummyShimmerView.visibility = View.GONE
                    postImageView.visibility = View.VISIBLE
                    return false
                }
            })
            .into(imgView)

brother can u explain the code a little bit more – Jun 03 '21 at 07:02 — , Jun 03 '21 at 07:02
@SagarRawal Please take a look – sandeep dhami Jun 03 '21 at 11:10 — sandeep dhami, Jun 03 '21 at 11:10

Shimmer Effect not working on Height wrap_content

4 Answers4

Linked