I want to create a list of Views, where the images shown in each View is downloaded from a server as you scroll the list (lazy loading). This is the code I have got so far:
public class CustomAdapter extends ArrayAdapter<Component> {
private final List<Component> components;
private final Activity activity;
public CustomAdapter(Activity context, List<Component> components) {
super(context, android.R.layout.simple_list_item_1, components);
this.components = components;
this.activity = context;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder;
if (convertView == null) {
LayoutInflater inflater = activity.getLayoutInflater();
convertView = inflater.inflate(R.layout.item, null, false);
viewHolder = new ViewHolder();
viewHolder.imageView = (ImageView) convertView.findViewById(R.id.image);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder)convertView.getTag();
}
Component component = components.get(position);
// Don't show any image before the correct one is downloaded
viewHolder.imageView.setImageBitmap(null);
if (component.getImage() == null) { // Image not downloaded already
new DownloadImageTask(viewHolder.imageView).execute(component);
} else {
viewHolder.imageView.setImageBitmap(component.getImage());
}
return convertView;
}
private class ViewHolder {
ImageView imageView;
}
private class DownloadImageTask extends AsyncTask<Component, Void, Component> {
private ImageView imageView;
public DownloadImageTask(ImageView imageView) {
this.imageView = imageView;
}
#Override
protected Component doInBackground(Component... params) {
String url = params[0].getImageURL();
Component component = params[0];
// Download the image using the URL address inside found in component
Bitmap image = ImageDownloader.getImage(url);
// Set the Bitmap image to the component so we don't have to download it again
component.setImage(image);
return component;
}
#Override
protected void onPostExecute(Component component) {
// Update the ImageView with the downloaded image and play animation
imageView.setImageBitmap(component.getImage());
Animation animation = AnimationUtils.loadAnimation(activity, R.anim.fade_in);
imageView.startAnimation(animation);
}
}
}
Basically, when getView() is run it gets data (in this case a Bitmap) from Component (which is used to cache data from the item), unless there is no data. In that case it executes the DownloadImageTask which will download the image and store it inside a Component. Once it's stored it puts the image in the ImageView.
My problem is that when using the ViewHolder pattern the ImageViews, instead of the "wrong way" (calling findViewById() each time), scrolling through the list will make the wrong ImageViews get the downloaded Bitmap. This gif shows how it looks:
Preview
Obviously, I want the images to only appear where they should. Is there any good way to make this work as supposed to?
I used Glide to solve the problem. Thanks everyone for informing me there already existed such wonderful things!
Doing (almost) the same thing was as easy as:
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder;
if (convertView == null) {
LayoutInflater inflater = activity.getLayoutInflater();
convertView = inflater.inflate(R.layout.item, null, false);
viewHolder = new ViewHolder();
viewHolder.imageView = (ImageView) convertView.findViewById(R.id.image);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
String url = components.get(position).getImageURL();
Glide.with(activity).load(url).crossFade().into(viewHolder.imageView);
return convertView;
}
While others are right that there are many libraries that can handle this for you, it is possible to do it the way you tried initially if you really want to. You just need to make sure you cancel AsyncTasks when the item view is recycled. You can do this by adding the AsyncTask to your ViewHolder class, so you can see if there's something running and cancel it before starting a new one.
private class ViewHolder {
ImageView imageView;
AsyncTask<?,?,?> task;
}
Then in your getView():
#Override
public View getView(int position, View convertView, ViewGroup parent) {
...
// Don't show any image before the correct one is downloaded
viewHolder.imageView.setImageBitmap(null);
if (viewHolder.task != null) { // Existing task may be executing
viewHolder.task.cancel(true);
viewHolder.task = null;
}
if (component.getImage() == null) { // Image not downloaded already
AsyncTask<?,?,?> task = new DownloadImageTask(viewHolder.imageView);
viewHolder.task = task;
task.execute(component);
} else {
viewHolder.imageView.setImageBitmap(component.getImage());
}
return convertView;
}
Related
I am just adapting my custom adapter code with ViewHolder so that i can optimize my list view with a recycler, but i am not sure if i do it right.
My view holder class:
public class ViewHolderTask {
int positionHolder;
TextView nameHolder;
TextView timeHolder;
TextView sessionHolder;
TextView dateHolder;
FloatingActionButton mFabTaskHolder;
public ViewHolderTask(View v, int position) {
this.positionHolder = position;
this.nameHolder = v.findViewById(R.id.taskNameText);
this.timeHolder = v.findViewById(R.id.timeTextView);
this.sessionHolder = v.findViewById(R.id.textViewSession);
this.dateHolder = v.findViewById(R.id.dateTextView);
this.mFabTaskHolder = v.findViewById(R.id.myFabTask);
}
My custom adapter class:
#NonNull
#Override
public View getView(int position, #Nullable View convertView, #NonNull ViewGroup parent) {
ViewHolderTask holder;
if(convertView == null){
LayoutInflater inflater = (LayoutInflater) context.getSystemService(
Context.LAYOUT_INFLATER_SERVICE );
convertView = inflater.inflate(R.layout.task_row, parent, false);
holder = new ViewHolderTask(convertView, position);
convertView.setTag(holder);
}else{
holder = (ViewHolderTask) convertView.getTag();
}
Task task = taskArrayList.get(position);
//set the configurations
holder.getTimeHolder().setText(getTimeString(task.getTime()));
holder.getNameHolder().setText(task.getName());
holder.getDateHolder().setText(getDateString(task.getDate()));
holder.getSessionHolder().setText(getSessionString(task.getSession()));
//Set the FAB listener
addFabListener(holder.getmFabTaskHolder(), position);
//set the clicked background
if(TaskActivity.getIsClicked() && TaskActivity.getPositionClicked()-1 == position){
convertView.setBackgroundResource(R.color.backgroundSelectedItem);
}
return convertView;
}
Do I use it right?
Seems to be fine for me other than this portion of the code
//set the clicked background
if(TaskActivity.getIsClicked() && TaskActivity.getPositionClicked()-1 == position){
convertView.setBackgroundResource(R.color.backgroundSelectedItem);
}
You might need to reset the background resource back to default for the item which is not clicked. maybe you have to add "else" part to the "if"
I have ListView with Adapter, and also use holder. but later I read about recyclerView.ViewHolder and now confused, Is it different with the one I've been using right now? I mean for the optimization purpose, I want to know if using holder only is not good enough without using recyclerView.
public class NewsAdapter extends ArrayAdapter<News> {
Context context;
List<News> myList;
public NewsAdapter(Context context, int resource, List<News> objects) {
super(context, resource, objects);
this.context = context;
this.myList = objects;
}
#Override
public News getItem(int position) {
if(myList != null)
return myList.get(position);
return null;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
Holder holder;
if (convertView == null){
LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.list_news, null);
holder = new NewsAdapter.Holder();
holder.title = (TextView)convertView.findViewById(R.id.textViewTitle);
holder.datePosted = (TextView)convertView.findViewById(R.id.textViewDate);
holder.imageView = (ImageView)convertView.findViewById(R.id.imageViewThumbnailpic);
convertView.setTag(holder);
}else{
holder = (Holder)convertView.getTag();
}
News news = getItem(position);
holder.title.setText(news.getTitle());
holder.datePosted.setText(news.getDatePost());
Picasso.with(context)
.load(news.getImgUrl())
.placeholder(R.drawable.coin25)
.error(R.drawable.hnbspic)
.into(holder.imageView);
return convertView;
}
private class Holder{
ImageView imageView;
TextView title;
TextView datePosted;
}
}
It's better to use Recyclerview because it has been optimized for various scenarios and not just for View holder pattern like it give the option for determining how your item should be laid out or like what should be the animation or custom drawing in each item.You can read more this medium post
I am trying to implement a customlistadapter for a small project of mine. I basically want ask java to use the appropriate class to inflate the view. I have here first:
public class slide {
public class video {
VideoView videoOfTheDay;
//Purpose of this constructor
public video(VideoView videoOfTheDay) {
this.videoOfTheDay = videoOfTheDay;
}
public VideoView getVideoOfTheDay() {
return videoOfTheDay;
}
}
public class blog {
ImageView imageOfTheDay;
TextView messageOfTheDay;
public blog(ImageView imageOfTheDay, TextView messageOfTheDay) {
this.imageOfTheDay = imageOfTheDay;
this.messageOfTheDay = messageOfTheDay;
}
public ImageView getImageOfTheDay() {
return imageOfTheDay;
}
public TextView getMessageOfTheDay() {
return messageOfTheDay;
}
}
public class advertisement {
ImageView ImageViewAd1;
ImageView ImageViewAd2;
public advertisement(ImageView imageViewAd1, ImageView imageViewAd2) {
this.ImageViewAd1 = imageViewAd1;
this.ImageViewAd2 = imageViewAd2;
}
public ImageView getImageViewAd1() {
return ImageViewAd1;
}
public ImageView getImageViewAd2() {
return ImageViewAd2;
}
}
}`
I have listed all the classes within a superclass slide because I wasn't able to accomplish no errors without them being grouped. From there I went to ask Java to look within itself and determine the appropriate class to use to populate the element:
class CustomListAdapter extends BaseAdapter {
private ArrayList<slide> customVariableDisplay;
private LayoutInflater layoutInflater;
public CustomListAdapter(Context context, ArrayList<slide>customVariableDisplay) {
this.customVariableDisplay = customVariableDisplay;
layoutInflater = LayoutInflater.from(context);
}
public int getCount() {
return customVariableDisplay.size();
}
public Object getItem(int position) {
return customVariableDisplay.get(position);
}
public long getItemId(int position) {
return position;
}
// If the element of the slide is a video -- then the getView will return...
if(slide==slide.video){
public View getView ( int position, View convertView, ViewGroup parent){
ViewHolder holder;
if (convertView == null) {
convertView = layoutInflater.inflate(R.layout.act_layout, null);
holder = new ViewHolder();
holder.slide.video = (VideoView) convertView.findViewById(R.id.videolayout);
}
else{
holder = (ViewHolder)convertView.getTag();
}
holder.video.setVideoResource(customVariableDisplay.get(position).getVideoOfTheDay());
}
return convertView;
}
// If the element is a 'blog' then --- then the getView will return...
else if(slide==slide.blog){
public View getView ( int position, View convertView, ViewGroup parent){
ViewHolder holder;
if (convertView == null) {
convertView = layoutInflater.inflate(R.layout.act_layout, null);
holder = new ViewHolder();
holder.slide.blog.message = (TextView) convertView.findViewById(R.id.messageInLayout);
holder.slide.blog.image = (ImageView) convertView.findViewById(R.id.imageInLayout);
convertView.setTag(holder);
}
else {
holder = (ViewHolder) convertView.getTag();
}
//Can write to getClass() for either?
//Ex: holder.(setImageResource(cVD) || setText(cVD)).getClass ??
holder.image.setImageResource(customVariableDisplay.get(position).getImageofTheDay());
holder.message.setText(customVariableDisplay.get(position).getMessageOfTheDay());
}
return convertView;
}
//Else if the element of the slide is an 'advertisement' then the getView will return...
else if (slide==slide.advertisement){
public View getView ( int position, View convertView, ViewGroup parent){
ViewHolder holder;
if (convertView == null) {
convertView = layoutInflater.inflate(R.layout.act_layout, null);
holder = new ViewHolder();
holder.slide.advertisement.imagead1 = (ImageView)convertView.findViewById(R.id.imageAdOneInAdvertisementLayout);
holder.slide.blog.image = (ImageView)convertView.findViewById(R.id.imageAdTwoInAdvertismentLayout);
convertView.setTag(holder);
}
else {
holder = (ViewHolder) convertView.getTag();
}
holder.imagead1.setImageResource(customVariableDisplay.get(position).getImageViewAd1());
holder.imagead2.setImageResource(customVariableDisplay.get(position).getImageViewAd2());
}
return convertView;
}
else{
//Throw a final View exception for unprecedented errors!!
}
}
}`
I am stuck with what to a way to ask Java what class is it inside the if statements. // If this slide comprises the class blog... etc. ANY HELP APPRECIATED! THANKS!
You can declare one variable slideType in your adapter and pass it to your adapter constructor and based on that value inflate your layout in onBindViewHolder(), onCreateViewHolder()
int slideType;
public CustomListAdapter(Context context, ArrayList<slide>customVariableDisplay, int slideType) {
this.slideType = slideType;
}
and also define three separate method in your adapter to pass your list so that you can bind your data.
Does this ListView show a mix of video, blog etc.. if yes then you need use below checking.
if(null != slide.video){
// add code for video
}
else if(null != slide.blog){
// add code for blog
}
else if (null != slide.advertisement){
// add code for advertisement
}
Also you need to set null for blog and advertisement in slide object or don't initialize them in case the item you want to show is video
I am currently having a little problem with my application. It is a music player and is working perfectly, except for one annoyance. When I run my SongAdapter, it will load a lot of views with the songs that are present on the device. However, this is way too heavy to load on the Main Thread, therefore I tried running it in the background. However, this isn't fast enough.
Main question:
Is there any fast and reliable way to load the images into the views.
Here is the code of my SongAdapter.java:
public class SongAdapter extends BaseAdapter {
//song list and layout
private ArrayList<Song> songs;
private LayoutInflater songInf;
//constructor
public SongAdapter(Context c, ArrayList<Song> theSongs){
songs=theSongs;
songInf=LayoutInflater.from(c);
}
#Override
public int getCount() {
return songs.size();
}
#Override
public Object getItem(int arg0) {
return null;
}
#Override
public long getItemId(int arg0) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
//map to song layout
RelativeLayout songLay = (RelativeLayout) songInf.inflate(R.layout.song_list_item, parent, false);
//get title and artist views
TextView songView = (TextView)songLay.findViewById(R.id.titleListTextView);
TextView artistView = (TextView)songLay.findViewById(R.id.artistListTextView);
RelativeLayout relativeLayout = (RelativeLayout)songLay.findViewById(R.id.layoutSelector);
RoundedImageView albumView = (RoundedImageView)songLay.findViewById(R.id.albumListImageView);
//get song using position
Song currSong = songs.get(position);
//get title and artist strings
albumView.setImageBitmap( getAlbumart(currSong, parent.getContext()) );
songView.setText(currSong.getTitle());
artistView.setText(currSong.getArtist());
relativeLayout.setTag( currSong.getID());
return songLay;
}
public Bitmap getAlbumart(Song currentSong, Context context ) {
Bitmap bm = BitmapFactory.decodeResource(context.getResources(), R.drawable.album_default);
long albumId = (long) currentSong.getAlbumId();
try {
final Uri sArtworkUri = Uri.parse("content://media/external/audio/albumart");
Uri uri = ContentUris.withAppendedId(sArtworkUri, albumId);
ParcelFileDescriptor pfd = context.getContentResolver().openFileDescriptor(uri, "r");
if (pfd != null) {
FileDescriptor fd = pfd.getFileDescriptor();
bm = BitmapFactory.decodeFileDescriptor(fd);
}
} catch (Exception e) {
Log.d("Var log", "Error:" + e);
}
return bm;
}
}
Thanks for the help.
aside of using Picasso or any other library to load bitmaps.
below is a code same to recycle views, just replace the setImageBitmap() with the one you are usign now (Picasso or whatever)
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHodler holder = null;
if(convertView == null){
holder = new ViewHodler();
convertView = songInf.inflate(R.layout.song_list_item, parent, false);
holder.songView = (TextView)convertView.findViewById(R.id.titleListTextView);
holder.artistView = (TextView)convertView.findViewById(R.id.artistListTextView);
holder.albumView = (RoundedImageView)convertView.findViewById(R.id.albumListImageView);
holder.relativeLayout = (RelativeLayout)convertView.findViewById(R.id.layoutSelector);
convertView.setTag(holder);
}else{
holder =(ViewHodler) convertView.getTag();
}
//get song using position
Song currSong = songs.get(position);
//get title and artist strings
holder.albumView.setImageBitmap( getAlbumart(currSong, parent.getContext()) ); // replace getAlbumart() with the new way you are using
holder.songView.setText(currSong.getTitle());
holder.artistView.setText(currSong.getArtist());
holder.relativeLayout.setTag( currSong.getID());
return convertView;
}
class ViewHodler{
TextView songView;
TextView artistView;
RelativeLayout relativeLayout;
RoundedImageView albumView;
}
PS: getting RelativeLayout i mean this R.id.layoutSelector
if it's a big view it will load more memory.
Universal Image Loader aims to provide a powerful, flexible and highly customizable instrument for image loading, caching and displaying. It provides a lot of configuration options and good control over the image loading and caching process.
It works for me, hope it will solve your problem.
I am trying to implement ViewHolder in my Android app, but I keep getting that ViewHolder cannot be resolved to a type, without any suggestions for an import. Anyone know how to get around this?
That's because a ViewHolder is not a class that is from the Android SDK, you make it yourself.
Based on what I can find, a ViewHolder is an implementation that stores Views (per row in a ListView usually) for a larger area, so it is a sort of helper class and cache mechanism. This is one example I found on Android Developers of what a ViewHolder would contain.
static class ViewHolder {
TextView text;
TextView timestamp;
ImageView icon;
ProgressBar progress;
int position;
}
Then you can implement it in a ListAdapter or a similar class.
**Create a Holder class**
protected static class ViewHolderItems
{
private ImageView mStoreImage;
private TextView mStoreName;
}
And use In getView method of adapter
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolderItems viewHolder;
if (inflater == null)
inflater = (LayoutInflater) activity
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = inflater.inflate(R.layout.coupen_row, null);
viewHolder = new ViewHolderItems();
viewHolder.mStoreImage = (ImageView) convertView.findViewById(R.id.storeImage);
viewHolder.mStoreName = (TextView) convertView.findViewById(R.id.storeName);
convertView.setTag(viewHolder);
}
else
{
viewHolder = (ViewHolderItems) convertView.getTag();
}
return convertView;
}
Maybe you are looking for the RecyclerView.ViewHolder which is part of the android support lib.
Like the code from this link gist by Paul Burke
public static class ItemViewHolder extends RecyclerView.ViewHolder implements
ItemTouchHelperViewHolder {
public final TextView textView;
public final ImageView handleView;
public ItemViewHolder(View itemView) {
super(itemView);
textView = (TextView) itemView.findViewById(R.id.text);
handleView = (ImageView) itemView.findViewById(R.id.handle);
}
#Override
public void onItemSelected() {
itemView.setBackgroundColor(Color.LTGRAY);
}
#Override
public void onItemClear() {
itemView.setBackgroundColor(0);
}
}
This would make sense for you if you were working with an Android RecyclerView
In this case they need an object to hold the view so that it can be filled with content as needed.