Teknorial

Membuat Aplikasi WebView di Android Studio

Android 31 Jan 2015

Membuat Aplikasi WebView di Android Studio. Pada tutorial kali ini, saya akan membahas tentang pemrograman android dimana kita akan menggunakan webview di Android Studio. WebView adalah sebuah class pada android yang menampilkan dan menjalankan aplikasi mobile yang berbasis wen.Sederhananya, WebView itu seperti android browser,tetapi tidak mempunyai address bar untuk memasukkan URL ,karena URL sudah kita didefinisikan dalam aplikasi android tersebut.

Membuat Aplikasi WebView di Android Studio

1.Klik start a new Android Studio Project untuk membuat project android baru.
2.Kemudian Konfigurasikan penamaan aplikasi dan package.
3.Pada bagian penentuan build target, SDK minimum yang anda inginkan.
4.Pada saat pemilihan Add an activity to mobile,pilih blank activity.
6.Pada choose optional for your new file, klik Finish.
Jika Anda masih kesulitan pada langkah diatas,dapat membaca artikel berikut ini Membuat Project Android di Android Studio.
7.Pilih Mode design, Pilih WebView pada Palette.
tutorial palette webview android studio
click and drag webview dari Palette ke kanan bawah dari layar device,kemudian tarik webview hingga penuh di layar device.
8.Untuk membuat aplikasi android kita dapat mengakses internet kita harus membuat permission internet seperti berikut ini

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

pasangkan kode diatas kedalam AndroidManifest.xml.
internet permission android studio
9. Kemudian buka MainActivity.java,letakan kode berikut ini tepat dibawah setContentView(R.layout.activity_main);

String url = "https://teknorial.com/blog/";  //Pendefinisian URL
WebView view = (WebView) this.findViewById(R.id.webView);  //sinkronisasi object berdasarkan id
view.getSettings().setJavaScriptEnabled(true);  //untuk mengaktifkan javascript
view.loadUrl(url);   //agar URL terload saat dibuka aplikasi

Jangan lupa mengimport class webview agar webview terdefinisikan.
webview android studio main activity.java10. Aplikasi WebView kita sudah siap , saat nya untuk mencoba menjalankan aplikasi WebView, Klik RUN ‘app’
run app webview android studio11. Saya menggunakan bluestack sebagai emulator. Untuk menggunakan bluestack sebagai emulator dapat membaca artikel berikut ini Cara Menghubungkan Android Studio dengan Bluestack.
app webview with emulator bluestack13. Jika aplikasi kita berhasil akan terlihat seperti ini di bluestack.
app webview android studio
Kita sudah berhasil membuat aplikasi android WebView dengan android studio. Terus ikuti teknorial.com untuk mendapatkan tutorial-tutorial lainnya.

[AdSense-A]

Informasi Tambahan

Untuk membuat aplikasi webview fullscreen , hapus kode berikut dari activity_main.xml

android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"

 

Untuk membuat aplikasi webview tidak redirect ke web browser saat di klik link , kita perlu menambah class WebViewClient dan override method tersebut. Letak kode berikut di MainActivity.java

import android.webkit.WebView; //import WebView class
import android.webkit.WebViewClient; //import WebViewClient class

public class MainActivity extends ActionBarActivity {

   @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView view = (WebView) this.findViewById(R.id.webView); 
        view.getSettings().setJavaScriptEnabled(true);
        view.setWebViewClient(new MyBrowser());
        view.loadUrl("https://teknorial.com/blog");
    }

   private class MyBrowser extends WebViewClient {
       @Override
        public  boolean shouldOverrideUrlLoading(WebView view, String url ){
            view.loadUrl(url);
            return true;
        }
    }

 

Untuk menambahkan fitur zoom di aplikasi webview, cukup menambahkan kode berikut di MainActivity.java

view.getSettings().setBuiltInZoomControls(true);
view.getSettings().setSupportZoom(true);

 

Untuk membuat kondisi saat disentuh tombol back dan kembali pada halaman sebelumnya, kita perlu menggunakan method goback() seperti berikut.

public boolean onKeyDown(int keyCode, KeyEvent event) {
        //ketika disentuh tombol back
        if ((keyCode == KeyEvent.KEYCODE_BACK) && view.canGoBack()) {
            view.goBack(); //method goback() dieksekusi untuk kembali pada halaman sebelumnya
            return true;
        }
        // Jika tidak ada history (Halaman yang sebelumnya dibuka)
        // maka akan keluar dari activity
        return super.onKeyDown(keyCode, event);
    }

 

Untuk menjalankan webview dari web localhost, kita perlu menggunakan XAMPP untuk menjalankan web server di lokal komputer.  Jika masih bingung dengan cara menginstall dan menggunakan XAMPP  Anda harus mengikuti tutorial Cara Menggunakan XAMPP. Anda harus mengantikan URL  http://localhost/weblokal atau http://127.0.0.1/weblokal menjadi http://10.0.2.2/weblokal agar dapat diakses oleh emulator.

String url = "http://10.0.2.2/weblokal";  //Pendefinisian URL 

 

Berikut source code lengkapnya : WebViewApp.

Tag

Reza

Direkomendasikan untuk kamu