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


Browser merupakan sebuah aplikasi yang memungkinkan kita dengan gampang sanggup menjelajah web atau dunia Internet. Aplikasi ini akan membantu, mengubah kode-kode html, css, javascript, bahkan php sampai sanggup tampil di layar beling anda. Beberapa rujukan browser android yang banyak dipakai menyerupai : Mozilla, Opera Mini, Uc Browser, Chrome serta masih banyak lagi.

Tahukah anda bahwa dengan dukungan Android Studio kita sanggup membuat sendiri browser android. Keuntungan dari menciptakan aplikasi browser sendiri merupakan, anda sanggup mengatur tampilan sesuka hati anda. Hingga menambahkan fitur lainnya yang tidak dimiliki browser pada umumnya.

Untuk memulai menciptakan aplikasi browser ini pertama-tama anda tentunya harus mempunyai Android Studio. Jika belum punya anda sanggup mendownloadnya di google dengan kata kunci Android Studio. Bila anda sudah punya silahkan buat project gres dengan nama 'browserku' lalu untuk sasaran API 15 : Android 4.0.3 (Ice Cream Sandwich) atau anda sanggup menentukan API yang lebih tinggi. Bagi anda yang belum tahu cara menciptakan project gres silahkan klik postingan serhamo Cara Membuat Project Baru di Android Studio.

Hal pertama yang anda perlu anda lanekan merupakan mempertimbangkan apakah akan menciptakan splash screen atau tidak. Tidak tahu apa itu splash screen ??
Kaprikornus splash screen merupakan tampilan pertama yang akan muncul bila aplikasi dibuka. Ini menyerupai 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 menyerupai 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 sanggup melihat postingan 'Membuat Aplikasi Android : Splash Screen Sebagai Tampilan Pembuka Aplikasi'.

Jika anda tidak berniat untuk menambahkannya anda sanggup pribadi memulai tahapan di bawah ini :

1. Seperti yang sudah daqu jelaskan di atas, buat project gres dengan nama 'browserku' lalu untuk sasaran API 15 : Android 4.0.3 (Ice Cream Sandwich). Sedangkan keterangan lainnya sanggup anda sesuaikan dengan harapan anda. Untuk kali ini daqu membuatnya menyerupai 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 sampai menjadi menyerupai gambar di bawah. Anda sanggup membuatnya dengan mengikuti element yang ada di kotak warna merah silahkan tambahkan sesuai yang tertera.



Bila anda tidak mau ribet, anda sanggup mengedit pribadi 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 lalu 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 memperlihatkan saluran internet pada aplikasi browserku ini. Anda sanggup 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 memakai emulator yang anda gunakan. Maka tampilannya akan menyerupai di gambar. Tampilan awal hanya menampilkan kotak cari dan ikon. Ketika di ketikkan kata yang tidak mempunyai unsur alamat web maka sistem akan mengarahkan ke pencarian google. Sedangkan saat kata yang diketikkan merupakan alamat web maka sistem akan pribadi mengarahkan pada alamat.



pengertian Coding

daqu akan mencoba menjelaskan beberapa cuilan 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 menciptakan setingan pada web_view biar sanggup menjalankan javascript. Kemudian baris kedua menginstruksikana untuk menciptakan 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 biar saat 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 pribadi 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 merupakan fungsi tombol kembali, dimana kalau 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 sanggup memuat alamat url dengan baik, aplikasi harus mempunyai client server yang mempunyai kegunaan 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 sampai tampak menyerupai browser terkenal.

Sekian dan terima kasih.