Browser adalah sebuah aplikasi yang memungkinkan kita dengan mudah dapat menjelajah web atau dunia Internet. Aplikasi ini akan membantu, mengubah kode-kode html, css, javascript, bahkan php hingga bisa tampil di layar kaca anda. Beberapa contoh browser android yang banyak digunakan seperti : Mozilla, Opera Mini, Uc Browser, Chrome serta masih banyak lagi.
Tahukah anda bahwa dengan bantuan Android Studio kita bisa membuat sendiri browser android. Keuntungan dari membuat aplikasi browser sendiri adalah, anda bisa mengatur tampilan sesuka hati anda. Hingga menambahkan fitur lainnya yang tidak dimiliki browser pada umumnya.
Untuk memulai membuat aplikasi browser ini pertama-tama anda tentunya harus memiliki Android Studio. Jika belum punya anda bisa mendownloadnya di google dengan kata kunci Android Studio. Bila anda sudah punya silahkan buat project baru dengan nama 'browserku' kemudian untuk target API 15 : Android 4.0.3 (Ice Cream Sandwich) atau anda bisa memilih API yang lebih tinggi. Bagi anda yang belum tahu cara membuat project baru silahkan klik postingan CodingRakitan Cara Membuat Project Baru di Android Studio.
Hal pertama yang anda perlu anda lakukan adalah mempertimbangkan apakah akan membuat splash screen atau tidak. Tidak tahu apa itu splash screen ??
Jadi splash screen adalah tampilan pertama yang akan muncul bila aplikasi dibuka. Ini seperti pembuka awal yang biasanya menampilkan logo aplikasi kita. Contohnya pada aplikasi UC Browser yang pertama muncul akan sperti pada gambar di bawah :
Biasanya tampilan splash screen seperti di atas akan muncul beberapa detik sebelum masuk ke tampilan utama aplikasi. Nah untuk anda yang ingin menambahkan splash screen pada aplikasi 'browserku' silahkan anda buat terlebih dahulu. Anda bisa melihat postingan 'Membuat Aplikasi Android : Splash Screen Sebagai Tampilan Pembuka Aplikasi'.
Jika anda tidak berniat untuk menambahkannya anda bisa langsung memulai tahapan di bawah ini :
1. Seperti yang sudah saya jelaskan di atas, buat project baru dengan nama 'browserku' kemudian untuk target API 15 : Android 4.0.3 (Ice Cream Sandwich). Sedangkan keterangan lainnya bisa anda sesuaikan dengan keinginan anda. Untuk kali ini saya membuatnya seperti dibawah :
- Aplication Name : browserku
- Company domain : coding.rakitan.com
- Phone and Tablet : API 15 : Android 4.0.3 (Ice Cream Sandwich)
- Add on Activity to Mobile : Empty Activity
- Activity Name : MainActivity
- Layout Name : activity_main
2. activity_main.xml
Pada activity_main.xml silahkan ubah tampilan hingga menjadi seperti gambar di bawah. Anda bisa membuatnya dengan mengikuti element yang ada di kotak warna merah silahkan tambahkan sesuai yang tertera.
Bila anda tidak mau ribet, anda bisa mengedit langsung kodenya dan ganti dengan kode di bawah ini :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="7dp">
<EditText
android:id="@+id/input_cari"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="Cari Alamat"
android:inputType="textPersonName" />
<Button
android:id="@+id/tombol_cari"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:background="@android:drawable/ic_menu_search" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="7dp">
<EditText
android:id="@+id/input_cari"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="Cari Alamat"
android:inputType="textPersonName" />
<Button
android:id="@+id/tombol_cari"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:background="@android:drawable/ic_menu_search" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
3. MainActivity.java
Selanjutnya buka MainActivity.java kemudian pastekan kode di bawah ini :
package com.rakitan.coding.browserku;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
EditText cari;
Button tombol_cari;
WebView web_view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cari = findViewById(R.id.input_cari);
tombol_cari = findViewById(R.id.tombol_cari);
web_view = findViewById(R.id.web_view);
tombol_cari.setOnClickListener(this);
web_view.getSettings().setJavaScriptEnabled(true);
web_view.setWebViewClient(new Browserku());
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.tombol_cari:
String alamat = cari.getText().toString();
cari_alamat(alamat);
break;
}
}
private void cari_alamat(String alamat) {
String str = alamat.toLowerCase();
if(str.matches(".* .*")){
web_view.loadUrl("https://www.google.com/search?q="+alamat);
}else {
if (str.matches(".*https://.*") || str.matches(".*http://.*") ){
web_view.loadUrl(alamat);
}if (str.matches(".*..*") ){
web_view.loadUrl("https://"+alamat);
}else{
web_view.loadUrl("https://www.google.com/search?q="+alamat);
}
}
}
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && web_view.canGoBack()) {
web_view.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
private class Browserku extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
web_view.loadUrl(url);
return true;
}
}
}
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
EditText cari;
Button tombol_cari;
WebView web_view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cari = findViewById(R.id.input_cari);
tombol_cari = findViewById(R.id.tombol_cari);
web_view = findViewById(R.id.web_view);
tombol_cari.setOnClickListener(this);
web_view.getSettings().setJavaScriptEnabled(true);
web_view.setWebViewClient(new Browserku());
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.tombol_cari:
String alamat = cari.getText().toString();
cari_alamat(alamat);
break;
}
}
private void cari_alamat(String alamat) {
String str = alamat.toLowerCase();
if(str.matches(".* .*")){
web_view.loadUrl("https://www.google.com/search?q="+alamat);
}else {
if (str.matches(".*https://.*") || str.matches(".*http://.*") ){
web_view.loadUrl(alamat);
}if (str.matches(".*..*") ){
web_view.loadUrl("https://"+alamat);
}else{
web_view.loadUrl("https://www.google.com/search?q="+alamat);
}
}
}
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && web_view.canGoBack()) {
web_view.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
private class Browserku extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
web_view.loadUrl(url);
return true;
}
}
}
4. AndroidManifest.xml
Pada Android manifest ini silahkan tambahkan <uses-permission android:name="android.permission.INTERNET"/> agar android nantinya memberikan akses internet pada aplikasi browserku ini. Anda bisa melihat kode lengkap Android manifest ini dibawah :
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rakitan.coding.browserku">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rakitan.coding.browserku">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
5. Run aplikasi menggunakan emulator yang anda gunakan. Maka tampilannya akan seperti di gambar. Tampilan awal hanya menampilkan kotak cari dan ikon. Ketika di ketikkan kata yang tidak memiliki unsur alamat web maka sistem akan mengarahkan ke pencarian google. Sedangkan ketika kata yang diketikkan merupakan alamat web maka sistem akan langsung mengarahkan pada alamat.
Penjelasan Coding
Saya akan mencoba menjelaskan beberapa bagian utama dari koding yang ada pada MainActivity.java. Sebab disinilah letak semua perintah diletakkan.
web_view.getSettings().setJavaScriptEnabled(true);
web_view.setWebViewClient(new Browserku());
web_view.setWebViewClient(new Browserku());
Kode di atas mengisyaratkan untuk membuat setingan pada web_view agar dapat menjalankan javascript. Kemudian baris kedua menginstruksikana untuk membuat Web ViewClient dengan nama kelas Browserku.
private void cari_alamat(String alamat) {
String str = alamat.toLowerCase();
if(str.matches(".* .*")){
web_view.loadUrl("https://www.google.com/search?q="+alamat);
}else {
if (str.matches(".*https://.*") || str.matches(".*http://.*") ){
web_view.loadUrl(alamat);
}if (str.matches(".*..*") ){
web_view.loadUrl("https://"+alamat);
}else{
web_view.loadUrl("https://www.google.com/search?q="+alamat);
}
}
}
String str = alamat.toLowerCase();
if(str.matches(".* .*")){
web_view.loadUrl("https://www.google.com/search?q="+alamat);
}else {
if (str.matches(".*https://.*") || str.matches(".*http://.*") ){
web_view.loadUrl(alamat);
}if (str.matches(".*..*") ){
web_view.loadUrl("https://"+alamat);
}else{
web_view.loadUrl("https://www.google.com/search?q="+alamat);
}
}
}
Untuk kode di atas berfungsi agar ketika kita mengetikkan kata pada kolom pencarian dimana kata tersebut buka berupa alamat maka, sistem akan mengarahkan kata tersebut kedalam pencarian google. Jika kata yang dimasukkan ternyata berupa alamat maka sistem akan langsung meload alamat.
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && web_view.canGoBack()) {
web_view.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
if ((keyCode == KeyEvent.KEYCODE_BACK) && web_view.canGoBack()) {
web_view.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
Ini adalah fungsi tombol kembali, dimana jika anda mengklik tombol back maka akan kembali ke halaman sebelumnya. Jika ternyata tidak ada halaman sebelumnya, maka aplikasi akan keluar atau tertutup.
private class Browserku extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
web_view.loadUrl(url);
return true;
}
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
web_view.loadUrl(url);
return true;
}
}
Kode di atas merupakan kode kelas dari Browserku yang sudah di jelaskan sebelumnya. Agar bisa memuat alamat url dengan baik, aplikasi harus memiliki client server yang berguna untuk mengatur penjelajahan web.
Demikian tutorial kali ini tentang Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan Android Studio. Nantikan kelanjutan dari aplikasi ini di Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan Android Studio Part 2.
Didalam part dua itu nantinya kita akan mencoba menambahkan fitur-fitur pada browserku hingga tampak seperti browser terkenal.
Sekian dan terima kasih.
