Praktikum ANDROID

ANDROID

FOR

BEGINNER MODUL 12 ![ANDROID FRAGMENT]

!!!!!SUDARYATNO yatnosudar@gmail.com | @dodulz | facebook : yatno.sudar

Page � of �1 9

Praktikum ANDROIDANDROID FRAGMENT

! Untuk menciptakan aplikasi dengan layout dinamis kita perlu menggunakan fragment.

Fragment merupakan komponen yang dapat digunakan berulang-ulang untuk beberapa kegiatan

UI layout. Tujuan dari fragment sendiri untuk menciptakan UI layout yang lebih dinamis. Dan

menghindari perpindahan Activity yang berlebihan.

! Keuntungan dari fragment sendiri adalah reuse componen UI layout, single-pane layouts

untuk smartphone dan multi-pane untuk layout tablet. Dan juga tidah hanya terbatas pada

smartphone atau table, namun bisa juga digunakan untuk posisi portait dan landscape pada

android.

! Gambar diatas adalah single-pane layout. Gambar pertama dia memiliki fragment dengan

ui ListView dan ketika di pilih akan pindah fragment ke layout ke dua yang berisi detail informasi.

Dalam satu activity hanya terdapat satu fragment.

! Gambar dibawah ini adalah multi-pane. dalam satu Activity terdapat dua Fragment.

Fragment pertama adalah listview, fragment kedua adalah detail. Ketika user memilih item

listview maka dia akan menampilkan fragment detail. Hal ini tidak hanya berlaku apakah dia

smartphone atau tablet. Namun bisa juga berdasarkan layar portaid maupun landscape.

!

Page � of �2 9

Praktikum ANDROID

Fragment awalnnya diperkenalkan di android 3 keatas. Namun sekarang sudah bisa di

nikmati di android 2.3 dengan menggunakan support library v4. Support Library v4 merupan

library pendukung untuk android 3 kebawa agar bisa memiliki fitur yang sama seperti android 3

keatas.

Fragment terdiri dari dua bagian. yang pertama adalah main fragment yang bertugas

sebagi induk fragment dimana kita bisa menempatkan beberapa item fragment. Main fragment

extend class FragmentActivity atau bisa juga extends Activity. Untuk layout dari main fragment

adalah sebagai berikut :

Code fragment diatas digunakan untuk mengatur fragment pada layout dan class yang akan

digunakan oleh fragment nantinnya. Properti wajib pada fragment adalah id, layout_width,

layout_height, dan class.

Page � of �3 9

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" >! <fragment android:id="@+id/detailFragment" android:layout_width="match_parent" android:layout_height="match_parent" class="com.example.android.rssfeed.DetailFragment" />!</LinearLayout>

Praktikum ANDROID Yang kedua adalah item fragment, merupakan content yang akan ditampilkan nantinnya.

Item fragment extend dari class Fragment. Berikut ini adalah contoh dari class fragment :

onCreateView digunakan untuk menginflate layout ke dalam main layout. onCreateView

juga digunakan untk mendeklarasikan widget-widget yang terdapat pada layout. Untuk

mendapatkan value activity kita dapat menggunakan method getActivity().

!

Page � of �4 9

public class DetailFragment extends Fragment {! @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_rssitem_detail, container, false); return view; }! public void setText(String item) { TextView view = (TextView) getView().findViewById(R.id.detailsText); view.setText(item); }}

Praktikum ANDROID

PRAKTIKUM !Tujuan : Memahami Fragment, FragmentActivity, Fragment

Scope : FragmentActivity, Fragment, FragmentTransaction

!1. Buat project baru

2. Buat layout baru dengan nama list_lagu.xml, dengan code berikut :

3. Buat layout baru dengan nama detail_lagu.xml, dengan code berikut :

4. Buat file java dengan nama ListLagu, dengan code berikut :

Page � of �5 9

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="10dp" android:background="#ecf0f1"> <ListView android:id="@+id/daftar_lagu" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView></LinearLayout>

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="10dp" android:background="#ecf0f1"> <ListView android:id="@+id/daftar_lagu" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView></LinearLayout>

Praktikum ANDROID

!5. Buat fiile java dengan nama DetailLagu, dengan code berikut :

!Page � of �6 9

public class ListLagu extends Fragment { private ListView daftar_lagu; private String lagu[] = { "Indonesia Raya", "Padamu Negeri", "Maju Tak Gentar" }; private ArrayAdapter<String> adapter; private onItemSelectedListener listener; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.list_lagu, container, false); listener = (onItemSelectedListener) getActivity(); daftar_lagu = (ListView) view.findViewById(R.id.daftar_lagu); adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, lagu); daftar_lagu.setAdapter(adapter); daftar_lagu.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { listener.setDetail(arg2); } }); return view; }! @Override public void onStart() { super.onStart(); } public interface onItemSelectedListener { public void setDetail(int Position); }}

public class DetailLagu extends Fragment { private TextView judul_lagu; private TextView detail_lagu; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.detail_lagu, container,false);

Praktikum ANDROID

6. Buat layout baru dengan nama main_fragment.xml, dengan code berikut :

7. Edit MainActivity dengan code berikut :

!

Page � of �7 9

judul_lagu = (TextView) view.findViewById(R.id.judul_lagu); detail_lagu = (TextView) view.findViewById(R.id.detail_lagu); return view; } public void setDetail(String judul, String detail){ judul_lagu.setText(judul); detail_lagu.setText(detail); }}

<?xml version="1.0" encoding="utf-8"?><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:animateLayoutChanges="true" android:baselineAligned="false" android:orientation="horizontal" tools:context="com.example.fragmenttutorial.MainActivity" >! <fragment android:id="@+id/fragment1" android:name="com.example.fragmenttutorial.ListLagu" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" />! <fragment android:id="@+id/fragment2" android:name="com.example.fragmenttutorial.DetailLagu" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" />!</LinearLayout>

Praktikum ANDROID

8. Buat folder layout-port di folder res, Selanjutnnya buat file main_fragment.xml di dalam folder

layout-post.

Page � of �8 9

public class MainActivity extends FragmentActivity implements ListLagu.onItemSelectedListener { private String koleksi_lagu[][] = { { "Indonesia Raya", "Indonesia Tanah Airku..." }, { "Padamu Negeri", "Padamu Negeri Kami Berjanji..." }, { "Maju Tak Gentar", "Maju Tak Gentar Membela Yang Benar..." }, }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_fragment);! } @Override public void setDetail(int position) { DetailLagu fragment = (DetailLagu) getSupportFragmentManager() .findFragmentById(R.id.fragment2); if (fragment != null && fragment.isInLayout()) { fragment.setDetail(koleksi_lagu[position][0], koleksi_lagu[position][1]); } else { Intent intent = new Intent(MainActivity.this, DetailActivity.class); intent.putExtra("judul", koleksi_lagu[position][0]); intent.putExtra("detail", koleksi_lagu[position][1]); startActivity(intent); } }}

<?xml version="1.0" encoding="utf-8"?><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="horizontal" android:baselineAligned="false" android:animateLayoutChanges="true" tools:context="com.example.fragmenttutorial.MainActivity" > <fragment android:id="@+id/fragment1" android:name="com.example.fragmenttutorial.ListLagu" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"/></LinearLayout>

Praktikum ANDROID9. Jalankan Aplikasi.

10. Untuk lanscape tekan ctrl+f11

Page � of �9 9