Skip to content Skip to sidebar Skip to footer
Home / Android / Java / Listview / Xml

How Can I Create A Custom Android Listview Header And Group Them Into Days

Post a Comment
My goal is to create an application that display a list of data that are grouped by the days. Please refer to the below for actual screenshot. In order to achieve this design, I h

Solution 1:

You can try..& android will look like bellow enter image description here

  1. Create a project

  2. copy & paste to activity_main.xml

    <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><!-- Content Here --><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight=".1"android:background="#f1e7ce"android:orientation="vertical"><ListViewandroid:id="@+id/listview"android:layout_width="match_parent"android:layout_height="wrap_content"/></LinearLayout></LinearLayout>

  3. create section_header.xml & paste bellow code

    <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><TextViewandroid:id="@+id/section_header"android:layout_width="match_parent"android:layout_height="30dp"android:background="#ff0092f4"android:textColor="#FFFFFF"android:text="Header"android:textSize="17sp"android:padding="4dp" /></LinearLayout>

  4. Create row_item.xml & paste bellow code

    <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal" ><TextViewandroid:id="@+id/time_time"android:layout_width="0dp"android:layout_height="70dp"android:layout_weight="1"android:textSize="20sp"android:text="12.00 PM"android:layout_marginLeft="15dp"android:gravity="center_vertical"android:textColor="#cc222222"/><TextViewandroid:id="@+id/tv_item_sysdia"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:textSize="15sp"android:text="120/75"android:textColor="#cc222222"android:layout_marginRight="10dp"android:gravity="center_vertical|center"/><TextViewandroid:id="@+id/tv_item_plus"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:textSize="15sp"android:text="80"android:textColor="#cc222222"android:layout_marginRight="10dp"android:gravity="center_vertical|center"/></LinearLayout>

  5. Create Class ItemModel & paste bellow code

    publicclassItemModelimplementsComparable<ItemModel>{
     privateboolean isSectionHeader;
     privateString itemTime;
     privateString itemSysDia;
     privateString itemPulse;
     privateString date;

     publicItemModel(String itemTime, String itemSysDia, String itemPulse, String date) {
    this.itemTime = itemTime;
    this.itemSysDia = itemSysDia;
    this.itemPulse = itemPulse;
    this.date =date;
    isSectionHeader = false;
 }

  publicStringgetItemTime() {
        return itemTime;
 }

publicvoidsetItemTime(String itemTime) {
    this.itemTime = itemTime;
 }

publicStringgetItemSysDia() {
   return itemSysDia;
   }

   publicvoidsetItemSysDia(String itemSysDia) {
      this.itemSysDia = itemSysDia;
    }

 publicStringgetItemPulse() {
     return itemPulse;
   }

  publicvoidsetItemPulse(String itemPulse) {
      this.itemPulse = itemPulse;
  }

   publicStringgetDate() {
    return date;
    }

   publicvoidsetDate(String date) {
         this.date = date;
       }

   publicbooleanisSectionHeader() {
       return isSectionHeader;
  }

  @Overridepublic int compareTo(ItemModel itemModel) {
      returnthis.date.compareTo(itemModel.date);
 }

  publicvoidsetToSectionHeader() {
    isSectionHeader = true;
   }
   }

  6. In MainActivity Paste bellow code

    publicclassMainActivityextendsAppCompatActivity {

    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      ArrayList<ItemModel> itemsList = newArrayList<>();
      ListViewlist= (ListView) findViewById(R.id.listview);
      itemsList = sortAndAddSections(getItems());
      ListAdapteradapter=newListAdapter(this, itemsList);
     list.setAdapter(adapter);
  }


     private ArrayList sortAndAddSections(ArrayList<ItemModel> itemList)
   {

     ArrayList<ItemModel> tempList = newArrayList<>();
      //First we sort the array
    Collections.sort(itemList);

      //Loops thorugh the list and add a section before each sectioncell startStringheader="";
      for(inti=0; i < itemList.size(); i++)
      {
           //If it is the start of a new section we create a new listcell and add it to our arrayif(!(header.equals(itemList.get(i).getDate()))) {
           ItemModelsectionCell=newItemModel(null, null,null,itemList.get(i).getDate());
          sectionCell.setToSectionHeader();
          tempList.add(sectionCell);
           header = itemList.get(i).getDate();
       }
        tempList.add(itemList.get(i));
    }

    return tempList;
   }


  publicclassListAdapterextendsArrayAdapter {

       LayoutInflater inflater;
        publicListAdapter(Context context, ArrayList items) {
        super(context, 0, items);
          inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

     @Overridepublic View getView(int position, View convertView, ViewGroup parent) {
        Viewv= convertView;
        ItemModelcell= (ItemModel) getItem(position);

       //If the cell is a section header we inflate the header layoutif(cell.isSectionHeader())
         {
           v = inflater.inflate(R.layout.section_header, null);

          v.setClickable(false);

           TextViewheader= (TextView) v.findViewById(R.id.section_header);
           header.setText(cell.getDate());
        }
         else
        {
           v = inflater.inflate(R.layout.row_item, null);
             TextViewtime_time= (TextView) v.findViewById(R.id.time_time);
            TextViewtv_item_sysdia= (TextView) v.findViewById(R.id.tv_item_sysdia);

         TextViewtv_item_plus= (TextView) v.findViewById(R.id.tv_item_plus);

          time_time.setText(cell.getItemTime());
          tv_item_sysdia.setText(cell.getItemSysDia());
          tv_item_plus.setText(cell.getItemPulse());


         }
       return v;
      }
      }


  private ArrayList<ItemModel>  getItems(){

    ArrayList<ItemModel> items = newArrayList<>();
   items.add(newItemModel("10.30", "120/10","80","Tue,31 Oct 17"));
    items.add(newItemModel("10.30", "142/95","95","Tue,31 Oct 17"));
   items.add(newItemModel("15.30", "120/95","200","Tue,31 Oct 17"));
   items.add(newItemModel("20.30", "120/10","80","Tue,29 Oct 17"));
   items.add(newItemModel("10.30", "120/10","50","Tue,29 Oct 17"));

   items.add(newItemModel("10.30", "140/10","80","Tue,28 Oct 17"));
   items.add(newItemModel("10.30", "30/75","40","Tue,28 Oct 17"));
   items.add(newItemModel("10.30", "150/80","70","Tue,28 Oct 17"));

    return  items;
     }
    }

  7. You can download the project from GitHub: https://github.com/enamul95/CustomHeaderWith

  8. You can see the tutorials Links:http://www.iyildirim.com/tech-blog/creating-listview-with-sections

Solution 2:

I think your problem is to achieve different type item layout in ListView. And it would more easy to achieve use BaseAdapter instead of ArrayAdapter. Wish this link would help you :)

You may like these posts

Post a Comment for "How Can I Create A Custom Android Listview Header And Group Them Into Days"