CodeLab Fragment Part 2

CodeLab : Flexible UI dengan Fragment (Bagian

2-selesai) Penjelasan :

Seperti yang dijelaskan pada part 1 mengenai fragment dan contoh implementasi fragment pada

tampilan modern berbasis slide dan tab. Pada CodeLab kali ini kita akan membahas bagaimana

aplikasi Android dapat dibangun dengan menggunakan lebih dari satu fragment dan cukup memiliki

1 Activity. Hal ini dapat disebut flexibilitas fragment yang bisa kita gunakan untuk menjadi

komponen User Interface yang dapat kita manupulasi seperti ditambahkan, dibuang dan bahkan

diganti-ganti dalam satu Activity. Ingat, fragment tidak dapat berdiri sendiri, fragment

membutuhkan Activity untuk bisa tampil di layar pengguna. Mengembangkan aplikasi dengan

fragment memiliki keuntungan flexibilitas karna kita dapat memanipulasi fragment-fragment

tersebut untuk bisa digunakan kembali (reuse) pada kebutuhan yang memiliki kemiripan fungsi

dalam satu flow aplikasi. Tantangan dalam implementasi penggunaan fragment pada aplikasi kita

salah satunya menambah kompleksitas app dan maintain dari state fragment itu sendiri didalam

Activity terkait. Kapan penggunaan fragment tergantung pada pemahaman dan pengalaman dari

developer itu sendiri dan juga kebutuhan dari aplikasi yang ada. Tanpa fragment aplikasi Android

tetep bisa dikembangkan dengan mengandalkan Activity.

Tujuan :

Pada CodeLab ini adalah demonstrasi flexibilitas UI dengan memanfaatkan fragment-fragment

dalam satu Activity dengan memanfaatkan FragmentManager dan FragmentTransaction. Method

Transaction yang akan digunakan diantaranya :

1. Add() : untuk menambahkan fragment ke dalam stack dan Activity sehingga dapat muncul

dilayar

2. AddToBackStack() : untuk menambahkan object transaction ke dalam stack sehingga semua

state akan tersimpan sehingga ketika user kembali ke fragment ini ketika tombol back diklik

3. Replace() : untuk mengganti existing fragment yang muncul dilayar

4. Commit() : untuk mengkonfirmasi bahwa semua proses pada traksaksi fragment dapat

dijalankan

5. setTransition : untuk menambahkan animasi pada perpindahan fragment

Referensi :

1. http://developer.android.com/guide/components/fragments.html

2. http://developer.android.com/reference/android/app/FragmentTransaction.html

3. http://developer.android.com/reference/android/app/FragmentManager.html

4. Professional Android 4 Application Development (PA4AA) halaman 107 128

Perhatian :

1. Pada CodeLab ini kita menggunakan Fragment class dari package

android.support.v4.app.Fragment

2. Ketika membuat fragment baru pastikan pilihan Include fragment factory method ? dan

Include interface callbacks ? tidak dichecklist (uncheck)

3. Jangan diikuti penulisan nama package yang penulis buat

Langkah langkah :

1. Buat project baru bernama SampleFragmentUsage

2. Buat Fragment baru dengan nama FirstFragment dan modifikasi file fragment_first.xml

menjadi seperti ini :

3. Pada FirstFragment.java silakan modifikasi kodenya menjadi seperti ini :

package com.sidiq.codelab.samplefragmentusage;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentTransaction;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.Button;

/**

* A simple {@link Fragment} subclass.

*/

public class FirstFragment extends Fragment {

private Button btnFirstFragment;

public FirstFragment() {

// Required empty public constructor

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup

container,

Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_first,

container, false);

btnFirstFragment =

(Button)view.findViewById(R.id.btn_first_fragment);

((MainActivity)getActivity()).getSupportActionBar().setTitle("First

Fragment");

((MainActivity)getActivity()).getSupportActionBar().setDisplayHomeAsU

pEnabled(false);

return view;

}

@Override

public void onActivityCreated(Bundle savedInstanceState) {

super.onActivityCreated(savedInstanceState);

btnFirstFragment.setOnClickListener(new

View.OnClickListener() {

@Override

public void onClick(View view) {

getFragmentManager().beginTransaction().

setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN).

replace(R.id.frame_container,

new SecondFragment(),

SecondFragment.class.getSimpleName())

.addToBackStack(null).commit();

}

});

}

}

Penjelasan :

Pada btnFirstTransaction kita memberikan listener OnClickListener agar ketika diklik dapat

melakukan proses penggantian fragment (replace) yang telah ada. Untuk digantikan dengan

object dari SecondFragment() pada FrameLayout berID frame_container. Selain itu kita

memberikan sedikit transisi ketika terjadi proses penggantian fragment. Dan sebelum

commit() kita tambahkan proses ini ke dalam BackStack. Kita juga menambahkan title di

Action Bar berdasarkan dengan fragment yang active saat ini (First Fragment).

Mengapa kita menggunakan ((MainActivity)getActivity()) untuk mengakses ActionBar ?

Dikarenakan kita menggunakan App Compability Library maka untuk method getActionBar()

tidak dapat digunakan karna akan menghasilkan null pointer exception error, kita

menggunakan method getSupportActionBar() yang disupport oleh App Compability Library.

4. Buat fragment lagi dengan cara yang sama seperti diatas, namakan dengan

SecondFragment. Jika sudah pada fragment_second.xml silakan modifikasi tampilannya

seperti berikut :

android:layout_height="match_parent"

tools:context="com.sidiq.codelab.samplefragmentusage.SecondFragment">

5. Pada SecondFragment.java silakan modifikasi kodenya menjadi seperti dibawah ini :





import android.view.MenuItem;



import android.widget.Button;

/**


*/

public class SecondFragment extends Fragment {

private Button btnSecond;

public SecondFragment() {


}

@Override


container,


// Inflate the layout for this fragment

View view = inflater.inflate(R.layout.fragment_second,

container, false);

btnSecond =

(Button)view.findViewById(R.id.btn_second_fragment);

((MainActivity)getActivity()).getSupportActionBar().setTitle("Second

Fragment");


pEnabled(true);

setHasOptionsMenu(true);

return view;

}

@Override

public void onActivityCreated(Bundle savedInstanceState) {

super.onActivityCreated(savedInstanceState);

btnSecond.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

getFragmentManager().beginTransaction().

replace(R.id.frame_container,

new ThirdFragment(),

ThirdFragment.class.getSimpleName())

.addToBackStack(null)

.commit();

}

});

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

if (item.getItemId() == android.R.id.home){

getFragmentManager().popBackStack();

}

return super.onOptionsItemSelected(item);

}

}

Penjelasan :

Hampir sama dengan penjelasan sebelumnya hanya saja disini kita akan mengganti

SecondFragment yang ada dilayar dengan ThirdFragment dan tidak menyertakan Fragment

Transition. Lihat disini kita menambahkan fungsionalitas BackButton pada

((MainActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true); dan

event ketika back button diklik maka akan menjalankan perintah

getFragmentManager().popBackStack(); yang akan membuat fragment saat ini dikeluarkan

dari stack.

6. Buatlah satu fragment lagi dan ini yang terakhir pada CodeLab ini, beri nama ThirdFragment.

Jika sudah modifikasi fragment_third.xml menjadi seperti dibawah ini:

android:layout_height="wrap_content"

android:text="Hola ini third fragment"

android:layout_centerVertical="true"

android:layout_centerHorizontal="true"

android:gravity="center"/>

7. Pada ThirdFragment.java modifikasi kode yang ada menjadi seperti dibawah ini :








/**


*/

public class ThirdFragment extends Fragment {

public ThirdFragment() {


}

@Override


container,


// Inflate the layout for this fragment

View view = inflater.inflate(R.layout.fragment_third,

container, false);

((MainActivity)getActivity()).getSupportActionBar().setTitle("ThirdFr

agment");


pEnabled(true);

setHasOptionsMenu(true);

return view;

}

@Override


if (item.getItemId() == android.R.id.home){

getFragmentManager().popBackStack();

}


}

}

Penjelasan :

Sama dengan yang diatas :D

8. Sekarang pada activity_main.xml modifikasi kodenya menjadi seperti dibawah ini :

Penjelasan :

Fragment umumnya akan ditampilkan pada FrameContainer. Mengapa harus FrameLayout.

Ini jawabannya :

FrameLayout is designed to block out an area on the screen to display a single

item. Generally, FrameLayout should be used to hold a single child view,

because it can be difficult to organize child views in a way that's scalable to

different screen sizes without the children overlapping each other. You can,

however, add multiple children to a FrameLayout and control their position within

the FrameLayout by assigning gravity to each child, using the

android:layout_gravity attribute. .

9. Pada MainActivity.java silakan modifikasi kodenya seperti dibawah ini :



import android.support.v7.app.AppCompatActivity;

import android.view.Menu;


public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

if (savedInstanceState == null){

getSupportFragmentManager().beginTransaction().

add(R.id.frame_container,

new FirstFragment(),

FirstFragment.class.getSimpleName()).commit();

}

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it

is present.

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

@Override


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

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if (id == R.id.action_settings) {

return true;

}


}

}

Penjelasan :

Proses penambahan fragment dengan menggunakan method add() agar FirstFragment dapat

tampil ke layar dengan sebelumnya kita melakukan pengecekan terhadap isi dari object

savedInstanceState();

10. Jika sudah semua kodenya, silakan dirunning projectnya ke emulator atau device rekan-

rekan. Hasilnya apa, kita dapat membuat sebuah aplikasi dengan 3 Fragment yang dapat

saling berganti-ganti dalam satu Activity. Proses ini dapat direplikasi untuk project-project

yang dihadapi sama teman-teman agar User Experience dari aplikasi rekan-rekan akan

menjadi lebih baik.

Output :

CodeLab Fragment Part 2

Documents

Transcript of CodeLab Fragment Part 2