Develop Reference

ImageView returns to Null set by the Drawable files in Android [duplicate]

This question already has answers here:
How to convert a Drawable to a Bitmap?
(22 answers)
Closed 1 year ago.
I know this is a common question to ask but yet I have a problem which the ImageView returns to null. I just want to know if it is possible to call an xml file from the drawable and convert it to Byte []. One thing it returns a null because I didn't declare ImvTempCashCard = findViewById(R.id.ImageView);.Is there any other way to call drawable image without using ImageView?.I just want to set temporary value to ImvTempCashCard which assign image from the drawable files, It is necessary to use setBackgroundResource to ImageView?
error
Attempt to invoke virtual method 'void android.widget.ImageView.setBackgroundResource(int)' on a null object reference
Source
ImageView ImvTempCashCard;
ImvTempCashCard.setBackgroundResource(R.drawable.ic_creditcard);
Bitmap bitmap = ((BitmapDrawable)ImvTempCashCard.getDrawable()).getBitmap();
ImvTempCashCard.setImageBitmap(Bitmap.createScaledBitmap(bitmap, 120, 120, false));
ByteArrayOutputStream stream = new ByteArrayOutputStream();
byte [] byteimage = stream.toByteArray();
//byteimage = returns to null
Latest update:
Actually This will view and add to my GridView, while looping the query, the condition is, when the blob image is null then it will replace the drawable files image. Did I implement it correctly?
try {
Cursor cursor = MainActivity.sqLiteHelper.getData("SELECT id,cash_card_actual_no,hh_number,series_number,cc_image, id_image, cash_card_scanned_no FROM CgList");
list.clear();
while (cursor.moveToNext()) {
int id = cursor.getInt(0);
byte[] CashCardImage = cursor.getBlob(4);
if (CashCardImage.length ==1){
Bitmap bitmap = BitmapFactory.decodeResource(getApplicationContext().getResources(),R.drawable.ic_creditcard);
ByteArrayOutputStream stream = new ByteArrayOutputStream();
byte [] z = stream.toByteArray();
CashCardImage = z;
}
list.add(new Inventory(cashCardNumber, CashCardImage,id));
}
adapter.notifyDataSetChanged();
}
Adapter inside onCreate
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_inventory_list);
gridView = (GridView) findViewById(R.id.gridView);
list = new ArrayList<>();
adapter = new InventoryListAdapter(this, R.layout.activity_inventory_items, list);
gridView.setAdapter(adapter);
InventoryListAdapter class
public class InventoryListAdapter extends BaseAdapter {
private Context context;
private int layout;
private ArrayList<Inventory> foodsList;
public InventoryListAdapter(Context context, int layout, ArrayList<Inventory> foodsList) {
this.context = context;
this.layout = layout;
this.foodsList = foodsList;
}
#Override
public int getCount() {
return foodsList.size();
}
#Override
public Object getItem(int position) {
return foodsList.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
private class ViewHolder{
ImageView imageView;
}
#Override
public View getView(int position, View view, ViewGroup viewGroup) {
View row = view;
ViewHolder holder = new ViewHolder();
if(row == null){
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
row = inflater.inflate(layout, null);
holder.imageView = (ImageView) row.findViewById(R.id.imgFood);
row.setTag(holder);
}
else {
holder = (ViewHolder) row.getTag();
}
Inventory inventory = foodsList.get(position);
byte[] foodImage = inventory.getImage();
Bitmap bitmap = BitmapFactory.decodeByteArray(foodImage, 0, foodImage.length);
holder.imageView.setImageBitmap(bitmap);
return row;
}
}

Your goal is to display a placeholder image from drawable in a grid view when the image is not found from the database. You can put all the logic inside the getView() in the adapater. Check if the image data does not exist, then call setImageResource instead of setImageBitmap.
First, no need to do any extra steps when constructing the list
Cursor cursor = MainActivity.sqLiteHelper.getData("SELECT id,cash_card_actual_no,hh_number,series_number,cc_image, id_image, cash_card_scanned_no FROM CgList");
list.clear();
while (cursor.moveToNext()) {
int id = cursor.getInt(0);
byte[] CashCardImage = cursor.getBlob(4);
list.add(new Inventory(cashCardNumber, CashCardImage,id));
}
adapter.notifyDataSetChanged();
Then change your getView() like this:
#Override
public View getView(int position, View view, ViewGroup viewGroup) {
View row = view;
ViewHolder holder = new ViewHolder();
if(row == null){
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
row = inflater.inflate(layout, null);
holder.imageView = (ImageView) row.findViewById(R.id.imgFood);
row.setTag(holder);
}
else {
holder = (ViewHolder) row.getTag();
}
Inventory inventory = foodsList.get(position);
byte[] foodImage = inventory.getImage();
if(foodImage.length > 1)
{
Bitmap bitmap = BitmapFactory.decodeByteArray(foodImage, 0, foodImage.length);
holder.imageView.setImageBitmap(bitmap);
}
else{
holder.imageView.setImageResource (R.drawable.ic_creditcard)
}
return row;
}
Tips: Whenever you want to display something to the view that don't need extra processing, try to do it as directly as possible. Avoid extracting the data, storing the data somewhere and pass it around etc. Just get the data to the view you want to display directly.

"Flickering images" with ViewHolder pattern when downloading images from server

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;
}

Grid view gallery reading from SD card

I have a grid view that loads all the images from a specific folder into itself. I'm trying to get it so that when a user click an individual image within the grid view it sets an enlarged version of itself within an image view. I think what I need to try and do is when the grid view is created and the images loaded into it, I need to attach an array to both the imageview created holding the image within the gridview and the location of it within the SD card. So when an image is loaded; save location of image and attach it to the imageview within gridview. What I have so far loads the last picture loaded from the SD card into the enlarged image view.
Main.java
public class Main extends Activity{
ImageView photoHolder;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.gallery);
photoHolder = (ImageView) findViewById(R.id.photoHolderView);
photoHolder.setVisibility(View.GONE);
GridView gridView = (GridView) findViewById(R.id.grid_view);
gridView.setVisibility(View.VISIBLE);
gridView.setAdapter(new ImageAdapter(this));
gridView.setOnItemClickListener(new OnItemClickListener()
{
#Override
public void onItemClick(AdapterView<?> a, View view, int position, long id) {
photoHolder.setVisibility(View.VISIBLE);
photoHolder.setImageURI(ImageAdapter.uri);
}
});
}
}
ImageAdapter.java
public class ImageAdapter extends BaseAdapter {
public static Uri uri;
private Context mContext;
File root = new File(Environment.getExternalStorageDirectory()
+ File.separator + "Custom" + File.separator);
private File[] fileName = root.listFiles();
int count = fileName.length;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return fileName.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
uri = Uri.fromFile(fileName[position]);
ImageView imageView;
if (convertView == null) { // if it's not recycled, initialize some
// attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageURI(uri);
return imageView;
}
}
On a side note it crashes quite a lot due to memory leaks, any idea how I would create a "sample/thumbnail" size image whilst loading it from the SD card?

You are right in stating that you need to keep track of the filenane/location for each of the thumbnail. The easiest way would be to amend your getView method and add one line:
imageView.setImageURI(uri);
imageView.setTag(uri); //new line added
return imageView;
Then, in your onItemClickListener you get the clicked imageview - and get its tag - that will be the filename on the SD card:
public void onItemClick(AdapterView<?> a, View view, int position, long id) {
photoHolder.setVisibility(View.VISIBLE);
photoHolder.setImageURI((Uri)view.getTag());
}
As for the memory issue when loading the bitmap, you can use BitmapFactory.Options to indicate the scaling factor - have a look at this page on Android developer website - it contains the sample code you need.

Grow Heaps in Android ListView

In a nutshell, I have a ListView and when I scroll through it, I get grow heaps and on the device I can see it hooking. I've read something about recycling Bitmaps, but I haven't found a solution for doing this in my project.
TeamFragment.java:
public class TeamFragment extends ListFragment implements OnItemClickListener {
private TeamListAdapter adapter;
public TeamFragment() {}
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
this.fragmentNumber = getArguments().getInt(ARG_FRAGMENT_NUMBER);
adapter = new TeamListAdapter(this.getActivity());
setListAdapter(adapter);
getListView().setOnItemClickListener(this);
}
#Override
public void onItemClick(AdapterView<?> adapterView, View view,
int position, long id) {
Intent intent = new Intent(view.getContext(), TeamDetailActivity.class);
Bundle extra = new Bundle();
extra.putInt("drawable", adapter.getItem(position).getDrawable());
extra.putString("name", adapter.getItem(position).getName());
extra.putString("title", adapter.getItem(position).getTitle());
extra.putString("description", adapter.getItem(position).getDescription());
intent.putExtra("extra", extra);
startActivityForResult(intent, 0);
}
}
TeamListAdapter.java
public class TeamListAdapter extends BaseAdapter {
private final LayoutInflater inflater;
private final List<HumanItem> humanItems;
private String[] teamname_array;
private String[] teamname_extra_array;
private String[] teamdescription_array;
private String[] teamid_array;
public TeamListAdapter(Context context) {
inflater = LayoutInflater.from(context);
humanItems = new ArrayList<HumanItem>();
teamid_array = context.getResources().getStringArray(
R.array.teamids);
teamname_array = context.getResources().getStringArray(
R.array.teamnames);
teamname_extra_array = context.getResources().getStringArray(
R.array.teamnames_extra);
teamdescription_array = context.getResources().getStringArray(
R.array.teamdescriptions);
HumanItem tmp;
int resId;
int i = 0;
for(String name : teamid_array) {
resId = context.getResources().getIdentifier("team_" + name, "drawable", context.getPackageName());
tmp = new HumanItem(name, resId, teamname_array[i], teamname_extra_array[i], teamdescription_array[i]);
String TAG = TeamListAdapter.class.getSimpleName();
Log.d(TAG , "team_" + name);
i++;
humanItems.add(tmp);
}
}
#Override
public int getCount() {
return humanItems.size();
}
#Override
public HumanItem getItem(int position) {
return humanItems.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
// build contentView if necessary
if (convertView == null) {
convertView = inflater.inflate(R.layout.fragment_news, parent,
false);
// create holder
holder = new ViewHolder();
holder.bubble = (TextView) convertView
.findViewById(R.id.news_bubble);
holder.title = (TextView) convertView.findViewById(R.id.news_title);
holder.summary = (TextView) convertView
.findViewById(R.id.news_summary);
holder.teaser = (ImageView) convertView
.findViewById(R.id.news_drawable);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
// Context context = parent.getContext();
HumanItem humanItem = getItem(position);
holder.bubble.setVisibility(View.GONE);
holder.title.setText(humanItem.getTitle());
holder.summary.setText(humanItem.getSummary());
holder.teaser.setImageResource(humanItem.getDrawable());
return convertView;
}
static class ViewHolder {
TextView bubble, title, summary;
ImageView teaser;
}
}
One of the many grow heaps:
12-31 13:49:31.756: I/dalvikvm-heap(27543): Grow heap (frag case) to 23.180MB for 2569892-byte allocation
So where do I have to recycle Bitmaps? Or is there another way of preventing grow heaps?

Actually it is not good to do what you want as eventually you will get the outOfMemoryError.
To handle bitmap You can see my answer here.It will be useful to handle your bitmap efficiently.
Just check it out..!
How to make application more responsive which uses several bitmaps?

If you need to show a list of images, I suggest to check this library, I used this library and works really fine with 0 freezes and estable heap: Universal Image Loader

How to create a listview which have a customize look? [duplicate]

Can someone tell me how should am i going to create my listview which look similar [here][1].
Problem: How am i going to fulfill the sort of look and feel in my codes which has an icons, file name, and file size yet at the same time looking clean and simple on each file object as shown in the example in the link [here][2]??
Can someone guide on this matter because i'm rather new in android/java... Thanks

Refer to following url for how to implement custom listview
Update
public static class VideoInfo {
public String name = "";
public String size= "";
public String path = "";//add any more variables of which you want info
}
then where you are creating arraylist i.e getVideoFiles() create object of this class
Declare ArrayList<VideoInfo> videoItems;
private void getVideoFiles(File[] videoList)
{
videoItems = new ArrayList<VideoInfo>();
for (int i = 0; i < videolist.length; i++)
{
File mfile = videoList[i];
String path = mfile.getPath();
path = path.substring(path.lastIndexOf("/", path.indexOf("."));
VideoInfo model = new VideoInfo();
model.name = path;
model.size = mfile.length();
videoItems.add(model);
}
setListAdapter(new ListViewAdapter(this, R.layout.row, videoItems));
}
now in your adapter pass this object of arraylist and how you set variables in listview is already given in link above

Problem 2: And why is my listview
having error when the directory is
empty despite having this to handle
the "empty" in my xml
did you remember to name your listview?:
#id/android:list
And if you could for further helper PLEASE clear up problem 1, so its more clear and concise what you want.
UPDATE
The ID of the listview should be: #id/android:list
The ID of the texview should be: #id/android:empty

You haven't create custom adapter to incorporate the layout into codes listview.
Here is something you can use
private class ListViewAdapter extends ArrayAdapter<Object> {
private ArrayList<Object> items;
public ListViewAdapter(Context context, int textViewResourceId,
ArrayList<Object> items) {
super(context, textViewResourceId, items);
this.items = items;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
Object info = items.get(position);
if (v == null) {
LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.row, null);
}
if (info != null) {
ImageView imView = (ImageView) v.findViewById(R.id.icon);
TextView txtname =(TextView) v.findViewById(R.id.toptext);
TextView txtAddr = (TextView) v.findViewById(R.id.bottomtext);
//set image and set text as you like
}
return v;
}
}
Hope this can help.

First Create the Layout that you want to display for each row in your list then Extend the BaseAdapter class to Customize your Lists. This class contains getView method to replicate the rows in your lists as many times as you want to.
class HighScoreAdapter extends BaseAdapter
{
/* layout inflater to convert your XML layout to View to be rendered in your Each row of Lists.*/
private LayoutInflater minflator = LayoutInflater.from(HighScoreList.this);
ViewHolder holder;
#Override
public Object getItem(int position)
{
return position;
}
#Override
public long getItemId(int position)
{
return position;
}
boolean toRemove = false;
#Override
public View getView(int position, View convertView, ViewGroup parent)
{
/* first time is null */
if (convertView == null )
{
convertView = minflator.inflate(R.layout.highscorelist, null);
holder = new ViewHolder();
holder.rank = (TextView) convertView.findViewById(R.id.user_id);
holder.username = (EditText) convertView.findViewById(R.id.user_nameedit);
holder.time = (TextView) convertView.findViewById(R.id.user_time);
convertView.setTag(holder);
}
else
{
holder = (ViewHolder) convertView.getTag();
}
holder.rank.setText(String.valueOf(position+1)+".");
/* returns the view for next row as layout will be same i.e. this increases the your list's scrolling and working faster even though your list contains thousands of Entry*/
return convertView;
}
/* this class is to make reference to your child views of your layout by using this you can set your child views properties and Listeners acording to your need.*/
class ViewHolder
{
TextView rank;
EditText username;
TextView time;
}
}
I hope this solves your problem completely.. :)

Add this method to your code and if you get any error or Exception please let me know.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
Object info = items.get(position);
if (v == null) {
LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.row, null);
}
if (info != null) {
ImageView imView = (ImageView) v.findViewById(R.id.icon);
TextView txtname =(TextView) v.findViewById(R.id.toptext);
TextView txtAddr = (TextView) v.findViewById(R.id.bottomtext);
//set image and set text as you like
imview.setImageBitmap(IMAGE YOU WANT TO SET AAS ICON);
txtname.setText(FILENAME YOU WANT TO SET);
txtadr,setText(FILESIZE YOU WANT TO SET);
// Better you take each info filename,filesize and icon in a arraylist and set them
}
return v;
}