Change layout of selected list item in Android

Question

I need to create a ListView and show more detailed layout only for the selected row in order to show more information to the costumer. What I tried is below:

newsListView.setAdapter(new NewsListAdapter(this, news));
newsListView.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

        LayoutInflater inflater = (LayoutInflater)getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        //Here I tried to change layout of this row only
        view = inflater.inflate(R.layout.listitem_news_selected, null);
        TextView info = (TextView) view.findViewById(R.id.info);

        NewsData news = (NewsData) parent.getItemAtPosition(position);
        info.setText(news.getInfo());
    }
});

And here is the NewsListAdapter:

public class NewsListAdapter extends BaseAdapter {

    List<NewsData> items;
    Activity context;

    /* private view holder class */
    private class ViewHolder {
        TextView title;
        ImageView image;
    }

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

        ViewHolder holder = null;

        LayoutInflater mInflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.listitem_news, null);
            holder = new ViewHolder();

            holder.title = (TextView) convertView.findViewById(R.id.title);
            holder.image = (ImageView) convertView.findViewById(R.id.imageView1);            

            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        NewsData news = items.get(position);

        holder.title.setText(news.getTitle());
        new DownloadImageTask(holder.image).execute(news.getImgUrl());

        return convertView;
    }
}

In this question, similar question was asked but it didn't help me. I am guessing I need to do something with Adapter but I got stuck here. Any ideas will be appreciated.

Purgation

setup a custom StateListDrawable to each list view item and override its onStateChange method – Tabriz

Answer 1

What you are doing is not even gonna change the View of the ListView Item, you are inflating an unknown view.

solution:

create a method in your adapter for setting the position of the selected item:

public void selectedItem(int position)
{
   this.position = position; //position must be a global variable
}

in your getView inflate the view when the position is equals to the click item position

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

    ViewHolder holder = null;

    LayoutInflater mInflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

    if (convertView == null) {
        convertView = mInflater.inflate(R.layout.listitem_news, null);
        holder = new ViewHolder();

        holder.title = (TextView) convertView.findViewById(R.id.title);
        holder.image = (ImageView) convertView.findViewById(R.id.imageView1);            

        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
    }

    NewsData news = items.get(position);

    holder.title.setText(news.getTitle());
    new DownloadImageTask(holder.image).execute(news.getImgUrl());

    if(this.position == position)
    {
        view2 = mInflater.inflate(R.layout.listitem_news_selected, null);
        TextView info = (TextView) view2.findViewById(R.id.info);

        info.setText(news.getInfo());

        return view2;
    }


    return convertView;
}

Using it in your onItemClick

NewsListAdapter adapter = new NewsListAdapter(this, news);
newsListView.setAdapter(adapter );
newsListView.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

          adapter.selectedItem(position);
          adapter.notifyDataSetChange();
    }
});

always have a reference/object to your adapter so you can refresh your listView upon clicking on it.

Cockerel

Thanks for the answer. Changing from if (convertView == null) to if (convertView == null || || convertView.getTag() == null) is the correct way i think, sometimes convertView.getTag() comes null. – Purgation

Great! Thanks. Need to figure out how to go back to the old layout (listitem_news) when the new layout (listitem_news_selected) is clicked again. Any ideas ? – Terena