Tutorial berikut akan menjelaskan bagaimana membuat menu vertikal menggunakan widget ListView pada Android Studio.
Secara singkat, penjelasan widget ListView adalah tampilan beberapa item dalam bentuk list atau daftar yang dapat di scroll secara vertikal. Ibarat daftar buku tamu, yang memiliki beberapa item tamu dalam daftarnya.
Untuk menampilkan daftar ke dalam ListView, kita memerlukan ArrayAdapter sebagai wadah yang akan digunakan oleh ListView dalam prosesnya. Di akhir tutorial, nanti bisa download full source codenya
Dalam prakteknya, tutorial ini akan menggunakan custom layout listview sebagai akibat dari judul diatas (halah pakai sebab akibat segala). Oke lanjut, kira-kira gambaran layout yang akan kita buat kurang lebih seperti ini :
[ads id="ads1"]
Membuat Layout ListView
Langkah pertama adalah membuat layout ListView 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. Hasilnya seperti berikut :
<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:text="Second Line"
android:textSize="12sp" />
</RelativeLayout>Membuat Object MenuModel
ObjectMenuModel digunakan sebagai Class/Model dari menu yang akan dibuat nantinya. MenuModel terdiri dari object ImageView, dan object TextView seperti pada file list_menu.xml diatas.Untuk membuat MenuModel, buatlah sebuah
Class dengan nama MenuModel.java. Kode selengkapnya seperti berikut :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;
}
}
Membuat MenuAdapter
MenuAdapter berfungsi sebagai adapter yang digunakan oleh ListView. MenuAdapter akan diset secara langsung untuk menggunakan layoutlist_menu.xml diatas yang sudah dibuat. Sehingga tampilan ListView tidak akan lagi sama dengan tampilan standard/default Android Studio.Untuk membuat MenuAdapter, buatlah sebuah
Class dengan nama MenuAdapter.java. Class ini mewarisi sifat dari ArrayAdapter yang umumnya digunakan oleh ListView pada Android Studio.public class MenuAdapter extends ArrayAdapter<MenuModel> implements View.OnClickListener{
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 void onClick(View v) {
int position=(Integer) v.getTag();
final Object object= getItem(position);
final MenuModel dataModel=(MenuModel)object;
}
@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 View result;
String desc = dataModel.getDescription();
if (convertView == null) {
viewHolder = new ViewHolder();
convertView = inflater.inflate(R.layout.list_menu, 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);
result = convertView;
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
result=convertView;
}
lastPosition = position;
viewHolder.txtTitle.setText(dataModel.getTitle());
viewHolder.txtDescription.setText(dataModel.getDescription());
viewHolder.imgIcon.setImageResource(dataModel.getIcon());
viewHolder.imgIcon.setOnClickListener(this);
viewHolder.imgIcon.setTag(position);
return convertView;
}
}[ads id="ads2"]
Menambahkan List Menu pada Layout
Langkah selanjutnya adalah mengimplementasikanClass dan Model 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
MainActivity.java atau Activity lain (dimana kita menambahkan object ListView), buatlah data ArrayList sebagai list item yang akan digunakan pada ListView. Lalu set kedalam MenuAdapter.@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("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("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("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));
listMenu.add(new MenuModel("Menu 11", "Description menu 11", R.drawable.receive));
listMenu.add(new MenuModel("Menu 12", "Description menu 12", R.drawable.return_truck));
listMenu.add(new MenuModel("Menu 13", "Description menu 13", R.drawable.luggage_cart));
listMenu.add(new MenuModel("Menu 14", "Description menu 14", R.drawable.dispatch));
listMenu.add(new MenuModel("Menu 15", "Description menu 15",R.drawable.pallet));
listMenu.add(new MenuModel("Menu 16", "Description menu 16", R.drawable.stock));
final MenuAdapter menuAdapter = new MenuAdapter(listMenu, this);
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();
}
});
}
Source code : Membuat Menu Menggunakan ListView di Android
Selesai. Untuk pertanyaan silahkan tinggalkan komentar ya.
Update
Untuk menjaga style dari widget ListView dan teks TextView 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