X

Thursday, November 29, 2018

Cara Membuat Menu Popup Dengan Android Studio


Halo sobat sekalian kali ini saya ingin membagikan sebuah tutorial untuk anda yang sedang belajar membuat aplikasi android dengan Android Studio. Seperti judul di atas yang akan saya bagikan adalah Cara Membuat Menu popup Dengan Android Studio.

Membuat menu popup ini saya pelajari ketika membuat aplikasi 'browserku' pada postingan Membuat Aplikasi Android : Browser Internet Layaknya Opera Mini Menggunakan Android Studio.

Sebelumnya jika anda belum tahu apa itu menu Pop Up, ini adalah menu yang akan muncul bila anda memencet sebuah tombol atau objek, dimana letak menu ini akan muncul sesuai dengan letak objek yang di tekan. Agar tambah paham silahkan lihat beberapa contoh menu popup dari aplikasi-aplikasi android berikut ini :


Bagaimana sekarang anda pahamkan apa itu menu popup. Nah anda tentunya sudah sering melihat penerapan menu popup ini pada aplikasi-aplikasi besar. Pada contoh gambar di atas saya mengambilnya dari aplikasi Line, Google Drive, dan WhatsApp.

Persiapan untuk membuat menu popup ini hanya perlu aplikasi AndroidStudio tentunya. Selain itu yang tidak kala penting adalah kemauan anda untuk belajar.

Sebelum anda membuat menu popup ini ada baiknya anda buat terlebih dahulu menu atas pada android yang sudah saya buatkan postingannya di Cara Membuat Menu Atas atau Top Menu Pada Android Studio. Kenapa anda harus membuatnya, karena pada tutorial membuat menu popup ini kita akan menambahkannya pada menu atas yang telah kita buat.

Tapi tenang jika anda tidak ingin membuat menu atas, bisa langsung menambahkan objek yang akan menjadi objek klik nantinya. Objek ini bisa berupa button, image button, atau textView, intinya id pada objek itu beri "popup". Sesuai dengan id yang akan kita terapkan pada koding di bawah ini.

1. Buka project lama kita yaitu "Menu Atas" yang telah dibuat pada postingan Cara Membuat Menu Atas atau Top Menu Pada Android Studio.

2. Buat layout baru dengan nama "menu_popup" serta root tag isi "menu".

3. Sekarang anda punya layout baru bernama menu_popup.xml.

4. Isi menu_popup.xml dengan kode berikut.



<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <item android:id="@+id/menu_profile"
        android:title="Profile"/>
    <item android:id="@+id/menu_pesan"
        android:title="Pesan"/>
    <item android:id="@+id/menu_pengaturan"
        android:title="Pengaturan"/>
    <item android:id="@+id/menu_keluar"
        android:title="Keluar"/>
</menu>



5. Sekarang buka MainActivity.java anda dan isi dengan kode seperti di bawah ini.



package com.blogspot.codingrakitan.menuatas;

import android.annotation.SuppressLint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.PopupMenu;

public class MainActivity extends AppCompatActivity {
    private ImageButton imb_popupMenu = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //menghilangkan action bar
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        getSupportActionBar().hide();

        //menampilkan layout activity_main.xml
        setContentView(R.layout.activity_main);

        imb_popupMenu = findViewById(R.id.popup);
        imb_popupMenu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showPopupMenu(v);
            }
        });
    }

    @SuppressLint("ResourceType")
    private void showPopupMenu(View v) {
        PopupMenu popupMenu = new PopupMenu(this, v);
        //menampilkan layout menu_popup.xml
        popupMenu.inflate(R.layout.menu_popup);
       popupMenu.show();
    }
}



6. Coba run aplikasi menggunakan emulator anda. Tampilannya akan nampak seperti di bawah.



7. Jika anda berniat menambahkan aksi pada saat item menu di klik maka ubah method showPopupMenu seperti dibawah.

private void showPopupMenu(View v) {
        PopupMenu popupMenu = new PopupMenu(this, v);
        //menampilkan layout menu_popup.xml
        popupMenu.inflate(R.layout.menu_popup);
        //aksi klik
        popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    //ketika menu_profile di klik
                    case R.id.menu_profile:
                        //tuliskan aksi disini
                        break;

                    //ketika menu_pesan di klik
                    case R.id.menu_pesan:
                        //tuliskan aksi disini
                        break;

                    //ketika menu_pengaturan di klik
                    case R.id.menu_pengaturan:
                        //tuliskan aksi disini
                        break;

                    //ketika menu_keluar di klik
                    case R.id.menu_keluar:
                        //tuliskan aksi disini
                        break;


                }
                return false;
            }
        });
        popupMenu.show();
    }


Demikian postingan kali ini tentang acara membuat popupmenu di android studio semoga bermanfaat. Silahkan bagikan postingan ini jika dirasa bermanfaat.

Wednesday, November 28, 2018

Cara Membuat Menu Atas atau Top Menu Pada Android Studio


Halo sobat CodingRakitan dimanapun anda berada, semoga anda sehat selalu. Pada kesempatan kali ini kita akan membahas tentang Cara Membuat Menu Atas atau Top Menu Pada Android Studio.

Menu atas atau menu top tentunya sudah tidak jarang lagi anda lihat. Banyak sekali aplikasi-aplikasi ternama menerapkan menu mereka berada di atas. Berikut contoh aplikasi yang menggunakan menu atas.


Ada beberapa cara yang bisa digunakan untuk membuat menu ini. Tapi disini kita akan meamnfaatkan objek include yang bisa memanggil layout lain kedalam layout utama kita. Objek ini sudah disediakan Android Studio tinggal anda gunakan.

Ingat anda bisa mengkreasikan menu atas sesuai dengan keinginan anda. Anda juga bisa mengikuti kreasi saya berikut ini :

1. Buat sebuah project baru dengan nama "Menu Atas". (Tidak tahu cara membuat project baru kunjungi : Cara Membuat Project Baru di Android Studio).

2. Untuk keterangan lainnya silahkan isi sebagai berikut :

  • Aplication Name : Menu Atas
  • Company domain : codingrakitan.blogspot.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


3. Jika sudah masuk ke halaman utama project, maka selanjutnya kita menambahkan ikon-ikon yang diperlukan kedalam drawable. Caranya klik kanan pada drawable --> New --> Vector Asset.


4. Klik ikon Clip art, lalu cari ikon dan klik "more vert" --> Ok --> Next --> Finish.

5. Lakukan langkah 3 dan 4 untuk menambahkan ikon lainnya seperti home, serta search. (Silahkan tambahkan sesuai kebutuhan anda).


6. Klik kanan pada Layout --> New --> XML --> Layout XML File. Beri nama "menu_atas" dengan root tag "LinearLayout", klik finish.



7. Selanjutnya beralih ke tahap koding silahkan copy dan paste koding dibawah ini kedalam file masing-masing.

A. menu_atas.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:background="@android:color/holo_orange_dark"
    android:gravity="right"
    android:padding="2dp">

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

    <ImageButton
        android:id="@+id/search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_search_black_24dp"
        tools:ignore="VectorDrawableCompat" />

    <ImageButton
        android:id="@+id/popup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_more_vert_black_24dp"
        tools:ignore="VectorDrawableCompat" />
</LinearLayout>



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

    <include
        layout="@layout/menu_atas"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>


C. MainActivity.java

package com.blogspot.codingrakitan.menuatas;

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

public class MainActivity extends AppCompatActivity {

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

        //menampilkan layout activity_main.xml
        setContentView(R.layout.activity_main);
    }
}



Jika sudah selesai silahkan ada run menggunakan emulator atau perangkat android anda sendiri. Disini saya menggunakan emulator genymotion untuk run aplikasi. Lihat hasilnya akan tampil seperti gambar di bawah.



Baca juga : Cara Membuat Menu Popup Dengan Android Studio (segera)


Tuesday, November 27, 2018

Cara Membuat Slide Dengan JavaScript Biasa Tanpa Jquery


Sesuai dengan judulnya Cara Membuat Slide Dengan JavaScript Biasa Tanpa Jquery. Kali ini kita akan membuat sebuah slide dengan menggunakan kode JavaScript, disini kita tidak akan menggunakan bantuan plugin dan juga Jquery. Kode yang akan kita gunakan benar-benar asli Javascript.

Membuat sebuah slide pada sebuah website akan membuat daya tarik tersendiri bagi pangunjung yang berkunjung ke website anda. Biasanya slide akan berisi gambar-gambar menarik. Tidak jarang website lain seperti bukalapak menggunakan slide pada halaman utamanya untuk mempromosikan fitur baru mereka.

Bila anda tertarik maka ini saatnya kita untuk belajar membuat sebuah slide. Yang akan saya ajarkan disini adalah contoh slide sederhana dimana transisi gambar hanya satu fariasi, yaitu gambar bergeser ke kiri.

Sebelum memulai ada baiknya anda menyiapkan gambar yang akan di jadikan slide terlebih dahulu. Jika sudah silahkan buat sebuah folder dengan nama "Slide", didalam folder slide buat lagi folder dengan nama gambar. Letakkan gambar anda di dalam folder gambar. Sekarang buat sebuah file dengan nama "index.html". Isi index ini sebagai berikut.



<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Slide Dengan Javascript</title>
<style type="text/css">
body{
margin: unset;
overflow: hidden;
}
.utama{
width: 100%;
overflow: hidden;
}.isi{
width: 50%;
height: 100%;
margin: auto;
overflow: hidden;
}.isi_gambar{
width: 25%;
float: left;
}.isi2{
width: 400%;

}
.utama img{
width: 100%;
float: left;
}
</style>
</head>
<body>
<div class="utama">
<div class="isi">
<div class="isi2" id="slide">
<div class="isi_gambar" >
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/1.jpg">
</div>
<div class="isi_gambar">
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/2.jpg">
</div>
<div class="isi_gambar">
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/3.jpg">
</div>
<div class="isi_gambar">
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/4.jpg">
</div>
</div>

</div>

</div>
<script type="text/javascript">
var a=-100;
setInterval(function(){
if (a!=0) {
slide = document.getElementById('slide');
slide.style="margin-left:"+a+"%;transition: 1s ease-in;";
if (a== -300) {
a=0;
}else{
a=a+-100;
}
return a;

}else{
slide = document.getElementById('slide');
slide.style="margin-left:"+a+"%;";
if (a== -300) {
a=0;
}else{
a=a+-100;
}
return a;
}

}, 2000);
</script>
</body>
</html>


Hasilnya akan seperti ini:




Ingat ganti lokasi pada src="" sesuai dengan lokasi gambar anda. Jika tidak berjalan seperti yang saya terapkan di atas berarti anda perlu melihat apakah lokasi gambar sudah sesuai atau belum. Jika memang sudah sesuai coba periksa lagi koding anda.

Monday, November 26, 2018

Belajar Fungsi Dasar Java Script


Belajar Fungsi Dasar Java Script Setelah mengetahui apa fungsi dari javascript itu sendiri pada postingan Kenali Terlebih Dahulu Apa itu JavaScript ?

Sekarang mari kita belajar penggunaan fungsi dasar Java Script. Fungsi dasar yang akan kita gunakan seperti :

1. Onclick
2. Onmouseenter
3. Onmouseleave
4. Ondblclick

Disini sambil berteori saya akan memberikan script langsung untuk anda yang ingin mencoba langsung penggunaan javascript yang saya maksudkan di atas. Ayo simak penjelasan dibawah :

1. Onclick

Fungsi ini berfungsi agar ketika suatu tag di click maka akan terjadi fungsi sesuai dengan yang anda instruksikan pada javascript. Fungsi onclick ini bisa anda gunakan untuk berpindah alamat. Jika biasanya kita bisa menggunakan <a href="http://codingrakitan.blogspot.com">Coding Rakitan</a> maka dengan onclick anda bisa menuliskan <a onclick="window.location='http://codingrakitan.blogspot.com';">Coding Rakitan</a>. Kelebihan dengan menggunakan onclick anda bisa memasangnya pada tag apa saja misalnya tag <div onclick="window.location='http://codingrakitan.blogspot.com';">Coding Rakitan</div> maka fungsi perpindahan alamat itu tetap berjalan.

Pindah alamat hanya salah satu fungsi dari onclick, fungsi lainnya anda bisa menambahkan style pada tag tertentu. Misalnya seperti contoh dibawah ketika tombol button di klik maka warna akan berubah menjadi merah.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.coba{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<button onclick="klik()">Fungsi Onclick</button>
<div class="coba" id="coba">

</div>
<script type="text/javascript">
function klik() {
document.getElementById('coba').style="background:red;";
}
</script>
</body>
</html>




Pada kasus di atas, ketika button di klik function "klik()" dimana ini merupakan method yang di instruksikan dalam kode javascript <script type="text/javascript"> function klik() { document.getElementById('coba').style="background:red;"; } </script> . Anda bisa saja menginstruksikan seperti ini <button onclick="document.getElementById('coba').style='background:red;';">Fungsi Onclick</button>. Tetapi itu akan terlihat tidak proporsional, dan tidak cocok bila aksi yang ingin di jalankan lebih dari satu.

2. Onmouseenter

Ini menginstruksikan agar suatu fungsi atau function berjalan ketika mouse di arahkan pada tag atau objek yang sudah di pasangkan onmouse enter. Penggunaanya sangat mudah anda hanya tinggal menambahakan seperti ini <a onmouseenter="klik()"></a>. Klik() disini adalah function yang nantinya akan di jalankan, anda bisa membuat nama function sesuai dengan yang anda inginkan.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.coba2{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<button onmouseenter="klik2()">Fungsi Onmouseenter</button>
<div class="coba2" id="coba2">

</div>
<script type="text/javascript">
function klik2() {
document.getElementById('coba2').style="background:red;";
}
</script>
</body>
</html>




3. Onmouseleave

Selanjutnya adalah onmouseleave dimana ini adalah kebalikan dari onmouseenter. Function akan berjalan jika mouse atau kursor di pindahkan menjauhi objek yang telah di tentukan. Akan tetapi agar function dapat berjalan, kursor terlebih dahulu harus sudah focus atau berada di objek.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.coba3{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<button onmouseleave="klik3()">Fungsi Onmouseleave</button>
<div class="coba3" id="coba3">

</div>
<script type="text/javascript">
function klik3() {
document.getElementById('coba3').style="background:red;";
}
</script>
</body>
</html>






4. Ondblclick

Ondblclick menginstruksikan agar ketika objek di klik dua kali maka function akan berjalan. Anda pengguna komputer pasti sudah tidak asing dengan klik dua kali bukan. Dengan javascript anda bisa memasang instruksi seperti ini pada web anda. Ingat dalam melakukan double klik atau klik dua kali anda harus cepat jangan memberi jeda, bila anda memberi jeda maka program akan membacanya sebagai satu kali klik.



<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.coba4{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<button ondblclick="klik4()">Fungsi Ondblclick</button>
<div class="coba4" id="coba4">

</div>
<script type="text/javascript">
function klik4() {
document.getElementById('coba4').style="background:red;";
}
</script>
</body>
</html>




Itulah beberapa fungsi dasar javascript yang harus anda ketahui. Sebanrnya masih banyak lagi, akan tetapi mungkin akan saya bahas lagi di postingan selanjunya. Sekian dan terima kasih.

Saturday, November 24, 2018

Cara Pasang Wordpress di Htdoc Xamp


Halo sobat sekalian, kali ini saya ingin memberikan tutorial tentang cara memasang Wordpress di Htdoc Xamp. Yap tentunya sebelum kita mengonlinekan sebuah web, hal pertama adalah membangunnya, nah dengan memasang Wordpress di Xamp anda bisa membangun wordpress sesuai dengan keinginan anda.

Wordpress adalah salah satu CMS, yaitu sebuah (Content Management System) yang akan memudahkan pengguna dalam membuat sebuah web. Anda yang tidak bisa koding sekalipun bisa menggunakan CMS untuk membuat web anda. Didalam CMS sudah terdapat fitur admin, untuk mengelola website anda.

Dari segi keamanan CMS juga sudah tidak perlu diragukan lagi. Apalagi jika CMSnya adalah Wordpress yang merupakan CMS teraman di dunia. Wordpress juga merupakan CMS yang paling banyak di gunakan terutama di Indonesia. Situs website besar seperti website Universitas Indonesia dengan alamat web ui.ac.id saja menggunakan Wordpress.

Jika anda sudah tertarik menggunakan WOrdpress mari ikuti cara penginstalan CMS ini pada Htdoc Xamp anda.


1. Download Wordpress di halaman resminya https://wordpress.org/download/ (file dalam bentuk zip).

2. Extract hasil download tadi kemudian copy isinya kedalam directory Htdoc anda biasanya disini (C:\xampp\htdocs).

3. Nyalakan Xamp anda, Apache --> start, dan MySQL --> start.

4. Buka browser Mozilla atau Chrome anda.

5. Masuk ke http://localhost/phpmyadmin/ lalu buat database baru dengan nama "wordpress" atau terserah nama yang anda suka.

6. Buka alamat localhost/wordpress/ (wordpress ini sesuai dengan nama folder tadi yang kita pindahkan ke htdoc).

7. Pilih bahasa Indonesia, atau bahasa Arab bila anda mau.



8. Klik lets'go.



9. Silahkan isi Database Name dengan nama database yang telah dibuat pada langkah ke 5. Username, Password, Database Host, dan Table Prefix silahkan sesuaikan dengan gambar kemudian klik submit.



10. Klik Run the installation.



11. Isi Site Title sesuai dengan nama website anda. Username, isi dengan username yang akan anda gunakan login ke halaman admin nantinya. Isi password sesuai dengan yang anda inginkan, jika muncul warna merah silahkan centang Confirm use of weak password, agar password yang lemah jiga bisa di index. Isi email dengan email yang aktif. Selanjutnya klik Install Wordpress.



12. Bila sudah muncul informasi succes seperti gambar di bawah berarti wordpress sudah succes di install. Silahkan klik Log In.



13. Masukkan username dan password yang sudah anda isi di langkah 7 tadi.

14. Selamat wordpress anda sudah berhasil di Install. Sekarang saatnya anda berkreasi dengan CMS ini. Oh iya silahkan masuk http://localhost/wordpress/ untuk melihat tampilan web wordpress anda.



Sekian tutorial kali ini tentang memasang Wordpress di Htdoc Xamp, semoga bermanfaat. Jangan bimbang untuk menyebarkan artikel ini jika dirasa bermanfaat. Sampai jumpa di tutorial lainnya. See you.

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.