Retrieve image from SQLite database and show in ListView

Question

Stuck with a problem. I am new to android development. My problem is i have a SQLite database in which i am saving image and some data but when i am retrieving that data image is not showing up in listview. Other data is getting dispalyed.

This is my Custom List Layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/petImageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="5dp"
        android:layout_marginTop="0dp"
        android:src="@drawable/cat1"/>

    <TextView
        android:id="@+id/petNameTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="22dp"
        android:layout_marginRight="50dp"
        android:layout_toEndOf="@id/petImageView"
        android:layout_toRightOf="@id/petImageView"
        android:background="@android:color/background_light"
        android:textAlignment="center"
        android:textSize="35sp"
        android:textStyle="bold" />

    </RelativeLayout>

This is my Custom Adapter

public class CustomAdapter extends BaseAdapter {

private int layout;
private ArrayList<DataList> recordList;
private Context context;

public CustomAdapter(Context context, int layout, ArrayList<DataList> recordList) {
    this.context = context;
    this.recordList = recordList;
    this.layout=layout;
}

public int getCount() {
    return recordList.size();
}

public Object getItem(int position) {
    return recordList.get(position);
}

public long getItemId(int position) {
    return position;
}

private class ViewHolder{

    ImageView petImageView;
    TextView petNameTextView;
}


public View getView(int position, View convertView, ViewGroup parent) {

    View v = convertView;
    ViewHolder holder = new ViewHolder();
    if (v == null) {
        LayoutInflater layoutInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = layoutInflater.inflate(layout, null);
        holder.petImageView =  v.findViewById(R.id.petImageView);
        holder.petNameTextView = v.findViewById(R.id.petNameTextView);
        v.setTag(holder);
    }else{
        holder = (ViewHolder)v.getTag();
    }



    DataList datalist = recordList.get(position);
    holder.petNameTextView.setText(datalist.getName());

    byte[] recordImage = datalist.getImage();
    Bitmap bitmap = BitmapFactory.decodeByteArray(recordImage, 0, recordImage.length);
    holder.petImageView.setImageBitmap(bitmap);


    return v;
}

}

And this is the Activity

public class myPetsActivity extends AppCompatActivity {

ListView myPetList;
ArrayList<DataList> petList = new ArrayList<DataList>();
CustomAdapter customAdapter;
ImageView petImageView;
DatabaseHelper mDatabaseHelper;

String name;
byte[] image;
int id;

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my_pets);


    myPetList = findViewById(R.id.petsListView);
    petList = new ArrayList<>();
    customAdapter = new CustomAdapter(this, R.layout.custom_list_layout, petList);
    myPetList.setAdapter(customAdapter);

    mDatabaseHelper = new DatabaseHelper(this);

    Cursor data = mDatabaseHelper.getData("SELECT * FROM pet_table");
    petList.clear();
    while(data.moveToNext()) {

        id = data.getInt(0);
        name = data.getString(1);
        image = data.getBlob(2);

        petList.add(new DataList(id, name, image));
        Log.i("image",String.valueOf(image));
    }
    customAdapter.notifyDataSetChanged();
    }
    }

And this is the DataList

    public class DataList {

private int id;
private byte[] image ;
private String name;

public DataList(int id, String name, byte[] image){

    this.id=id;
    this.name=name;
    this.image=image;
}

public int getId() {
    return id;
}

public void setId(int id) {
    this.id = id;
}

public byte[] getImage() {
    return image;
}

public void setImage(byte[] image) {
    this.image = image;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}
}

Answer 1

Try using a recyclerview instead of listview which is deprecated: developer.android.com/guide/topics/ui/layout/recyclerview If a image is being shown but not the right one it is probably in your adapter code.

You could instantiate the adapter after the while loop too.

Remove this line of code:

View v = convertView;

In java when you assign objects to each other it does not mean they are the same thing, they simply point to the same reference in the memory. Java treats primitive objects and the others a bit different.

Follow this example: https://www.javacodegeeks.com/2013/09/android-viewholder-pattern-example.html

Answer 2

Have you considered saving image as String to database(Base64)? And simple convert it back after reading it from DB. Here you have methods to do so: How to convert a captured Image or image selected from gallary to base64?

Answer 3

Intrinsically there is nothing wrong with your code as shown. So the issue is probably with the storage of the image into the database.

• Note See the comment regarding storing images in the database.

Working Example

The following working example, with only minor changes to your code and then really only suggestions (one exception being the that myPetsActivity has been named MyPetsActivity to follow common conventions). However, DatabaseHelper.java has been written in it's entirety and will likely not fully reflect your DatabaseHelper.java

One difference is that the images themselves have been placed into the assets folder and are retrieved from that folder for storing into the pet_table table see the addPetWithImageFromAssets method in the DatabaseHelper.java class.

Another difference is that the above method has been used to populate the Database with some testing data (see the addSomeData method in MyPetsActivity.java ). One row for the pet named Mr. Invisible Pet has been given a non-existing image (which will result in the BLOB using the default value of x'00' for the image, this is fine as it doesn't display).

custom_list_layout.xml has had the unecessary RelativeLayout removed (it still works if it is not removed). To properly suit my testing (using Android 4.1.1 device) it also has 2 attributes added marginLeft and alignParentLeft.

The images

I just copied some small available JPG images into the assets folder which looks like :-

• Note names are relevant, the actual images aren't (as I said just some I had lying around)

The Code

DatabaseHelper.java

public class DatabaseHelper extends SQLiteOpenHelper {

    public static final String DBNAME = "mypets.db";
    public static final int DBVERSION = 1;
    public static final String TABLE_PET = "pet_table";
    public static final String COLUMN_PET_ID = BaseColumns._ID;
    public static final String COLUMN_PET_NAME = "name";
    public static final String COLUMN_PET_IMAGE = "image";
    public static final String COLUMN_PET_IMAGEPATH = "imagepath";

    SQLiteDatabase mDB;
    Context mContext;

    public DatabaseHelper(Context context) {
        super(context, DBNAME, null, DBVERSION);
        mContext = context;
        mDB = this.getWritableDatabase();
    }

    @Override
    public void onCreate(SQLiteDatabase db) {
        String crt_pet_table = "CREATE TABLE IF NOT EXISTS " + TABLE_PET + "(" +
                COLUMN_PET_ID + " INTEGER PRIMARY KEY, " +
                COLUMN_PET_NAME + " TEXT," +
                COLUMN_PET_IMAGE + " BLOB DEFAULT x'00'," +
                COLUMN_PET_IMAGEPATH + " TEXT DEFAULT ''" +
                ")";
        db.execSQL(crt_pet_table);
    }

    @Override
    public void onUpgrade(SQLiteDatabase db, int i, int i1) {
    }

    /**
     * NOT USED
     * @param petname
     * @return
     */
    public long addPet(String petname) {
        ContentValues cv = new ContentValues();
        cv.put(COLUMN_PET_NAME,petname);
        return mDB.insert(TABLE_PET,null,cv);
    }

    public long addPetWithImageFromAssets(String petname, String petimagename)  {
        byte[] petimage = new byte[0];
        int image_size = 0;

        try {
            InputStream is = mContext.getAssets().open(petimagename);
            image_size = is.available();
            petimage = new byte[image_size];
            is.read(petimage);
            is.close();

        } catch (IOException e) {
        }
        ContentValues cv = new ContentValues();
        cv.put(COLUMN_PET_NAME,petname);
        if (image_size > 0) {
            cv.put(COLUMN_PET_IMAGE,petimage);
        }
        return mDB.insert(TABLE_PET,null,cv);
    }

    public Cursor getData(String query) {
        return mDB.rawQuery(query,null);
    }
}

• Note!!! you would have to adapt the above to suit.

DataList.java

public class DataList {

    /**
     * NOTE changed id to use long rather than int
     */

    private long id;
    private byte[] image ;
    private String name;

    public DataList(int id, String name, byte[] image){

        this.id=id;
        this.name=name;
        this.image=image;
    }

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public byte[] getImage() {
        return image;
    }

    public void setImage(byte[] image) {
        this.image = image;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

• This has only been changed to use long for the id as int could be too small if there are many thousands of millions of rows.

MyPetsActivity.java

public class MyPetsActivity extends AppCompatActivity {

    ListView myPetList;
    ArrayList<DataList> petList = new ArrayList<DataList>();
    CustomAdapter customAdapter;
    ImageView petImageView;
    DatabaseHelper mDatabaseHelper;

    String name;
    byte[] image;
    int id;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_pets);


        myPetList = findViewById(R.id.petsListView);
        petList = new ArrayList<>();
        customAdapter = new CustomAdapter(this, R.layout.custom_list_layout, petList);
        myPetList.setAdapter(customAdapter);

        mDatabaseHelper = new DatabaseHelper(this);
        addSomeData(); //<<<<<<<<<< FOR DEMO

        Cursor data = mDatabaseHelper.getData("SELECT * FROM pet_table");
        petList.clear();
        while(data.moveToNext()) {

            id = data.getInt(0);
            name = data.getString(1);
            image = data.getBlob(2);

            petList.add(new DataList(id, name, image));
            Log.i("image",String.valueOf(image));
        }
        data.close(); //<<<<<<<<<< SHOULD ALWAYS CLOSE CURSOR WHEN DONE WITH IT
        customAdapter.notifyDataSetChanged();
    }


    private void addSomeData() {
        mDatabaseHelper.getWritableDatabase().delete(DatabaseHelper.TABLE_PET,null,null); //<<<<<<<<<< Delete all pets
        mDatabaseHelper.addPetWithImageFromAssets("Fluffy","mypet001.JPG");
        mDatabaseHelper.addPetWithImageFromAssets("Not Fluffy","mypet002.JPG");
        mDatabaseHelper.addPetWithImageFromAssets("Petty","mypet003.JPG");
        mDatabaseHelper.addPetWithImageFromAssets("Mr. Invisible Pet","noimageforthispet"); //<<<<<<< ooops!!!!!
    }
}

• Note the method addSomeData was added to load some testing data, including images (except for the last row added which names a non-existing image file (asset)).

CustomAdapter.java

• Unchanged.

activity_my_pets.xml

• very basic but assumed.

.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
    <ListView
        android:id="@+id/petsListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>
</LinearLayout>

custom_list_layout.xml

• minor insignificant changes

  <TextView android:id="@+id/petNameTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginLeft="50dp" android:layout_marginTop="22dp" android:layout_marginRight="50dp" android:layout_toEndOf="@id/petImageView" android:layout_toRightOf="@id/petImageView" android:background="@android:color/background_light" android:textAlignment="center" android:textSize="35sp" android:textStyle="bold" />

Result