Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan Android Studio

https://codingrakitan.blogspot.com/2018/11/membuat-aplikasi-android-browser.html

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>

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;
        }


    }
}

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>

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());

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);
            }
        }

    }

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);
    }

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;
        }


    }

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.

Bagikan artikel ke:

Facebook Google+ Twitter