Belajar Android Studio (11)

Membuat WebView pada Android Studio

 

Ø WebView pada Android Studio

Jika ingin menyediakan aplikasi web (atau hanya halaman web) sebagai bagian dari aplikasi klien, Anda dapat melakukannya menggunakan WebView. Class WebView adalah ekstensi class View Android yang memungkinkan Anda menampilkan halaman web sebagai bagian dari tata letak aktivitas Anda. Class ini tidak menyertakan fitur apa pun dari browser web yang dikembangkan sepenuhnya, seperti kontrol navigasi atau kolom URL. Semua yang dilakukan WebView secara default adalah menampilkan halaman web.

 

Ø Teori Singkat

Skenario umum ketika menggunakan WebView menjadi sangat membantu adalah saat Anda ingin memberikan informasi di aplikasi yang mungkin perlu diperbarui, seperti perjanjian pengguna akhir atau panduan pengguna. Dalam aplikasi Android, Anda dapat membuat Activity yang berisi WebView, lalu menggunakannya untuk menampilkan dokumen Anda yang dihosting secara online.

Skenario lain ketika WebView menjadi sangat membantu adalah saat aplikasi Anda memberikan data kepada pengguna yang selalu memerlukan koneksi internet untuk mengambil data, seperti email. Dalam kasus ini, Anda mungkin menyadari bahwa lebih mudah untuk membuat WebView di aplikasi Android Anda yang menampilkan halaman web dengan semua data pengguna, daripada membuat permintaan jaringan, lalu mengurai data, dan merendernya dalam tata letak Android. Sebagai gantinya, Anda dapat merancang halaman web yang disesuaikan untuk perangkat Android, lalu menerapkan WebView di aplikasi Android Anda yang memuat halaman web.

 

Ø Menambahkan WebView ke aplikasi Anda

Modul ini menunjukkan cara memulai WebView dan cara melakukan beberapa hal tambahan, seperti menangani navigasi halaman dan mengikat JavaScript dari halaman web Anda ke kode sisi klien di aplikasi Android Anda. Untuk menambahkan WebView di aplikasi, Anda dapat menyertakan elemen di tata letak aktivitas, atau menetapkan seluruh jendela Aktivitas sebagai WebView di onCreate().

 

Ø Menambahkan WebView di Layout aktivitas

Untuk menambahkan WebView ke aplikasi Anda di tata letak, tambahkan kode berikut ke file XML tata letak aktivitas Anda:

<WebView

        android:id="@+id/webview"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

/>

 

Untuk memuat halaman web di WebView, gunakan loadUrl(). Contoh:

WebView myWebView =(WebView)findViewById(R.id.webview);

myWebView.loadUrl("http://shopee.co.id/glorycirebon");

 

Ø Menambahkan WebView di onCreate()

Untuk menambahkan WebView ke aplikasi Anda di metode onCreate() aktivitas, gunakan logika yang mirip dengan yang berikut ini:

WebView myWebView = new WebView(activityContext);

setContentView(myWebView);

 

Kemudian muat halaman dengan:

myWebView.loadUrl("http://shopee.co.id/glorycirebon");

 

Namun, sebelum berfungsi, aplikasi Anda harus memiliki akses ke Internet. Untuk mendapatkan akses Internet, minta izin INTERNET di file manifes Anda. Contoh:

<manifest ... >

<uses-permission android:name="android.permission.INTERNET" />

...

</manifest>

Itulah semua yang Anda butuhkan untuk dasar WebView yang menampilkan halaman web. Selain itu, Anda dapat menyesuaikan WebView dengan mengubah hal-hal berikut:

·     Mengaktifkan dukungan layar penuh dengan WebChromeClient. Class ini juga dipanggil saat WebView memerlukan izin untuk mengubah UI aplikasi host, seperti membuat atau menutup jendela dan mengirim dialog JavaScript kepada pengguna. Untuk mempelajari lebih lanjut proses debug dalam konteks ini, baca Proses Debug Aplikasi Web.

·     Menangani peristiwa yang memengaruhi perenderan konten, seperti error pada pengiriman formulir atau navigasi dengan WebViewClient. Anda juga dapat menggunakan subclass ini untuk mengintersep pemuatan URL.

·     Mengaktifkan JavaScript dengan mengubah WebSettings.

·     Menggunakan JavaScript untuk mengakses objek framework Android yang telah Anda masukkan ke dalam WebView.

 

Ø Praktikum

1.   Pertama jalankan aplikasi IDE Android Studio, caranya :

a.    Pilih Start → Android Studio

b.   Pilih → Start a new Android Studio Project

c.    Pilih →  Empty Activity →  Next

Configure Your Project

Name → WebView

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ WebView

Language → Java

Minimum API Level → API 16 → Klik Finish

2.   Siapkan sebuah file gambar dengan forma file .png yang akan kita gunakan sebagai icon Aplikasi web view kita lalu copy kedalam folder ../res/drawable/ seperti gambar di bawah ini

3.   Selanjutnya buat layout dengan ketikan kode program activity_main.xml seperti di bawah ini, kita akan menambahkan progress bar di layout ini supaya ketika proses load website akan menampilkan icon loading.

4.   Setelah itu Buka dan ubah script MainActivity.java dan tambahkan script untuk memanggil url website, object class Webview, dan proses progress bar pada MainActivity.java

5.   Tambahkan uses-permission INTERNET dalam script AndroidManifest.xml seperti di bawah ini

6.   Agar terlihat lebih menarik User Interface-nya kita hilangkan actionbar webview dengan merubah script themes.xml yang ada dalam folder ../res/values/themes seperti dibawah ini

7.   Setelah itu coba kita jalankan menggunakan emulator yang tersedia di Android Studio Anda, maka akan tampil seperti video dibawah ini

 

 

 

Read More →

Belajar Android Studio (10)

 

MEMBUAT APPS MEDIA PLAYER DAN VIDEO PLAYER PADA ANDROID STUDIO

 

v Teori Singkat

Pemutar musik merupakan salah satu aplikasi yang paling banyak digunakan oleh pengguna android disamping aplikasi media sosial, messenger, dan aplikasi lainnya. Android menyediakan banyak cara untuk mengontrol pemutaran file audio / video dan stream. Salah satu cara ini adalah melalui kelas yang disebut MediaPlayer.

v Ringkasan MediaPlayer

Framework multimedia Android menyertakan dukungan untuk memutar berbagai jenis media umum agar Anda dapat mengintegrasikan audio, video, dan gambar dengan mudah ke dalam aplikasi Anda. Anda dapat memutar audio atau video dari file media yang disimpan dalam resource aplikasi (resource mentah), dari file mandiri dalam sistem file, atau dari streaming data yang masuk melalui koneksi jaringan, semuanya menggunakan MediaPlayer API.

Modul ini menunjukkan cara menulis aplikasi pemutar media yang berinteraksi dengan pengguna dan sistem untuk mendapatkan performa yang baik dan pengalaman pengguna yang menyenangkan.

Catatan: Anda hanya dapat memutar data audio ke perangkat output standar. Saat ini, perangkat tersebut mencakup speaker perangkat seluler atau headset Bluetooth. Anda tidak dapat memutar file suara dalam audio percakapan saat panggilan sedang berlangsung.

v Dasar-dasar

Class berikut digunakan untuk memutar suara dan video dalam framework Android:

Ø  MediaPlayer Class ini adalah API utama untuk memutar suara dan video.

Ø  AudioManager Class ini mengelola sumber audio dan output audio di perangkat.

Deklarasi manifes

Sebelum mulai mengembangkan aplikasi menggunakan MediaPlayer, pastikan manifes Anda memiliki deklarasi yang sesuai untuk mengizinkan penggunaan fitur terkait.

1.      Izin Internet - Jika Anda menggunakan MediaPlayer untuk melakukan streaming konten berbasis jaringan, aplikasi Anda harus meminta akses jaringan.

<uses-permission android:name="android.permission.INTERNET" />

2.      Izin Penguncian Layar Saat Aktif - Jika aplikasi pemutar Anda mengharuskan layar tetap menyala atau mengharuskan prosesor tetap bekerja, atau menggunakan metode MediaPlayer.setScreenOnWhilePlaying() atau MediaPlayer.setWakeMode(), Anda harus meminta izin ini.

<uses-permission android:name="android.permission.WAKE_LOCK" />

v Menggunakan MediaPlayer

Salah satu komponen terpenting framework media adalah class MediaPlayer. Objek class ini dapat mengambil, mendekode, serta memutar audio dan video dengan sedikit penyiapan. Class ini mendukung beberapa sumber media yang berbeda, seperti:

·         Resource lokal

·         URI internal, seperti yang mungkin Anda peroleh dari Content Resolver

·         URL eksternal (streaming)

Untuk daftar format media yang didukung Android, lihat halaman Format Media yang Didukung. Berikut contoh cara memutar audio yang tersedia sebagai resource mentah lokal (disimpan dalam direktori res/raw/ aplikasi Anda):

Java

MediaPlayer mediaPlayer = MediaPlayer.create(context, R.raw.sound_file_1);

mediaPlayer.start(); // no need to call prepare(); create() does that for you

Dalam hal ini, resource "mentah" adalah file yang tidak akan diuraikan oleh sistem dengan cara khusus apa pun. Namun, konten resource ini tidak boleh berupa audio mentah. Konten ini harus berupa file media yang dienkode dan diformat dengan benar dalam salah satu format yang didukung.

Berikut adalah cara melakukan pemutaran dari URI yang tersedia secara lokal dalam sistem (yang diperoleh melalui Content Resolver, misalnya):

Java

Uri myUri = ....; // initialize Uri here MediaPlayer mediaPlayer = new MediaPlayer();

mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC); mediaPlayer.setDataSource(getApplicationContext(),myUri); mediaPlayer.prepare();

mediaPlayer.start();

Melakukan pemutaran dari URL jarak jauh melalui streaming HTTP akan terlihat seperti ini:

Java

String url = "http://........"; // your URL here MediaPlayer mediaPlayer = new MediaPlayer(); mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC); mediaPlayer.setDataSource(url);

mediaPlayer.prepare(); // might take long! (for buffering, etc) mediaPlayer.start();

Catatan: Jika Anda meneruskan URL untuk melakukan streaming file media online, file tersebut harus dapat didownload secara progresif.

v  Membuat App MusicPlayer Menggunakan API MediaPlayer

1.      Pertama jalankan aplikasi IDE Android Studio, caranya :

a.       Pilih Start → Android Studio

b.      Pilih → Start a new Android Studio Project

c.       Pilih →  Empty Activity →  Next

Configure Your Project

Name → MusicPlayer

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ MusicPlayer

Language → Java

Minimum API Level → API 16 → Klik Finish

2.      Siapkan sebuah file suara/musik dengan format file .mp3 dan file gambar headphone dengan jenis file .png seperti gambar di bawah ini

3.      Buat sebuah direktori/folder engan nama raw di dalam folder ../res/raw dengan cara klik kanan pada folder res lalu pilih New – Directory seperti gambar di bawah ini

4.      Copy file music.mp3 tadi kedalam folder ../raw dengan cara klik kanan pada folder raw lalu pilih Show in Explore seperti gambar di bawah ini. Setelah itu akan tampil windows explorer lalu Paste di dalam folder raw file music.mp3 tadi

 

5.      Copy kan Kembali file headphone.png yang telah kita siapkan tadike dalam folder

../res/drawable/ sehingga akan tampil struktur project seperti gambar di bawah ini

 

6.      Selanjutnya ketikan kode program / script activity_main.xml seperti gambar di bawah ini

maka akan terlihat desain tampilan seperti ini:

 

7.      Setelah itu Buka dan ubah script MainActivity.java menjadi seperti gambar di bawah ini

 

8.      Lalu coba jalankan menggunakan emulator yang tersedia di Android Studio Anda, maka akan tampil seperti gabar dibawah ini

v Membuat App VideoPlayer Menggunakan API MediaPlayer

1.      Pertama jalankan aplikasi IDE Android Studio, caranya :

a.       Pilih Start → Android Studio

b.      Pilih → Start a new Android Studio Project

c.       Pilih →  Empty Activity →  Next

Configure Your Project

Name → VideoPlayer

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ VideoPlayer

Language → Java

Minimum API Level → API 16 → Klik Finish

2.      Siapkan sebuah file Video dengan forma file, Buat sebuah direktori/folder engan nama raw di dalam folder ../res/raw dengan cara klik kanan pada folder res lalu pilih New – Directory seperti gambar di bawah ini

3.      Copy file video yang telah kita siapkan tadi kedalam folder ../raw dengan cara klik kanan pada folder raw lalu pilih Show in Explore seperti gambar di bawah ini. Setelah itu akan tampil windows explorer lalu Paste di dalam folder raw file SunriseDiBukitSanghyandora.mp4 tadi

 

Sehingga akan tampil struktur project android seperti gambar di bawah ini

4.      Selanjutnya ketikan kode program / script activity_main.xml seperti gambar di bawah ini

 

maka akan terlihat desain tampilan seperti ini:

 

5.      Setelah itu Buka dan ubah script MainActivity.java menjadi seperti gambar di bawah ini

 

6.      Lalu coba jalankan menggunakan emulator yang tersedia di Android Studio Anda, maka akan tampil seperti gabar dibawah ini

 

Read More →