Implementasi dari ListView di Android Studio

Selanjutnya adalah belajar bagaimana implementasi dari ListView di Android dalam menampung data bentuk String array sehingga dapat ditampilkan dalam bentuk List yang bisa diakses oleh pengguna.

Listview merupakan komponen utama yang dapat menampilkan dan menampung data dalam jumlah yang banyak secara vertical dalam bentuk list yang dapat di-scroll secara vertical.

Implementasi ListView sangat luas, selain memiliki tujuan utama yaitu menampilkan data dalam jumlah yang banyak. ListView juga bisa digunakan sebagai tampilan pilihan menu pada aplikasi Android.

Lebih lanjut mengenai Listview dapat dibaca di http://developer.android.com/guide/topics/ui/layout/listview.html

Contoh Implementasi ListView di Android Studio:

1. Buat Project dengan Start a new Android Studio Project

Aplikasi Hello World_1

2. Kemudian Configure your new project, isikan Application Name dengan Belajar ListView dan Company domain sesuai dengan nama yang kamu inginkan, kemudian Klik Next dan pilih Empty Activity.

Belajar ListView_1

Lanjutkan hingga Finish. Biarkan gradle menggenerate project kita.

3. Pada activity_main.xml lengkapi kodenya sebagai berikut.

Pada code diatas kita menambahkan ListView kedalam tampilan xml yang akan kita manipulasi di class Activity java.

4. Pada MainActivity.java silakan lengkapi kodenya sebagai berikut.

Pada kode diatas (perhatikan komentar dalam kode) kita melakukan beberapa langkah :

  1. Menginisialisasi ListView berdasarkan id yang ada di file layout xml (private ListView lvItem;)
  2. Menginisialisasi data String array yang akan kita tampilkan di ListView (private String[] footballClubs = new String[]{ … };)
  3. Membuat object adapter dengan menggunakan Adapter bawaah android secara default dengan menentukan beberapa parameter sebagai inputannya:
    1. Class Activity mana yang memanggil/menggunakan class ArrayAdapter
    2. Layout xml untuk tampilan item list (disini kita menggunakan bawaan android)
    3. Id dari object TextView untuk menampilkan item-item data dari object String array
    4. Sumber data yang akan ditampilkan dalam konteks ini adalah : String array bernama footballClubs
    5. Men-set objek adapter kedalam ListView

5. Silakan jalankan dengan tombol Run ke emulator atau device atau export ke apk untuk instal secara manual di device.

Tampilan hasil apps adalah sebagai berikut.

Belajar ListView_2

Tutorial Implementasi dari ListView di Android Studio ini saya kutip dari Kelas Reguler di Dicoding akademi. Pada Kelas ini, Anda dapat mendaftar secara GRATIS dan membaca seluruh modul artikel dalam kelas tersebut.

Namun untuk memperoleh validasi terhadap proses belajar Anda, Anda harus melakukan upgrade dengan menggunakan Dicoding Point. Silahkan klik untuk mendaftar secara Gratis kelas Belajar Membangun Aplikasi Android Native

Download Source Code Implementasi dari ListView di Android Studio

Share to Unlock Contentimage/svg+xml
Unlock this exclusive content by using one of the sharing buttons below.

Penggunaan Fragment dalam Flexible UI di Android Studio

Setelah belajar membuat Fragment dasar dimana fungsi dari fragment diantaranya adalah untuk mempermudah development aplikasi Android,  menangani tampilan desain yang dinamis dan variatif.

Kali ini kita akan belajar penggunaan Fragment dalam Flexible UI di Android Studio, bagaimana aplikasi Android dapat dibangun dengan menggunakan lebih dari satu fragment dan cukup memiliki 1 Activity.

1. Buat Project dengan Start a new Android Studio Project

Belajar Intent_1

2. Kemudian Configure your new project, isikan Application Name dengan Fragment FlexibleUI dan Company domain sesuai dengan nama yang kamu inginkan.

Fragment FlexibleUI_1

Kemudian Klik Next hingga Finish. Biarkan gradle menggenerate project kita.

3. Buat Package atau direktori baru dengan nama fragment dengan cara : klik kanan pada package utama -> New -> Package dan beri nama fragment.

4. Buat Fragment baru pada directory fragment beri nama FirstFragment, (jangan lupa Include fragment factory method  dan Include interface callbacks? di uncheck)

Kemudian modifikasi file fragment_first.xml sebagai berikut:

Sementara pada file FirstFragment.Java, modifikasilah sebagai berikut

Keterangan :

Pada btnFirstTransaction kita memberikan listener OnClickListener agar ketika diklik dapat melakukan proses penggantian fragment (replace) yang telah ada. Untuk digantikan dengan object dari SecondFragment() pada FrameLayout berID frame_container.

Selain itu kita memberikan sedikit transisi ketika terjadi proses penggantian fragment. Dan sebelum commit() kita tambahkan proses ini ke dalam BackStack. Kita juga menambahkan title di Action Bar berdasarkan dengan fragment yang active saat ini (First Fragment).

Mengapa kita menggunakan ((MainActivity)getActivity()) untuk mengakses ActionBar ? Dikarenakan kita menggunakan App Compability Library maka untuk method getActionBar() tidak dapat digunakan, akan menghasilkan null pointer exception error. Maka dari itulah kita menggunakan method getSupportActionBar() yang disupport oleh App Compability Library.

5. Buat Fragment baru dengan nama SecondFragment dan modifikasi file fragment_second.xml sebagai berikut:

Sementara pada file SecondFragment.Java, modifikasilah sebagai berikut:

Keterangan:

Hampir sama dengan penjelasan sebelumnya hanya saja disini kita akan mengganti SecondFragment yang ada dilayar dengan ThirdFragment dan tidak menyertakan Fragment Transition.

Disini kita menambahkan fungsionalitas BackButton pada ((MainActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true); dan event ketika back button diklik maka akan menjalankan perintah getFragmentManager().popBackStack(); yang akan membuat fragment saat ini dikeluarkan dari stack.

6. Buat Fragment ketiga dengan nama ThirdFragment dan modifikasi file fragment_third.xml sebagai berikut:

Sementara pada file ThirdFragment.Java, modifikasilah sebagai berikut:

7. Kemudian  modifikasi file activity_main.xml sebagai berikut:

Penjelasan :

Fragment umumnya akan ditampilkan pada FrameContainer. Mengapa harus FrameLayout? Ini jawabannya :

FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that’s scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.

Terakhir pada file MainActivity.Java, modifikasilah sebagai berikut:

Penjelasan :

Proses penambahan fragment dengan menggunakan method add() agar FirstFragment dapat tampil ke layar dengan sebelumnya kita melakukan pengecekan terhadap isi dari object savedInstanceState();

8. Silakan jalankan dengan tombol Run ke emulator atau device atau export ke apk untuk instal secara manual di device.

Tampilan hasil apps adalah sebagai berikut.

Fragment FlexibleUI_3

Tutorial Penggunaan Fragment dalam Flexible UI di Android Studio ini saya kutip dari Kelas Reguler di Dicoding akademi. Pada Kelas ini, Anda dapat mendaftar secara GRATIS dan membaca seluruh modul artikel dalam kelas tersebut.

Namun untuk memperoleh validasi terhadap proses belajar Anda, Anda harus melakukan upgrade dengan menggunakan Dicoding Point. Silahkan klik untuk mendaftar secara Gratis kelas Belajar Membangun Aplikasi Android Native

Download Source Code Penggunaan Fragment dalam Flexible UI di Android Studio

Share to Unlock Contentimage/svg+xml
Unlock this exclusive content by using one of the sharing buttons below.

Membuat Fragment Untuk Mempermudah Development Aplikasi

Pada tutorial sebelumnya, telah dibahas penggunaan Intent, Kali ini kita akan membuat Fragment untuk mempermudah development aplikasi Android, atau bisa kita sebut sebagai subactivity.

Fragment adalah sebuah sub-bagian yang mewakili perilaku tertentu pada UI dalam sebuah aktivitas. Utamanya Fragment digunakan dalam UI yang memiliki banyak layar (multi-pane UI).

Fragment diperkenalkan Google pada API 11 (Android 3.0 Honeycomb), untuk menangani tampilan desain yang dinamis dan variatif karena adanya tambahan kategori device, yakni tablet.

1. Buat Project dengan Start a new Android Studio Project

Belajar Intent_1

2. Kemudian Configure your new project, isikan Application Name dengan Belajar Fragment dan Company domain sesuai dengan nama yang kamu inginkan.

Belajar Fragment_2

Kemudian Klik Next hingga Finish. Biarkan gradle menggenerate project kita.

3. Tambahkan Library Design dengan cara Pilih Menu FIle -> Project Structure… ”

kemudian pilih Modules app -> buka tab Dependencies -> klik “+” kemudian pilih 1. Library Dependency -> lalu cari design, dalam hal ini untuk versi yang saya pakai adalah: compile ‘com.android.support:design:24.0.0’, klik OK

Belajar Fragment_3

Atau bisa juga mengetikan langsung pada bagian dependencies di build.gradle (Module: app):

compile ‘com.android.support:design:24.0.0’

kemudian Sync Now

4. Pada file styles.xml (folder res/values) modifikasi kode didalamnya sehingga menjadi seperti ini :

5. Selanjutnya membuat content dari tab-tab yang akan ditampilkan. Buat Package atau direktori baru dengan nama fragment dengan cara : klik kanan pada package utama -> New -> Package dan beri nama fragment.

Belajar Fragment_4

6. Kemudian buat dua class fragment didalamnya masing-masing Tab1Fragment dan Tab2Fragment dengan cara Klik kanan pada package fragment -> New -> Fragment -> Blank Fragment

Belajar Fragment_5

Akan muncul dialog form seperti berikut, beri nama Tab1Fragment dan uncheck Include fragment factory methods Dan uncheck  Include interface callbacks. Lalu klik finish

Belajar Fragment_6

Ulangi langkah 6 diatas untuk membuat Tab2Fragment

7. Buka file strings.xml (folder res/values) dan tambahkan kode sebagai berikut :

8. Pada fragment_tab1.xml lengkapi kodenya seperti dibawah ini

9. Pada Tab1Fragment.java kodenya seperti dibawah ini.

10. Pada fragment_tab2.xml silakan lengkapi kodenya seperti dibawah ini, Sedikit berbeda dengan fragment_tab1.xml, kita menambahkan sebuah button di fragment_tab2.xml.

11. Pada Tab2Fragment.java silakan lengkapi kodenya seperti dibawah ini. Untuk mengimport android support tekan ALT+Enter

12. Sekarang kita akan membuat Adapter untuk Fragment-fragment yang telah kita buat.

Buat package baru dengan cara klik kanan dipackage utama -> New -> Package -> dan beri nama adapter. Didalam package directory buat class Adapter dengan cara Klik kanan pada package adapter -> New -> Java Class dan beri nama TabFragmentPagerAdapter

Belajar Fragment_7

Pada TabFragmentPagerAdapter.java lengkapi kodenya sebagai berikut dan sesuaikan baris-baris yang memuat Package name dan Fragment Name.

13. Pada direktori layout buat file resource layout baru dengan cara klik kanan pada direktori layout -> New -> Layout resource file dan beri nama “toolbar.xml

Dan kemudian lengkapi kodenya sebagai berikut. Toolbar ini akan menjadi pengganti dari ActionBar pada umumnya.

14. Pada activity_main.xml lengkapi kodenya sebagai berikut.

Dapat dilihat pada baris kode diatas kita menggunakan beberapa komponen UI seperti TabLayout dan ViewPager yang dibungkus dengan Container utama yaitu LinearLayout dengan konfigurasi Vertical pada orientasinya.

15. Terakhir Pada MainActivity.java lengkapi kodenya sebagai berikut.

16. Silakan jalankan dengan tombol Run ke emulator atau device atau export ke apk untuk instal secara manual di device. Tampilan hasil apps adalah sebagai berikut.

Belajar Fragment_8

Tutorial Membuat Fragment Untuk Mempermudah Development Aplikasi ini saya kutip dari Kelas Reguler di Dicoding akademi. Pada Kelas ini, Anda dapat mendaftar secara GRATIS dan membaca seluruh modul artikel dalam kelas tersebut.

Namun untuk memperoleh validasi terhadap proses belajar Anda, Anda harus melakukan upgrade dengan menggunakan Dicoding Point. Silahkan klik untuk mendaftar secara Gratis kelas Belajar Membangun Aplikasi Android Native

Download Source Code Membuat Fragment Android Untuk Mempermudah Development Aplikasi

Share to Unlock Contentimage/svg+xml
Unlock this exclusive content by using one of the sharing buttons below.

Membuat Intent Untuk Berpindah Activity Di Android Studio

Tutorial selanjutnya adalah membuat Intent untuk berpindah halaman dari satu Activity ke Activity di Android Studio. Apa itu Intent? Dalam Android, Intent merupakan sebuah metode perpindahan dari sebuah activity ke activity lain.

Atau mekanisme untuk melakukan Action pada komponen dalam satu aplikasi yang sama maupun aplikasi lain. Pemanfaatannya Intent antara lain sebagai berikut :

  • Untuk berpindah halaman dari satu Activity ke Activity lain dengan atau tanpa data.
  • Untuk menjalankan background Service misal dibutuhkan sebuah proses service untuk mengambil lokasi pengguna, download file atau sikronisasi ke server.
  • Untuk menyampaikan sebuah objek dari komponen Broadcast misal jika ingin mengetahui jika device Android sudah selesai booting setelah diaktifkan.

Pelajari tentang Intent selengkapnya di Android Developer Guide.

Latihan Intent untuk berpindah Activity dengan Android Studio

1. Buat Project dengan Start a new Android Studio Project

Belajar Intent_1

2. Kemudian Configure your new project, isikan Application Name dengan Belajar Intent dan Company domain sesuai dengan nama yang kamu inginkan

Belajar Intent_2

Kemudian Klik Next hingga Finish. Biarkan gradle menggenerate project kita.

3. Pada activity_main.xml (folder res/layout) silakan ketikan kode seperti dibawah ini, untuk menghasilkan layout, atau bisa juga dengan sistem drag-n-drop untuk membuat layout.

Tetapi untuk belajar sebaiknya membuat layout dilakukan secara manual dengan agar lebih paham maksud dari kode tersebut.

4. Membuat Activity baru pada Package utama (lihat gambar), klik kanan Package utama -> New -> Activity -> Empty Activity seperti dibawah ini:

Belajar Intent_3

Kemudian pada Activity Name beri nama Sub1Activity, Layout Name akan tergenerate secara otomatis.

Belajar Intent_4

5. Edit activity_sub1.xml (folder res/layout), kode sebagai berikut:

Pada Sub1Activity ini, hanya akan menampilkan teks Tampil Sub Activity 1.

6. Buat Sub2Activity seperti langkah nomor 4, kemudian Edit activity_sub2.xml (folder res/layout), sebagai berikut:

Pada Sub2Activity kali ini, teks yang ditampikan akan berasal dari kiriman di activity sebelumnya. Untuk itu kita juga perlu mengedit file Sub2Activity.java untuk memastikan data diterima dengan benar.

7. Kemudian edit MainActivity.java untuk implementasi perpindahan Activity dengan atau tanpa data atau mengaktifkan aplikasi lain.

Dalam hal ini adalah melakukan dial phone, silahkan ganti nomor telepon menjadi nomor telepon anda pada saat memanggil intent dialer.

8. Silahkan Run dengan tombol Run ke emulator atau device, tampilan aplikasi adalah sebagai berikut:

Belajar Intent_5

Tampilan kiri atas adalah ketika aplikasi dijalankan, dengan keterangan tombol ketika di klik yaitu:

  • Ke Activity Sub 1 : Tampilan Sub1Activity yaitu Textview “Tampil Sub Activity 1”
  • Ke Activity Sub 2 : Tampilan Sub2Activity dengan data yang ditampilkan adalah dari input text, yaitu “Belajar Intent Aplikasi Android”
  • Ke Activity Sub 3 : Jika diklik memanggil intent dialer

Download Source Code Membuat Intent Untuk Berpindah Activity Di Android Studio

Share to Unlock Contentimage/svg+xml
Unlock this exclusive content by using one of the sharing buttons below.

Membuat Aplikasi Webview Dengan Android Studio

Cara membuat aplikasi android Webview cukup sederhana, hal yang harus dilakukan adalah memanggil url website dan menampilkannya di dalam aplikasi.

Salah satu syarat app model webview agar tampil bagus, tampilan website yang akan di load ke dalam aplikasi harus responsive. Disini web yang digunakan sebagai contoh adalah beta.html5test.com.

1. Buat Project dengan Start a new Android Studio Project

Aplikasi Webview_1

2. Lalu isikan Application Name dengan Contoh Webview dan Company domain dengan nama yang kamu mau seperti berikut :

Aplikasi Webview_2

Kemudian Klik Next dan Hingga Finish. Biarkan gradle menggenerate project kita.

3. AndroidManifest.xml, tambahkan kode ini.

4. Pada activity_main.xml (folder res/layout) silakan ketikan kode seperti dibawah ini, untuk menghasilkan layout.

5. Pada MainActivity.java silakan lengkapi kode seperti dibawah ini, tambahkan kode ini dalam function onCreate

6. Silakan Run dengan tombol Run ke emulator atau device atau export ke apk untuk instal secara manual di device. Tampilan hasil aplikasi webview adalah sebagai berikut:

Aplikasi Webview_3

7. Menghilangkan Action Bar agar Webview tampil penuh, buka res/values/styles.xml tambahkan kode berikut

dan pada AndroidManifest.xml tambahkan kode berikut pada activity untuk memanggil NoActionBar di styles.xml.

Sampai disini jika aplikasi dijalankan Action Bar sudah tidak tampil dan webview tampil penuh.

Tetapi jika kita membuka halaman lain dalam webview tersebut, kemudian posisi HP di putar dari portrait ke lanscape atau sebaliknya, terlihat bahwa aplikasi load ulang halaman depan.

8. Tambahkan kode berikut ini di AndroidManifest.xml pada activity, agar ketika HP di putar dari portrait ke lanscape atau sebaliknya tidak melakukan load ulang halaman depan.

Silahkan jalankan lagi di emulator, tampilan hasil apps adalah sebagai berikut:

Aplikasi Webview_4

Download Source Code Aplikasi Webview Dengan Android Studio.

Share to Unlock Contentimage/svg+xml
Unlock this exclusive content by using one of the sharing buttons below.

Membuat Aplikasi Android “Hello World” di Android Studio

Sebelum memulai membuat aplikasi android untuk yang pertama kali ada hal-hal yang harus diketahui. Pertama, untuk membuat aplikasi android software yang direkomendasikan oleh Google sendiri adalah dengan Android Studio, dimana saat ini versi Android Studio terbaru adalah v2.3.0 (Maret 2017).

Mengingat Android Studio adalah software yang cukup “berat” maka spesifikasi komputer yang dibutuhkan untuk menjalankan software ini pun juga harus dipertimbangkan.

Kemudian emulator untuk menjalankan aplikasi yang akan dibuat, disini saya menggunakan Genymotion yang versi free. Sebenarnya di Android Studio sendiri sudah tersedia emulator bawaan, atau bisa juga langsung menjalankan di HP Android langsung. Option lain bisa menggunakan bluestack.

Cara membuat Aplikasi Android “Hello World” pertama kali di Android Studio langkah-langkahnya sebagai berikut:

1. Pertama buka Software Android Studio

2. Pilih Start new Android Studio project

3. Setelah itu pada bagian Configure New Project , Kalian bisa mengkonfigurasikan project baru seperti pada gambar dibawah. Jika semua sudah terisi pilih Next.

Keterangan:

  • Application Name : Berisi Nama Aplikasi yang akan dibuat
  • Company Domain : Nama unik yang menjadi identitas developer aplikasi, dalam hal ini saya menggunakan sniptcode.com, jika Anda ingin merilis di Google Play Company Domain wajib diisi. Dan yang lebih penting, untuk Company Domain sebaiknya jangan ganti-ganti ketika develop aplikasi.
  • Package Name : Merupakan paket namespace seperti di Java. Nama ini juga harus unik, biasanya Package Name akan tergenerate secara otomatis ketika sudah menginputkan Application Name dan Company Domain.
  • Project Location : Lokasi folder dari Project Android.

5. Selanjutnya pilih Target Android Devices. Saya memilih hanya Phone and Tablet dengan minimum SDK API 16: Android 4.1 (Jelly Bean).

6. Pada bagian Add an Activity to Mobile kalian bisa memilih berbagai jenis Activity, sebagai langkah awal saya pilih Empty Activity kemudian Next.

7. Pada Customize the Activity biarkan default, kemudian Finish.

8. Setelah proses building selesai, maka Aplikasi pertama telah sukses di buat, tampilan seperti Gambar di bawah. Struktur Folder Project terletak di Sebelah kiri dan di Tengah terdapat Layout

9. Untuk Menjalankan Aplikasi Android Hello World Pertama di Android Studio bisa menekan Shift+F10 atau seperti pada gambar di bawah.

10. Pilih Devices yang akan digunakan, disini saya memakai emulator Genymotion.

Hasilnya seperti berikut ini:

Download Source Code Latihan Membuat Aplikasi Android “Hello World” di Android Studio.

Share to Unlock Contentimage/svg+xml
Unlock this exclusive content by using one of the sharing buttons below.