Apr 19, 2011

Custom Layout Checkbox, ImageView, TextView and saving Check Box State in Android

 We started the series off with the most basic loading of hard coded arraylist in a ListView.
In this post we will take it one step further and bind the ListView with a custom layout for single row. The single row layout will have a Checkbox, a TextView and an ImageView  to demonstrate how these three can be repeated on each row. We will still load the data ( images & information )from String arrays 

In this Section Simply i am using base Adapter Class  in that i override getView method for List View .

listdemo.xml
========
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageView android:id="@+id/imgView" android:layout_width="150dip"
        android:layout_height="100dip" />
    <TextView android:id="@+id/txt" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="@string/hello"
        android:layout_toRightOf="@+id/imgView" />
    <CheckBox android:id="@+id/chk" android:layout_width="wrap_content"
   
        android:layout_height="wrap_content" android:layout_toRightOf="@+id/txt" />
</RelativeLayout>

for listview Components for each row



main.xml
======

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button android:id="@+id/btnSave" android:text="SAVE"
        android:layout_width="wrap_content" android:layout_height="wrap_content">
    </Button>

    <Button android:id="@+id/btnclear" android:text="clear"
        android:layout_toRightOf="@+id/btnSave" android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </Button>

    <ListView android:layout_below="@+id/btnSave" android:id="@+id/listView"
        android:layout_width="fill_parent" android:layout_height="wrap_content"></ListView>

</RelativeLayout>
it contains listview with 2 buttons ( only for visible for other operations )


LAdapter.java customized adapter class for listview )

package sra.che;
import java.util.HashMap;

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.CompoundButton.OnCheckedChangeListener;

public class LAdapter extends BaseAdapter {
    static HashMap<Integer, Boolean> cartItems = new HashMap<Integer, Boolean>();
    Context mContext;
    Integer images[];   // to load images
    String data[];  // for data
    LayoutInflater mLayoutInflater;

    public LAdapter(Context context, Integer images[], String data[],
            LayoutInflater layoutInflater) {
        mContext = context;
        this.images = images;
        this.data = data;
        mLayoutInflater = layoutInflater;
    }

    @Override
    public int getCount() {

        return images.length;  // images array length
    }

    @Override
    public Object getItem(int arg0) {

        return null;
    }

    @Override
    public long getItemId(int arg0) {

        return 0;
    }

    int count = 0;
// customized Listview
    @Override
    public View getView(int position, View arg1, ViewGroup arg2) {

        View v;
        final int pos = position;
        v = mLayoutInflater.inflate(R.layout.listdemo, null);
        ImageView img = (ImageView) v.findViewById(R.id.imgView);
        img.setImageResource(images[position]);
        TextView tv = (TextView) v.findViewById(R.id.txt);
        tv.setText(data[position]);
// saving check box state  at the time of raloading
        CheckBox ch = (CheckBox) v.findViewById(R.id.chk);
        try {
            if (count != 0) {
                boolean b = cartItems.get(pos);
                if (b == false)
                    ch.setChecked(false);
                else
                    ch.setChecked(true);
            }
        } catch (NullPointerException e) {

        }
        ch.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton arg0, boolean arg1) {
                cartItems.put(pos, arg1);
                count++; 

            }
        });
        return v;
    }

    public static HashMap<Integer, Boolean> getcartItems() {
        return cartItems;
    }

}

Main.java
----------------
package sra.che;

import java.util.HashMap;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ListView;
import android.widget.Toast;

public class Mainlist extends Activity implements OnClickListener {
    ListView lv;
    Button btnSave, btnClear;
    HashMap<Integer, Boolean> mCartItems = new HashMap<Integer, Boolean>();

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
// GETTING IMAGES AS STRING FROM RAW folder
        Integer images[] = {
                getResources().getIdentifier("im1", "raw", getPackageName()),
                getResources().getIdentifier("im2", "raw", getPackageName()),
                getResources().getIdentifier("im3", "raw", getPackageName()),
                getResources().getIdentifier("im4", "raw", getPackageName()),
                getResources().getIdentifier("im5", "raw", getPackageName()),
                getResources().getIdentifier("im6", "raw", getPackageName()),
                getResources().getIdentifier("im7", "raw", getPackageName()),
                getResources().getIdentifier("im8", "raw", getPackageName()),
                getResources().getIdentifier("im9", "raw", getPackageName()) };
        String data[] = { "image1", "image2", "image3", "image4", "image5",
                "image6", "image7", "image8", "image9", "image10" };
        lv = (ListView) findViewById(R.id.listView);
        btnSave = (Button) findViewById(R.id.btnSave);
        btnClear = (Button) findViewById(R.id.btnclear);
        btnSave.setOnClickListener(this);
        btnClear.setOnClickListener(this);
        lv.setCacheColorHint(0);
        LayoutInflater mLInflater = getLayoutInflater();
        final LAdapter adapter = new LAdapter(getApplicationContext(), images,
                data, mLInflater);
        lv.setAdapter(adapter);
    }

    @Override
    public void onClick(View v) {
        if (v == btnSave) {
            Toast
                    .makeText(getApplicationContext(), " save",
                            Toast.LENGTH_SHORT).show();
        }
        if (v == btnClear) {
            Toast.makeText(getApplicationContext(), " clear",
                    Toast.LENGTH_SHORT).show();
        }
    }
}


note : here i save images in raw folder
------
for creating raw folder right click on res folder  choose folder option give name (raw ) press enter


                                 

                             

5 comments:

  1. Thanks for u r tutorial.Its really helpful to me.

    ReplyDelete
  2. hi..
    how to take the checked items name when we press on the save button?

    ReplyDelete
    Replies
    1. Use Static ArrayList to Get Selected Items and Apply Listener for Check in Adapter class

      Delete
    2. I used the above code only.can you give me example code for that?'m new to this.help me

      Delete
    3. send me demo project i will add my code

      Delete