Di aplikasi android, Fragment adalah bagian dari Activity yang memungkinkan seorang android developer membuat lebih banyak "desain activity secara modular". Sehingga bisa saja jika kita katakan fragment adalah semacam sub-activity. Fragment bisa juga sebagai representasi dari perilaku atau sebagian antarmuka pengguna dalam suatu activity. Kita dapat menggabungkan beberapa Fragment dalam satu activity untuk membangun UI multi panel dan menggunakan kembali fragment tersebut ke dalam beberapa activity. Jika kita memasukkan suatu fragment ke satu activity maka "lifecycle" atau saya sebut sebagai status dari fragment tersebut akan dipengaruhi langsung oleh status host activity.
Kita dapat membuat Fragment dengan meng-extend kelas Fragment atau dengan memasukkan Fragment ke dalam layout dengan cara mendeklarasikan Fragment tersebut di dalam file layout activity, sebagai elemen <fragment>. Kita dapat memanipulasi setiap Fragment secara terpisah, seperti menambah atau menghapusnya.
Saat melakukan "Fragment Transaction" (saya sebut saja Transaksi), kita dapat menambahkan Fragment ke "backstack" yang dikelola oleh Activity. "Back stack" memungkinkan kita untuk melakukan "Reverse Fragment Transaction" pada saat menekan tombol "Back" pada perangkat. Sebagai contoh jika kita mengganti Fragment dan menambahkannya di back stack kemudian menekan tombol Back di perangkat maka hal itu akan menampilkan Fragment sebelumnya.
Beberapa Poin Penting Tentang Fragment Di Android.
- Penggunaan Fragment digunakan mulai dari versi Android Honeycomb (API versi 11).
- Kita dapat menambah, mengganti, atau menghapus Fragment dalam activity saat activity tersebut sedang berjalan. Untuk melakukan operasi ini kita memerlukan Layout (Relatif Layout, FrameLayout atau layout lainnya) dalam file xml dan kemudian mengganti layout itu dengan Fragment yang diperlukan.
- Fragment memiliki layout, perilaku dan status callback sendiri.
- Fragment dapat digunakan dalam berbagai activity.
- Kita juga bisa menggabungkan beberapa Fragment dalam satu activity untuk membangun antarmuka multi-bidang.
Kegunaan Fragment Di Android.
Sebelum Fragment diperkenalkan, kita hanya dapat menampilkan satu activity di layar pada satu waktu tertentu sehingga tidak dapat membagi layar dan mengontrol bagian yang berbeda secara terpisah. Dengan bantuan Fragment, kita dapat membagi layar di berbagai bagian dan mengontrol bagian-bagian yang berbeda secara terpisah.
Dengan menggunakan Fragment, kita dapat membentuk beberapa Fragment dalam satu activity. Fragment memiliki event, layout, dan status mereka sendiri. Hal ini memberikan fleksibilitas dan juga meniadakan limitasi dalam activity tunggal di layar pada suatu waktu.
Kode Fragment Dasar Dalam XML:
<fragment
android:id="@+id/fragments"
android:layout_width="match_parent"
android:layout_height="match_parent" />Buat Kelas Fragment di Android Studio:
Untuk membuat Fragment, pertama kali kita extend kelas Fragment, lalu override method status utama lalu masukkan logic kode aplikasi, serupa dengan cara menggunakan kelas activity. Saat membuat Fragment kita harus menggunakan callback onCreateView () untuk menentukan layout dan untuk menjalankan Fragment.
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.ViewGroup;
public class FirstFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_first, container, false);
}
}Di sini parameter "inflater" adalah "LayoutInflater" yang digunakan untuk melakukan "inflate layout". Parameter "container" adalah parent ViewGroup (dari layout activity) tempat susunan Fragment yang akan disisipkan.
Parameter "savedInstanceState" adalah "Bundle" yang menyediakan data tentang "instance" sebelumnya dari Fragment. Method inflate () memiliki tiga argumen, pertama adalah "resource layout" yang ingin kita inflate, kedua adalah "ViewGroup" sebgai parent dari layout yang diinflate. Parameter ketiga adalah nilai boolean yang mengindikasikan apakah layout yang diinflate haruskah di attach ke ViewGroup (parameter kedua).
Implementasi Fragment di Android:
Fragment digunakan mulai dari versi Android Honeycomb (API 11). Ada beberapa kelas utama yang terkait dengan Fragment diantaranya adalah:
1. FragmentActivity: Ini adalah base class untuk semua activity yang menggunakan kompatibilitas berdasarkan fragment.
2. Fragment: Kelas dasar untuk semua definisi fragment.
3. FragmentManager: Kelas untuk berinteraksi dengan objek fragment di dalam suatu activity.
4. FragmentTransaction: Kelas untuk melakukan serangkaian operasi fragment seperti replace atau add fragment.
Contoh 1: Fragment Di Android Studio:
Langkah 1: Buat proyek baru dan beri nama FragmentExample
Langkah 2: Buka res -> layout -> activity_main.xml (atau) main.xml dan tambahkan kode berikut:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<!-- display two Button's and a FrameLayout to replace the Fragment's -->
<Button
android:id="@+id/firstFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/button_background_color"
android:text="First Fragment"
android:textColor="@color/white"
android:textSize="20sp" />
<Button
android:id="@+id/secondFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="@color/button_background_color"
android:text="Second Fragment"
android:textColor="@color/white"
android:textSize="20sp" />
<FrameLayout
android:id="@+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp" />
</LinearLayout>Langkah 3: Buka src -> package -> MainActivity.java
Pada poin ini, buka MainActivity dan tambahkan kode untuk inisiasi Tombol. Setelah itu buat event "setOnClickListener" di kedua Button. Pada klik Tombol Pertama kita replace "First Fragment " dan saat klik Tombol Kedua kita akan replace "Second Fragment" dengan layout (FrameLayout). Untuk mengganti Fragment dengan FrameLayout pertama-tama kita buat Fragment Manager dan kemudian mulai transaksi menggunakan Fragment Transaction dan akhirnya replace Fragment dengan layout yaitu FrameLayout.
package com.monchoz.fragmentexample;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
Button firstFragment, secondFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// get the reference of Button's
firstFragment = (Button) findViewById(R.id.firstFragment);
secondFragment = (Button) findViewById(R.id.secondFragment);
// perform setOnClickListener event on First Button
firstFragment.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// load First Fragment
loadFragment(new FirstFragment());
}
});
// perform setOnClickListener event on Second Button
secondFragment.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// load Second Fragment
loadFragment(new SecondFragment());
}
});
}
private void loadFragment(Fragment fragment) {
// create a FragmentManager
FragmentManager fm = getFragmentManager();
// create a FragmentTransaction to begin the transaction and replace the Fragment
FragmentTransaction fragmentTransaction = fm.beginTransaction();
// replace the FrameLayout with new Fragment
fragmentTransaction.replace(R.id.frameLayout, fragment);
fragmentTransaction.commit(); // save the changes
}
}Langkah 4: Sekarang kita membutuhkan 2 fragment dan 2 layout xml. Jadi buat dua fragment dengan cara klik kanan pada folder package dan buat class dan beri nama sebagai "FirstFragment" dan "SecondFragment" dan tambahkan kode berikut di masing-masing class fragment.
FirstFragment.class
package com.monchoz.fragmentexample;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;
public class FirstFragment extends Fragment {
View view;
Button firstButton;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
view = inflater.inflate(R.layout.fragment_first, container, false);
// get the reference of Button
firstButton = (Button) view.findViewById(R.id.firstButton);
// perform setOnClickListener on first Button
firstButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// display a message by using a Toast
Toast.makeText(getActivity(), "First Fragment", Toast.LENGTH_LONG).show();
}
});
return view;
}
}Di Fragment ini pertama-tama kita inflate layout dan dapatkan referensi terhadap Button object. Setelah itu kita lakukan event setOnClickListener di Button sehingga setiap kali pengguna mengklik tombol dengan pesan "First Fragment" ditampilkan di layar dengan menggunakan Toast.
SecondFragment.class
Di Fragment ini pertama-tama kita inflate layout dan dapatkan referensi dari Button. Setelah itu kita tambahkan event setOnClickListener di Button sehingga setiap kali pengguna mengklik tombol, pesan "Second Fragment" ditampilkan di layar dengan menggunakan Toast.
package com.monchoz.fragmentexample;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;
public class SecondFragment extends Fragment {
View view;
Button secondButton;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
view = inflater.inflate(R.layout.fragment_second, container, false);
// get the reference of Button
secondButton = (Button) view.findViewById(R.id.secondButton);
// perform setOnClickListener on second Button
secondButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// display a message by using a Toast
Toast.makeText(getActivity(), "Second Fragment", Toast.LENGTH_LONG).show();
}
});
return view;
}
}Langkah 5: Sekarang buat 2 xml layout. Klik kanan pada res / layout -> New -> Layout Resource File dan beri nama sebagai fragment_first dan fragment_second dan tambahkan kode berikut di file masing-masing.
Di sini kita akan mendesain UI sederhana dasar dengan menggunakan TextView dan Button.
fragment_first.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.abhiandroid.fragmentexample.FirstFragment">
<!--TextView and Button displayed in First Fragment -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:text="This is First Fragment"
android:textColor="@color/black"
android:textSize="25sp" />
<Button
android:id="@+id/firstButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="@color/green"
android:text="First Fragment"
android:textColor="@color/white"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>fragment_second.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.abhiandroid.fragmentexample.SecondFragment">
<!--TextView and Button displayed in Second Fragment -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:text="This is Second Fragment"
android:textColor="@color/black"
android:textSize="25sp" />
<Button
android:id="@+id/secondButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="@color/green"
android:text="Second Fragment"
android:textColor="@color/white"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>Langkah 6: Buka res -> value -> colors.xml
Pada poin ini, kita akan mendefinisikan warna yang digunakan dalam file xml.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- color's used in our project -->
<color name="black">#000</color>
<color name="green">#0f0</color>
<color name="white">#fff</color>
<color name="button_background_color">#925</color>
</resources>Langkah 7: Buka AndroidManifest.xml
Pada langkah ini, kita buka file Android Manifest yang sebenarnya tidak perlu kita edit sama sekali karena aplikasi ini hanya berisi satu Activitty yaitu MainActivity yang sudah didefinisikan di dalamnya. Dalam proyek ini, kita memang membuat dua Fragment tetapi kedua fragment tersebut tidak perlu didefinisikan dalam manifest karena fragment adalah bagian dari activity.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.monchoz.fragmentexample" >
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>Langkah 8: Sekarang jalankan Aplikasi. Coba klik tombol pertama menampilkan "First Fragmen" dan klik Tombol Kedua menampilkan "Second Fragment" yang sebenarnya kita melakukan replace layout (FrameLayout).
EmoticonEmoticon