Freelancer's Playground! New knowledges every now and then

Membuat Website Launcher Pada Android

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.

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.

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.

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.

Download