CodeLab Fragment

7/25/2019 CodeLab Fragment

1/10

CodeLab : Implementasi Tampilan Tab dengan Fragment sebagai

Content Tab yang dikombinasikan dengan Material TabLayout dan

ViewPager

Deskripsi singkat :

Dalam satu Activity bisa terdapat lebih dari satu fragment. Salah satu contohnya adalah pada aplikasi

yang memiliki tampilan Tab pada salah satu Activitynya.

Jika di whatsapp bisa dilihat di halaman utamanya. Dimana terdapat 3 tab : Call, Chat dan Contacts.

Untuk membuat tampilan seperti itu kita menggunakan fragment sebagai isi dari content tabnya

dengan dibungkus oleh ViewPager dan dengan TabLayout sebagai tab indicator-nya.

Contoh Tampilan Activity yang akan kita buat pada CodeLab ini sebagai berikut :

Komponen material design yang kita pakai pada CodeLab ini adalah :

1. TabLayout

2.

Toolbar


2/10

Mari kita mulai :

1. Buat project Baru dengan nama Material Tab, klik Next hingga Finish

2. Kita tambahkan Material Design Support Library (compile

'com.android.support:design:22.2.0') kedalam Gradle (Module:app) yang kita punya

pada bagian Dependecies, sehingga file Gradle (Module: app) pada bagian dependeciesmenjadi sebagai berikut :

dependencies {compile fileTree(dir: 'libs', include: ['*.jar'])compile 'com.android.support:appcompat-v7:22.2.0'compile 'com.android.support:design:22.2.0'

}

3.

Selanjutnya kita akan mendefinisikan warna dasar pada aplikasi yang akan kita buat

melalui file xml, Caranya : Buat file xml resource baru dengan cara Klik kanan pada

direktori valuesNewValues Resource File dan namakan colors.xml, setelah

terbuat silakan lengkapi dengan kode berikut :

#e62117#c31c13#8a140e

Sekarang seharusnya bisa terlihat warna dasar apa saja yang kita gunakan

4.

Pada file styles.xml, masih di direktori Values silakan modifikasi kode didalamnya

sehingga menjadi seperti ini :

false

@color/ColorPrimaryDark

Tujuan dari kode diatas adalah untuk mengkostumisasi theme dari aplikasi kita dan

mendefinisikan style untuk TabLayout yang kita gunakan

5. Sekarang kita buat content dari tab-tab yang akan ditampilkan. Buat direktori baru

dengan nama fragment dengan cara : klik kanan pada package utamaNew

Package dan beri nama fragment

6.

Buat dua class fragment didalamnya masing-masing Tab1Fragment dan Tab2Fragment

dengan cara. Klik kanan pada package fragmentNewFragmentBlank Fragment


3/10

Lalu muncul dialog form seperti berikut, beri nama Tab1Fragment dan uncheck Include

fragment factory methods? Dan Include interface callbacks? Lalu klik finish / enter

Lakukan hal yang sama untuk Tab2Fragment.


4/10

7. Buka file strings.xml pada values dan lengkapi kodenya sebagai berikut :

SampleTabApplication

Hello world!

Settings

Kamu ada di tab 1Kamu ada di tab 2

8.

Pada fragment_tab1.xml silakan lengkapi kodenya seperti dibawah ini.

9. Pada Tab1Fragment.java silakan lengkapi kodenya seperti dibawah ini. (Jangan ikuti

nama packagenya dan perhatikan perubahan pada importnya, kita menggunakan import

android.support.v4.app.Fragment; ) pergunakan Ctrl [tahan] + spasi untuk merubah

import Fragment ke support.v4 Fragment.

package com.sidiq.codelab.sampletabapplication.fragment ;

import android.os.Bundle;import android.support.v4.app.Fragment ;import android.view.LayoutInflater ;import android.view.View;import android.view.ViewGroup;

import com.sidiq.codelab.sampletabapplication.R ;

public class Tab1Fragment extends Fragment {

public Tab1Fragment() {// Required empty public constructor

}


5/10

@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup

container,Bundle savedInstanceState) {

// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_tab1 , container,

false);}

}

10.Pada fragment_tab2.xml silakan lengkapi kodenya sebagai berikut.

Disini, tidak seperti fragment_tab1.xml kita memiliki komponen Button

11.Pada Tab2Fragment.java silakan lengkapi kodenya sebagai berikut, ingat Jangan ikuti

nama packagenya dan perhatikan perubahan pada importnya, kita menggunakan import

android.support.v4.app.Fragment; ) pergunakan Ctrl [tahan] + spasi untuk merubahimport Fragment ke support.v4 Fragment.

package com.sidiq.codelab.sampletabapplication.fragment ;

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.Button;import android.widget.Toast;

import com.sidiq.codelab.sampletabapplication.R ;


6/10

public class Tab2Fragment extends Fragment {

private Button btnClickMe;

public Tab2Fragment() {

// Required empty public constructor}

@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup

container,Bundle savedInstanceState) {

// Inflate the layout for this fragmentView view = inflater.inflate(R.layout.fragment_tab2,

container, false);btnClickMe = (Button)view.findViewById(R.id.btn_click_me);return view;

}

@Overridepublic void onActivityCreated(Bundle savedInstanceState) {

super.onActivityCreated(savedInstanceState);btnClickMe.setOnClickListener(new View.OnClickListener() {

@Overridepublic void onClick(View view) {

Toast.makeText(getActivity(), "Hola",Toast.LENGTH_LONG).show();

}});

}}

12.

Sekarang kita buat Adapter untuk Fragment-fragment diatas. Buat package baru dengan

cara klik kanan dipackage utamaNewPackagedan beri nama adapter. Didalam

package directory buat class Adapter dengan cara. Klik kanan pada package adapter

NewJava Class dan beri nama TabFragmentPagerAdapter


7/10

13.Pada TabFragmentPagerAdapter lengkapi kodenya sebagai berikut :

package com.sidiq.codelab.sampletabapplication.adapter ;

import android.support.v4.app.Fragment ;import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter ;

importcom.sidiq.codelab.sampletabapplication.fragment.Tab1Fragment ;importcom.sidiq.codelab.sampletabapplication.fragment.Tab2Fragment ;

/*** Created by Sidiq on 09/07/2015.*/

public class TabFragmentPagerAdapter extends FragmentPagerAdapter{

//nama tab nya

String[] title = new String[]{"Tab 1", "Tab 2"};

public TabFragmentPagerAdapter(FragmentManager fm) {super(fm);

}

//method ini yang akan memanipulasi penampilan Fragmentdilayar

@Overridepublic Fragment getItem(int position) {

Fragment fragment = null;switch (position){

case 0:fragment = new Tab1Fragment();break;

case 1:fragment = new Tab2Fragment();break;

default:fragment = null;break;

}

return fragment;}

@Overridepublic CharSequence getPageTitle(int position) {

return title[position];}

@Overridepublic int getCount() {

return title.length;}

}

file adapter diatas adalah adapter yang membungkus dan mengatur manipulasitampilnya fragment


8/10

14.

Pada direktori layout silakan buat file resouce layout baru dengan cara klik kanan pada

direktori layoutNewLayout resource file dan beri nama toolbar.xml. Dan

kemudian lengkapi kodenya sebagai berikut. Toolbar ini akan menjadi pengganti dari

ActionBar pada umumnya.

15.

Pada activity_main.xml lengkapi kodenya sebagai berikut.

Dapat dilihat diatas kita menggunakan beberapa komponen UI seperti Toolbar,

TabLayout dan ViewPager yang dibungkus dengan Container utama yaitu LinearLayoutdengan konfigurasi Vertical pada orientasinya.


9/10

16.

Pada MainActivity.java silakan lengkapi kodenya sebagai berikut. Jangan ikuti dan

abaikan nama package yang ada.

package com.sidiq.codelab.sampletabapplication ;

import android.os.Bundle;

import android.support.design.widget.TabLayout ;import android.support.v4.view.ViewPager ;import android.support.v7.app.AppCompatActivity ;import android.support.v7.widget.Toolbar ;import android.view.Menu;import android.view.MenuItem;

importcom.sidiq.codelab.sampletabapplication.adapter.TabFragmentPagerAdapter;

public class MainActivity extends AppCompatActivity {

//deklarasi semua komponen View yang akan digunakanprivate Toolbar toolbar;private ViewPager pager;private TabLayout tabs;@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState) ;setContentView(R.layout.activity_main);

//set up toolbartoolbar = (Toolbar)findViewById(R.id.tool_bar);setSupportActionBar(toolbar);getSupportActionBar().setTitle("Material Tab");

//inisialisasi tab dan pagerpager = (ViewPager)findViewById(R.id.pager);tabs = (TabLayout)findViewById(R.id.tabs);

//set object adapter kedalam ViewPagerpager.setAdapter(new

TabFragmentPagerAdapter(getSupportFragmentManager()));

//Manimpilasi sedikit untuk set TextColor pada Tab

tabs.setTabTextColors(getResources().getColor(R.color. ColorPrimaryDark),

getResources().getColor(android.R.color. white));

//set tab ke ViewPagertabs.setupWithViewPager(pager);

//konfigurasi Gravity Fill untuk Tab berada di posisi yangproposional

tabs.setTabGravity(TabLayout.GRAVITY_FILL);

}

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar ifit is present.getMenuInflater().inflate(R.menu. menu_main, menu);


10/10

return true;}

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, solong// as you specify a parent activity in

AndroidManifest.xml.int id = item.getItemId();

//noinspection SimplifiableIfStatementif (id == R.id.action_settings) {

return true;}

return super.onOptionsItemSelected(item) ;}

}

Voila, project kita sudah jadi dan silakan Run atau jadikan Apk hasilnya pasti seperti yang

diatas. Untuk source code nya bisa didownload di

https://github.com/sidiqpermana/SampleTabApplication
https://github.com/sidiqpermana/SampleTabApplicationhttps://github.com/sidiqpermana/SampleTabApplicationhttps://github.com/sidiqpermana/SampleTabApplication

CodeLab Fragment

Documents

Transcript of CodeLab Fragment