Teknorial

Tutorial Komunikasi Antar Fragment

Android 25 Jan 2016

Tutorial Komunikasi Antar Fragment .Pada tutorial ini kita akan membahas tentang komunikasi antar 2 fragment.Berikut beberapa hal yang perlu kamu ketahui untuk membuat fragment saling berkomunikasi:
inter fragment communication design
1. Jangan langsung referensi dari fragment ke fragment lainnya.
2. Buatlah Interface yang berisikan method yang akan bertindak sebagai pembawa suatu event.
3. Implements interface pada activity
4. Fragment 1 menggunakan interface untuk mengirim pesan.
5. Pada activity, method interface yang telah diimplementasikan dapat direferensikan ke fragment 2 dan melakukan perubahan pada sesuai method yang diberikan.

Sebelum melanjutkan tutorial ini,disarankan Anda membaca ebook dan tutorial berikut:
Java
-Polimorfisme
-Interface
Polimorfisme dan inteface bisa dilihat di ebook Pengenalan Pemrograman Java 1 pada bab 11.
Android
–Mengenal Fragment Pada Aplikasi Android
–Tutorial Membuat Fragment dalam Activity

Tutorial Komunikasi Antar Fragment dengan Android Studio

1. Buat dua class java baru dengan nama FragmentA dan FragmentB kemudian extend fragment.

package com.teknorial.inter_fragment_communication;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

/**
 * Created by Teknorial on 11/01/2016.
 * 
 * Fragment A
 */
public class FragmentA extends Fragment {
   
    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle SavedInstanceState){
        return inflater.inflate(R.layout.fragment_a,container,false);
    }
}

package com.teknorial.inter_fragment_communication;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by Teknorial on 11/01/2016.
 * 
 * Fragment  B
 */
public class FragmentB extends Fragment {
    TextView text;

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle SavedInstanceState){
        return inflater.inflate(R.layout.fragment_b,container,false);
    }
}


2. Kemudian kita akan membuat file layout untuk fragment dengan nama fragment_a.xml dan fragment_b.xml. Buka direktori res/layout, klik kanan -> new -> Layout resource file -> masukan nama layout fragment dan ubah Root element dengan RelativeLayout, jika sudah selesai klik OK.

<?xml version="1.0" encoding="utf-8"?>
<!-- fragment_a -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#52B3D9"
    android:weightSum="1">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="sentuh aku kak"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

 

<?xml version="1.0" encoding="utf-8"?>
<!-- fragment_b -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#446CB3">

    <TextView
        android:layout_margin="40dp"
        android:layout_width="wrap_content"
        android:layout_height="88dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Hello Fragment B"
        android:id="@+id/textView"
        />

</RelativeLayout>

3. Buat interface dengan nama communicator, ini berguna untuk menghubungkan kedua fragment yang telah kita buat. Untuk membuat interface sama saja dengan membuat java class, yang membedakan pada kind pilih interface.
create interface

package com.teknorial.inter_fragment_communication;

/**
 * Created by Teknorial on 19/01/2016.
 */
public interface Communicator {
    public void respond(String data);
}


4. Buka content_main.xml, kemudian masukan layout fragment. Bagi yang menggunakan android studio versi lama, gunakan activty_main.xml
add fragment

<?xml version="1.0" encoding="utf-8"?>
<!-- content_main.xml-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.teknorial.inter_fragment_communication.MainActivity">


    <fragment

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:name="com.teknorial.inter_fragment_communication.fragmentA"
        android:id="@+id/fragment1"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <fragment
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:name="com.teknorial.inter_fragment_communication.fragmentB"
        android:id="@+id/fragment2"
        android:layout_below="@+id/fragment1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

 
5. Buka kembali FragmentA.java, modifikasi seperti berikut.

package com.teknorial.inter_fragment_communication;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

/**
 * Created by Teknorial on 11/01/2016.
 *
 * Fragment A
 */
public class FragmentA extends Fragment implements View.OnClickListener {
    Button button;
    int counter =0; //deklarasi counter dengan nilai awal 0
    Communicator comm; //interface referensi ke variabel.
    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle SavedInstanceState){
        return inflater.inflate(R.layout.fragment_a,container,false);
    }
    @Override
    public void onActivityCreated(Bundle savedInstanceState){
        super.onActivityCreated(savedInstanceState);
        comm = (Communicator) getActivity(); // variabel interface dihubungkan dengan MainActivity
        /** Penjelasan singkat mengenai sintak casting object
       (Communicator) getActivity;
       (classname)object
       classname, adalah nama dari class tujuan.
       object,adalah sesuatu yang mengarah pada object sumber.
         */
        button = (Button) getActivity().findViewById(R.id.button);
        button.setOnClickListener(this);
    }
    @Override
    public void onClick(View view){ /* untuk menghendle method onclick kita perlu implements View.OnClickListener */
        counter ++; // setiap diclick akan bertambah nilai dari variabel counter.
        comm.respond("Tombol telah di sentuh "+counter+" kali"); //dikirim ke MainActivity melalui method pada interface yang implementasikan.
    }
}


6. Buka MainActivity.java, implements interface yang sudah dibuat dan implementasikan method dari Communicator.

package com.teknorial.inter_fragment_communication;

import android.app.FragmentManager;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity implements Communicator {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

    }
    @Override
    public void respond (String data){
        FragmentManager manager = getFragmentManager();
        FragmentB f2= (FragmentB) manager.findFragmentById(R.id.fragment2);//untuk mendapatkan referensi FragmentB
        f2.changeText(data);//dikirim ke method changeText(data) pada FragmentB
    }
}


7. Buka kembali class FragmentB,tambahkan method changeText.

package com.teknorial.inter_fragment_communication;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by Teknorial on 11/01/2016.
 *
 * Fragment  B
 */
public class FragmentB extends Fragment {
    TextView text;

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle SavedInstanceState){
        return inflater.inflate(R.layout.fragment_b,container,false);
    }
    @Override
    public void onActivityCreated(Bundle savedInstanceState){
        super.onActivityCreated(savedInstanceState);
        text=(TextView) getActivity().findViewById(R.id.textView);
    }
    public void changeText(String data){
        text.setText(data);//menampilkan text yang dikirim dari MainActivity
    }
}

Jika aplikasi kita berhasil akan terlihat seperti screenshot dibawah.

Komunikasi antar fragmentSetiap disentuh pada tombol,maka nilai dari counter meningkat.

Demikian artikel Tutorial Komunikasi Antar Fragment. Ikuti terus teknorial.com untuk mengetahui banyak hal tentang pemrograman android. Jangan lupa untuk Like Fanspage Teknorial di Facebook dan Google Plus untuk mendapatkan update terbaru dari teknorial.com . Jika ada pertanyaan jangan ragu untuk bertanya dikotak komentar. Terima Kasih

Source Code: Inter-fragment-communication

Referensi
Communicating with Other Fragments
http://developer.android.com/training/basics/fragments/communicating.html
Pengenalan Pemrograman 1

Tag

Reza

Direkomendasikan untuk kamu