Tutorial ini lanjutan dari tutorial sebelumnya yaitu Cara Membuat Menu dengan ListView di Android. Pembaca ada yang bertanya tentang bagaimana membuat divider/batas menu seperti group menu di Android. Kalau digambarkan kurang lebih seperti ini :
Untuk membuat menu dengan separator/divider, kita membutuhkan dua buah layout.
Yang pertama sebagai tampilan Divider/Separator, lainnya sebagai tampilan list item/menu. Di akhir tutorial, nanti bisa download full source codenya.
Membuat Layout Menu
Langkah pertama adalah membuat layout menu terlebih dahulu, layout ini berfungsi sebagai pengganti layout standar yang biasa digunakan pada ListView.Kode berikut adalah contoh layout yang akan digunakan.
Simpan dengan nama
list_menu.xml. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:orientation="vertical"
android:padding="6dip" >
<ImageView
android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:src="@drawable/receipt" />
<TextView
android:id="@+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="@id/secondLine"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignWithParentIfMissing="true"
android:layout_toRightOf="@id/icon"
android:singleLine="true"
android:gravity="center_vertical"
android:textColor="@color/primaryActive"
android:text="First Line"
android:textSize="16sp" />
<TextView
android:id="@+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="@id/icon"
android:textColor="@color/cardview_dark_background"
android:text="Second Line"
android:textSize="12sp" />
</RelativeLayout>Hasilnya seperti berikut :
[ads id="ads1"]
Membuat Layout Divider/Separator
Lalu selanjutnya membuat layout untuk Divider/Separator. Kode berikut adalah contoh layout yang akan digunakan.Kodenya kurang lebih sama dengan yang diatas, hanya menghilangkan tampilan logo sama deskripsi dengan cara disetting
android:visibility menjadi gone.Simpan dengan nama
list_menu_divider.xml. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="@drawable/receipt"
android:visibility="gone" />
<TextView
android:id="@+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignWithParentIfMissing="true"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:background="@color/primaryActive"
android:gravity="center_vertical"
android:padding="10dp"
android:text="Title Group/Divider"
android:textColor="@color/white"
android:textSize="16sp" />
<TextView
android:id="@+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_toRightOf="@id/icon"
android:text="Description"
android:textSize="12sp"
android:visibility="gone" />
</RelativeLayout>Hasilnya seperti berikut :
Membuat Class MenuModel
Digunakan sebagai Class/Model dari menu yang akan dibuat nantinya. Class MenuModel terdiri dari object ImageView, dan object TextView.Buatlah sebuah Class dengan nama
MenuModel.java. Kode selengkapnya seperti berikut ini. Simpan dengan nama MenuModel.java.public class MenuModel {
String Title ;
String Description;
int Icon;
public MenuModel(String Title, String Description, int Icon){
this.Title = Title;
this.Description = Description;
this.Icon = Icon;
}
public MenuModel(String Title){
this.Title = Title;
}
public String getTitle(){
return this.Title;
}
public String getDescription(){ return this.Description; }
public int getIcon(){
return this.Icon;
}
}[ads id="ads2"]
Membuat Class MenuAdapter
ClassMenuAdapter berfungsi sebagai custom adapter yang digunakan oleh ListView. Class
MenuAdapter akan diset secara langsung untuk menggunakan layout list_menu.xml jika kondisi getDescription != null. Sebaliknya, akan diset ke layout list_menu_divider.xml jika kondisi getDescription == null.Simpan kode berikut dengan nama
MenuAdapter.java :public class MenuAdapter extends ArrayAdapter<MenuModel> {
private ArrayList<MenuModel> dataSet;
private Context mContext;
public static class ViewHolder {
public TextView txtTitle;
public TextView txtDescription;
public ImageView imgIcon;
}
public MenuAdapter(ArrayList<MenuModel> data, Context context) {
super(context, -1, data);
this.dataSet = data;
this.mContext = context;
}
@Override
public int getViewTypeCount() {
return super.getCount();
}
@Override
public int getItemViewType(int position) {
return position;
}
private int lastPosition = -1;
@Override
public View getView(int position, View convertView, ViewGroup parent) {
final MenuModel dataModel = getItem(position);
final ViewHolder viewHolder;
final LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
final String desc = dataModel.getDescription();
viewHolder = new ViewHolder();
if(!TextUtils.isEmpty(desc)){
convertView = inflater.inflate(R.layout.list_menu, parent, false);
}else{
convertView = inflater.inflate(R.layout.list_menu_divider, parent, false);
}
viewHolder.txtTitle = (TextView) convertView.findViewById(R.id.firstLine);
viewHolder.txtDescription = (TextView) convertView.findViewById(R.id.secondLine);
viewHolder.imgIcon = (ImageView) convertView.findViewById(R.id.icon);
convertView.setTag(viewHolder);
lastPosition = position;
viewHolder.txtTitle.setText(dataModel.getTitle());
viewHolder.txtDescription.setText(dataModel.getDescription());
viewHolder.imgIcon.setImageResource(dataModel.getIcon());
return convertView;
}
}Penggunaan pada Activity
Langkah selanjutnya adalah mengimplementasikan object yang sudah kita buat diatas kedalam layout yang kita inginkan. Caranya?Tambahkan object ListView kedalam layout lalu berikan id dengan nama listViewMenu misalnya. Lalu pada Activity dimana kita menambahkan object ListView, buatlah data ArrayList sebagai item yang akan digunakan pada ListView. Lalu selanjutnya set ArrayList kedalam MenuAdapter.
Berikut contoh penggunaan pada Activity.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ListView listViewmenu = (ListView) findViewById(R.id.listViewMenu);
final ArrayList<MenuModel> listMenu = new ArrayList<>();
listMenu.add(new MenuModel("Divider/Separator 1")); // Separator 1
listMenu.add(new MenuModel("Menu 1", "Description menu 1", R.drawable.minus_circle));
listMenu.add(new MenuModel("Menu 2", "Description menu 2", R.drawable.notification));
listMenu.add(new MenuModel("Divider/Separator 2")); // Separator 2
listMenu.add(new MenuModel("Menu 3", "Description menu 3", R.drawable.receive));
listMenu.add(new MenuModel("Menu 4", "Description menu 4", R.drawable.return_truck));
listMenu.add(new MenuModel("Menu 5", "Description menu 5", R.drawable.luggage_cart));
listMenu.add(new MenuModel("Divider/Separator 3")); // Separator 3
listMenu.add(new MenuModel("Menu 6", "Description menu 6", R.drawable.dispatch));
listMenu.add(new MenuModel("Menu 7", "Description menu 7",R.drawable.pallet));
listMenu.add(new MenuModel("Menu 8", "Description menu 8", R.drawable.stock));
listMenu.add(new MenuModel("Menu 9", "Description menu 9", R.drawable.minus_circle));
listMenu.add(new MenuModel("Menu 10", "Description menu 10", R.drawable.notification));
MenuAdapter menuAdapter = new MenuAdapter(listMenu, getApplicationContext());
listViewmenu.setAdapter(menuAdapter);
listViewmenu.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
MenuModel dataModel= listMenu.get(position);
Snackbar.make(view, dataModel.getTitle()+ "\n" +dataModel.getDescription(), Snackbar.LENGTH_SHORT)
.setAction("No action", null).show();
}
});
}
}Hasil akhirnya :
Selesai. Untuk pertanyaan silahkan tinggalkan komentar ya.
Source code : Tutorial Membuat Menu dan Divider Menu Menggunakan ListView di Android
Update
Untuk menjaga style dari widget ListView dan teks yang selalu berubah-ubah ketika user melakukan scrolling, maka perlu ditambahkan return nilai dari methodgetViewTypeCount() dan getItemViewType(). Kode selengkapnya seperti dibawah ini :
@Override
public int getViewTypeCount() {
return super.getCount();
}
@Override
public int getItemViewType(int position) {
return position;
}
Posting Komentar