Menampilkan Gambar dari Database Sqlite di Android

Pada tutorial kali ini akan membahas bagaimana menampilkan gambar dari database sqlite di Android. Disini file gambar disimpan di dalam folder asset, kemudian pada databasenya hanya disimpan nama dari file gambar yang ada di folder asset tersebut. Tutorial ini bersifat statis dimana gambar yang akan ditampilkan sudah dipersiapkan sebelumnya, jadi tidak menangani untuk operasi penambahan gambar.
Well, langsung saja ke langkah-langkahnya...
Disini sama seperti tutorial sebelumnya dimana kita membuat database terlebih dahulu baru kemudian database itu dicopy ke aplikasi.
1. Siapkan gambar yang akan ditampilkan.
2. Buatlah database "dbimages.sqlite" (tanpa tanda petik).
3. Buatlah Tabel. Jangan lupa buat tabel “android_metadata” (tanpa tanda petik) dan isikan dengan ‘en_US’ (tanpa tanda petik). Selanjutnya buat tabel "tbimages" (tanpa tanda petik) dengan field-field "_id,images" (tanpa tanda petik) dengan tipe data "_id" adalah integer primary key dan "images" adalah text. isi kurang lebih seperti berikut ini:

4. Buatlah sebuah project, kemudian Copy-kan file database yang sudah dibuat dan gambar yang sudah dipersiapkan sebelumnya di folder asset.

5. Atur main.xml seperti berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@drawable/bg2">
<TextView android:id="@+id/imagesid"
           android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_gravity="center"
        />
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:contentDescription="@string/imagesdescription"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="20dp"/>

<LinearLayout android:id="@+id/linearLayout02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="center">
    <Button android:id="@+id/btnPrev"
        android:layout_width="90dp"
        android:layout_height="50dp"
        android:layout_marginRight="70dp"
        android:text="@string/btnprev"
        android:background="@drawable/biru"
        android:textStyle="bold"
      />
    <Button android:id="@+id/btnNext"
        android:layout_width="90dp"
        android:layout_height="50dp"
        android:text="@string/btnnext"
        android:background="@drawable/biru"
        android:textStyle="bold"
        />
</LinearLayout>
</LinearLayout>

6. Selanjutnya buat sebuah class untuk menangani database. Beri nama "DatabaseHelper" (tanpa tanda petik). Tuliskan script seperti berikut ini:

package com.aina.imagesproject;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import android.annotation.SuppressLint;
import android.content.Context;
import android.database.Cursor;
import android.database.SQLException;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;

@SuppressLint("SdCardPath")
public class DatabaseHelper extends SQLiteOpenHelper{
    //The Android's default system path of your application database.
    String DB_PATH =null;

    private static String DB_NAME = "dbimages.sqlite";

    private SQLiteDatabase myDataBase;

    private final Context myContext;

   // private static SQLiteDatabase    db;

    public static final String        COL_ID            = "_id";
    public static final String        COL_IMG            = "images";

    /**
     * Constructor
     * Takes and keeps a reference of the passed context in order to access to the application assets and resources.
     * @param context
     */
    public DatabaseHelper(Context context) {

        super(context, DB_NAME, null, 1);
        this.myContext = context;
        DB_PATH="/data/data/"+context.getPackageName()+"/"+"databases/";
    }

/**
     * Creates a empty database on the system and rewrites it with your own database.
     * */
    public void createDataBase() throws IOException{

        boolean dbExist = checkDataBase();

        if(dbExist){
            //do nothing - database already exist
        }else{

            //By calling this method and empty database will be created into the default system path
               //of your application so we are gonna be able to overwrite that database with our database.
            this.getReadableDatabase();

            try {

                copyDataBase();

            } catch (IOException e) {

                throw new Error("Error copying database");

            }
        }

    }

    /**
     * Check if the database already exist to avoid re-copying the file each time you open the application.
     * @return true if it exists, false if it doesn't
     */
    private boolean checkDataBase(){

        File dbFile = new File(DB_PATH + DB_NAME);
        return dbFile.exists();
    }

    /**
     * Copies your database from your local assets-folder to the just created empty database in the
     * system folder, from where it can be accessed and handled.
     * This is done by transfering bytestream.
     * */
    private void copyDataBase() throws IOException{

        //Open your local db as the input stream
        InputStream myInput = myContext.getAssets().open(DB_NAME);

        // Path to the just created empty db
        String outFileName = DB_PATH + DB_NAME;

        //Open the empty db as the output stream
        OutputStream myOutput = new FileOutputStream(outFileName);

        //transfer bytes from the inputfile to the outputfile
        byte[] buffer = new byte[1024];
        int length;
        while ((length = myInput.read(buffer))>0){
            myOutput.write(buffer, 0, length);
        }

        //Close the streams
        myOutput.flush();
        myOutput.close();
        myInput.close();

    }

    public void openDataBase() throws SQLException{

        //Open the database
        String myPath = DB_PATH + DB_NAME;
        myDataBase = SQLiteDatabase.openDatabase(myPath, null, SQLiteDatabase.OPEN_READONLY);

    }

    @Override
    public synchronized void close() {

            if(myDataBase != null)
                myDataBase.close();

            super.close();

    }

    @Override
    public void onCreate(SQLiteDatabase db) {

    }

    @Override
    public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {

    }
    public Cursor query(String table,String[] columns, String selection,String[] selectionArgs,String groupBy,String having,String orderBy){
        return myDataBase.query("tbimages", null, null, null, null, null, null);


    }
}

7. Untuk class "MainActivity" , tuliskan script seperti berikut ini:

package com.aina.imagesproject;

import java.io.IOException;
import java.io.InputStream;

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.app.Activity;
import android.database.Cursor;
import android.database.SQLException;
import android.graphics.drawable.Drawable;

public class MainActivity extends Activity implements OnClickListener{
    private DatabaseHelper myDbHelper;
    private Cursor c;
    TextView tv;
    private Button next,prev;
    private ImageView iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        tv=(TextView)findViewById(R.id.imagesid);
        iv = (ImageView) findViewById(R.id.imageView1);
        next = (Button) findViewById(R.id.btnNext);
        prev = (Button) findViewById(R.id.btnPrev);
        next.setOnClickListener(this);
        prev.setOnClickListener(this);
        myDbHelper = new DatabaseHelper(this);
        try {
            myDbHelper.createDataBase();

        } catch (IOException ioe) {
           throw new Error("Unable to create database");
        }
        try {
           myDbHelper.openDataBase();

        }catch(SQLException sqle){
           throw sqle;
        }
       myDbHelper.getReadableDatabase();
   //    myDbHelper.getAllImages();
    //   myDbHelper.openDataBase();
      c=myDbHelper.query("tbimages", null, null, null, null,null, null);
        c.moveToFirst();
        myDbHelper.close();
        tv.setText("Gambar ke- "+c.getString(0));
        loadImagesFromAsset();

    }
    public void loadImagesFromAsset() {
        try {
            InputStream ims =null;
            ims = getAssets().open(c.getString(1));
            Drawable d = Drawable.createFromStream(ims, null);
            // set image to ImageView
            iv.setImageDrawable(d);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            //return;
        }
    }


        @Override
    public void onClick(View v) {
        switch(v.getId())
        {
        case R.id.btnNext :
            if(c.isLast())
            {
                c.moveToFirst();
                tv.setText("Gambar ke- "+c.getString(0));
                loadImagesFromAsset();
            }
            else
            {
                c.moveToNext();
                tv.setText("Gambar ke- "+c.getString(0));
                loadImagesFromAsset();

            }
        break;
        case R.id.btnPrev:
        {
            if(c.isFirst())
            {
                tv.setText("Gambar ke- "+c.getString(0));
                loadImagesFromAsset();
            }
            else {c.moveToPrevious();
            tv.setText("Gambar ke- "+c.getString(0));
            loadImagesFromAsset();
            }
            break;
        }

        }
    }

}

8. Untuk "strings.xml" sesuaikan menjadi seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">ImagesProject</string>
    <string name="imagesdescription">Images!</string>
    <string name="btnnext">Next</string>
    <string name="btnprev">Prev</string>
</resources>

9. Jalankan Aplikasi. klik button Next untuk menampilkan gambar selanjutnya dan klik button Prev untuk menampilkan gambar sebelumnya.
Apabila berhasil akan tampil seperti berikut ini:

(Tentunya gambar yang akan tampil adalah sesuai dengan gambar yang sudah kalian taruh di folder asset).