Belajar Cara Membuat Fragment pada Android Studio

Oleh Wildan M Athoillah 02.35

Assalamualaikum Warahmatullahi Wabarakatuh.

Belajar Cara Membuat Fragment pada Android Studio. Fragment merupakan salah satu komponen user interface, yang merupakan bagian dari activity, berbeda dengan activity, fragment hanya menduduki sebagian layar pada sebuah activity didalam aplikasi, jika activity mencangkup seluruh layar/tampilan pada ponsel.

Tutorial Membuat Fragment pada Android Studio

Contohnya seperti pada aplikasi Whatsapp, jika kita ingin mengakses konten pada whatsapp, user tidak perlu mengklik sesuatu untuk berpindah activity, user tinggal menggesernya kekiri dan kekanan, maka secara otomatis konten akan berubah, misalnya dari menu Chatting ke menu Panggilan, atau sebaliknya. Tetapi selain Fragment, pada aplikasi whatsapp terdapat juga TabLayout untuk mempermudah user mengakses konten meraka, tutorial mengenai TabLayout akan dibahas pada artikel berikutnya.

Contoh Implementasi Fragment pada Activity

Berikut merupakan contoh implementasi fragment yang saya buat pada Aplikasi saya sendiri :

Disana terdapat 1 Activity dengan BottomBar sebagai Wadah/Container dan 3 Fragment, jika kita mengklik salah satu menu pada BottomBar, secara otomatis layar yang berada di tengah activity akan berpindah.

Langkah-langkah Implementasi Fragment

1. Buat project baru, berinama FragmentExample, untuk membuat Fragment, diharuskan Min SDKnya API 11 3.0 (Honeycomb).

2. Buatlah sebuah Activity dan beri nama layarUtama, yang berfungsi sabagai Penampung Fragment yang akan kita buat lalu buatlah 1 Button sebagai operator untuk memindahkan dari Fragment satu ke Fragment dua.

<?xml version="1.0" encoding="utf-8"?
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_layar_utama"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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="net.developer.wildantechnoart.fragmentexample.layarUtama"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_menu"
        android:layout_above="@+id/change">

    </FrameLayout>

    <Button
        android:text="Ganti Fragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/change"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

Mode XML

Mode Design

Jangan lupa untuk memasang "android:layout_above="@+id/change" pada FrameLayout agar FrameLayout berada di atas Button

4. Disini saya akan membuat 2 buah Fragment, buatlah 2 buah Activity baru yang nanti akan kita ubah menjadi Fragment (klik kanan res > new > Activity > Empty Activity), berinama FragSatu dan FragDua, layout.xml dan java class nya seperti berikut :

Baca Juga :

FragSatu.XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_frag_satu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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="net.developer.wildantechnoart.fragmentexample.FragSatu">

    <TextView
        android:text="Disini Fragment Satu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView"
        android:textStyle="normal|bold"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
</RelativeLayout>

FragSatu.Java

public class FragSatu extends Fragment {

    public FragSatu () {

    }

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View viewFrag1 = inflater.inflate(R.layout.activity_frag_satu, container, false);
        return viewFrag1;
    }
}

Catatan : Jika minSdk kalian dibawa API 11 Honeycomb, gunakan extends Fragment (android.support.v4.app.Fragment)

FragDua.XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_frag_satu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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="net.developer.wildantechnoart.fragmentexample.FragDua">

    <TextView
        android:text="Disini Fragment Satu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView"
        android:textStyle="normal|bold"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
</RelativeLayout>

FragDua.Java

public class FragDua extends Fragment {

public FragDua () {

  }

 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View viewFrag2 = inflater.inflate(R.layout.activity_frag_dua, container, false);
        return viewFrag2;
  }
}

5. Terakhir kiata akan memanggil Satu per satu Fragment tersebut pada Activity LayarUtama, pada saat mengklik Button, secara otomatis FragSatu akan berpindah ke FragDua atau sebaliknya. code pada java.class nya seperti berikut :

LayarUtama.Java

public class layarUtama extends AppCompatActivity implements View.OnClickListener{

    //Variable
    Button ChangeFrag;
    Boolean kondisi = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_layar_utama);
        ChangeFrag = (Button)findViewById(R.id.change);
        ChangeFrag.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.change:
                if(kondisi){
                    FragSatu satu = new FragSatu();
                    FragmentManager FM = getSupportFragmentManager();
                    FragmentTransaction FT = FM.beginTransaction();
                    FT.replace(R.id.main_menu, satu);
                    FT.commit();
                    kondisi = false;
                }else {
                    FragDua dua = new FragDua();
                    FragmentManager FM2 = getSupportFragmentManager();
                    FragmentTransaction FT2 = FM2.beginTransaction();
                    FT2.replace(R.id.main_menu, dua);
                    FT2.commit();
                    kondisi = true;
                }
                break;
        }
    }
}

Penjelasan :

Disana saya membuat 2 buah Objek, Yang saya tebali dengan warna biru merupakan 2 Objek dari FragSatu dan FragDua, nantinya akan kita panggil.
Saya menggunakan kondisi boolean untuk menentukan fragment mana yang harus muncul, karena variable kondisi bernilai true, jadi saat pertama kali button itu di klik maka FragSatu akan muncul ke layar Activity Layar Utama dan variable kondisi berubah menjadi false. dan saat kita klik lagi button tersebut maka FragDua yang akan muncul dan variable kondisi menjadi true.
Perhatikan baik-baik, yang ditandai dengan warna merah merupakan statement untuk menggantikan/memanggil variable satu (Untuk Objek FragSatu) dan variable dua (Untuk Objek FragDua) pada FrameLayout yang mempunyai id main_menu, yang berada di Activity LayarUtama
Statement commit berfungsi untuk menampilkan/menjalankan FragmentTransaction

Coba Run dan Jalankan Project tersebut.

Itulah Tutorial mengenai cara membuat Fragment dalam Activity, sekian bila ada kesalahan, saya mohon maaf jika ada yang ingin ditnayakan, silakan isi kolom komentar dibawah, terakhir dari saya,

Wassalamualaikum Warahmatullahi Wabarakatuh.

Untuk lebih jelasnya kalian bisa download Project tersebut di Github saya. Download Disini

Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.