Sunday, September 27, 2015

Cara Membuat Aplikasi WebView di Android Studio | Tutorial Android

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 = "http://curi-cara.blogspot.com/";  //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 studio1
1. 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 bluestack
13. 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.

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("http://teknorial.com");
    }

   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);
Previous Post
Next Post

post written by:

0 komentar: