I have a ViewPager
, which uses a custom adapter. The items are cards with header text (TextView title
), some text below the header (TextView desc
), and ImageView
above them. Images are loaded from DB via Glide library. And it works, the images are loaded successfully, but while loading the image for the first time, the card is shown empty - even without text. Is there a way to show this card with the text and some background image in ImageView
while the image from DB is loading?
Sorry, if my question looks silly, I'm working with Glide for the first time.
ViewPager
adapter's code:
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, final int position) {
LayoutInflater layoutInflater = LayoutInflater.from(context);
// init root view (our 'card')
View view = layoutInflater.inflate(R.layout.vp_item, container, false);
// some code..
title.setText( events.get(position).getTitle() );
desc.setText( events.get(position).getDesc() );
// filling UI elements with data
Glide.with(context)
.load(events.get(position).getImageUrl())
.apply(new RequestOptions().override(800, 600))
.transition(DrawableTransitionOptions.withCrossFade())
.into(imageView);
// some code..
container.addView(view, 0);
return view;
}
You need to use the placeholder function which is provided by Glide as following:
Glide.with(context)
.load(events.get(position).getImageUrl())
.placeholder(R.drawable.placeholder_image) /// add this
.apply(new RequestOptions().override(800, 600))
.transition(DrawableTransitionOptions.withCrossFade())
.into(imageView);