Menggabungkan Data Listview Dengan Navigation Drawer Android

Oleh Pojok Guru

Kamis, 11 Mei 2017

Bagikan :

Tweet

Hai sobat, kembali lagi dengan aku aji di artikel wacana pemrograman android. Pada artikel sebelumnya aku telah menjelaskan wacana Cara Menampilkan Kode HTML pada Komponen WebView Android. Dan kali ini aku akan menjelaskan bagaimana Cara Menggabungkan komponen ListView dengan komponen Navigation Drawer.

Seperti yang kita tahu bahwa kini android versi terbaru menerapkan desin gres dengan nama Material Design. Desain ini mempunyai tampilan yang simpel tetapi tetap menarik serta mempermudah untuk dipakai pengguna. Ada satu komponen yang kita biasa menggunakannya dalam aplikasi android, yaitu Navigation Drawer atau Menu Slider. Navigation Drawer dipakai untuk banyak sekali tujuan menyerupai menampilkan sajian yang ada pada aplikasi, menampilkan fitur yang ada pada aplikasi, atau menampilkan pilihan lainya untuk pengguna.

Sekarang sudah banyak sekali aplikasi yang memakai Navigation Drawer di dalamnya. Terlebih jikalau aplikasi tersebut sudah mempunyai banyak fitur  dan menu, niscaya aplikasi tersebut sangat membutuhkan komponen Navigation Drawer. Selain itu juga, jikalau memakai komponen Navigation Drawer, aplikasi akan labih terlihat keren 😂

Sebagia developer, kita biasa menciptakan aplikasi android untuk menampilkan atau mengolah data di aplikasi android. Kita sanggup menampilkan data di komponen ListView atau di komponen yang terbaru yaitu komponen RecyclerView. Kita sanggup menampikan data dari database mana saja menyerupai MySQL, SQLite, Realm dan Firebase. Jika aplikasi yang kita bat hanya menampilkan data dengan fitur yang tidak banyak, mungkin kita sanggup menampilkan data ke komponen ListView di satu activity aplikasi android. Tapi bagaimana jikalau aplisi kita mempunyai banyak fitur atau menu? bagaimana menerapkannya di dalam aplikasi android? jawabanya ialah dengan menggabungkan listview dengan kompoenen Navigation Drawer.

Baca juga "Cara Mengganti Album Cover MP3 di Android"

Pada artikel sebelumnya wacana menciptakan navigation drawer material design aplikasi android, aku telah menjelaskan cara dasar menciptakan aplikasi android menggunakna navigation drawer. Untuk menampilkan Navigation Drawer, kita sanggup memakai fragment sebagai penampil data. Dan biasanya fragment tersebut untuk manempilkan isi dari sajian yang ada di Navigation Drawer. Tatapi untuk panerapan atau pembuatanya sanggup dimanipulasi dan dikembangkan sendiri. Oke berikut ini cara menampilkan data pada komponen ListView, serta menggabungkanya dengan Navigation Drawer :

Untuk menggabungkan ListView dengan Navigation Drawer atau menampilkan data pada ListView dengan Navigation Drawer maka kita harus menampilkan atau meletakkan ListView di dalam Fragment. Karena fragment ditampung oleh activity, maka untuk mendapat Contex pada Activity kita memakai isyarat getActivity.

Baca juga "Melacak HP Android yang Hilang"

Pada artikel kali ini aku memakai file project pada artikel aku sebelumnya wacana menciptakan navigation drawer material design aplikasi android. Jika teman belum membuatnya, silahkan sanggup dipraktikkan di artikel tersebut.

Jika teman sudah menciptakan project pada artikel aku wacana menciptakan navigation drawer material design aplikasi android. Di sana terdapat beberapa fragmnet atau sajian yaitu 

• Fragment Web
• Fragment Tentang
• Fragmnet Profil
• Fragment Kontak
• Fragment Facebook
• Fragment Youtube

Pada artikel ini aku akan menghapus beberapa fragment yang aku beri garis bawah. Kemudian aku tambahkan fragment gres dengan nama FragmentHewan. Untuk menciptakan Fragment gres yaitu dengan klik kanan folder java, lalu pilih new -> Fragment -> Blank Fragment.

Jika sudah maka akan terbentuk 2 file yaitu layout dan file java. Pada Fragment ini kita akan tampilkan data binatang dalam komponen List View. Saya telah menjelaskan cara menampilkan data dari banyak sekali sumber menyerupai menampilkan data MySQL ke aplikasi android, banyak sekali metode menyerupai memakai AQuery dan Volley serta menerapkan ke beberpa komponen menyerupai ListView dan RecyclerView, silahkan teman sanggup baca di artikel sebelumnya.

Pada artikel ini, data yang ditampilkan berisi teks dan gambar. Untuk itu silahkan teman masukkan gambar ke dalam folder drawable. Filenya sanggup teman download di bawah ini.

DOWNLOAD

Sekarang teman buka folder layout dan buka file layout FragmentHewan dan tambahkan satu komponen ListView, kodenya menyerupai berikut :

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context="com.blogsetyaaji.smafuturegate.FragmentHewan">      <ListView         android:layout_width="match_parent"         android:layout_height="match_parent"         android:id="@+id/lvhewan"/>  </FrameLayout> 

Karena kita akan menampilkan data berupa gambar dan teks, maka kita membutuhkan layout gres untuk menampung data. Buat layout gres dengan nama list_hewan.xml. Kemudian buat kodenya menyerupai berikut :

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent">      <android.support.v7.widget.CardView         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_margin="16dp"         android:foreground="?android:attr/selectableItemBackground"         android:clickable="true">          <LinearLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:orientation="horizontal">              <ImageView                 android:layout_width="100dp"                 android:layout_height="100dp"                 android:id="@+id/imglist"                 android:src="@mipmap/ic_launcher"                 android:layout_margin="8dp"/>              <TextView                 android:layout_margin="8dp"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:gravity="center_vertical"                 android:text="Nama Hewan"                 android:id="@+id/txthewan"                 android:textSize="25sp"/>         </LinearLayout>     </android.support.v7.widget.CardView> </RelativeLayout> 

Sekarang buat isyarat javanya pada FragmentHewan.java. Kemudian kita tampilkan data pada ListView menyerupai biasanya, kodenya menyerupai berikut :

 package com.blogsetyaaji.smafuturegate;   import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ListView;   /**  * A simple {@link Fragment} subclass.  */ public class FragmentHewan extends Fragment {       public FragmentHewan() {         // Required empty public constructor     }      private String[] binatang = {"Bebek", "Gajah", "Harimau", "Kucing", "Kuda"};     private Integer[] gamabar = {R.drawable.bebek, R.drawable.gajah, R.drawable.harimau, R.drawable.kucing, R.drawable.kuda};     private ListView lvhewan;      @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,                              Bundle savedInstanceState) {         // Inflate the layout for this fragment         // return inflater.inflate(R.layout.fragment_fragment_hewan, container, false);         View view = inflater.inflate(R.layout.fragment_fragment_hewan, null);          lvhewan = (ListView) view.findViewById(R.id.lvhewan);          CustomAdapter customAdapter = new CustomAdapter(getActivity(), hewan, gamabar);         lvhewan.setAdapter(customAdapter);          return view;     }  } 

Dan kita tahu bahwa jikalau ingin menampilakan data pada ListView kita membutuhkan CustomAdapter. Sekarang buat class gres dengan nama CustomAdapter.java. Kemudian buat kodenya menyerupai berikut ini:

 package com.blogsetyaaji.smafuturegate;  import android.app.Activity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView;  /**  * Created by AJISETYA on 5/8/2017.  */  class CustomAdapter extends BaseAdapter{      private String[] hewan;     private Integer[] gambar;     private Activity activity;      public CustomAdapter(Activity fragmentHewan, String[] hewan, Integer[] gamabar) {         this.hewan = hewan;         this.gambar = gamabar;         activity = fragmentHewan;     }      @Override     public int getCount() {         return hewan.length;     }      @Override     public Object getItem(int i) {         return null;     }      @Override     public long getItemId(int i) {         return 0;     }      @Override     public View getView(int i, View view, ViewGroup viewGroup) {         LayoutInflater inflater = (LayoutInflater)activity.getSystemService(activity                 .LAYOUT_INFLATER_SERVICE);         View v = inflater.inflate(R.layout.list_hewan, null);          TextView nama_hewan = (TextView) v.findViewById(R.id.txthewan);         ImageView gambar_hewan = (ImageView) v.findViewById(R.id.imglist);          // tampilkan data pada komponen         nama_hewan.setText(hewan[i]);         gambar_hewan.setImageResource(gambar[i]);          return v;     } } 

Jangan lupa untuk mengubah isyarat pada file activity_main_drawer.xml. Kita hapus sajian sebelumnya dan ganti dengan sajian yang baru, kodenya menyerupai berikut ini :

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android">      <group android:checkableBehavior="single">         <item             android:id="@+id/home"             android:icon="@drawable/home"             android:title="Menggabungkan Data ListView dengan Navigation Drawer Android" />         <item             android:id="@+id/hewan"             android:icon="@drawable/about"             android:title="Menggabungkan Data ListView dengan Navigation Drawer Android" />     </group>      <item android:title="Menggabungkan Data ListView dengan Navigation Drawer Android">         <menu>             <item                 android:id="@+id/kontak"                 android:icon="@drawable/contact"                 android:title="Menggabungkan Data ListView dengan Navigation Drawer Android" />             <item                 android:id="@+id/tentang"                 android:icon="@drawable/about"                 android:title="Menggabungkan Data ListView dengan Navigation Drawer Android" />         </menu>     </item>  </menu> 

Kemudian ubah isyarat pilihan sajian atau tambahkan sajian FragmentHewan pada method onNavigationItemSelected() di dalam file MainActivity.java, kodenya menyerupai berikut ini

 public boolean onNavigationItemSelected(MenuItem item) {         // Handle navigation view item clicks here.         int id = item.getItemId();          if (id == R.id.home) {             Frag_web rr = new Frag_web();             rr.setArguments(getIntent().getExtras());             getSupportFragmentManager().beginTransaction().replace(R.id.container, rr, "Home").commit();             getSupportFragmentManager().popBackStack();          } else if (id == R.id.hewan) {             FragmentHewan rr = new FragmentHewan();             rr.setArguments(getIntent().getExtras());             getSupportFragmentManager().beginTransaction().replace(R.id.container, rr, "Hewan").commit();             getSupportFragmentManager().popBackStack();          } else if (id == R.id.kontak) {             Frag_Kontak rr = new Frag_Kontak();             rr.setArguments(getIntent().getExtras());             getSupportFragmentManager().beginTransaction().replace(R.id.container, rr, "Kontak").commit();             getSupportFragmentManager().popBackStack();          } else if (id == R.id.tentang) {             Frag_Tentang rr = new Frag_Tentang();             rr.setArguments(getIntent().getExtras());             getSupportFragmentManager().beginTransaction().replace(R.id.container, rr, "Tentang").commit();             getSupportFragmentManager().popBackStack();          }          DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);         drawer.closeDrawer(GravityCompat.START);         return true;     } 

Sekarang jalanakan aplikasinya maka tampilanya akan menjadi menyerupai berikut ini :

Tampilan Navigation Drawer sanggup ditampilkan dikala menampilkan data atau masuk ke sajian Hewan alasannya ListView kita masukkan ke dalam Fragment. Jika teman ingin melihat hasil project dari aritkel ini, teman sanggup download di bawah ini

Follow @AjiSetya Watch Star

Sekian artikel tentang Menggabungkan Data ListView dengan Navigation Drawer Android, semioga bermanfaat. Sobat sanggup bagikan artikel ini jikalau teman menyukai artikel ini. Bila teman mempunyai pertanyaan teman sanggup berkomentar di bawah. Oke, sekian dari aku hingga jumpa di artikel berikutnya. 😁

Tag : Pemrograman, Pemrograman Android