Tugas KU

 

TUTORIAL MEMBUAT APLIKASI SEDERHANA DENGAN ANDROID STUDIO

PENGENALAN LAYOUTING LANJUTAN      

 ( "FrameLayout, ListView, GridView, ConstrainLayout " )

A.      Menggunakan FrameLayout

FrameLayout adalah layout sederhana. layout ini bisa berisi satu atau lebih View child, dan mereka bisa tumpang tindih satu sama lain. Oleh karena itu, atribut android: layout_gravity digunakan untuk menemukan ViewChild.

Untuk membuat FrameLayout pada layout.xml tersebut, kalian perlu menambahkan tag <FrameLayout> dan di akhri dengan tag </FrameLayout>, pada contoh berikut ini, kita akan membuat 2 buah Button, button kedua akan kita sisipkan pada button pertama, seperti berikut ini:

         Agar elemen UI didalam FrameLayout terlihat rapih serta tataletaknya bisa kalian atur sendiri,                 kalian dapat menggunakan beberapa atribut Berikut adalah atribut penting khusus untuk 

FrameLayout :

Ø  android:layout_marginLeft: Untuk mengatur jarak (batasan) sudut kiri elemen UI pada elemen UI lainnya.

Ø  android:layout_marginRight: Untuk mengatur jarak (batasan) sudut kanan elemen UI pada elemen UI lainnya.

Ø  android:layout_marginTop: Untuk mengatur jarak (batasan) atas elemen UI pada elemen UI lainnya.

               Ø  android:layout_marginBottom: Untuk mengatur jarak (batasan) bawah elemen UI                                                                                                                                                                                                    pada elemen UI lainnya.

Ø  android:layout_gravity: Untuk mengatur posisi rata kanan, kiri, atas, bawah, center, center horizontal dan center vertical.

Gambar 1 Frame Layout View

Frame Layout

Gambar 1.1 Contoh Hasil Run 

     

   Okey, kita langsung saja ke tutorialnya :

1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :

a. Pilih Start → Android Studio

b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

d. Configure Your Project → Finish

    Keterangan :

      

   Name                     : modul7_FrameLayout

   Package Name      : rikiwahyudirw.blogspot.com                       

   Save Location       : D:\2021\semester6\ti1\Riki Wahyudi\

                                    modul7_FrameLayout    

   Language              : Java

   Minimum SDK     : API 14   

    2. Maka akan muncul tampilan  IDE Android Studio, Setelah itu Ketikan script pada                   file activity_main.xml seperti gambar di bawah ini:

        Keterangan :

    Agar elemen UI didalam FrameLayout terlihat rapih serta tataletaknya bisa kalian

            atur sendiri, kalian dapat menggunakan beberapa atribut berikut ini:

➢ android:layout_marginLeft : Untuk mengatur jarak (batasan) sudut kiri elemen UI

pada elemen UI lainnya.

➢ android:layout_marginRight : Untuk mengatur jarak (batasan) sudut kanan elemen

UI pada elemen UI lainnya.

➢ android:layout_marginTop : Untuk mengatur jarak (batasan) atas elemen UI pada

elemen UI lainnya.

➢ android:layout_marginBottom : Untuk mengatur jarak (batasan) bawah elemen UI

pada elemen UI lainnya.

➢ android:layout_gravity : Untuk mengatur posisi rata kanan, kiri, atas, bawah,

center, center horizontal dan center vertical.

 

3. Kemudian Jalankan di emulator (RUN) Maka akan tampil seperti gambar 

         di bawah ini 

Gambar 1.2 Hasil Run 

    

Frame Layout2

Gambar 1.3 Contoh Hasil Run FrameLayout2

        Okey, kita langsung saja ke tutorialnya:

1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :

a. Pilih Start → Android Studio

b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

d. Configure Your Project → Finish

    Keterangan :

      

   Name                     : modul7_FrameLayout2

   Package Name      : rikiwahyudirw.blogspot.com                       

   Save Location       : D:\2021\semester6\ti1\Riki Wahyudi\

                                    modul7_FrameLayout2   

   Language              : Java

   Minimum SDK     : API 14   

    2. Maka akan muncul tampilan  IDE Android Studio, Setelah itu Ketikan script pada                   file activity_main.xml seperti gambar di bawah ini:

3. Kemudian Jalankan di emulator (RUN) Maka akan tampil seperti gambar 

         di bawah ini 

    

Gambar 1.3 Hasil Run FrameLayout2

B.      Menggunakan ListView

ListView adalah salah satu widget yang digunakan untuk menampilkan data atau

nilai dalam bentuk daftar/list, nilai atau data yang ditampilkan pada ListView

tersebut didapat dari sebuah Array atau Database yang sudah ditentukan. ListView

pada saat ini sudah tergantikan dengan RecyclerView yang memiliki konsep

Material Design, karena lebih custom dan juga dapat mengatur tampilan layoutnya.

Walaupun begitu, ListView masih banyak digunakan oleh programmer untuk

membuat list/daftar item yang sederhana pada aplikasi mereka,

Gambar 2 Contoh ListView Android

List View

Gambar 2.1 Contoh Hasil Run

1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :

a. Pilih Start → Android Studio

b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

d. Configure Your Project → Finish

    Keterangan :

      

   Name                     : modul7_ListView

   Package Name      : rikiwahyudirw.blogspot.com                       

   Save Location       : D:\2021\semester6\ti1\Riki Wahyudi\

                                    modul7_ListView 

   Language              : Java

   Minimum SDK     : API 14   

    2. Maka akan muncul tampilan  IDE Android Studio, Setelah itu Ketikan script pada                   file activity_main.xml seperti gambar di bawah ini:

    3. Kemudian Ketikan script pada file MainActivity.java seperti gambar di bawah ini:

                    4. Kemudian Jalankan di emulator (RUN) Maka akan tampil seperti gambar 

         di bawah ini 

Gambar 2.2 Hasil Run

C.      Menggunakan GridView

                GridView adalah salah satu container, yang digunakan untuk menampilkan

konten View, konten View dalam GridView akan tersusun bentuk kotak-kotak seperti

sebuah rak lemari, , yang dimana kita dapat menyimpan barang-barang. Penulisan

coding beserta struktur datanya, hampir sama dengan ListViw, hanya saja data yang

ditampilkan secara Grid atau Kotak-kotak.

Gambar 3 GrideView Layout

Penjelasan pada atribut-atribut yang digunakan:

➢ android:columnWidth : Menentukan lebar tetap pada masing-masing kolom.

➢ android:gravity : Menentukan gravitasi di dalam setiap sel.

➢ android:verticalSpacing : Mendefinisikan default jarak vertikal antar baris.

➢ android:stretchMode : Mendefinisikan bagaimana kolom harus meregang untuk

mengisi tersedia ruang kosong, jika ada.

➢ android:horizontalSpacing : Mendefinisikan default jarak horisontal antara kolom.

➢ android:numColumns : Menentukan berapa kolom yang akan ditampilkan.

GridView

Gambar 3.1 Contoh Hasil Run

            Okey, Kita langsung saja ke Tutorialnya:

1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :

a. Pilih Start → Android Studio

b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

d. Configure Your Project → Finish

    Keterangan :

      

   Name                     : modul7_GridView

   Package Name      : rikiwahyudirw.blogspot.com                       

   Save Location       : D:\2021\semester6\ti1\Riki Wahyudi\

                                    modul7_GridView    

   Language              : Java

   Minimum SDK     : API 14   

    2. Maka akan muncul tampilan  IDE Android Studio, Setelah itu Ketikan script pada                   file activity_main.xml seperti gambar di bawah ini:

    3. Kemudian Ketikan script pada file MainActivity.java seperti gambar di bawah ini:

4. Kemudian Jalankan di emulator (RUN) Maka akan tampil seperti gambar 

         di bawah ini 

Gambar 3.2 Hasil Run

D.      Menggunakan Constraint Layout   

            Constraint layout merupakan layout terbaru dari android. Layout ini berbasis relative

layout, namun mempunyai tingkat kemudahan yang lebih baik dalam penggunaannya.

Hal ini dikarenakan, contraint layout dapat digunakan dengan baik pada design mode

didalam Android Studio. Setiap item pada constraint layout memiliki 4 arah constraint

yaitu top, left, right, dan bottom. Ke empat arah ini memiliki sebuah connection source

yang dapat ditarik ke parent atau ke objek lain. Perhatikan gambar di bawah ini.

Sebenarnya Constraint Layout mirip dengan Relative Layout, karena letak View

bergantung pada View lain dalam satu Layout ataupun dengan Parent Layoutnya.

Contohnya di Relative Layout kita bisa meletakkan sebuah View di atas, bawah, atau

samping View lain. Kita juga dapat mengatur posisinya berdasarkan Parent Layout

menggunakan tag seperti centerVertical, alignParentBottom, dll. Akan tetapi, Constraint

Layout jauh lebih fleksibel dan lebih mudah digunakan di Layout Editor.

Pada Constraint Layout, setiap View memiliki tali (Constraint) yang menarik tiap

sisinya, yang mana tali tersebut bisa kita atur Elastisitas, Margin, dsb. Tali tersebut wajib

kita “ikatkan” kepada anchor point atau suatu titik yang dapat berupa sisi dari Parent

Layout, View lain, ataupun titik bantu (helper) yang bisa kita buat sendiri.

ConstraintLayout merupakan salah satu komponen ViewGroup yang dapat kita

gunakan untuk menyusun tampilan aplikasi yang kompleks tanpa adanya nested layout.

ConstraintLayout tersedia dengan dukungan kompatibilitas mulai dari Android 2.3 (API

Level 9) sampai dengan yang terbaru.

ConstraintLayout memiliki kesamaan dengan RelativeLayout. Dalam penggunaan

semua view yang berada di dalamnya disusun berhubungan antara parent dan view

lainnya. Tapi ConstraintLayout lebih fleksibel dari RelativeLayout dan mudah digunakan

dengan dukungan Layout Editor pada Android Studio. Kita bisa menambah view baru ke

dalam ConstraintLayout. Kita gunakan drag and drop di Layout Editor yang berada pada

tab Design atau dengan menambahnya secara manual melalui tab Text. Kita perlu

menentukan posisi dari view atau bagaimana agar view tersebut terhubung dengan

parent layout atau view lainnya. Mengapa demikian?, Karena setelah ditambahkan,

view tersebut tidak memiliki constraint yang menghubungkannya dengan parent layout

atau view lainnya. Sehingga ketika dijalankan, posisi dari view tersebut akan berada di

bagian atas sebelah kiri.

Berbeda ceritanya dengan RelativeLayout. Saat kita ingin menentukan posisi atau

menghubungkan dua buah view, kita bisa menggunakan attribute seperti layout_below

atau layout_above. Nah untuk ConstraintLayout kita akan menggunakan constraint

sebagai dasar dalam menentukan posisi agar sebuah view dapat terhubung dengan view

lainnya sesuai harapan kita.

Gambar 4 Constraint Layout

Constraint Layout

Gambar 4.1 Contoh Hasil Run

1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :

a. Pilih Start → Android Studio

b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

d. Configure Your Project → Finish

    Keterangan :

      

   Name                     : modul7_ConstraintLayout

   Package Name      : rikiwahyudirw.blogspot.com                       

   Save Location       : D:\2021\semester6\ti1\Riki Wahyudi\

                                    modul7_FrameLayout    

   Language              : Java

   Minimum SDK     : API 14   

    2. Maka akan muncul tampilan  IDE Android Studio, Setelah itu Ketikan script pada                   file activity_main.xml seperti gambar di bawah ini:                  

3. Kemudian Jalankan di emulator (RUN) Maka akan tampil seperti gambar 

         di bawah ini 

Gambar 4.2 Hasil Run

Thank Youuu

😀