X

Tuesday, November 20, 2018

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.

Thursday, November 15, 2018

Membuat Aplikasi Android : Splash Screen Sebagai Tampilan Pembuka Aplikasi


Halo sobat, di hari ini saya akan membuat sebuah tutorial sederhana yaitu membuat Splash screen. Jadi buat kamu yang belum tahu apa itu Splash screen akan saya jelaskan disini.

Spalsh Screen adalah tampilan awal ketika aplikasi dibuka. Biasanya hanya tampil beberapa detik saja. Sebagai contoh anda bisa melihat bebrapa Splash Screen beberapa aplikasi dibawah ini :



Seperti pada gambar di atas biasanya splash screen menampilkan nama beserta logo dari aplikasi. Biasanya aplikasi-aplikasi besar menggunakan splash screen sebelum masuk ke layar utama aplikasi. Saya sarankan anda yang ingin membuat sebuah aplikasi untuk menambahkan splash screen agar aplikasinya lebih greget. Selain itu dengan adanya splash screen ini pengguna aplikasi anda tentunya akan merasa bahwa aplikasi anda memang berkualitas.

Bandingkan saja menurut anda sendiri jika anda menggunakan aplikasi yang tidak memiki splash screen pasti kepercayaan anda akan kualitas aplikasi itu menurun bukan. Beda halnya jika anda membuka aplikasi yang menggunakan splash screen pastinya anda akan lebih mempercayai kualitas dari aplikasi ini.

Anda juga bisa meletakkan deskripsi untuk menggambarkan apa isi dari aplikasi anda. Selain itu nama juga menjadi hal utama yang harus anda masukkan ke dalam splash screen yang tidak boleh dilupakan. Element lainnya adalah logo atau background yang berhubungan dengan isi aplikasi anda.

Bila anda sudah paham apa itu splash screen dan apa kegunaannya sekarang saatnya kita membuatnya. Silahkan ikuti langkah di bawah ini :

1. Buat project baru dengan nama "splash_screen". Dengan embel-embel lainnya bisa anda ikuti seperti di bawah ini :

  • Aplication Name : splash_screen
  • Company domain : coding.rakitan.com (bisa anda ganti sesuai company domain anda sendiri)
  • Phone and Tablet : API 15 : Android 4.0.3 (Ice Cream Sandwich) - (atau pilih API yang lebih tinggi juga bisa)
  • Add on Activity to Mobile : Empty Activity
  • Activity Name : MainActivity
  • Layout Name : activity_main


2. Silahkan buat layout baru dengan cara klik kana pada folder layout > New > XML > Layout XML File.


3. Pada jendela Configure Component silahkan masukkan Layout File Name : splash_screen_layout, dengan Root Tag : RelativeLayout. Selanjutnya klik finish. Maka akan muncul layout baru bernama splash_screen_layout.



4. Klik kanan pada folder tempat file java anda, seperti pada gambar. Kemudian klik kanan > New > Java Class.



5. Pada jendela Create New Class isi Name dengan SplashScreen kemudian yang lain biarkan default, klik ok maka akan muncul file baru yaitu SplashScreen.java.



6. Selanjutnya lanjut untuk mengubah isi file. Dan ingat disini kita tidak mengubah apapun pada activity_main.xml dan MainActivity.java karena yang akan kita gunakan adalah splash_screen_layout.xml dan SplashScreen.java.

A. splash_screen_layout.xml

Dalam file ini silahkan kreasikan sesuai keinginan anda. Anda bisa tambahkan logo, backgroud, dan tulisan seunik mungkin. Disini saya akan membuatnya seperti dibawah ini.



<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/coding_rakitan">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="54dp"
        android:text="CODING RAKITAN" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="106dp" />
</RelativeLayout>



Ingat rubah android:background="@drawable/coding_rakitan" sesuai dengan background anda. Jika anda tidak merubahnya maka code akan error (jadi merah). Karena gambar di atas sudah saya masukkan kedalam drawable saya. Jika anda tidak punya gambar silahkan hapus saja android:background="@drawable/coding_rakitan". Ingin menambahkan gambar silahkan baca "Cara Menambahkan Gambar Ke Dalam Project Android Studio".

B. SplashScreen.java

package com.rakitan.coding.splash_screen;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.view.Window;

public class SplashScreen extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.splash_screen_layout);



        final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                startActivity(new Intent(getApplicationContext(), MainActivity.class));
                finish();
            }
        }, 3000L);
    }
}


Penjelasan kode di atas :

 final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                startActivity(new Intent(getApplicationContext(), MainActivity.class));
                finish();
            }
        }, 3000L);

Kode ini menginstruksikan agar setelah 3000L atau 3 detik, aplikasi akan menjalankan MainActivity.class. Dimana MainActivity.java ini akan menampilkan layout activity_main.xml.

C. AndroidManifest.xml

Pada file inilah di atur class mana yang akan duluan muncul. Karena yang kita inginkan adalah SplashScrenn.java yang pertama kali di eksekusi maka kodenya menjadi speerti dibawah :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.rakitan.coding.splash_screen">

    <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=".SplashScreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity"/>
    </application>

</manifest>


Hasil Run Aplikasi



Oke teman-teman sekian dulu tutoril tentang cara membuat Splash Screen. Semoga bermanfaat dan bila ada pertanyaan silahkan sampaikan melalui kolom komentar di bawah.

Wednesday, November 14, 2018

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


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.

Cara Membuat Project Baru di Android Studio


Hai sobat, kali ini tutorial CodingRakitan akan membahas tentang bagaimana cara membuat project baru pada Android Studio. Kalian semua pastinya sudah tahu apa itu Android Studio bukan. Kalau belum tahu, jadi Android Studio itu adalah sebuah perangkat lunak yang ditujukan dalam pembuatan aplikasi berbasis Android.

Hal utama yang perlu anda pelajari dalam menggunakan Android Studio adalah cara membuat project baru. Menurut saya ini adalah hal yang paling dasar sekali, tetapi banyak di antara para pemula yang tidak tahu cara ini. Bisa karena faktor pertama kali berjumpa dengan Android Studio. Hal ini juga pernah saya alami ketika pertama kali menginstal Android Studio, saya tidak tahu bagaimana caranya untuk membuat sebuah project, karena adanya kemauan akhirnya sekarang saya sudah banyak tahu tentang Android Studio.

Mari kita mulai untuk membuat project baru :

1. Buka aplikasi Android Studio kemudian pilih "Start a new Android Studio project".



2. Silahkan isi Aplication name dengan nama project anda, misalnya "Kalukulator", Company domain isi sesuai dengan company domain anda misalnya disini saya menggunakan "coding.rakitan.com" (ingat ini nantinya akan membedakan aplikasi anda dengan aplikasi lain yang ada di play store jadi usahakan unik, atau tidak ada kesamaan dengan yang lain), dan Project Location biasanya otomatis terisi, tetapi anda bisa mengganti sesuai yang anda inginkan. Jika sudah diisi semua silahkan klik next.




3. Selanjutnya pada window Target Android Devices, centang "Phone and Target" dan pilih API 15: Android 4.0.3 (IceCreamSandwich) lalu tekan next. Catatan : anda bisa memilih API android sesuai dengan API target yang anda inginkan, tetapi pastikan platform API yang anda pilih telah trinstal pad SDK.




4. Pada "Add an Activity to Mobile" silahkan pilih "Empty Activity" lalu tekan next. Ada banyak activity yang bisa anda pilih, tetapi untuk pemula ada baiknya anda memilih Empty Activity, sebab itu akan membuat anda tidak kebingungan nantinya pada file activity_main.xml atau pada file javanya nanti.




5. "Configure Activity " biarkan default saja, langsung klik Finish lalu tunggu sejenak aplikasi melakukan Building, sambil menunggu anda bisa membuat kopi atau teh mungkin. Untuk pemula di anjurkan Activity name dan layout namenya tetap default. Activity Name merupakan nama class atau nama file javanya nanti, kemudian Layout name adalah nama layout atau tampilan pertama pada aplikasi nantinya.



6. Setelah anda mengklik finish pada tahap ke 5 maka sampailah kita di layar utama project aplikasi.




Sekian tutorial kali ini semoga bermanfaat untuk kalian semua. Nantikan tutorial-tutorial menarik selanjutnya yang akan dibahas CodingRakitan. Jika dirasa bermanfaat silahkan sharing ke teman-teman kalian semua atau jika anda tidak ingin ketinggalan postingan terbaru dari CodingRakitan. Silahkan klik suka halaman pada halaman Facebook di samping. Insya Allah setiap postingan terbaru akan selalu di update disana , terima kasih.

Sunday, November 11, 2018

Membuat Aplikasi Android : Kalukulator Sederhana Menggunakan Android Studio


Halo sobat Codingrakitan, bagaimana kabarnya, saya harap kalian selalu dalam keadaan hepi.

Pada tutorial kali ini saya akan mengajarkan bagaimana cara membuat aplikasi kalukulator sederhana menggunakan Android Studio. Sebelum memulai ada baiknya anda berdoa, kemudian pastikan alat-alat yang dibutuhkan sudah terinstal dengan sempurna. Alat atau aplikasi paling utama adalah Android Studio (disini saya mengguanakan Android Studio v 3.0).

Jika sobat menggunakan versi yang lama, maka tidak apa-apa ikuti saja langkahnya sesuai dibawah ini.

Hal pertama yang harus anda lakukan adalah membuat sebuah project baru dengan nama kalukulator. Jika sudah selesai selanjutnya silahkan edit file activity_main.xml dan MainActivity.java sesuai kode yang ada di bawah

Activity_main.xml

Kalian pastinya sudah tahu bahwa pada file ini berisikan kode xml yang akan menampilakan desain dari aplikasi android yang dibuat. Pada aplikasi android Kalukulator sederhana yang kita buat ini tampilannya akan tampak seperti pada gambar :




 Untuk mendapatkan desain di atas anda cukup memasukkan kode xml berikut :

<?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"
    android:baselineAligned="false"
    tools:context="com.rakitan.coding.kalukulator.MainActivity"
    android:id="@+id/linearLayout">


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

            <TextView
                android:id="@+id/angka1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="20dp"
                android:layout_marginRight="5dp"
                android:layout_marginBottom="20dp"
                android:textSize="24sp" />

            <TextView
                android:id="@+id/operator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="20dp"
                android:layout_marginRight="5dp"
                android:layout_marginBottom="20dp"
                android:textSize="24sp" />

            <TextView
                android:id="@+id/angka2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="20dp"
                android:layout_marginRight="5dp"
                android:layout_marginBottom="20dp"
                android:textSize="24sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/tb1"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="1"/>

            <Button
                android:id="@+id/tb2"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="2" />

            <Button
                android:id="@+id/tb3"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="3" />

            <Button
                android:id="@+id/ak1"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="+" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/tb4"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="4" />

            <Button
                android:id="@+id/tb5"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="5" />

            <Button
                android:id="@+id/tb6"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="6" />

            <Button
                android:id="@+id/ak2"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="-" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/tb7"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="7" />

            <Button
                android:id="@+id/tb8"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="8" />

            <Button
                android:id="@+id/tb9"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="9" />

            <Button
                android:id="@+id/ak3"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="x" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/bersih"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="c" />

            <Button
                android:id="@+id/tb0"
                android:layout_width="59dp"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="0" />

            <Button
                android:id="@+id/sama_dengan"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="=" />

            <Button
                android:id="@+id/ak4"
                android:layout_width="67dp"
                android:layout_height="70dp"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:text="/" />

        </LinearLayout>
    </LinearLayout>
</RelativeLayout>


MainActivity.java

Pada MainActivity.java ini akan berisikan fungsi-fungsi yang akan di jalankan pada aplikasi android nantinya, seperti fungsi tombol, hingga rumus perhitungan berada dalam file ini.

package com.rakitan.coding.kalukulator;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    TextView angka1, operator, angka2;
    int a=0, b=0;
    Button tb1, tb2, tb3, tb4,tb5,tb6,tb7,tb8,tb9,tb0, sama_dengan, tambah,kurang,kali,bagi, bersih;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        angka1 = findViewById(R.id.angka1);
        angka2 = findViewById(R.id.angka2);
        operator = findViewById(R.id.operator);
        tb1= findViewById(R.id.tb1);
        tb2= findViewById(R.id.tb2);
        tb3= findViewById(R.id.tb3);
        tb4= findViewById(R.id.tb4);
        tb5= findViewById(R.id.tb5);
        tb6= findViewById(R.id.tb6);
        tb7= findViewById(R.id.tb7);
        tb8= findViewById(R.id.tb8);
        tb9= findViewById(R.id.tb9);
        tb0= findViewById(R.id.tb0);
        sama_dengan= findViewById(R.id.sama_dengan);
        tambah= findViewById(R.id.ak1);
        kurang= findViewById(R.id.ak2);
        kali= findViewById(R.id.ak3);
        bagi= findViewById(R.id.ak4);
        bersih= findViewById(R.id.bersih);

        tb1.setOnClickListener(this);
        tb2.setOnClickListener(this);
        tb3.setOnClickListener(this);
        tb4.setOnClickListener(this);
        tb5.setOnClickListener(this);
        tb6.setOnClickListener(this);
        tb7.setOnClickListener(this);
        tb8.setOnClickListener(this);
        tb9.setOnClickListener(this);
        tb0.setOnClickListener(this);
        tambah.setOnClickListener(this);
        kurang.setOnClickListener(this);
        kali.setOnClickListener(this);
        bagi.setOnClickListener(this);
        bersih.setOnClickListener(this);
        sama_dengan.setOnClickListener(this);

    }


    @Override
    public void onClick(View v) {

        switch (v.getId()){
            case R.id.tb1:
                isi("1");
                break;
            case R.id.tb2:
                isi("2");
                break;
            case R.id.tb3:
                isi("3");
                break;
            case R.id.tb4:
               isi("4");
                break;
            case R.id.tb5:
               isi("5");
                break;
            case R.id.tb6:
                isi("6");
                break;
            case R.id.tb7:
                isi("7");
                break;
            case R.id.tb8:
                isi("8");
                break;
            case R.id.tb9:
                isi("9");
                break;
            case R.id.tb0:
                isi("0");
                break;

//                aksi operator
            case R.id.ak1:
                aksi("+");
                break;
            case R.id.ak2:
                aksi("-");
                break;
            case R.id.ak3:
                aksi("*");
                break;
            case R.id.ak4:
                aksi("/");
                break;

//                aksi lainnya
            case R.id.bersih:
                bersih();
                break;
            case R.id.sama_dengan:
                hasil();
                break;
        }
    }



    private void isi(String s) {
        String op = operator.getText().toString();
        String a1 = angka1.getText().toString();
        String a2 = angka2.getText().toString();
        if(op==""){
            angka1.setText(a1+s);
        }else{
            angka2.setText(a2+s);
        }
    }

    private void aksi(String ak) {
        operator.setText("");
        operator.setText(ak);
    }
    private void hasil() {
        String a = operator.getText().toString();
        String nilai1 = angka1.getText().toString();
        String nilai2 = angka2.getText().toString();
        int n1 = Integer.parseInt(nilai1);
        int n2 = Integer.parseInt(nilai2);
        bersih();
        if (a=="+"){
            int c = n1+n2;
            isi(""+c);
        }else if (a=="-"){
            int c = n1-n2;
            isi(""+c);
        }else if (a=="*"){
            int c = n1*n2;
            isi(""+c);
        }else if (a=="/"){
            int c = n1/n2;
            isi(""+c);
        }


    }

    private void bersih() {
        angka1.setText("");
        angka2.setText("");
        operator.setText("");
    }
}


Penjelasan Koding

Pada penjelasan koding ini akan dibagi menjadi 2 bagian utama yaitu kode activity_main.xml dan MainActivity.java. Tapi sebelum itu pastikan anda sudah men RUN aplikasi kalukulator tadi dan sukses berjalan pada perangkat atau emulator android anda. Jika gagal maka perhatikan kembali kedua file itu apakah isinya sudah sama persis dengan yang ada di blog ini atau tidak.

activity_main.xml

Kita lanjut kepada pembahasan koding, yang pertama adalah koding pada activity_main.xml, didalam file ini berisikan koding xml yang mana nantinya akan mengatur tampilan android ketika di jalankan.

Secara teknis dalam aplikasi android kalukulator sederhana ini terdapat 4 element atau atribut utama yang digunakan yaitu : RelativeLayout, LinearLayout, TextView, dan Button. Mengapa digunakan RelativeLayout alasannya agar pengaturan tata letak lebih mudah, apalagi untuk seorang pemula dalam membuat aplikasi android. Dalam pembuatan kalukulator ini, RelativeLayout digunakan sebagai pembungkus dari semua isi lainnya.

Kemudian ada LinearLayout yang terdiri dari dua orientation yakni vertical dan horizontal. Pada lapisan pertama di gunakan orientation vertical untuk membungkus LinearLayout orientation horizontal. Kemudian lapis kedua orientation horizontal digunakan untuk membungkus widget seperti text view atau buttn. Mengapa digunakan orientation horizontal pada lapis ini ?

Jawabanya agar button atau text view dapat berjejer kesamping bukan kebawah.

Selanjutnya beralih ke text view, element ini tidak bisa dilihat karena, isi textnya sengaja di kosongkan. Berbeda dengan button yang terlihat sebab memiliki warna background. TextView yang digunakan dalam aplikasi kalukulator ini berjumlah 3, yang pertama akan berisi angka pertama atau nilai pertama yang akan dihitung, yang kedua akan menampung operator apa yang dipakai (+, -, *, dan /), sedangkan TextView ketiga akan menampung nilai kedua yang pengguna masukkan.

Kemudian yang terakhir dalam file activity_main.xml ada element Button. Element inilah yang akan berfungsi sebagai tombol nantinya, dimana jumlahnya terdiri dari 24 buah.

MainActivity.java

File inilah yang berisi kode-kode untuk menjalankan fungsi yang dalam aplikasi android kalukulator sederhana ini. MainActivity ini secara garis besar berisi satu class dengan 6 method atau perintah yang telah di isikan.

Method pertama yaitu onCreate:
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        angka1 = findViewById(R.id.angka1);
        angka2 = findViewById(R.id.angka2);
        operator = findViewById(R.id.operator);
        tb1= findViewById(R.id.tb1);
        tb2= findViewById(R.id.tb2);
        tb3= findViewById(R.id.tb3);
        tb4= findViewById(R.id.tb4);
        tb5= findViewById(R.id.tb5);
        tb6= findViewById(R.id.tb6);
        tb7= findViewById(R.id.tb7);
        tb8= findViewById(R.id.tb8);
        tb9= findViewById(R.id.tb9);
        tb0= findViewById(R.id.tb0);
        sama_dengan= findViewById(R.id.sama_dengan);
        tambah= findViewById(R.id.ak1);
        kurang= findViewById(R.id.ak2);
        kali= findViewById(R.id.ak3);
        bagi= findViewById(R.id.ak4);
        bersih= findViewById(R.id.bersih);

        tb1.setOnClickListener(this);
        tb2.setOnClickListener(this);
        tb3.setOnClickListener(this);
        tb4.setOnClickListener(this);
        tb5.setOnClickListener(this);
        tb6.setOnClickListener(this);
        tb7.setOnClickListener(this);
        tb8.setOnClickListener(this);
        tb9.setOnClickListener(this);
        tb0.setOnClickListener(this);
        tambah.setOnClickListener(this);
        kurang.setOnClickListener(this);
        kali.setOnClickListener(this);
        bagi.setOnClickListener(this);
        bersih.setOnClickListener(this);
        sama_dengan.setOnClickListener(this);

    }


Pada method ini menggunakan perintah super untuk membuat suatu fungsi yang berfungsi untuk menampilkan R.layout.activity_main.xml ketika class atau kode java ini di jalankan. Method inilah yang menghubungkan antara activity_man.xml dengan MainActivity.java.

Selanjutnya di dalam method ini juga di deklarasikan variabel yang sebelumnya telah didefinisikan di atas method ini seperti gambar di bawah :



Cara pendefisiannya sangat mudah cukup menuliskan namavariabel = findViewById(R.id.namaid);. Id menjadi atribut unik paling utama yang digunakan untuk mencari jenis variabel ini.

Agar lebih paham kita umpamakan anda telah membuat sebuah tombol angka 1 misalnya. Tombol ini dibuat dari Button dengan nama idnya "tb1". Maka tuliskan dahulu variabelnya yaitu "Button tb1" nama variabelnya terserah, tapi untuk memudahkan silahkan tulis sesuai nama idnya saja. Kemudian cari tombol ini dan masukkan kedalam variabel tb1 dengan cara "tb1 = findViewById(R.id.tb1);".

Hal lain yang ada di dalam method ini seperti "tb1.setOnClickListener(this);" artinya jika tb1 diklik maka akan terjadi sesuai dengan yang terindex pada method onClick(View v). Ingat "this" ini merujuk pada method onClick(View v) jadi bila method ini tidak ada maka program akan eror. Untuk penjelasannya akan ada di bawah.

Method Kedua onClick :
 @Override
    public void onClick(View v) {

        switch (v.getId()){
            case R.id.tb1:
                isi("1");
                break;
            case R.id.tb2:
                isi("2");
                break;
            case R.id.tb3:
                isi("3");
                break;
            case R.id.tb4:
               isi("4");
                break;
            case R.id.tb5:
               isi("5");
                break;
            case R.id.tb6:
                isi("6");
                break;
            case R.id.tb7:
                isi("7");
                break;
            case R.id.tb8:
                isi("8");
                break;
            case R.id.tb9:
                isi("9");
                break;
            case R.id.tb0:
                isi("0");
                break;

//                aksi operator
            case R.id.ak1:
                aksi("+");
                break;
            case R.id.ak2:
                aksi("-");
                break;
            case R.id.ak3:
                aksi("*");
                break;
            case R.id.ak4:
                aksi("/");
                break;

//                aksi lainnya
            case R.id.bersih:
                bersih();
                break;
            case R.id.sama_dengan:
                hasil();
                break;
        }
    }


Dalam method ini akan menjalankan fungsi sesuai tombol apa yang telah di klik. Switch dan Case adalah fungsi yang digunakan untuk mengenali id dari tombol yang melakukan klik untuk selanjutnya melakukan fungsi sesuai yang telah di instruksikan.

Method Ketiga isi ():
 private void isi(String s) {
        String op = operator.getText().toString();
        String a1 = angka1.getText().toString();
        String a2 = angka2.getText().toString();
        if(op==""){
            angka1.setText(a1+s);
        }else{
            angka2.setText(a2+s);
        }
    }


Dalam method ini akan mengmbil nilai dari variabel "String s" dimana variabel s ini berisikan angka atau operator yang akan ditampilkan pada textview. Pertama-tama membuat variabel "String op = operator.getText().toString();String a1 = angka1.getText().toString();String a2 = angka2.getText().toString();" hal ini untuk mengambil isi dari textview untuk nantinya akan di tahu apakah sudah ada isinya atau belum. Contoh disini variabel op yang akan dilihat apakah sudah ada operator atau belum jika ada maka angka selanjutnya yang dimasukkan akan tampil di TextView 3 bukan di Text View 1 lagi.

Method keempat aksi ();

private void aksi(String ak) {
        operator.setText("");
        operator.setText(ak);
    }


Method ini befungsi ketika tombol (+, -, *, /) di klik maka akan mengisi TextView operator sesuai dengan tombol operator yang di klik.

Method kelima hasil()

private void hasil() {
        String a = operator.getText().toString();
        String nilai1 = angka1.getText().toString();
        String nilai2 = angka2.getText().toString();
        int n1 = Integer.parseInt(nilai1);
        int n2 = Integer.parseInt(nilai2);
        bersih();
        if (a=="+"){
            int c = n1+n2;
            isi(""+c);
        }else if (a=="-"){
            int c = n1-n2;
            isi(""+c);
        }else if (a=="*"){
            int c = n1*n2;
            isi(""+c);
        }else if (a=="/"){
            int c = n1/n2;
            isi(""+c);
        }


    }


Pada method inilah terjadi fungsi rumus, dimana isi dari angka1 dan angka2 di ambil kemudian di lakukan perhitungan. Hasilnya kemudian akan ditampilkan pada TextView angka1. Mengapa ada bersih() dalam method ini, agar sebelum menampilkan hasil, terlebih dahulu TextView di bersihkan dari inputan yang dilakukan pengguna.

Method keenam bersih()

private void bersih() {
        angka1.setText("");
        angka2.setText("");
        operator.setText("");
    }


Sesuai nama method yang saya berikan, fungsi dari method ini adalah membersihkan. fungsi ini akan jalan ketika pengguna menekan tombol c. Dimana TextView akan di kosongkan dan pengguna bisa kembali memasukkan nilai.