Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Memakai Android Studio Part 2


Pada postingan kali ini kita akan melanjutkan tutorial dari part 1 sebelumnya dengan judul Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan Android Studio dimana sebelumnya telah dibentuk aplikasi browser sederhana yang sanggup memanggil halaman sebuah web. Hanya saja tampilan pada part1 ini masih sangat sederhana dan bahkan dibilang tidak menarik sama sekali. Dimana hanya terdapat sajian pencarian dengan tombol pencarian saja.

Maka dari itu di part 2 ini kita akan sedikit mempercantik aplikasi browser ini sehingga lebih menyerupai dengan Opera Mini. Kaprikornus untuk kalian yang belum membaca postingan pertama silahkan baca dan praktekan terlebih dahulu. Karena kalau tidak anda tidak sanggup melanjutkan mempraktekkan part 2 ini.

Jika anda sudah menciptakan aplikasi pada part 1 silahkan buka project itu kembali biar nantinya kita tambahkan atau percantik lagi. Ingat sebelum memulai ada baiknya anda berdoa terlebih dahulu biar nantinya acara rubah merubah atau bahkan proses koding anda menjadi lebih lancar.

Hasil dari postingan ini nantinya, tampilan aplikasi akan menjadi menyerupai di bawah ini :



Baiklah pribadi saja ikuti langkah-langkah di bawah :

1. Buka project "browserku" yang telah dibentuk sebelumnya.

2. Buat dulu tombol-tombol yang anntinya akan dipasang menyerupai back, next, dan home. Ikon dari tombol ini merupakan gambar vector yang sudah ada dalam aplikasi android studio, hanya tinggal anda masukkan ke dalam folder drawable dengan cara klik kanan pada drawable > New > Vector Asset.



3. Pada Jendela Configure Vector Asset silahkan klik gambar Clip Art > cari ikon Arrow Back > klik ok > Next > Finish. Ingat anda tidak usah merubah nama defaultnya biar sinkron dengan kode activity_main.xml di bawah.



4. Lsayakan langkah 2 dan 3 untuk menciptakan tiga Vector Asset lagi yaitu Arrow Forward, Public, dan Home. Sehingga kini anda punya 6 file di folder Drawable anda. Khusus untuk Vector public beri warna hitam.



5. Buat layout gres dengan cara klik kanan folder layout > new > XML > Layout XML File. Isi Layout File Name dengan "home" serta Root tag dengan "LinearLayout" lalu klik FInish.

6. Paste kode di bawah ke dalam layout home.xml

home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Situs Populer"
        android:textColor="@android:color/black"
        android:textSize="12sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:padding="5dp">

        <LinearLayout
            android:id="@+id/g1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center_horizontal"
            android:onClick="onClick"
            android:orientation="vertical"
            android:padding="20dp">

            <ImageButton
                android:id="@+id/imageButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:background="@android:color/transparent"
                app:srcCompat="@drawable/ic_public_black_24dp"
                tools:ignore="VectorDrawableCompat" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Google" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/g2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:background="#021892"
            android:gravity="center_horizontal"
            android:onClick="onClick"
            android:orientation="vertical"
            android:padding="20dp">

            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                app:srcCompat="@drawable/ic_public_black_24dp"
                tools:ignore="VectorDrawableCompat" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Facebook" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/g3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_bright"
            android:gravity="center_horizontal"
            android:onClick="onClick"
            android:orientation="vertical"
            android:padding="20dp">

            <ImageButton
                android:id="@+id/imageButton3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                app:srcCompat="@drawable/ic_public_black_24dp"
                tools:ignore="VectorDrawableCompat" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Coding Rak.." />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>



Hasilnya anda akan melihat tampilan layout home.xml menjadi menyerupai di bawah ini :



7. Copy dan pastekan kode dibawah ini kedalam activity_main.xml

activity_main.xml



<?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:background="@android:color/holo_red_dark"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:padding="7dp">

            <ImageButton
                android:id="@+id/kembali"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="5"
                android:background="@android:color/transparent"
                android:onClick="onClick"
                android:padding="15dp"
                app:srcCompat="@drawable/ic_arrow_back_black_24dp"
                tools:ignore="VectorDrawableCompat" />

            <ImageButton
                android:id="@+id/selanjutnya"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="5"
                android:background="@android:color/transparent"
                android:onClick="onClick"
                android:padding="15dp"
                app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
                tools:ignore="VectorDrawableCompat" />

            <ImageButton
                android:id="@+id/home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="5"
                android:background="@android:color/transparent"
                android:onClick="onClick"
                android:padding="15dp"
                app:srcCompat="@drawable/ic_home_black_24dp"
                tools:ignore="VectorDrawableCompat" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="5"
                android:background="@android:color/white"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <EditText
                    android:id="@+id/input_cari"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@android:color/white"
                    android:ems="10"
                    android:hint="Cari Alamat"
                    android:inputType="textPersonName"
                    android:minWidth="250dp"
                    android:padding="15dp" />

                <ProgressBar
                    android:id="@+id/progressBar"
                    style="?android:attr/progressBarStyle"
                    android:layout_width="50dp"
                    android:layout_height="30dp"
                    android:layout_weight="3"
                    android:padding="2dp"
                    android:visibility="gone" />
            </LinearLayout>

            <Button
                android:id="@+id/tombol_cari"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:background="@android:drawable/ic_menu_search"
                android:padding="15dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include
                android:id="@+id/tampil_home"
                layout="@layout/home"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="visible" />

            <WebView
                android:id="@+id/web_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>


8. Copy dan pastekan kode dibawah ini kedalam MainActivity.java

MainActivity.java



package com.rakitan.coding.browserku;

import android.graphics.Bitmap;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;

import java.net.URL;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    EditText cari;
    Button tombol_cari;
    WebView web_view;
    public static jawaban String URL_REGEX = "^((https?|ftp)://|(www|ftp)\\.)?[a-z0-9-]+(\\.[a-z0-9-]+)+([/?].*)?$";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //menghilangkan action bar
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        getSupportActionBar().hide();

        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) {
        View tampil_home = findViewById(R.id.tampil_home);
        switch (v.getId()){
            case R.id.tombol_cari:
                String alamat = cari.getText().toString();
                cari_alamat(alamat);
                break;
            case R.id.g1:
                cari_alamat("https://www.google.com");
                break;
            case R.id.g2:
                cari_alamat("https://www.facebook.com");
                break;
            case R.id.g3:
                cari_alamat("http://serhamo.net");
                break;
            case R.id.kembali:
                if (web_view.canGoBack()) {
                    web_view.goBack();
                }else{
                    tampil_home.setVisibility(View.VISIBLE);
                }
                break;
            case R.id.selanjutnya:
                if (web_view.canGoForward()) {
                    tampil_home.setVisibility(View.GONE);
                    web_view.goForward();
                }
                break;
            case R.id.home:

                tampil_home.setVisibility(View.VISIBLE);
                break;

        }
    }

    private void cari_alamat(String alamat) {
        View tampil_home = findViewById(R.id.tampil_home);
        tampil_home.setVisibility(View.GONE);
        String str = alamat.toLowerCase();
        Pattern p = Pattern.compile(URL_REGEX);
        Matcher m = p.matcher(alamat);//replace with string to compare
        if(m.find()) {
            web_view.loadUrl(alamat);
            if (str.matches(".*https://.*") || str.matches(".*http://.*") ){
                web_view.loadUrl(alamat);
            }else{
                web_view.loadUrl("http://"+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;
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            findViewById(R.id.progressBar).setVisibility(View.VISIBLE);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            findViewById(R.id.progressBar).setVisibility(View.GONE);
        }


    }
}


9. Copy dan pastekan kode dibawah ini kedalam AndroidManifest.xml

AndroidManifest.xml

<?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>


makna Kode MainActivity.java

Disini aku akan mencoba menjelaskan beberapa isi kode dari MainActivity.java. Yang akan aku jelaskan merupakan yang penting-penting saja. Karena aku yakin anda juga sudah paham beberapa kode yang ada dalam file ini.

 public static jawaban String URL_REGEX = "^((https?|ftp)://|(www|ftp)\\.)?[a-z0-9-]+(\\.[a-z0-9-]+)+([/?].*)?$";
Kode di atas nantinya akan berfungsi untuk kita mengetahui apakah isi dari sebuah String itu merupakan url atau bukan.

this.requestWindowFeature(Window.FEATURE_NO_TITLE);
getSupportActionBar().hide();
Kode ini dimaksudkan untuk menyembunyikan action bar.

private void cari_alamat(String alamat) {
        View tampil_home = findViewById(R.id.tampil_home);
        tampil_home.setVisibility(View.GONE);
        String str = alamat.toLowerCase();
        Pattern p = Pattern.compile(URL_REGEX);
        Matcher m = p.matcher(alamat);//replace with string to compare
        if(m.find()) {
            web_view.loadUrl(alamat);
            if (str.matches(".*https://.*") || str.matches(".*http://.*") ){
                web_view.loadUrl(alamat);
            }else{
                web_view.loadUrl("http://"+alamat);
            }
        }else{
            web_view.loadUrl("https://www.google.com/search?q="+alamat);
        }

    }
Kode di atas inilah yang akan di sanksi kalau anda memasukkan alamat atau kata pencarian, dan lalu mengklik tombol cari. Kodi di atas secara garis besar akan memilih apakah isi dari pencarian merupakan alamat url atau bukan. Jika pencarian merupakan alamat url dan mempunyai atribut "https://" atau "http://" maka web_view pribadi meload alamat tersebut. Tetapi bila tidak ditemukan atribut "https://" atau "http://" maka web_view meload ("http://"+alamat). Sedangkan untuk alamat yang sama sekali tidak mempunyai atribut url maka akan di alihkan ke pencarian google.

 @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            findViewById(R.id.progressBar).setVisibility(View.VISIBLE);
        }
Kodi ini menginstruksikan biar saat pencarian sedang melsayakan proses, maka progresBarr akan di munculkan.

@Override
        public void onPageFinished(WebView view, String url) {
            findViewById(R.id.progressBar).setVisibility(View.GONE);
        }
Ini merupakan kebalikan dari kode sebelumnya, dimana pada kode ini progressBar akan kembali di sembunyikan bila pencarian sudah selesai.

Demikian tutorial kali ini Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan Android Studio Part 2. Semoga bermanfaat, dan apabila ada pertanyaan silahkan cantumkan pada kolom komentar.

Lanjutkan ke  Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan Android Studio Part 3 (segera).