Pemrograman Aplikasi Tab Swipeable View Seperti Aplikasi WhatsApp

Pada saat penulis membuat tesis S2, yaitu membuat suatu program steganografi, penulis sangat tertarik dengan model aplikasi WhatsApp, dimana aplikasi ini menggunakan beberapa Tabs untuk memisahkan fungsinya. Serta pengguna dapat melakukan swipe (menggeser pada layar) untuk berpindah antar halaman pada Tabs tersebut.

Penulis berburu beberapa kode pada internet, banyak yang beredar cara-cara membuat aplikasi yang "mirip" dengan WhatsApp, ada beberapa kode yang berjalan dengan baik di emulator Android SDK tetapi tidak dapat berjalan di emulator maupun ponsel Android. Ada beberapa kode yang mencontohkan, tetapi tidak menjelaskan bagaimana cara menambahkan suatu TextEdit, Button, dll pada halaman pada Tabs tersebut, hanya tampilanTabs saja. Akhirnya penulis menemukan tutorial kode "Tab Layout with Swipeable View Using Fragments in Android App" di alamat blog http://androidminess.blogspot.com/2016/01/android-tab-layout-with-swipeable-view.html. Penulis mengikuti cara yang dijelaskan pada blog tersebut, tetapi ketika di Generate APK di Android SDK ternyata banyak terjadi kesalahan. Akhirnya penulis menelusuri secara perlahan-lahan untuk mengetahui cara kerja dari kode program tersebut dan akhirnya penulis berhasil mengkoreksi kode di MainActivity.java serta strings.xml, karena di kedua file tersebut terjadi kesalahan dalam memanggil reference string.

Tampilan Tab Swipeable View Yang Diperbaiki dan Dirubah Penulis

Tampilan Menu Pada Tab Swipeable View

Usut punya usut, ternyata cara kerja Tabs pada aplikasi WhatApps adalah menggunakan Fragment, yaitu "memecah" layar "utama" menjadi beberapa halaman, sehingga halaman-halaman tersebut bisa ditampilkan pada layar "utama" bila Tabs tersebut dipilih.

Untuk mengubah jumlah fragment dapat dilakukan di berkas SectionPagerAdapter.java di baris kode berikut:

  @Override  
   public int getCount() {  
     // Show 3 total pages.  
     return 3; <- ganti dengan jumlah fragment yang diinginkan  
   }  
   
 untuk mengganti nama Tabs dilakukan pada baris kode berikut:  
   
 @Override  
   public CharSequence getPageTitle(int position) {  
     String tabName="";  
     switch (position) {  
       // Nama-nama Tiap TABS disini  
       case 0:  
         tabName = mContext.getResources().getString(R.string.app_tab1);  
         return tabName; <- ganti dengan nama Tabs yang diinginkan  
         // return "STEGO";  
       case 1:  
         tabName = mContext.getResources().getString(R.string.app_tab2);  
         return tabName; <- ganti dengan nama Tabs yang diinginkan  
         //return "CHAT";  
       case 2:  
         tabName = mContext.getResources().getString(R.string.app_tab3);  
         return tabName; <- ganti dengan nama Tabs yang diinginkan  
         //return "SETTINGS";  
     }  
     return null;  
   }  
   
 Untuk menampilkan isi halaman pada fragment dapat dilakukan di berkas MainActivity.java pada baris kode berikut:  
   
 switch (getArguments().getInt(ARG_SECTION_NUMBER)) {  
         case 1:  
           viewFrag = inflater.inflate(R.layout.frag_stego, container, false); <- ganti dengan nama berkas fragment .xml yang akan ditampilkan  
           textView = (TextView) viewFrag.findViewById(R.id.stego_label);  
           textView.setText(getString(R.string.app_tab1)+" "+  
           getArguments().getInt(ARG_SECTION_NUMBER));  
           return viewFrag;  
         case 2:  
           viewFrag = inflater.inflate(R.layout.frag_chat, container, false); <- ganti dengan nama berkas fragment .xml yang akan ditampilkan  
           textView = (TextView) viewFrag.findViewById(R.id.chat_label);  
           textView.setText(getString(R.string.app_tab2)+" "+  
           getArguments().getInt(ARG_SECTION_NUMBER));  
           return viewFrag;  
         case 3:  
           viewFrag = inflater.inflate(R.layout.frag_settings, container, false); <- ganti dengan nama berkas fragment .xml yang akan ditampilkan  
           textView = (TextView) viewFrag.findViewById(R.id.settings_label);  
           textView.setText(getString(R.string.app_tab3)+" "+  
           getArguments().getInt(ARG_SECTION_NUMBER));  
           return viewFrag;  
       }  
       return null;  

Kode sumber program ini dapat diunduh disini. Silahkan dicoba dan galilah kreasi anda dalam mengembangkan aplikasi Android.

Happy programming!!!