Mohon untuk bersikap bijak dalam setiap menyikapi infomasi dan berita yang beredar di internet karena tidak semua berita itu benar, terkadang di salah gunakan oknum tertentu untuk membuat kekacauan dan fitnah

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

Berita Anda, Halo Pengunjung blog dimanapun anda berada semoga kalian tetap dalam keadaan sehat, saat ini anda sedang membaca Artikel dengan judul Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan Android Studio Part 2, semoga bermanfaat dan selamat membaca


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.

Labels: Android, Android_Studio

Thanks for reading Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan Android Studio Part 2. Please share...!

0 Komentar untuk "Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan Android Studio Part 2"

Back To Top