Change the layout of Listview

Question

today i have a question i was wondering about. Let's say that i have a listview which shows only a list of text. The listview layout is a simple list view containing only a Textview.

Now, when i show the result, the first view, i want to show is a textview with let's say Image (i think the layout should change here). After that, it will show the regular textview. You see, in applications like news they show the first news with big pictures and text, and the rest of the list with only texts. Can you give me some idea on that ? or do i have to make it seperate ?

Thank you. my simple adapter->

@Override
        public void onPostExecute(Void result) {
            super.onPostExecute(result);
            // Dismiss the progress dialog
            if (pDialog.isShowing())
                pDialog.dismiss();

             // Updating parsed JSON data into ListView

            ListAdapter adapter = new SimpleAdapter(getActivity(), postList, R.layout.list_item,
                    new String[] { POST_TITLE,POST_CONTENT, GUID },
                    new int[] {R.id.email, R.id.mobile, R.id.guid });

            newsList.setAdapter(adapter);
        }

Answer 1

I would put both imageView and textView inside List Item Layout. Then if there is image available, i set imageView.setVisibility(View.Visible). If no image, imageView.setVisibility(View.Gone).

---

This is old code below, which uses Cursor and some deprecated methods. You can change your adapter to use Cursor with your own way or you can use List, Array to store items inside ListView. Check how i inflate imageView and textView inside adapter.

public class Home_fragment extends Fragment{
ChannelAdapter adapter;
private ListView mListView;
Cursor cursor;
...
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
    ...
    View view = inflater.inflate(R.layout.home_fragment, null);
    mListView = (ListView) view.findViewById(R.id.list);
    cursor = ((CounterPP) getActivity().getApplication()).addList.query(); 
    getActivity().startManagingCursor(cursor);
    adapter = new ChannelAdapter(getActivity(), R.layout.list_item, cursor, FROM, TO);
    mListView.setAdapter(adapter);
    ....
}

static class ViewHolderItem {       
        TextView textHere;
        ImageView imageHere;
}

// You can extend ArrayAdapter for your own adapter implementation
public class ChannelAdapter extends SimpleCursorAdapter {
    ...
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        final  ViewHolderItem viewHolder;
        if(convertView==null){
            LayoutInflater inflater =(LayoutInflater)getActivity().getApplicationContext().getSystemService( Context.LAYOUT_INFLATER_SERVICE );
            //R.layout.list_item xml has imageView and textView
            convertView = inflater.inflate(R.layout.list_item, parent, false);

            viewHolder = new ViewHolderItem();         
            viewHolder.textHere = (TextView) convertView.findViewById(R.id.textNew);
            viewHolder.imageView = (ImageView) convertView.findViewById(R.id.imageNew);

            convertView.setTag(viewHolder);

        }else{
            viewHolder = (ViewHolderItem) convertView.getTag();
        }

        if(you have image to show){
            viewHolder.imageHere.setVisible(View.VISIBLE);
            viewHolder.textHere.setText("Text From your List");
            viewHolder.imageHere.setDrawable(your image here);
        }else{
            viewHolder.imageHere.setVisible(View.GONE);
            viewHolder.textHere.setText("Text From your List");       
        }
        return convertView;
    } 

This code may not work properly, but it gives the idea.

Answer 2

The above requirements can be fulfilled in a number of ways based upon your choice:

1) Consider item 0 as a separate view and the rest seaprately. Pass all the items from item 1 to item N in the adapter of listview. While inflate item 0 as a separate view and add it as a header to list view.

Pros: (1) You can inflate completely different views for item 0 and the rest as separately. At the same time you can take full advantage of view reusability feature of listview. (2) If you try to use onItemClickListener to determine on click action,click on Header as well as list items can be received at a single point directly.

Cons: (1) In this way you can add highlighted views only at the top or the bottom effectively but nowhere in the middle if requirements change in future.

2) You can use a unique identifier in your model class used to detect which object need to be shown in a highlighted/different view. Then within your adapter you can use inflate 2 separate layouts for different items highlighted and non highlighted.

Pros: (1) In course of time you can add highlighted items anywhere in the list not only on 0th item.

Cons: (1) You cannot use the view reusability feature via ViewHolder in getView() and need to inflate different views every time based on decision logic.

I would recommend you to go with method 1 for now and switch to method 2 if requirements change in future.

Answer 3

i did something like this . Have a look !

public View getView(int position, View convertView, ViewGroup Parent){
                if(convertView == null){
                    LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                    convertView = inflater.inflate(R.layout.list_item,null);

                }
                TextView thisview = (TextView) convertView.findViewById(R.id.email);
                int getListPos = newsList.getFirstVisiblePosition();
                //i set the count starting 0 and saved in the hashmap array 
                //to compare the first result with the first position of listview
                int count = Integer.parseInt(objects.get(position).get("ListCount"));

                if(getListPos == count) {
                    LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                    convertView = inflater.inflate(R.layout.list_item_header,null);
                    TextView HeaderText = (TextView) convertView.findViewById(R.id.headertext);
                    TextView HeaderContent = (TextView) convertView.findViewById(R.id.headercontent);
                    HeaderText.setText(objects.get(position).get(POST_TITLE));
                    HeaderContent.setText(objects.get(position).get(POST_CONTENT));

                }else{
                    thisview.setText("Normal line");
                }

                return convertView;
            }