Membuat Website Launcher Pada Android

Free Image Hosting at www.ImageShack.us

Cukup lama juga blog ini ndak diupdate ya:D. Harap maklum, selain lagi banyak kerjaan juga lagi suntuk tidak ada minat menulis. Senin kemarin sakit, jadi bedrest. Di rumah, isinya tidur aja. Akhirnya, malam-malam malah ndak bisa tidur. Ya sudah, bedrest dipake untuk nulis tutorial saja deh. yang sederhana saja, yang penting bisa buat update blog dan cukup berguna buat banyak orang. Karena, saya yakin, dengan banyaknya device android dan website-website baru, pasti banyak juga yang dapat orderan untuk membuat aplikasi website launcher.

Cara membuat website launcher sesungguhnya sangat sederhana. Cukup membuat project baru, memasang WebView dengan width dan height diset fill-parent dan mengatur agar webView langsung load halaman web yang dimaksud saat pertama jalan. Selesai sudah. Tapi… dimana seninya, kalau cuma yang standar-standar gitu?. Nah, silahkan ikuti tutorial ini untuk melihat bagaimana membuat launcher yang bisa meload halaman berikutnya tetap di dalam launcher (tidak membuat web browser), bisa menampilkan progress bar, dan punya feature zoom-in/out.

Buat Project Baru

Yap, seperti biasa, buat project baru dulu ya. Terserah mau dinamakan apa.

Tambahkan WebView

Kalau sudah, buka file xml layout. Biasanya ada di /res/layout/main.xml. Isikan dengan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
	<WebView android:id="@+id/mainWebView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
	/>
</LinearLayout>

Kemudian, buka file Activity java dan isikan dengan kode seperti:

package id.flwi.android.launcher.bflwi;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends Activity {
	WebView mainWebView = null;
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        mainWebView = (WebView) findViewById(R.id.mainWebView);
		mainWebView.loadUrl("http://bayu.freelancer.web.id/");
    }
}

Terakhir dan paling krusial, tambahkan permission INTERNET. Karena, tanpa ini, aplikasi kita tidak akan bisa mengakses website. Caranya, buka AndroidManifest.xml dan tambahkan kode berikut:

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

Yak, sekarang sudah siap. Coba jalankan aplikasi anda. Maka seharusnya anda akan bisa melihat website yang dimaksud.

Free Image Hosting at www.ImageShack.us

Buka Link Baru Tetap Di Dalam Launcher

Sudah coba-coba launchernya? kebanyakan orang, pasti akan sadar kalau setiap kali klik URL dari launcher, maka akan membuka browser android. Ini bisa dicegah dengan mudah. Caranya? Tambahkan Anonymous class berikut ke file Activity java anda:

private class MainWebViewClient extends WebViewClient {
	@Override
	public boolean shouldOverrideUrlLoading(WebView view, String url) {
		Log.i("Log", "loading: " + url);

		view.loadUrl(url);
		return true;
	}
}

dan kode berikut ke dalam onCreate():

mainWebView.setWebViewClient(new MainWebViewClient());

Sekarang coba jalankan lagi.

Menambahkan Progress Bar

Berikutnya, menambahkan progress bar. Biar user sadar kalau sedang loading, terutama saat sedang dijaringan yang koneksinya buruk. Caranya, tepat sebelum:

super.onCreate(savedInstanceState);

tambahkan:

this.getWindow().requestFeature(Window.FEATURE_PROGRESS);

Lalu, tambahkan kode berikut, diakhir onCreate():

getWindow().setFeatureInt(Window.FEATURE_PROGRESS,
		Window.PROGRESS_VISIBILITY_ON);

mainWebView.setWebChromeClient(new WebChromeClient() {
	public void onProgressChanged(WebView view, int progress) {
		MainActivity.this.setTitle("Loading...");
		MainActivity.this.setProgress(progress * 100);
		if (progress == 100){
			MainActivity.this.setTitle(view.getTitle());
		}
	}
});

Silahkan dicoba dijalankan lagi aplikasinya.

Free Image Hosting at www.ImageShack.us

Menambahkan Zoom-In/Out

Feature yang terakhir ini, lumayan krusial juga. Karena, kalau websitenya ndak support mobile view, pasti user akan kesal karena harus memicingkan mata untuk membaca tulisan yang kecil-kecil. Cara untuk menambahkan cukup sederhana. Tambahkan kode berikut dibagian akhir onCreate():

FrameLayout mContentView = (FrameLayout) getWindow().getDecorView()
		.findViewById(android.R.id.content);
final View zoom = mainWebView.getZoomControls();
mContentView.addView(zoom, new FrameLayout.LayoutParams(
		ViewGroup.LayoutParams.FILL_PARENT,
		ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.BOTTOM));
zoom.setVisibility(View.GONE);

Yap, cukup seperti itu. Sekarang jalankan lagi aplikasinya.

Free Image Hosting at www.ImageShack.us

Menangani Back Button

Yang satu ini juga lumayan penting. Coba bayangkan, sudah buka-buka halaman sampai dalam. Kemudian, mau back untuk lihat artikel lainnya. Tapi, pada kondisi default, yang terjadi adalah launcher anda akan ditutup dan kembali ke home. Bagaimana cara mengatasinya? sederhana. Tambahkan kode berikut:

@Override
public void onBackPressed(){
	if(mainWebView.canGoBack())
		mainWebView.goBack();
	else
		super.onBackPressed();
}

Coba jalankan lagi ya.

Menambahkan Icon Ke Website Launcher

Sebagai penutup, kita perlu menambahkan icon, supaya aplikasi launcher kita terlihat lebih personal. Pasti malas juga kan kalau punya aplikasi yang iconnya default android. Caranya adalah dengan mengganti file ic_launcher.png dengan icon dari website anda.

Selesai sudah tutorial kali ini. Cukup mudah bukan? Silahkan kalau mau main-main dengan source-nya. Seperti biasa, ada di repository github saya.


Author: Arief Bayu Purwanto

Hello, my name is Arief Bayu Purwanto, a 24 years old father of a beautiful daughter. Interested in online programming, linux, games, and reading. Currently working on kapanlagi.com as junior developer. I live in a relatively quite and cool place called Malang. I'm available for some freelance stuff as well as some consulting job. You can see my portofolio for some previous task I've finished and some other information related to my capability. Btw, I'm plurking here.

  • Septiyan Andika

    setelah lama di tunggu akhirnya ada juga tutorial terbaru… ๐Ÿ˜€

  • Dika

    mas bayu, saya coba running programnya kok force close terus ya?

    • coba dicek dulu pesan errornya apa?

  • Handyfernandya4

    thanks mas bro… lengkap sudah program pi saya,, ย thanks ๐Ÿ˜€

  • Miamustari31

    mw tanya dong itu yg bwt zoom in/out d xml’y dtmbhin ga??sm yg d android manifest’y?pliiiss djwb yaaahh…

  • Terjunbebas19

    klo mw bwt yang bener2 kayak detik ato kompas gmn ya om? ๐Ÿ˜€

  • Ijal

    mas bayu otu kita buat projeck barunya pake apa yah ?

  • Afrizal Hidayatulloh

    buat zoomnya kok salah di bagian “final View zoom = mainWebView.getZoomControls();” ya? ini harus ada yang ditambah atau gimana ya?

  • Muhammad Ismi

    mas,,ketika saya coba mengganti link webnya dengan web lain kenapa tampilan halaman web nya menjadi besar yah di android?

  • Guest

    mas mo tanya donk, aku udah coba tp kenapa waktu aku test di hp dia buka pakai broser. thanks

  • Joy Joya

    tanya donk mas.. saya udah coba, sebelum I kasih

    private class MainWebViewClient extends WebViewClient
    semua halamannya muncul tp setelah saya kasih itu halamannya hanya tampil setengah, solusinh=ya bagaimana ya pak??