Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan 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 dibuat aplikasi browser sederhana yang bisa memanggil halaman sebuah web. Hanya saja tampilan pada part1 ini masih sangat sederhana dan bahkan dibilang tidak menarik sama sekali. Dimana hanya terdapat menu pencarian dengan tombol pencarian saja.

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

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

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

Baiklah langsung saja ikuti langkah-langkah di bawah :

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

2. Buat dulu tombol-tombol yang anntinya akan dipasang seperti back, next, dan home. Ikon dari tombol ini adalah 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 agar sinkron dengan kode activity_main.xml di bawah.

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

5. Buat layout baru dengan cara klik kanan folder layout > new > XML > Layout XML File. Isi Layout File Name dengan "home" serta Root tag dengan "LinearLayout" kemudian 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 seperti 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 final 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://codingrakitan.blogspot.com");
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>

Penjelasan Kode MainActivity.java

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

public static final 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 eksekusi jika anda memasukkan alamat atau kata pencarian, dan kemudian mengklik tombol cari. Kodi di atas secara garis besar akan menentukan apakah isi dari pencarian merupakan alamat url atau bukan. Jika pencarian merupakan alamat url dan memiliki atribut "https://" atau "http://" maka web_view langsung meload alamat tersebut. Tetapi bila tidak ditemukan atribut "https://" atau "http://" maka web_view meload ("http://"+alamat). Sedangkan untuk alamat yang sama sekali tidak memiliki 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 agar ketika pencarian sedang melakukan proses, maka progresBarr akan di munculkan.

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

Ini adalah 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.

Tuesday, November 20, 2018