Membuat Aplikasi Android

Header

Setelah melakukan hal yang sesuai dengan tutorial Instalasi Windows maka langkah selanjutnya yaitu membuat Aplikasi Android pertama. Namun, sebelum membuat aplikasi ini ada beberapa hal yang harus di-konfigurasi terlebih dahulu pada Android Studio agar dapat digunakan dengan baik.

Instalasi Intel HAXM

Gambar 1 - SDK Manager Intel HAXM
Gambar 1 – SDK Manager Intel HAXM

Intel HAXM menggunakan Intel Virtualization Technology (Intel® VT) untuk mempercepat Android Studio dalam menjalankan Sitem Operasi Android Virtual di PC Anda.

Yang perlu Anda lakukan pertama-tama adalah men-download Intel HAXM (Hardware Accelerated Execution Manager). Caranya adalah dengan membuka SDK Manager. Lalu klik Intel HAXM yang terletak di bagian paling bawah folder Extras, lalu klik Install packages.

Gambar 2 - Installer Intel HAXM
Gambar 2 – Installer Intel HAXM

Setelah berhasil maka silahkan masuk ke folder Extras –> Intel –> Hardware Accelerated Execution Manager lalu jalankan aplikasi intelhaxm-android.exe dan lakukan instalasi IntelHAXM dan klik next terus seperti menginstall aplikasi biasa. Setelah berhasil maka Android Studio telah dapat digunakan.

Membuat Aplikasi Android

Gambar 3 - Membuat Sheet Proyek di Android Studio
Gambar 3 – Membuat Sheet Proyek di Android Studio

Saat Anda membuka Android Studio Anda, pilih Start a new Android Studio Project. Atau dapat dilakukan melalui File –> New –> New Project

Gambar 4 - Memberikan Identitas pada Aplikasi
Gambar 4 – Memberikan Identitas pada Aplikasi

Setelah itu, berikan nama untuk aplikasi Anda. Company domain dapat Anda isikan bebas sesuai domain perusahaan Anda namun isikan secara terbalik misalnya domain perusahaan Anda adalah “facebook.com” maka isikan “com.facebook”. Company domain berfungsi sebagai identitas misalnya jika ada 2 perusahaan yang mengeluarkan aplikasi bernama sama maka company domain dapat mendeteksi perbedaan kedua aplikasi tersebut, ini sangat berguna jika Anda ingin merilis aplikasi Anda di Google Play atau platform sejenis. Selanjutnya yaitu project location, Anda bebas menyimpan proyek Anda dimanapun di komputer Anda.

Gambar 5 - Memberikan Form Factor pada Aplikasi
Gambar 5 – Memberikan Form Factor pada Aplikasi

Form Factor adalah ukuran layar dan versi Android dimana aplikasi akan berjalan, untuk sementara cukup centang Phone and Tablet dan klik Next.

Gambar 6 - Memberikan Activity
Gambar 6 – Memberikan Activity

Selanjutnya adalah tahap membuat activity pada perangkat Android, untuk sementara gunakan Blank Activity.

Gambar 7 - Menamai Activity
Gambar 7 – Menamai Activity

Setelah itu akan muncul tampilan sheet kosong yang berisi identitas dari activity yang baru saja Anda buat. Anda bebas menamainya.

Gambar 8 - Tampilan Awal
Gambar 8 – Tampilan Awal

Setelah berhasil melakukan langkah-langkah di atas maka akan muncul tampilan awal seperti gambar diatas.

Anatomi Aplikasi Android

Sebelum menjalankan Aplikasi Anda, pelajarilah kegunaan beberapa direktori-direktori dan file dalam Android project ini.

Gambar 9 - Folder Android Studio
Gambar 9 – Folder Android Studio

[table id=10 /]

Bagian selanjutnya akan menjelaskan gambaran beberapa file penting yang  perlu Anda ketahui

File Main Activity

File ini bertipe java dengan nama MainActivity.java. file inilah yang sebenarnya di-konversi ke mesin Dalvik dan menjalankan aplikasi Anda. Berikut adalah kode yang secara otomatis dibuat oleh aplikasi Anda untuk program Hello World!:

package com.nbs.app.helloworld;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ActionBarActivity {

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Disini, R.layout.activity_main di-referensikan ke file activity_main.xml yang terdapat dalam folder res/layout. Dan metode onCreate() adalah satu dari banyak metode yang dipicu ketika sebuah activity dijalankan.

The Manifest File

Komponen apapun yang ingin ada gunakan di aplikasi harus dideklarasikan terlebih dahulu melalui file AndroidManifest.xml yang terletak dalam folder res. file ini berfungsi sebagai interface antara Sistem Operasi Android dan aplikasi. Jadi, jika ada komponen yang tidak dideklarasikan pada file ini, maka komponen tersebut tidak akan dibaca oleh Sistem Operasi. Sebagai contoh, file manifest default akan terlihat seperti ini:

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

Disini tag <application>…</application> meng-kapsulasi komponen yang berhubungan dengan aplikasi. Artribut android:icon  akan merujuk pada icon aplikasi yang tersedia dalam folder res/drawable-hdpi. Aplikasi akan menggunakan gambar dengan nama ic_launcher.png yang terletak pada folder drawable.

Tag <activity> berfungsi untuk menentukan sebuah activity dan atribut android:label digunakan untuk menentukan nama dari label yang digunakan untuk activity tersebut sedangkan artribut android:name menentukan nama lengkap dari kelas yang digunakan. kita dapat menggunakan banyak activity menggunakan tag <activity>

action untuk intent filter dinamakan android.intent.action.MAIN  untuk mengindikasikan bahwa acitvity ini digunakan sebagai activity awal yang dimuat ketika aplikasi baru dimulai. sedangkan category untuk intent-filter dinama android.intent.category.LAUNCHER untuk membuat aplikasi dapat dijalankan dari icon aplikasi.

@string mereferensikan ke file strings.xml dan akan dijelaskan dibawah. Sehingga, @string/app_name menunjukkan bahwa string app_name yang didefinisikan di file strings.xml, yaitu “Hello World”. Dengan cara yang sama, string yang lain dapat digunakan dalam aplikasi.

Berikut ini adalah list tag yang akan digunakan pada file manifest untuk menspesifikasikan komponen aplikasi Android lainnya.

  • <activity>tag untuk activity
  • <service> tag untuk services
  • <receiver> tag untuk broadcast receivers
  • <provider> tag untuk content providers

The Strings File

file strings.xml terletak dalam folder res/values yang akan berisi semua text yang digunakan oleh aplikasi Android. Contohnya : nama tombol, label, text dan berbagai tipe string kedalam file ini. Sebagai contoh, strings file secara default akan terlihat sebagai file berikut:

<resources>
   <string name="app_name">HelloWorld</string>
   <string name="hello_world">Hello world!</string>
   <string name="menu_settings">Settings</string>
   <string name="title_activity_main">MainActivity</string>
</resources>

The Layout File

activity_main.xml adalah file layout yang terdapat pada folder res/layout yang direferensikan bagi aplikasi ketika membangun interfacenya. Bagian inilah yang akan sangat banyak dimodifikasi untuk mengganti layout dari aplikasi . Untuk aplikasi “Hello World!”, berikut ini adalah layout yang di-generate secara otomatis:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >

   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:padding="@dimen/padding_medium"
      android:text="@string/hello_world"
      tools:context=".MainActivity" />

</RelativeLayout>

Ini adalah sample dari RelativeLayout  simple yang akan kita pelajari dalam bab yang terpisah. TextView adalah sebuah controller Android yang digunakan untuk membuat GUI( Graphical User Interface) dan memiliki beberapa artribut seperti android:layout_width yang digunakan untuk mengatur lebar, android:layout_height yang digunakan untuk mengatur tinggi, dll.

Menjalankan Aplikasi

Coba jalankan aplikasi Hello World! yang baru saja Kita buat. Untuk menjalankan aplikasi dari Android Studio, buka salah satu file activity dan klik ikon run Eclipse Run Icon  di  toolbar. Jika Anda telah men-setting semuanya dengan baik, maka Emulator Android akan ditampilkan dalam 2 atau 3 menit waktu compile.

Gambar 10 - Aplikasi Hello World
Gambar 10 – Aplikasi Hello World

Contoh Aplikasi 2 – Menghitung Luas Persegi Panjang

Karena jika hanya satu contoh biasa saja, maka dalam materi kali ini kita akan menggunakan lebih dari satu contoh. Kita akan membuat aplikasi menghitung luas persegi panjang. Langkah-Langkah membuatnya adalah:

1. Buat new project dengan blank Activity ( Seperti tutorial diatas )

Gambar 11 - Text Activity_Main
Gambar 11 – Text Activity_Main

2. Klik tulisan Text yang dilingkari kuning lalu ketikkan kode ini ke bagian layout Activity_main.xml di kategori text

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:orientation="vertical">
 
    <TextView android:text="Panjang" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"/>
    <EditText
        android:id="@+id/edt_panjang"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="0"
        android:inputType="numberDecimal"
        android:layout_marginBottom="5dp"/>
    <TextView android:text="Lebar" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"/>
    <EditText
        android:id="@+id/edt_lebar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="0"
        android:inputType="numberDecimal"
        android:layout_marginBottom="5dp"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn_hitung"
        android:text="Hitung"
        android:layout_marginBottom="8dp"/>
 
    <TextView android:text="Hasil" android:id="@+id/txt_luas" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:textSize="18sp"
        android:textStyle="bold"/>
 
</LinearLayout

Sumber Kode : Dicoding blog

3. Ketikkan kode berikut ini ke dalam file MainActivity.Java

package com.nbs.app.hitungluas;
 
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
 
 
public class MainActivity extends ActionBarActivity {
    private EditText edtPanjang, edtLebar;
    private Button btnHitung;
    private TextView txtLuas;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        getSupportActionBar().setTitle("Hitung Luas Persegi Panjang");
 
        edtPanjang = (EditText)findViewById(R.id.edt_panjang);
        edtLebar = (EditText)findViewById(R.id.edt_lebar);
        btnHitung = (Button)findViewById(R.id.btn_hitung);
        txtLuas = (TextView)findViewById(R.id.txt_luas);
 
        btnHitung.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String panjang = edtPanjang.getText().toString().trim();
                String lebar = edtLebar.getText().toString().trim();
 
                double p = Double.parseDouble(panjang);
                double l = Double.parseDouble(lebar);
 
                double luas = p * l;
 
                txtLuas.setText("Luas : "+luas);
            }
        });
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
 
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
 
        return super.onOptionsItemSelected(item);
    }
}

Sumber Kode : Dicoding blog

4. Run project Android Studio maka akan terlihat seperti ini:

 

Gambar 12 - Hitung Luas

 

SELAMAT! Anda telah mengembangkan aplikasi android pertama Anda 😀 Tetap ikuti tutorial selanjutnya step by step untuk menjadi developer Android yang hebat. NB : Untuk mengerti kode yang digunakan pada aplikasi-aplikasi Android Studio, silahkan mulai mempelajari bahasa pemrograman Java.

Jika artikel ini bermanfaat buat Anda, mohon untuk di Share because “Sharing is Caring”

Referensi:

  1. tutorialspoint.com,
  2. Developer.android.com,
  3. mediatutorial.web.id,
  4. Dicoding.com,

One Comment

Leave a Reply

Your email address will not be published.