About Me

Agus Haryanto,
Android Trainner,
GoogleMaps (JavaScript) Trainer
JQuery and JQuery Mobile Trainer
Java, Java Script and PHP Trainer
Freelance Developer Android
Freelance Developer Blackberry
Freelance Developer Web (GIS Googlemaps)
Freelance Developer SMS Gateway

jika ingin contact saya bisa emali ke agus.superwriter@gmail.com

ym: agus_h23

Pin BB : 2AD38B33

Facebook : Agus Haryanto


Article

Tutorial Android Membuat Tab Swipe dan View Pager

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

Share

10 comments to Tutorial Android Membuat Tab Swipe dan View Pager

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam protection by WP Captcha-Free