Skip to content

Placeholder not hidden on first load. Ugly wrong rounded corners of placeholder look through #3195

@friederikewild

Description

@friederikewild

Glide Version: 4.6.1

Integration libraries: okhttp3-integration (okhttp version: 3.9.1)

Device/Android Version: fails on Google Pixel, Emulator and other phones

Issue details / Repro steps / Use case background:

  • I want to load an image and cut it to rounded corners

  • During loading or if failing I want a placeholder (defined with the same rounded corners)

  • In addition, I want a white border that has the same rounded corners

  • Issue happens in the same way both in a list (following the adapter integration) and on a simple screen

  • Expected: During loading and on-error I see the placeholder with rounded corners and with white border. On loading (no matter if first one or from cache) I see the picture with rounded corners and white border.

  • Actual behavior: Only on the first successful load of the image I get ugly glitches in the corners in the color of my placeholder. This looks like 2 issues:

  1. The placeholder is not hidden on loading the image
  2. The corners of the placeholder get un-rounded/ignored on successful loading the image
  • Even without defining the background image I get this glitch on first loading

Glide load line / GlideModule (if any) / list Adapter code (if any):

val radius = context.resources.getDimensionPixelSize(R.dimen.corner_radius)

GlideApp.with(context)
    .load(pictureUrl)
    .transform(RoundedCorners(radius))
    .placeholder(R.drawable.placeholder_thumbnail_square_primary)
    .error(R.drawable.placeholder_thumbnail_square_primary)
    .transition(DrawableTransitionOptions.withCrossFade()).into(imageView)
  • My GlideModule is only setting up cookie handling with okhttp, so don't think this is related.

  • Note: I also tried to use the RoundedCornersTransformation from "jp.wasabeef:glide-transformations:3.3.0" instead of RoundedCorners and this leads to the same behaviour. Which is why I believe it's related to the placeholder.

Layout XML (No difference using scaleType=fitCenter):

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:padding="2dp"
            android:scaleType="centerCrop"
            android:background="@drawable/bg_square_rounded_white" />

Define radius in dimens.xml:

<dimen name="corner_radius">8dp</dimen>

placeholder_thumbnail_square_primary.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@color/colorAccent" />
            <corners android:radius="@dimen/corner_radius" />
            <size
                android:width="24dp"
                android:height="24dp" />
        </shape>
    </item>
    <item
        android:gravity="center"
        android:drawable="@drawable/ic_profile_placeholder" />
</layer-list>

bg_square_rounded_white.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <corners android:radius="@dimen/corner_radius" />
    <size
        android:width="24dp"
        android:height="24dp" />
</shape>

Stack trace / LogCat:
None

3 Screenshots from the same image in different states:

glide_glitch

  1. The described glitch with the corners of the placeholder being visible
  2. The same placeholder on itself (e.g. by starting app in flight mode)
  3. Same image looking great when leaving the activity and returning back

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions