Materi kita kali ini adalah Tutorial Android Membuat Tab Swipe dan View Pager. Sekarang Aplikasi-aplikasi android yang ada di Market sudah semakin bagus, contohnya untuk aplikasi yang menggunakan Tab, kalau dulu untuk berpindah Tab kita harus mengklik Tabnya, sekarang kita punya cara lain yaitu dengan menswipe kekanan atau kekiri. Salah satu rahasianya ternyata aplikasi tersebutb memanfaatkan View Pager. Penasaran ingin buat aplikasi yang navigasi Tabnya bisa dengan Swipe. Mari kita mulai dan ikuti langkah-langkah berikut.
1. Buat Project dengan nama TSJadwalPelajaran
2. Edit activity_main.xml lalu ketikkan kode berikut
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
3. Buat Layout Baru dengan nama jadwalfragment_layout.xml lalu ketikkan kode berikut
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="@+id/listViewJadwal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
4. Buat layout baru dengan nama row_jadwal.xml lalu ketikkan kode 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" >
<TextView
android:id="@+id/textViewRowJam"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="TextView" />
<TextView
android:id="@+id/textViewRowPelajaran"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:paddingLeft="10dp"
android:layout_toRightOf="@+id/textViewRowJam"
android:text="TextView" />
</RelativeLayout>
5. Buat Class baru dengan nama Jadwal.java lalu ketikkan kode berikut
package net.agusharyanto.tsjadwalpelajaran;
public class Jadwal {
public String hari="";
public String jam="";
public String pelajaran="";
public Jadwal (String pday, String ptime, String plesson){
this.hari = pday;
this.jam = ptime;
this.pelajaran = plesson;
}
}
6. Buat class baru dengan nama AdapterJadwal.java lalu ketikan kode berikut
package net.agusharyanto.tsjadwalpelajaran;
import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
public class AdapterJadwal extends ArrayAdapter<Jadwal> {
private Activity activity;
private ArrayList<Jadwal> lJadwal;
private static LayoutInflater inflater = null;
public AdapterJadwal (Activity activity, int textViewResourceId,ArrayList<Jadwal> al_Jadwal) {
super(activity, textViewResourceId, al_Jadwal);
try {
this.activity = activity;
this.lJadwal = al_Jadwal;
inflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
} catch (Exception e) {
}
}
public int getCount() {
return lJadwal.size();
}
public long getItemId(int position) {
return position;
}
public static class ViewHolder {
public TextView jam;
public TextView pelajaran;
}
public View getView(int position, View convertView, ViewGroup parent) {
View vi = convertView;
final ViewHolder holder;
try {
if (convertView == null) {
vi = inflater.inflate(R.layout.row_jadwal, null);
holder = new ViewHolder();
holder.jam = (TextView) vi.findViewById(R.id.textViewRowJam);
holder.pelajaran = (TextView) vi.findViewById(R.id.textViewRowPelajaran);
vi.setTag(holder);
} else {
holder = (ViewHolder) vi.getTag();
}
holder.jam.setText(lJadwal.get(position).jam);
holder.pelajaran.setText(lJadwal.get(position).pelajaran);
} catch (Exception e) {
}
return vi;
}
}
7. Buat class baru dengan nama JadwalFragment.java lalu ketikan kode berikut
package net.agusharyanto.tsjadwalpelajaran;
import java.util.ArrayList;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
public class JadwalFragment extends Fragment {
//TextView tvhari;
ListView listviewJadwal ;
ArrayList<Jadwal> jadwal_terpilih = new ArrayList<Jadwal>();
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Retrieving the currently selected item number
int position = getArguments().getInt("position");//getArguments().getInt("position");
String[] menus ={"Senin", "Selasa", "Rabu","Kamis","Jumat" };
// Creating view corresponding to the fragment
View v = inflater.inflate(R.layout.jadwalfragment_layout, container, false);
listviewJadwal = (ListView) v.findViewById(R.id.listViewJadwal);
showJadwal(menus[position]);
return v;
}
public void showJadwal(String hari) {
Log.d("TAGS","hari:"+hari);
// tvhari.setText("Hari " + hari);
jadwal_terpilih.clear();
for (int i = 0; i < MainActivity.list_jadwal.size(); i++) {
Jadwal jadwal = MainActivity.list_jadwal.get(i);
if (jadwal.hari.equals(hari)) {
jadwal_terpilih.add(jadwal);
}
}
Log.d("TAGS","hari:"+hari+"jadwal:"+jadwal_terpilih.size());
AdapterJadwal adapterjadwal = new AdapterJadwal(getActivity(), 0,
jadwal_terpilih);
listviewJadwal.setAdapter(adapterjadwal);
}
}
8. Buat class baru dengan nama TabsPagerAdapter.java
package net.agusharyanto.tsjadwalpelajaran;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class TabsPagerAdapter extends FragmentPagerAdapter {
public TabsPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int index) {
String[] hari ={"Senin", "Selasa", "Rabu","Kamis","Jumat" };
JadwalFragment rFragment = new JadwalFragment();
// Passing selected item information to fragment
Bundle data = new Bundle();
data.putInt("position", index);
data.putString("hari", hari[index]);
rFragment.setArguments(data);
return rFragment;
}
@Override
public int getCount() {
// get item count - equal to number of tabs
return 5;
}
}
9. Edit Class MainActivity.java lalu ketikkan kode berikut
package net.agusharyanto.tsjadwalpelajaran;
import java.util.ArrayList;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
public class MainActivity extends FragmentActivity implements
ActionBar.TabListener {
private ViewPager viewPager;
private TabsPagerAdapter mAdapter;
private ActionBar actionBar;
// Tab titles
public static String[] tabs = { "Senin", "Selasa", "Rabu","Kamis","Jumat" };
public static ArrayList <Jadwal> list_jadwal = new ArrayList<Jadwal>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initilization
initData();
viewPager = (ViewPager) findViewById(R.id.pager);
actionBar = getActionBar();
mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
// actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Adding Tabs
for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(this));
}
/**
* on swiping the viewpager make respective tab selected
* */
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
// on changing the page
// make respected tab selected
actionBar.setSelectedNavigationItem(position);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
// viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// on tab selected
// show respected fragment view
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
public void initData() {
list_jadwal.clear();
list_jadwal.add(new Jadwal("Senin","08:00-10:00","Matematika"));
list_jadwal.add(new Jadwal("Senin","10:00-12:00","Agama Islam"));
list_jadwal.add(new Jadwal("Senin","12:00-13:00","Istirahat"));
list_jadwal.add(new Jadwal("Senin","13:00-15:00","Fisika"));
list_jadwal.add(new Jadwal("Selasa","08:00-10:00","Bahasa Indonesia"));
list_jadwal.add(new Jadwal("Selasa","10:00-12:00","Kimia"));
list_jadwal.add(new Jadwal("Selasa","12:00-13:00","Istirahat"));
list_jadwal.add(new Jadwal("Selasa","13:00-15:00","Biologi"));
list_jadwal.add(new Jadwal("Rabu","08:00-10:00","Matematika"));
list_jadwal.add(new Jadwal("Rabu","10:00-12:00","Seni Rupa"));
list_jadwal.add(new Jadwal("Rabu","12:00-13:00","Istirahat"));
list_jadwal.add(new Jadwal("Rabu","13:00-15:00","Bahasa Inggris"));
list_jadwal.add(new Jadwal("Kamis","08:00-10:00","Fisika"));
list_jadwal.add(new Jadwal("Kamis","10:00-12:00","Penjaskes"));
list_jadwal.add(new Jadwal("Kamis","12:00-13:00","Istirahat"));
list_jadwal.add(new Jadwal("Kamis","13:00-15:00","Geografi"));
list_jadwal.add(new Jadwal("Jumat","08:00-10:00","Pemrograman Java"));
list_jadwal.add(new Jadwal("Jumat","10:00-12:00","Pemrograman Android"));
list_jadwal.add(new Jadwal("Jumat","12:00-13:00","Istirahat"));
list_jadwal.add(new Jadwal("Jumat","13:00-15:00","Logika Algoritma"));
}
}
10. Sekarang mari kita Run Projectnya.
Tampilan Awal Aplikasi.
Untuk berpindah Tab kita bisa menyentuh salah satu Tab. Atau melakukan gerakan swipe ke kiri
Gimana, Mantapkan Tab Swipe denganView Pagernya
Bisa buat tambahan senjata buat yang lagi skripsi atau lagi ada project biar aplikasinya tambah mantab
Semoga Bermanfaat
Salam Hangat Developer Android
Agus Haryanto
aku nyoba kog error yaa gan
thnx eaaa gan tutorialnya
Malam om nama aplikasi nya apa biar bisa langsung nyoba.. Trimakasih
Kalau tabnya banyak gimana pak Agus? jadi supaya bisa kita swipe juga
Note:
Misalkan case seperti diatas Senin-Sabtu
Gan Bisa Nitip Saran Nich, Kalau Ngasih Tutorial tolong disertakan source kodenya prototype yang sudah dibuat, Jadi Kita juga bisa coba dulu apakah program yang anda demokan sudah bisa diterapkan atau masih bug, Thanks…
mantap gan sukses aplikasinya dicoba, ditunggu tutorial lainya
Tutorial gak jelas banget, sok jago kayaknya yang posting ini.
nice share pak…!! izin copas
http://ilhamhimura.web.id
Salam dari Malaysia Pak Agus…saya mau nanya mengapa tidak boleh guna code dari eclipse tutorial ke android studio? mengapa hasilnya enggak jadi. seperti ada bug
Thank gan udah share banyak tutorial buat android.
Numpang share gan. Ane buat aplikasi android buat Belajar Matematika SD (saat ini masih untuk kelas III). Soal-soal banyak dan ada kunci jawabannya. Mungkin bisa ditesting dan berguna gan. Bisa dicek di google playstore di link : https://play.google.com/store/apps/details?id=fahim_edu.matematikasd
Terimakasih gan
Bagaimana cara membuat halaman baru di menu slider?
Kan di atas textvies ini kita menggunakan button
Button itu diklik bisa masuk ke form selanjutnya apakah itu bisa? Kasih coding ya dong
Pengen langsung testing
Terimakasih atas infonya kak