PERTEMUAN 6 Layout Manager

Presentasi berjudul: "PERTEMUAN 6 Layout Manager"— Transcript presentasi:

1 PERTEMUAN 6 Layout Manager
KELOMPOK 2 PERTEMUAN 6 Layout Manager

2 ANGGOTA KELOMPOK Rizky Crisna Wibowo (16.11.0034)
Novinda Nur .F ( ) Fega Tri Subantara ( ) Alfiansyah Arifudin .A ( ) Nunik Dwi Hidayatun ( ) Nurokta Fauzy Saputra ( ) Fadhli Ardhiasalam ( ) Mitra Yulianti ( ) Ricci Dian Firmansyah ( ) Muhammad Ali Hasani ( ) Dimas Fuad .A ( )

3 1.Linear Layout Liniear Layout adalah design tampilan pada aplikasi kita dengan tata letak secara vertical dan horizontal dimana tata letak aplikasi kita hanya bisa memasukan media secara mendatar(Horizontal) dan menurun(vertical).

4 //contohLinearVertical
Langkah Pembuatannya : kita buat project baru pada android studio dan beri nama project sesuai keinginan kita contoh nama project:”Belajar Linear Layout”. sebagai contoh masukan script berikut pada activity_main.xml. : //contohLinearVertical <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" xmlns:app=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.android.layouting.MainActivity“> KELANJUTAN BALIK

5 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Ini Linear Layout Vertical" android:textSize="25dp" android:textColor="#000000" android:layout_marginLeft="60dp" /> <EditText android:layout_width="match_parent" android:hint="TextBox" android:gravity="center" />

6 <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="TOMBOL"/> </LinearLayout>

7 //contohLinearHorizontal
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" xmlns:app=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.android.layouting.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Ini Linear Layout Horizontal " android:textSize="25dp" android:textColor="#000000" android:layout_marginLeft="40dp" />

8 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal“> <Button android:layout_width="wrap_content" android:text="1" /> android:text="2"/> android:text="3" /> android:text="4"/> </LinearLayout>

9 2.Absolut layout AbsoluteLayout adalah tampilan dimana kita dapat memasukkan posisi x dan y dari widget yang ada di dalamnya secara pasti sehingga penempatan posisi dapat ditentukan secara pasti. Contoh kode; <AbsoluteLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent"> <!-- widget2 disini--> <TextView android:layout_height="wrap_content" android:layout_x="100px" android:layout_y="100px" android:text="This is label1"/> </AbsoluteLayout>

10 3.Relative Layout Relative Layout design tampilan pada aplikasi kita dengan tata letak secara bebas tanpa aturan sesuai keinginan kita.tidak seperti Linear Layout yang hanya terpaku pada salah satu tampilan vertical dan horizontal.

11 Langkah Pembuatannya :
lakukan membuat project dengan cara sama seperti membuat project pada Linear Layout dengan nama =”Belajar Relative Layout”. berikut scrip Relative layout //contohRelativeLayout <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" xmlns:app=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.android.layouting.MainActivity"> KELANJUTAN BALIK

12 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Ini Relative Layout " android:textSize="25dp" android:textColor="#000000" android:layout_marginLeft="80dp" /> <Button android:text="1" android:layout_marginTop="21dp" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" />

13 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="2" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" /> android:text="5" android:layout_alignParentEnd="true" android:layout_marginRight="19dp" android:layout_marginEnd="19dp" />

14 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginBottom="16dp" android:text="4" /> android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="3" /> </RelativeLayout>

15 4.Table Layout TableLayout digunakan untuk membuat tampilan layout di dalam tabel sehingga kita dapat dengan mudah menambahkan layout lain ke dalam tabel dan mengatur jarak antara layout tabel. Kita lihat ilustrasi gambar dibawah ini terlihat table layout mempunyai 4 row kemudian row 1 dan 2 dipecah menjadi column 1 dan 2, Jadi ketika kita ingin menggunakn table layout kita harus paham dahulu konsep dari tabel agar mudah dalam memasukkan komponen-komponen ke dalam layout kita.

16 5.Frame layout FrameLayout adalah layout yang paling tepat  untuk membuat beberapa UI saling tumpang tindih. Contohnya kita dapat menyisipkan widget (tombol) ke dalam widget lainya (gambar). Kodenya : <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#1113"> <ImageView android:layout_width="300dp" android:layout_height="300dp" android:layout_gravity="center" /> <Button android:layout_width="300px" android:layout_height="100px" android:text="Tombol" android:textColor="#fff" android:textSize="20sp" /> </FrameLayout>

17 6. Scroll View ScrollView adalah wadah penggulir generik yang dapat meng-host beberapa komponen dan tampilan,bila tampilan kurang maka akan dikasih scroll buat menarik keatas atau pun kebawah

18 Scroll Vertical <ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"> <LinearLayout android:layout_height="wrap_content" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="match_parent" > </TextView> <Button android:text="View" > </Button> </LinearLayout> </ScrollView>

19 Scroll Horizontal <HorizontalScrollView
android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_height="wrap_content" android:orientation="horizontal" > <!-- child views in here --> </LinearLayout> </HorizontalScrollView>

20 7. TableRow TableRow sendiri sebenarnya adalah layout untuk menyusun elemen-elemen view di dalamnya secara horizontal. Jika di dalam tag <TableRow> ada tiga buah elemen view, berarti dalam posisi baris ini terdapat tiga kolom yang terisi.  </TableRow> <TableRow> <TextView android:layout_column=”0″ android:text=”Password” android:padding=”3dip” /> android:text=”:” <EditText android:password=”true” android:width=”240dip”

21 8. Ticker Ticker adalah komponen Android UI sederhana untuk menampilkan teks bergulir. Pikirkan tentang bagaimana odometer gulungan ketika pergi dari satu nomor ke yang berikutnya, yang mirip apa Ticker. Ticker menangani animasi yang halus antara string dan string Resize misalnya (bernyawa dari "9999"untuk "10000"). Ticker dalam XML <com.robinhood.ticker.TickerView android:layout_width="wrap_content" android:layout_height="wrap_content" /> Anda dapat menyesuaikan terlihat dan terasa dari TickerView melalui XML android:gravity="center" android:textSize="16sp" app:ticker_animationDuration="1500"

22 Kalau dalam java : tickerView.setTextColor(textColor);
tickerView.setTextSize(textSize); tickerView.setTypeface(myCustomTypeface); tickerView.setAnimationDuration(500); tickerView.setAnimationInterpolator(new OvershootInterpolator()); tickerView.setGravity(Gravity.START);

23 9. Kombinasi Layout layout tersebut bertujuan agar antarmuka yang dibangun menjadi lebih bagus dan sesuai dengan keinginan. Kombinasi layout dapat dipilih sesuai dengan kebutuhan antarmuka.

24 Daftar Sumber :

25 TERIMA KASIH