mardi 29 septembre 2015

Custom ListView Set background image from SqliteDatabase value in Android Eclipse

Let's say i created a custom listView to display an "image icon", "title" and "subtitle". and the value of that 3 View will be query from sqlite database.

This is my main.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://ift.tt/nIICcg"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/bg_result"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:orientation="vertical" >

        <ListView
            android:id="@+id/listView1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:divider="#b5b5b5"
            android:dividerHeight="1dp"
            android:listSelector="@drawable/list_selector" />

    </LinearLayout>

and this is my custom.xml, where i design how the view is organized from my ListView.

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://ift.tt/nIICcg"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/list_selector"
        android:orientation="horizontal"
        android:padding="5dp" >

        <!--  ListRow Left side image icon-->
        <LinearLayout android:id="@+id/thumbnail" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dip"      
            android:layout_alignParentLeft="true"
            android:background="@drawable/image_bg" 
            android:layout_marginRight="5dip">

            <ImageView     
                android:id="@+id/word_icon"   
                android:layout_width="50dip"
                android:layout_height="50dip"
                android:contentDescription="@string/descrip"
                android:src="@drawable/word_icon_p"/>

        </LinearLayout>

        <!-- Title-->
        <TextView
           android:id="@+id/wordTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/thumbnail"
            android:layout_toRightOf="@+id/thumbnail"
            android:text="@string/sample"
            android:textColor="#040404"
            android:typeface="sans" 
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_marginTop="5dp"/>

        <!-- Subtitle -->
        <TextView
            android:id="@+id/wordSub"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/wordTitle"
            android:layout_below="@+id/wordTitle"
            android:text="@string/sample"
            android:textColor="#343434"
            android:textSize="16sp" />
    </RelativeLayout> 

and on my Sqlite Database, i have the following table and data

--------------------------------------
= KEY_CODE = KEY_NAME = KEY_SUBTITLE = //My Table
-------------------------------------- 
=  p       = Sam_Tit1 = Sam_Sub1     = // This
=  x       = Sam_Tit2 = Sam_Sub2     = // is the
=  n       = Sam_Tit3 = Sam_Sub3     = // Data Value
======================================

So, the scenario is, i want to set the text for

 -> wordTitle TextView is equal to KEY_NAME,
 -> wordSub TextView is equal to KEY_SUBTITLE, and to set the background image of
 -> word_icon ImageView is equal to KEY_CODE value 

so the listView will looks like

 ====================================
  =            ListView              =
  ====================================
  = word_icon = wordTitle = wordSub  =
  ====================================
  =   p.png   = Sam_Tit1  = Sam_Sub1 =
  =   x.png   = Sam_Tit2  = Sam_Sub2 =
  =   n.png   = Sam_Tit3  = Sam_Sub3 =
  ====================================

now, here is my MainActivity, i named this as AndroidListViewCursorAdaptorActivity.Java

public class AndroidListViewCursorAdaptorActivity extends Activity {

        private CountriesDbAdapter dbHelper;
        private SimpleCursorAdapter dataAdapter;

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

            dbHelper = new CountriesDbAdapter(this);
            dbHelper.open();
            displayListView(); // I call this function to set an Adapter for my ListView
        }

        private void displayListView() {
            Cursor cursor = dbHelper.fetchAllCountries();
            // The desired columns to be bound
            String[] columns = new String[] { CountriesDbAdapter.KEY_NAME, CountriesDbAdapter.KEY_SUBTITLE };
            // the XML defined views which the data will be bound to
            int[] to = new int[] { R.id.wordTitle, R.id.wordSub };
            // create the adapter using the cursor pointing to the desired data
            // as well as the layout information
            dataAdapter = new SimpleCursorAdapter(this, R.layout.custom,
                    cursor, columns, to, 0);
            ListView listView = (ListView) findViewById(R.id.listView1);
            // Assign adapter to ListView
            listView.setAdapter(dataAdapter);
        }
    }

So, everything is fine and all is working without error, i set the text of WordTitle and WordSub and bound it to my ListView.

Now, my problem is i'am having some trouble in setting the background image of my ImageView which is the word_icon. i want to set background image of word_icon depending on KEY_CODE value. i'm lock on idea on how do i do that.

i try to update my mainActivity with this code.

        private CountriesDbAdapter dbHelper;
        private SimpleCursorAdapter dataAdapter;
        private ImageView im;

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

            dbHelper = new CountriesDbAdapter(this);
            dbHelper.open();
            displayListView(); // I call this function to set an Adapter for my ListView
        }

        private void displayListView() {
            Cursor cursor = dbHelper.fetchAllCountries();
            // The desired columns to be bound
            String[] columns = new String[] { 
                CountriesDbAdapter.KEY_CODE, //Trying to fetch the KEY_CODE column
                CountriesDbAdapter.KEY_NAME, 
                CountriesDbAdapter.KEY_SUBTITLE };

            // the XML defined views which the data will be bound to
            int[] to = new int[] { 
                R.id.word_icon, //Trying to Put it here
                R.id.wordTitle, 
                R.id.wordSub };
            // create the adapter using the cursor pointing to the desired data
            // as well as the layout information
            dataAdapter = new SimpleCursorAdapter(this, R.layout.custom,
                    cursor, columns, to, 0);
            ListView listView = (ListView) findViewById(R.id.listView1);
            // Assign adapter to ListView
            listView.setAdapter(dataAdapter);
        }

But no luck, this code doesn't work, as my expected, because i know i need to set the background image like,

im.setBackgroundImage(R.Drawable.something_image);

but i'm lock on idea and need someone help here.

so, that's all, i hope there's someone can help me here. just ask for some clarification if ever.

Advance thank's!

Aucun commentaire:

Enregistrer un commentaire