Modul,Android,Tutorial

1. Praktikum ANDROID
ANDROID
FOR
BEGINNER MODUL 12
!
[ANDROID FRAGMENT]
!!!!!
SUDARYATNO
yatnosudar@gmail.com | @dodulz | facebook : yatno.sudar
Page 1 of 9

2. Praktikum ANDROID
ANDROID 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 2 of 9

3. 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 :
?xml version=1.0 encoding=utf-8?
LinearLayout xmlns:android=http://schemas.android.com/apk/res/
android
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 3 of 9
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

4. 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 4 of 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);
}
}

5. 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 :
?xml version=1.0 encoding=utf-8?
LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
3. Buat layout baru dengan nama detail_lagu.xml, dengan code berikut :
4. Buat file java dengan nama ListLagu, dengan code berikut :
Page 5 of 9
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

6. Praktikum ANDROID
!
5. Buat fiile java dengan nama DetailLagu, dengan code berikut :
!
Page 6 of 9
public class ListLagu extends Fragment {
private ListView daftar_lagu;
private String lagu[] = { Indonesia Raya, Padamu Negeri,
Maju Tak Gentar };
private ArrayAdapterString 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 ArrayAdapterString(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);

7. Praktikum ANDROID
6. Buat layout baru dengan nama main_fragment.xml, dengan code berikut :
7. Edit MainActivity dengan code berikut :
!
Page 7 of 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

8. Praktikum ANDROID
8. Buat folder layout-port di folder res, Selanjutnnya buat file main_fragment.xml di dalam folder
layout-post.
Page 8 of 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

9. Praktikum ANDROID
9. Jalankan Aplikasi.
10. Untuk lanscape tekan ctrl+f11
Page 9 of 9