bumptech / bumptech/glide

crossFade messes up aspect ratio for thumbnail/placeholder

Open
#363 36 comments 17 reactions 0 assignees View on GitHub
enhancement
Dominant language
Java
Stars
35k
Forks
6.2k
Avg merge
1d 11h
Merged PRs (30d)
8

Description

**Glide Version/Integration library (if any)**: 3.5.2
**Device/Android Version**: S4/4.4
**Issue details/Repro steps**: Load a different sized thumbnail and image, or placeholder and image and note the result:
![demo](https://cloud.githubusercontent.com/assets/2906988/6538023/e027582a-c45c-11e4-8758-abb9d7a67c69.gif)

**Glide load line**:

``` java
class Delay extends UnitTransformation {
private final int sleepTime;
public Delay(int sleepTime) { this.sleepTime = sleepTime; }
@Override public Resource transform(Resource resource, int outWidth, int outHeight) {
try { Thread.sleep(sleepTime); } catch (InterruptedException ex) {}
return super.transform(resource, outWidth, outHeight);
}
}

@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
final ImageView image = new ImageView(this);
setContentView(image);

// Saved as R.drawable.placeholder
String placeholder = "http://placehold.it/300x500/eedddd.png&text=PLACEHOLDER";
// Square image
String thumb = "http://placehold.it/300x300/eeeedd.png&text=THUMB";
// Wide image
final String full = "http://placehold.it/300x100/eedddd.png&text=FULL";
// Prepared request with unimportant clutter
final DrawableRequestBuilder req = Glide
.with(this)
.fromString()
.diskCacheStrategy(DiskCacheStrategy.SOURCE) // disable network delay for demo
.skipMemoryCache(true) // make sure transform runs for demo
.crossFade(2000) // default, just stretch time for noticability
;

req.clone()
.thumbnail(req.clone()
.transform(new Delay(500)) // wait a little
.load(thumb)
)
.transform(new Delay(1000)) // wait before going from thumbnail to image
//.dontAnimate() // solves the problem
.load(full)
.into(image);

image.setOnClickListener(new OnClickListener() {
@Override public void onClick(View v) {
req.clone()
.load(full)
.placeholder(R.drawable.placeholder)
.transform(new Delay(1000))
//.animate(R.anim.abc_fade_in) // also solves the problem
.into(image);
}
});
```

By removing all the delaying parts, the end result is better, but the now the thumbnail is messed up:
![demo3](https://cloud.githubusercontent.com/assets/2906988/6538022/e0252d02-c45c-11e4-82a6-6f13f3a215af.gif)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.