Di sini kita akan belajar bagaimana membuat Clone dari Aplikasi GoJek sederhana dan cara penggunaan intent di aplikasi tersebut.

Silahkan buka Android Studio dan buat Project Baru. Bila baru pertama kali, silahkan cek dan praktekkan tutorial di link ini Tutorial Membuat Aplikai Android “Hello World” di Android Studio.

Sebelumnya silahkan download logo dan masing-masing icon di bawah ini.

Setelah itu mari kita buat tampilan menu utamanya. Copy gambar logo dan icon yang sudah didownload tadi kemudian pastekan seluruhnya di ‘res/drawable’. Seperti gambar di samping.

Kemudian buka activity_main.xml kemudian edit di bagian Text Code-nya. Kita akan menggunakan Linear Layout di tampilan menu utama sehingga tampak seperti gambar di bawah ini.

Beri ‘id’ (android:id=”@+id/go_ride”) untuk masing-masing ImageView-nya lalu berikan salah satu ImageView dengan ‘method onClick’ (android:onClick=”goRide”) sebagai contoh saja. Untuk code lengkapnya bisa cek di bawah ini.

<?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="match_parent"
    android:orientation="vertical"
    tools:context="com.example.zebhi.gojekapp.MainActivity">

    <ImageView
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/logo_hitam" />

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

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/go_ride"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:layout_gravity="center"
                android:layout_margin="16dp"
                android:layout_weight="1"
                android:onClick="goRide"
                android:src="@drawable/menu_goride" />

            <ImageView
                android:id="@+id/go_food"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:layout_gravity="center"
                android:layout_margin="16dp"
                android:layout_weight="1"
                android:src="@drawable/menu_gofood" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/go_mart"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:layout_gravity="center"
                android:layout_margin="16dp"
                android:layout_weight="1"
                android:src="@drawable/menu_gomart" />

            <ImageView
                android:id="@+id/go_send"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:layout_gravity="center"
                android:layout_margin="16dp"
                android:layout_weight="1"
                android:src="@drawable/menu_gosend" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Di dalam ImageView ‘go_ride’ sudah diberikan method onClick sehingga bila diberi intent dan gambar diklik maka akan mengarah ke activity yang kita inginkan.

Buka MainActivity.java kemudian copy nama Package-nya.

Sekarang kita buat Activity baru. Caranya klik ‘File’ kemudian ‘New’ lalu ‘Activity’ pilih ‘Empty Activity’.

Beri nama “GoRide” kemudian klik ‘Next’ hingga ‘Finish’. Nantinya akan muncul satu activity dan satu file java baru, yaitu activity_go_ride.xml dan GoRide.java.

Buka kembali MainActivity.java lalu masukkan intent seperti di bawah ini.

package com.example.zebhi.gojekapp;

import android.content.Intent;
import android.provider.ContactsContract;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

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

        ImageView showRide = (ImageView) findViewById(R.id.go_ride);

        showRide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(MainActivity.this, GoRide.class);
                startActivity(intent);
            }
        });
    }
}

Kita bisa mengganti Title di Action Bar-nya Layout Go Ride. SIlahkan buka GoRide.java. Kemudian ganti Title-nya dengan code berikut.

package com.example.zebhi.gojekapp;

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

public class GoRide extends AppCompatActivity {

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

        getSupportActionBar().setTitle("Go Ride");
    }
}

Jalankan aplikasi yang sudah kita buat lalu klik di gambar ‘Go Ride’ maka akan berpindah ke Layout kosong Go Ride.

Sebelumnya untuk membuat Aplikasi Android dengan menggunakan Android Studio, Anda harus meng-install JDK (Java Development Kit) serta Android Studio IDE.

Link download:

JDK: http://www.oracle.com/technetwork/java/javase/downloads/index.html

Android Studio: https://developer.android.com/studio/index.html?hl=id

Pastikan koneksi internet lancar untuk proses update Android SDK.

Bila sudah ter-install, buka Android Studio-nya kemudian kita buat project baru seperti gambar di bawah.

Buat Nama Aplikasinya. Di sini, saya mengganti nama Aplikasi dari ‘My Application’ menjadi ‘Hello World’.

Pilih minimum SDK-nya. Biarkan saja default kemudian klik ‘Next’.

Pilih yang ‘Empty Activity’. Lalu klik ‘Next’.

Kemudian klik ‘Finish’.

Ubah tampilan di sebelah kiri menjadi ‘Project’ seperti yang dilingkari merah kemudian ganti pilihannya menjadi ‘Android’.

Bila kita klik ‘app’ seperti gambar di bawah maka secara default terlihat struktur aplikasi kita, yaitu ‘manifest’, ‘java’, dan ‘res’.

• ‘manifest’ menyediakan informasi penting aplikasi ke sistem Android (Device), termasuk di sini untuk permissions (perizinan) penggunaan bagian dari sistem Android seperti izin penggunaan sms, telepon, kontak, kamera, dll.
• ‘java’ untuk menempatkan functional code berbasis java.
• ‘res’ untuk menempatkan komponen layout aplikasi (image, font, color, string, dll)

Di ‘activity_main.xml’ di lingkaran bagian bawah terdapat dua pilihan, yaitu

• ‘Design’ untuk membuat layout dengan sistem Drag and Drop menggunakan ‘Palette’ (lingkaran merah atas).
• ‘Text’ untuk membuat layout dengan text coding berbasis xml.

Mari kita jalankan aplikasi Android ‘Hello World’ di real device (handphone, tablet, dll). Langkahnya cukup mudah, yaitu:

• Sambungkan kabel USB dari device ke PC / Laptop.
• Aktifkan Developer Mode di device. Caranya pilih ‘About Phone’ kemudian tab ‘Build Number’ hingga 7x. Masing-masing merk handphone bisa berbeda, seperti di Xiaomi tab 7x di ‘Miui Version’, Oppo di ‘Version’, dll.
• Setelah itu masuk ke Developer Mode kemudian aktifkan ‘USB Debugging’.
• Kembali ke Android Studio, klik ‘Run’ seperti gambar di bawah ini.

• Kemudian akan muncul merk dan type device yang tersambung. Lalu kita klik ‘OK’. Tunggu hingga proses instalasi selesai di device. Bila ada peringatan klik saja ‘Allow’.

• Voila!!! Akhirnya ‘Hello World’ telah muncul di Device kita. :)

Di postingan ini, software Android Studio harus sudah ter-install di PC / laptop Anda. Kemudian saya share library yang akan digunakan pada project kali ini agar penulisan code-nya lebih mudah dan efektif.

• ButterKnife by Jake Wharton

Library yang satu ini untuk menggantikan method findViewById() yang akan sangat merepotkan bila project kita sangat kompleks dengan layout yang begitu banyak. Dengan cara @BindView di awal akan memudahkan dalam penulisan functional code di Java.

Link GitHub ButterKnife : https://github.com/JakeWharton/butterknife

• MaterialEditText by Kai Zhu (Rengwuxian)

Library ini juga memudahkan kita dalam membuat form input (view EditText). Kita tidak perlu lagi mengatur coding satu per satu agar sesuai dengan konsep material design. Dengan library MaterialEditText, kita bisa mengatur floating hint, icon, highlight label, max/min karakter, helper / error text, validation dan lain sebagainya di view EditText.

Link GitHub MaterialEditText : https://github.com/rengwuxian/MaterialEditText

Baik kita mulai untuk pembuatan Aplikasinya.

1. Create new project

Pertama-tama kita buat project dahulu. Di sini, saya menggunakan nama project ‘Form Data’. Biarkan yang lainnya default lalu klik next hingga finish.

2. Import ButterKnife dan MaterialEditText library ke dalam Android Studio

Klik build.gradle seperti gambar di bawah ini.

Lalu masukkan kode di bawah ke dalam dependencies lalu jangan lupa klik ‘sync now’, tunggu hingga proses import berhasil. Sangat disarankan untuk selalu terhubung ke internet karena proses di Android Studio yang sering menggunakan akses internet.

compile 'com.jakewharton:butterknife:8.5.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.5.1'

compile 'com.rengwuxian.materialedittext:library:2.1.4'

3. Edit layout di activity_main.xml

Langkah selanjutnya kita bisa ke activity_main.xml untuk mengatur tampilan aplikasi Android kita. Di aplikasi Form Data Input ini kita akan membuat 5 kolom isian dengan 5 view MaterialEditText, 1 view Button dan beberapa TextView untuk menampilkan hasil data di bawahnya. ViewGroup yang kita gunakan cukup LinearLayout dengan sistem NestedViewGroup sehingga sesuai dengan keinginan kita dan mudah dalam pengaturannya karena cukup menggunakan attribute layout_weight dengan value 1 (android:layout_weight = “1”) agar terlihat sama rata.

Kemudian Anda bisa mengganti kode default yang ada di activity_main.xml dengan kode di bawah ini.

<?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="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context="com.zebhi.formdata.MainActivity">

    <com.rengwuxian.materialedittext.MaterialEditText
        android:id="@+id/input_nama"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Nama"
        android:inputType="textPersonName"
        android:textSize="16sp"
        app:met_floatingLabel="highlight" />

    <com.rengwuxian.materialedittext.MaterialEditText
        android:id="@+id/input_nik"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Nomor Induk Kependudukan"
        android:inputType="number"
        android:textSize="16sp"
        app:met_floatingLabel="highlight" />

    <com.rengwuxian.materialedittext.MaterialEditText
        android:id="@+id/input_umur"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Usia"
        android:inputType="number"
        android:textSize="16sp"
        app:met_floatingLabel="highlight"
        app:met_maxCharacters="2" />

    <com.rengwuxian.materialedittext.MaterialEditText
        android:id="@+id/input_alamat"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Alamat"
        android:inputType="text"
        android:textSize="16sp"
        app:met_floatingLabel="highlight" />

    <com.rengwuxian.materialedittext.MaterialEditText
        android:id="@+id/input_institusi"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Asal Institusi"
        android:inputType="textCapWords"
        android:textSize="16sp"
        app:met_floatingLabel="highlight" />

    <Button
        android:id="@+id/simpan_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="submit"
        android:text="simpan"
        android:textAllCaps="true"
        android:textSize="16sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:background="#eceff1"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Nama" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="NIK" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Umur" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Alamat" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Asal Institusi" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text=":" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text=":" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text=":" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text=":" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text=":" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp">

            <TextView
                android:id="@+id/hasil_nama"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <TextView
                android:id="@+id/hasil_nik"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <TextView
                android:id="@+id/hasil_umur"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <TextView
                android:id="@+id/hasil_alamat"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <TextView
                android:id="@+id/hasil_institusi"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Bila kita klik Run baik menggunakan emulator bawaan Android Studio atau USB Debugging melalui real device maka tampilannya akan seperti ini.

4. Memberikan functional code di main_activity.java

Setelah kita membuat tampilan aplikasi, selanjutnya kita bisa beralih ke main_activity.java untuk memberikan functional code. Pertama kali kita bisa import fungsi ButterKnife atau biarkan saja karena saat coding dapat secara otomatis ter-import. Lalu kita @BindView untuk ID dari EditText di layout seperti di kode di bawah ini. Lalu jangan lupa tambahkan ButterKnife.bind(this); setelah setContentView.

Selanjutnya di @onClick, bisa meniru kode di bawah dan jangan lupa untuk mengambil setiap data (getText()) dari isian dan memunculkan hasilnya (setText()).

package com.zebhi.formdata;

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

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.input_nama)
    EditText inputNama;
    @BindView(R.id.input_nik)
    EditText inputNik;
    @BindView(R.id.input_umur)
    EditText inputUmur;
    @BindView(R.id.input_alamat)
    EditText inputAlamat;
    @BindView(R.id.input_institusi)
    EditText inputInstitusi;

    @BindView(R.id.simpan_button)
    Button simpan_button;

    @BindView(R.id.hasil_nama)
    TextView hasilNama;
    @BindView(R.id.hasil_nik)
    TextView hasilNik;
    @BindView(R.id.hasil_umur)
    TextView hasilUmur;
    @BindView(R.id.hasil_alamat)
    TextView hasilAlamat;
    @BindView(R.id.hasil_institusi)
    TextView hasilInstitusi;


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

    @OnClick(R.id.simpan_button)
    public void btnClicked() {
        String nama = inputNama.getText().toString();
        hasilNama.setText(nama);
        String nik = inputNik.getText().toString();
        hasilNik.setText(nik);
        String umur = inputUmur.getText().toString();
        hasilUmur.setText(umur);
        String alamat = inputAlamat.getText().toString();
        hasilAlamat.setText(alamat);
        String institusi = inputInstitusi.getText().toString();
        hasilInstitusi.setText(institusi);
    }
}

Bila kita klik Run dan aplikasi berjalan, kita dapat mengisi isian di kolom-kolom yang tersedia dan cobalah klik tombol ‘Simpan’ maka akan muncul data di bawahnya seperti ini.

Selamat kita telah membuat Aplikasi Android Form Input Data sederhana. Aplikasi ini hanya memunculkan data saja dari isian kolom yang ada dan kita bisa mengkombinasian dengan database SQLite, Firebase, atau yang lainnya.

Bagi Anda yang masih pemula dalam mendevelop Aplikasi Android seperti saya, bisa mencoba tips dan trik cara cepat dan smart dalam menggunakan Aplikasi Android.

1. Pelajari dan gunakan Shortcut di Android Studio sesering mungkin.

Cara ini dapat mempercepat dalam pembuatan Aplikasi Android. Contoh saja, bayangkan bila Anda harus rename puluhan “ID” yang sama di layout xml, class Java, dsb satu per satu padahal bisa di-rename secara massal.

• Selalu gunakan Shift+F6 dalam rename.

• Gunakan Control+Shift+Spasi untuk Smart Completion dalam coding atau Control+Spasi untuk Basic Completion.

• Gunakan Control+Alt+L untuk merapikan struktur coding. Kita tidak usah mengambil pusing untuk merapikan coding kita agar rapi, cukup tekan Control+Alt+L secara otomatis Android Studio akan merapikan struktur Coding kita.

• Search Everywhere. Klik Shift dua kali untuk mencari apapun di Android Studio.

2. Install KeyPromoter Plugin di Android Studio

KeyPromoter Plugin berguna untuk memberikan rekomendasi pembuatan shortcut kepada Android Developer. Plugin ini berjalan saat Anda mengklik action yang sama di Android Studio, semisal contoh di bawah ini “Print File” diklik sebanyak 3x dan diberikan rekomendasi untuk membuat shortcut.

Cara Install:

• Klik Menu File > Settings > Plugins
• Lalu klik “Install JetBrains plugin”
• Cari “KeyPromoter” lalu klik Install.

Android milik Google menjadi OS Smartphone paling populer selain iOS milik Apple. Berbagai macam Aplikasi dan Game Android tersedia di Google Play Store. Lalu, bagaimana cara kita membuat Aplikasi Android?

Kita akan membahas satu per satu tentang cara membuat Aplikasi Android dari cara paling mudah hingga cara yang berhuhungan dengan Coding atau Pemrograman.

1. MIT App Inventor 2

Cara yang pertama mungkin yang paling mudah karena kita bisa membuat Aplikasi Android tanpa Coding atau utak-atik bahasa pemrograman sama sekali. Dengan metode Drag and Drop, kita bisa membuat Aplikasi bahkan Game Android. Yang perlu diperhatikan di sini adalah kemampuan logika kita dalam membangun Aplikasi.

Link to Create Apps : http://appinventor.mit.edu/explore/

Link to Learn AppInventor : http://www.appinventor.org/

2. Ionic Framework

Ionic merupakan Framework untuk membuat Aplikasi Android dengan teknologi Web yang banyak diketahui oleh Web-Developer. Bagi Anda yang paham dalam membangun Web-based Apps maka Ionic merupakan pilihan yang baik untuk Anda dalam membuat Aplikasi Android.

Link : https://ionicframework.com/

3. Cordova

Cordova menggunakan HTML, CSS, dan Javascript sebagai basis bahasa dalam membuat Aplikasi Android.

Link : https://cordova.apache.org/

4. Adobe Phonegap

Seperti namanya Phonegap didukung oleh Adobe. Sama dengan Cordova, Adobe Phonegap juga menggunakan teknologi web HTML, CSS dan JavaScript dalam membuat Aplikasi Android.

Link : http://phonegap.com/

5. Intel XDK

Intel XDK dibuat oleh Intel untuk membuat aplikasi menggunakan teknologi web seperti HTML5, CSS dan JavaScript. Aplikasi web dikompilasi menggunakan platform Cordova di server online untuk membuat aplikasi hybrid yang cross-platform. Intel XDK didukung oleh Intel.

Link : https://software.intel.com/en-us/intel-xdk

6. Xamarin

Xamarin yang dimiliki oleh Perusahaan Microsoft ini menggunakan bahasa pemrograman C# untuk membangun Aplikasi. Dengan Xamarin kita bisa membuat Aplikasi multi-platform untuk Android, iOS mupun Windows Apps.

Link : https://www.xamarin.com/

7. Application Craft

Application Craft menggunakan teknologi HTML, CSS dan JavaScript sebagai acuan. Anda bisa menggunakan versi Trial selama 45 hari kemudian berlangganan setiap bulannya.

Link : https://www.applicationcraft.com/

8. Corona

Corona adalah Framework cross-platform untuk membangun Aplikasi bahkan Game 2D dengan teknologi API Lua.

Link : https://coronalabs.com/

9. Appcelerator Titanium

Appcelerator Titanium menggunakan JavaScript sebagai bahasa pemrograman untuk membangun Aplikasi.

Link : http://www.appcelerator.com/titanium/7/

Link to Appcelerator : http://www.appcelerator.com/

10. Android Studio

Android Studio merupakan IDE (Integrated Development Environment) yang didukung langsung oleh Google untuk membangun Aplikasi Android. Dengan menggunakan bahasa pemrograman Java sebagai dasarnya.

Link : https://developer.android.com/studio/index.html