How to implement Favorite Button to my BaseAdapter ListView?

Question

I'm learning Android SDK and I need some advices.
I have custom ListView with BaseAdapter and I want to implement some new feature - Favorite Button.

What I want to do is, when I press the Favorite Button, ListItem goes to the beginning of the list, Favorite image change and all that stuff will be saved in the SharedPrefs.

Someone tell me what I need to do, to make it works?

my existing code:

row.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
                android:id="@+id/layout_element_list"
    >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="150dp"
        android:padding="5dp"
        android:layout_height="150dp"
        android:layout_marginLeft="4px"
        android:layout_marginRight="10px"
        android:layout_marginTop="4px"
        android:src="@drawable/radio" >
    </ImageView>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TextView
            android:id="@+id/label"
            android:paddingTop="20dp"
            android:layout_gravity="center_vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:textAlignment="center"
            android:text="RadioName"
            android:textColor="@color/color1"
            android:textSize="30dp" />
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1">
            <TextView
                android:id="@+id/label2"
                android:layout_gravity="center_vertical"
                android:layout_width="fill_parent"
                android:layout_weight="1"
                android:layout_height="fill_parent"
                android:textAlignment="center"
                android:text="Description.."
                android:textColor="@color/color1"
                android:textSize="15dp" />
            <ImageView
                android:id="@+id/favButton"
                android:layout_weight="1"
                android:layout_width="fill_parent"
                android:padding="5dp"
                android:layout_height="fill_parent"
                android:layout_marginLeft="4px"
                android:layout_marginRight="10px"
                android:layout_marginTop="4px"
                android:src="@drawable/fav_off" >
            </ImageView>
        </LinearLayout>
    </LinearLayout>
</LinearLayout> 

BaseAdapter class:

public class RadioAdapter extends BaseAdapter
{

    ArrayList<RadioStation> myList = new ArrayList<RadioStation>();
    LayoutInflater inflater;
    Context context;

    public RadioAdapter(Context context, ArrayList<RadioStation> myList) {
        this.myList = myList;
        this.context = context;
        inflater = LayoutInflater.from(this.context);
    }

    @Override
    public int getCount() {
        return myList.size();
    }

    @Override
    public RadioStation getItem(int position) {
        return myList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        MyViewHolder mViewHolder;

        if(convertView == null) {
            convertView = inflater.inflate(R.layout.activity_menu_row, null);
            mViewHolder = new MyViewHolder();
            convertView.setTag(mViewHolder);
        } else {
            mViewHolder = (MyViewHolder) convertView.getTag();
        }

        mViewHolder.tvTitle = detail(convertView, R.id.label, myList.get(position).getTitle());
        mViewHolder.tvDesc  = detail(convertView, R.id.label2,  myList.get(position).getDescription());
        mViewHolder.ivIcon  = detail(convertView, R.id.icon,  myList.get(position).getImgResId());

        return convertView;
    }

    private TextView detail(View v, int resId, String text) {
        TextView tv = (TextView) v.findViewById(resId);
        tv.setText(text);
        return tv;
    }

    private ImageView detail(View v, int resId, int icon) {
        ImageView iv = (ImageView) v.findViewById(resId);
        iv.setImageResource(icon); //
        return iv;
    }

    private class MyViewHolder {
        TextView tvTitle, tvDesc;
        ImageView ivIcon;
    }
}

RadioStation class:

public class RadioStation
{
    public String title;
    public String description;
    public int imgResId;

    //getters and setters  

    public static Comparator<RadioStation> comparatorByRadioName = new Comparator<RadioStation>()
    {
        @Override
        public int compare(RadioStation radioStation, RadioStation radioStation2)
        {
            String name1 = radioStation.getTitle().toLowerCase();
            String name2 = radioStation2.getTitle().toLowerCase();
            return name1.compareTo(name2);
        }
    };
}

ActivityListView:

public class ActivityMenuList extends Activity implements AdapterView.OnItemClickListener
{
    private ListView lvDetail;
    private Context context = ActivityMenuList.this;
    private ArrayList <RadioStation> myList = new ArrayList <RadioStation>();
    private String[] names = new String[] { "one", "two", "three" };
    private String[] descriptions = new String[] { "notset", "notset", "notset"};
    private int[] images = new int[] { R.drawable.one, R.drawable.two, R.drawable.three };

    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        getWindow().setBackgroundDrawableResource(R.drawable.bg1);
        setContentView(R.layout.activity_menu_list);
        lvDetail = (ListView) findViewById(R.id.list);
        lvDetail.setOnItemClickListener(this);
        getDataInList();
        lvDetail.setAdapter(new RadioAdapter(context, myList));
    }
    private void getDataInList() {
        for(int i=0;i<3;i++) {
            RadioStation ld = new RadioStation();
            ld.setTitle(names[i]);
            ld.setDescription(descriptions[i]);
            ld.setImgResId(images[i]);
            myList.add(ld);
        }
        Collections.sort(myList, RadioStation.comparatorByRadioName);
    }

    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l)
    {
        String item = names[i];
        Intent e = new Intent(ActivityMenuList.this, ActivityRadioStation.class);
        Bundle data = new Bundle();
        data.putString("radiostation",item);
        e.putExtras(data);
        startActivity(e);
    }
}

Answer 1

That's a lot of changes you have to do. Let's start with the basic. Add a boolean to your RadioStation for the favorite state.

public boolean isFavorite;

Next on your getView add the favorite button click listener(add its reference to the viewholder too, but let's keep it simple this time)

public class RadioAdapter extends BaseAdapter
{
    ArrayList<RadioStation> myList = new ArrayList<RadioStation>();
    LayoutInflater inflater;
    Context context;
    ListView mListview;

    public RadioAdapter(Context context, ArrayList<RadioStation> myList, ListView list) {
        this.myList = myList;
        this.context = context;
        mListView = list;
        inflater = LayoutInflater.from(this.context);
    }

    @Override
    public int getCount() {
        return myList.size();
    }

    @Override
    public RadioStation getItem(int position) {
        return myList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        MyViewHolder mViewHolder;

        if(convertView == null) {
            convertView = inflater.inflate(R.layout.activity_menu_row, null);
            mViewHolder = new MyViewHolder();
            convertView.setTag(mViewHolder);
        } else {
            mViewHolder = (MyViewHolder) convertView.getTag();
        }

        mViewHolder.tvTitle = detail(convertView, R.id.label, myList.get(position).getTitle());
        mViewHolder.tvDesc  = detail(convertView, R.id.label2,  myList.get(position).getDescription());
        mViewHolder.ivIcon  = detail(convertView, R.id.icon,  myList.get(position).getImgResId());
        convertView.findViewById(R.id.favButton).setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View view)
            {
                myList.get(position).isFavorite=! myList.get(position).isFavorite;
                //reorder mlist
                notifyDataSetChanged();
                //mListView. smoothscroll here
            }
        });

        ((ImageView) convertView.findViewById(R.id.favButton)).setImageResource(myList.get(position).isFavorite?R.drawable.favoriteOn:R.drawable.favoriteOff);
        return convertView;
    }

    private TextView detail(View v, int resId, String text) {
        TextView tv = (TextView) v.findViewById(resId);
        tv.setText(text);
        return tv;
    }

    private ImageView detail(View v, int resId, int icon) {
        ImageView iv = (ImageView) v.findViewById(resId);
        iv.setImageResource(icon); //
        return iv;
    }

    private class MyViewHolder {
        TextView tvTitle, tvDesc;
        ImageView ivIcon;
    }
}

I left commented what you should do on the listener. You should be able to continue from here.

When you create your adapter pass the list as the last parameter on the constructor.

Edited: Removed interface. No need to use it here.