Tutorial Android 7 : Jenis Layout Pada Android

Pada artikel ini akan dijelaskan mengenai layout yang bisa digunakan dalam pembuatan aplikasi android. Layout adalah sesuatu yang mendefinisikan struktur visual untuk pengguna atau dapat dikatakan juga sebagai suatu view / tampilan yang ditampilkan kepada pengguna. Pada android layout memegang peranan penting terutama pada user interface dan memungkinkan kita untuk membuat tampilan desain menggunakan file XML. Semua file layout harus di simpan dalam path /res/layout folder.
Ada beberapa jenis layout yang bisa kita gunakan dalam pemrograman android, diantaranya :

1. Linear Layout
2. Relative Layout
3. Table Layout
4. Frame Layout
5. Grid Layout

Linear Layout
Linear layout adalah layout yang terstruktur. linear layout akan meletakkan elemen yang ada di dalamnya secara berurutan tergantung orientationnya. jika  orientationnya vertical, maka peletakan elemen akan terurut kebawah. Sedangkan jika orientationnya horizontal maka peletakan elemennya akan terurut ke samping.

Relative Layout
Relative layout adalah layout yang menampilkan elemen-elemen view dalam posisi yang relatif (sesuai dengan keinginan kita). Dengan relative layout kita akan meletakkan elemen secara bebas, tidak terurut seperti linear layout dan peletakannya berdasarkan kepada yang lain misal kepada elemen lain. Sebuah desain tampilan aplikasi bisa dibuat lebih mudah dan sederhana menggunakan Relative Layout dibandingkan dengan Linear Layout.

Table Layout
Table layout adalah layout yang menampilkan elemen view berdasarkan baris dan kolom. Jika kita pernah membuat aplikasi web ini seperti penggunaan tag <table> di HTML dengan barisnya <tr> dan kolom <td>.

Frame Layout
Frame Layout adalah layout yang menampilkan element-element di dalamnya saling menumpuk satu sama lain. Bedanya antara layout ini dengan Relative Layout adalah pada Relative Layout, kita dapat menempatkan sebuat elemen / widget posisinya di sebelah kanan/kiri/atas/bawah, sedangkan pada Frame Layout, element yang ditulis lebih akhir akan diletakkan di depan element sebelumnya, sehingga akan menutupi kecuali jika warnanya transparan.

Grid Layout
Grid layout adalah layout yang menampilkan elemen-elemen didalamnya dalam bentuk grid, contohnya seperti galery foto. Layout ini digunakan mulai pada Android 4.0

Baca Selengkapnya »

Tutorial Android 6 : Berpindah Activity Dengan Intent

Pada artikel ini akan dijelaskan mengenai Intent pada pemrograman Android, intent merupakan suatu objek yang terdapat dalam suatu activity dimana dengan objek tersebut bisa melakukan komunikasi dengan activity yang lain, baik activity yang sudah terdapat pada fungsi internal android (Browser, kamera, dll) ataupun memanggil activity yang lain baik dalam satu package ataupun beda package dalam satu projek.
Ada 2 tipe intent dalam pemrograman android,
1. Implicit intent adalah intent yang memanggil fungsi activity yang sudah ada di fungsi internal android seperti Dial Number, Open Browser dan lainya. Berikut contoh penggunaan code implicit intent,

Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("http://google.com"));
startActivity(intent);

2. Explicit Intent adalah intent yang memanggil Activity lain yang masih dalam 1 project. Berikut adalah contoh penggunaan code explicit intent,

Intent intent = new Intent(ActivityOne.this, ActivityTwo.class);
startActivity(intent);

Intent dapat digunakan untuk transfer data antar Activity. Pada saat sebuah Activity memanggil Activity yang lain, Intent dapat menyimpan data informasi yang ikut dikirimkan pada pemanggilan tersebut. Kita dapat mengirimkan data ke activity tujuan dengan method putExtra() dan method getExtra() ketika menerima atau memanggil data tersebut.

Mungkin masih bingung melihat code-code diatas dan bagaimana menggunakannya, oleh sebab itu mari kita buat contoh aplikasi mengenai pembahasan intent ini dengan membuat aplikasiContact Selection.
1. Buat project baru di Android Studiodengan nama Application Name "Contact Selection"

2. Pilih minimum SDK Android 4.0 (Ice Cream Sandwich) kemudian pilih "Blank Activity" dan ganti nama Activity Name dengan "ContactIntentActivity"

3.Buat activity baru dengan cara, klik kanan pada app di dalam project yang tadi kita buat pilih New -> Activity -> Blank Activity

4. Isikan Activity Name dengan "ContactPageActivity" dan Layout Name dengan "activity_contact_page"

5. Buka file "activity_contact_intent.xml" pada folder res/layout dan modifikasi layout atau code didalamnya seperti berikut dengan menambahkan komponen ListView di dalam LinearLayout. 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>
</LinearLayout>

6. Buka file "activity_contact_page.xml" pada folder res/layout dan modifikasi layout atau code didalamnya seperti berikut dengan menambahkan beberapa komponen TextView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/contactName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        />

    <TextView
        android:id="@+id/contactPhone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/contactWebsite"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

7. Buatlah object Contact dengan cara klik kanan pada com.android.contactselection New -> Java Class. 

8. Isikan dengan nama class ContactObject dan klik Finish.

9. Pada class ContactObject buatlah variable dengan nama : name, phone dan website dengan type String seperti berikut,

import java.io.Serializable;

public class ContactObject implements Serializable {
    private static final long serialVersionUID = 1L;
    private String name;
    private String phone;
    private String website;

    public ContactObject(String name, String phone, String website) {
        super();
        this.name = name;
        this.phone = phone;
        this.website = website;
    }

    public String getName()
    {
        return name;
    }

    public void setName(String name)
    {
        this.name = name;
    }

    public String getPhone()
    {
        return phone;
    }

    public void setPhone(String phone)
    {
        this.phone = phone;
    }

    public String getWebsite()
    {
        return website;
    }

    public void setWebsite(String website)
    {
        this.website = website;
    }
}

10. Buka ContactIntentActivity didalam folder java, dan isikan code seperti berikut

import android.content.Intent;
import android.net.Uri;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List;

public class ContactIntentActivity extends ActionBarActivity {
    private ListView intentListView;
    private List<ContactObject> contactsList;
    private ArrayAdapter<String> adapter;
    private final int PHONE = 0;
    private final int WEBSITE = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_contact_intent);
        intentListView = (ListView) findViewById(R.id.listView1);
        contactsList = new ArrayList<ContactObject>();
        contactsList.add(new ContactObject("Android One", "111-1111-1111", "www.android.com"));
        contactsList.add(new ContactObject("Android Two", "222-2222-2222", "www.android.com"));
        contactsList.add(new ContactObject("Android Three", "333-3333-3333", "www.android.com"));
        contactsList.add(new ContactObject("Android Four", "444-4444-4444", "www.android.com"));

        List<String> listName = new ArrayList<String>();
        for (int i = 0; i < contactsList.size(); i++)
        {
            listName.add(contactsList.get(i).getName());
        }
        adapter = new ArrayAdapter<String>(ContactIntentActivity.this,
                android.R.layout.simple_list_item_1, listName);
        intentListView.setAdapter(adapter);
        intentListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id)
            {
                Intent i = new Intent(ContactIntentActivity.this, ContactPageActivity.class);
                i.putExtra("Object", contactsList.get(position));
                startActivityForResult(i, 0);
            }
        });
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode,
                                    Intent data)
    {
        if (data == null) {
            return;
        }
        Bundle resultData = data.getExtras();
        String value = resultData.getString("value");
        switch (resultCode)
        {
            case PHONE:
                startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + value)));
                break;
            case WEBSITE:
                startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("http://" + value)));
                break;
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        getMenuInflater().inflate(R.menu.menu_contact_intent, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item)
    {     
        int id = item.getItemId();      
        if (id == R.id.action_settings)
        {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

11. Buka ContactPageActivity dan isikan kode berikut :

import android.content.Intent;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;

public class ContactPageActivity extends ActionBarActivity implements View.OnClickListener {
    private final int PHONE = 0;
    private final int WEBSITE = 1;
    private TextView contactName;
    private TextView contactPhone;
    private TextView contactWebsite;
    private ContactObject contactObject;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.contact_page);
        contactName = ( TextView )findViewById(R.id.contactName);
        contactPhone = ( TextView )findViewById(R.id.contactPhone);
        contactWebsite = (TextView)findViewById(R.id.contactWebsite);
        Bundle extras = getIntent().getExtras();
        if( extras == null)
            return;
        contactObject = (ContactObject)
                getIntent().getSerializableExtra("Object");

        contactName.setText(contactObject.getName());
        contactPhone.setText("Phone: " + contactObject.getPhone());
        contactWebsite.setText("Website: " + contactObject.getWebsite());

        contactPhone.setOnClickListener(this);
        contactWebsite.setOnClickListener(this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        getMenuInflater().inflate(R.menu.menu_contact_page, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item)
    {
        int id = item.getItemId();

        if (id == R.id.action_settings)
        {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onClick(View v) {
        switch(v.getId()){
            case R.id.contactPhone:
                Intent i = new Intent();
                i.putExtra("value", contactObject.getPhone());
                setResult(PHONE, i);
                finish();
                break;
            case R.id.contactWebsite:
                i = new Intent();
                i.putExtra("value", contactObject.getWebsite());
                setResult(WEBSITE, i);
                finish();
                break;
        }
    }
}

12. Pada AndroidManifest.xml tambahkan 2 permission untuk mengijinkan aplikasi konek ke internet dan melakukan panggilan telepon.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CALL_PHONE"/>

13. Jalankan aplikasinya.

Demikian penjelasan dan contoh aplikasi android mengenai Intent, semoga bermanfaat.

Baca Selengkapnya »

Tutorial Android 5 : Mengenal dan Membuat Android Fragment

Apa itu Android Fragment ?

Fragment itu seperti Activity yang menghandle sebuah layout tapi bedanya fragment tidak dapat berjalan individual,  fragment selalu membutuhkan sebuah Activity karena fragment selalu berjalan di atas Activity. Apabila kita buat sebuah fragment maka fragment tersebut dapat kita gunakan untuk beberapa Activity dan beberapa fragment bisa dimasukan ke satu activity.
Untuk menggunakan Fragment, memerlukan API level 11 (Android 3.0 - Honeymoon). Karena sebenernya Fragment ini dibuat untuk resolusi layar Android yang besar, contohnya seperti Tab dan yang lainnya. Tetapi untuk versi sebelumnya bisa saja digunakan dengan menambahkan beberapa library.
Contoh penggunaan fragment bisa kita lihat di aplikasi Google Play di sebelah kiri atas terdapat 3 garis ketika kita klik akan tampil sebuah menu, nah tampilan menu tersebut menggunakan fragment.
Untuk pembuatan menu dengan fragment akan di bahas pada artikel selanjutnya, sekarang kita akan mencoba membuat fragment yang sedehana.

Membuat Fragment Pada Activity

1. Bukalah Android Studio kemudian new project

Isikan Application Name dengan "SimpleFragment"

2. Pilih Target Android Device disini pilihlah yang versi API 15 (IceCreamSandwich)

3. Pilihlah Black Activity dan isikan Activity Name dengan "Main Activity"

4. Buatlah class baru dengan nama "CobaFragment"

5. Pada class fragment isikan code berikut yang meng-extend Fragment

public class CobaFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.cobafragment_layout, container, false);
    }
}

6. Kemudian buatlah layout untuk fragment nya dengan nama "cobafragment_layout.xml" 

7. Isikan code berikut kedalam "cobafragment_layout.xml" 


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff3fb333">

    <TextView
        android:layout_margin="40dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Coba Fragment"
        android:id="@+id/textView" />
</LinearLayout>

8. Buka layout activity_main.xml di dalam folder layout dan isikan code berikut :

<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" tools:context=".MainActivity">

    <fragment
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:name="com.androidatc.simplefragment.CobaFragment"
        android:id="@+id/fragment"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

9. Jalankan aplikasi tersebut, jika berhasil maka akan muncul tampilan seperti berikut

Demikian penjelasan dan contoh tentang android fragment semoga bermanfaat...

Baca Selengkapnya »

Tutorial Android 4 : Mengenal Android Activity

Activity adalah sebuah class yang digunakan untuk membuat sebuah layout yang akan ditampilkan pada layar handphone dimana layout ini berisi interface-interface seperti button, listview, label, edit text dll. Jadi activity ini dapat di artikan sebagai tempat interaksi antara pengguna dengan aplikasi, seperti contohnya membuat panggilan telepon, mengirim pesan, atau mengirim email.
Sebuah Activity mengatur satu halaman user interface aplikasi. Sehingga jika sebuah aplikasi Android memiliki beberapa halaman user interface yang saling berinteraksi, berarti aplikasi tersebut memiliki beberapa Activity yang saling berinteraksi.

Ketika kita membuat sebuah aplikasi android di Android Studio seperti contoh pembuatan "Hello World" di artikel sebelumnya (Tutorial Android 3 : Membuat Aplikasi Pertama - "Hello World!" ) kita bisa melihat di dalam direktori java terdapat MainActivity.java yang merupakan sebuah activity, untuk lebih jelas bisa dilihat di gambar berikut :

Membuat Sebuah Activity
Untuk membuat sebuah activity, misalnya kita akan membuat sebuah activity pada aplikasi Hello World yang sudah kita buat sebelumnya.
1. Right-click pada folder java kemudian New -> Activity -> Blank Activity seperti gambar berikut,

2. Isikan Activity Name nya dengan "MyActivity" dan biarkan isian yang lainnya seperti itu. Kemudian klik Finish

3. Setiap Activity itu harus memiliki file layout dengan format xml, sehingga ketika kita tadi membuat activity dengan nama MyActivity maka secara otomatis Android Studio membuat layoutnya dengan nama activity_my.xml.

4. Setiap kita membuat sebuah activity, nama activity tersebut harus di registerkan ke dalam AndroidManifest.xml yang berada pada folder manifest. Pada Android Studi kita tidak perlu repot-repot meregisterkan karena sudah otomatis teregister pada saat pembuatan activity tadi.

Demikian penjelasan mengenai Android Activity, semoga dengan artikel ini bisa membantu dalam proses pembelajaran tentang pemmrograman android.

Baca Selengkapnya »

Tutorial Android 3 : Membuat Aplikasi Pertama - "Hello World!"

Seperti biasa ketika kita akan memulai mempelajari sebuah pemrograman yang pertama kita lakukan adalah membuat aplikasi hello world. Pembuatan aplikasi ini sangan berguna untuk mengetes android studio yang sebelumnya kita install sudah berhasil ataukah masih terdapat masalah, selain itu juga ketika kita pertama kali menjalankan aplikasi di Android Studio kita memerlukan emulator, oleh karena itu pada artikel ini kita akan mempelajari bagaimana membuat sebuah aplikasi hello world dan membuat sebuat emulator di Android Studio ini.

Untuk membuat aplikasi "Hello World!" ikutilah langkah berikut :
Pertama buka Android Studio, sampai muncul tampilan dibawah. Selanjutnya klik New Project

Isikan Application name dan Company domain sesuai yang anda inginkan. Karena kita disini akan membuat aplikasi Hello world, aplication name isikan dengan "HelloWorld" dan company domain isikan "androidatc.com" seperti gambar di bawah ini

Pastikan "Phone and Tablet" terceklis dan pilihlan Minimum SDK nya kemudian klik Next. Pada tahap ini kita melihat pilihan TV, Wear dan Glass, jika pada android studio kita sudah terinstall Android 5.0 Lollipop maka kita bisa membuat aplikasi untuk platform ketiga pilihan tadi.

Pada halaman ini pilihlah type activity yang akan kita buat, untuk aplikasi ini kita pilih "Blank Activity", kemudian Next.

Pada tahap ini isikan aktivity name, layout name, title dan menu resource name.

Setelah terisi klik Finish dan tunggu beberapa saat sampai muncul halaman seperti berikut :

Proses pembuatan project selesai dilakukan. Selanjutnya kita akan menjalankan aplikasi/project tersebut, tetapi ketika kita pertama kali membuat aplikasi / project kita harus membuat Android Virtual Device (AVD) atau sering disebut emulator. Kenapa kita mesti membuat AVD tersebut, itu karena membantu kita dalam menjalankan aplikasi yang sudah kita buat tanpa menggunakan perangkat hanphone langsung. Bagaimana kita membuat AVD tersebut, ikuti langkah berikut :

Klik icon AVD Manager di toolbar Android Studio

Kemuidan akan muncul halaman seperti berikut, dan klik tombol "Create Virtual Device"

Pada bagian "Select Hardware" pilihlah hadware yang akan kita gunakan untuk melakukan test terhadap aplikasi yang sudah kita buat tadi. Jika kita ingin membuat device lain selain yang tertera di list tersebut kliklah button "New Hardware Profil".

Pilih Nexus 6 kemudian klik Next. Selanjutnya pilihlah version OS Androidnya untuk dijalankan di emulator. Kita pilih saja versi Android 5 (Lollipop) kemudian klik Next.

 

Selanjutnya isikan nama AVD nya, disarankan menulis nama AVD ini sesuai dengan nama hardware dan versi OS nya, misalnya "Nexus 6 API 21". Setelah setelai klik tombol Finish sehingga muncul tampilan sperti ini :

Jalankanlah emulator yang tadi sudah kita buat, dengan cara klik icon play di kolom Action.

Tunggu beberapa saat sampai muncul emulator handphone androidnya seperti berikut :

Pembuatan AVD sudah kita lakukan dan emulator sudah berjalan, selanjutnya kita jalankan aplikasi "Hello world" yang sudah kita buat tadi dengan cara klik icon Run di toolbar Android Studio seperti berikut :

Setelah klik icon tersebut akan muncul tampilan seperti berikut :

Pilihlah device / emulator yang sedang berjalan kemudian klik OK. Tunggu beberapa saat sampai muncul tampilan di emulatornya seperti berikut :

Dengan munculnya seperti gambar tersebut maka aplikasi Hello World yang kita buat tadi berhasil dijalankan.

Baca Selengkapnya »

Tutorial Android 2 : Mengenal Dan Menggunakan Android SDK Manager di Android Studio

Android SDK Manager adalah alat yang dapat kita gunakan untuk men-download package-package yang berbeda untuk pembuatan aplikasi android seperti platform tools, Android SDK build tools, Android platform images dan komponen-komponen lainnya.Dengan android SDK ini kita bisa mendownload sebuah emulator untuk membantu kita dalam melakukan test aplikasi yang kita buat tanpa harus mencoba langsung menggunakan handphone android.

Menjalankan Android SDK Manager
Ketika kita pertamakali menjalankan Android Studio setelah selesai installasi akan muncul halaman seperti ini,

Untuk membuka android SDK Manager, kita pilih Configure sehingga muncul tampilan seperti berikut :

Centang / ceklis komponen yang ingin kita install ke Android Studio yang sudah kita install sebelumnya.

Jika kita sudah membuat sebuah project dan kita ingin membuka Android SDK Manager ini, pilih saja di menu Tools -> Android -> SDK Manager .
Atau dengan mengklik button di toolbar seperti gambar berikut :

Baca Selengkapnya »

Tutorial Android 1 : Memulai Pemrograman Android - Install Android Studio

Sebelum kita memulai membuat program android tahap yang paling pertama yang harus kita lakukan adalah melakukan istalasi android application develompent.
Pada tutorial pembuatan aplikasi android ini kita akan menggunakan Android Studio. Didalam penginstall android studio ini  akan memungkinkan mengistall juga komponen-komponen seperti berikut:

• Android Studio IDE
• Android SDK tools
• Android platform terakhir (Android 5.0 - Lollipop)
• Android 5.0 emulator (Aplikasi yang nanti akan dibuat bisa ditest atau dijalankan dengan emulator ini).

Komponen-komponen diatas wajib kita install pada komputer yang nanti akan digunakan dalam proses pembuatan aplikasi android. Kita tidak perlu menginstall satu persatu komponen tersebut, karena sudah langsung terinstall ketika kita menginstall Android Studio.


Untuk menginstall Android Studio, ikuti langkah berikut :
1. Download android studio pada link berikut : http://developer.android.com/sdk/

2. Setelah selesai melakukan download, jalankan file tersebut (android-studio-bundle-xx.xxxxxxx.exe), dan ikuti langkah-langkah penginstallanya sampai selesai.

Catatan :
Jika di komputer kita belum terinstall Java Development Kit (JDK), proses instalasi Android Studio tersebut tidak akan bisa dilanjutkan karena komponen tersebut wajib ada sebelum kita menginstall Android Studio. Untuk menginstall JDK tersebut bisa didownload di link berikut http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 

download jdk tersebut sesuai dengan OS yang kita gunakan kemudian lakukan pengistallan. Setelah selesai lakukan kembali proses installasi Android Studio tersebut.

Setelah selesai diinstall, buka folder tempat android studio diinstall, misalnya kita menginstall secara default berada pada C:\Program Files\Android\Android Studio\bin dan jalankan studio.exe (untuk 32bit) atau studio64.exe (untuk 64bit).

Setelah startup muncul tampilan installasi AndroidSDK seperti berikut :

Tunggulah proses ini sampai selesai, pada proses ini kita membutuhkan koneksi ke internet. untuk mendownload androidSDK nya
Setelah selesai proses tersebut, maka akan muncul tampilan seperti berikut :

Jika sudah muncul tampilan diatas, proses instalasi android studio berhasil dan selanjutnya kita bisa buat aplikasi android.

Baca Selengkapnya »

Menampilkan Hasil Perhitungan Secara Langsung Tanpa Klik Tombol Menggunakan Perintah Keyup JQuery

Pada kesempatan kali ini kita akan coba membuat suatu aplikasi sederhana untuk menampilkan hasil perhitungan tanpa harus mengklik tombol. Misalnya pada aplikasi penjualan kita memasukan nilai suatu barang yang harganya 25.000 kemudian barang tersebut ada diskonya sebesar 20%. Yang kita inginkan adalah nilai akhir / total yang harus dibayar itu secara otomatis langsung muncul tanpa harus klik tombol. Lihatlah gambar berikut,

Pada gambar diatas textbox "Yang Harus Dibayar" itu akan otomatis terisi setelah textbox "Diskon" terisi.

Dalam pembuatan aplikasi tersebut kita akan menggunakan perintah keyup pada JQuery. Berikut proses pembuatannya :

1. Buatlah tag HTML seperti berikut,
<table border="0" cellpadding="5" align="center">
  <form action="" method="post">
     <tr>
        <td>Harga :</td> 
        <td><input type="text" name="harga" id="harga" /></td>
     </tr> 
     <tr>
        <td>Diskon :</td> 
        <td><input type="text" name="diskon" id="diskon" /></td>
     </tr>
     <tr>
        <td>Yang Harus Dibayar :</td> 
        <td><input type="text" name="totBayar" id="totBayar" disabled /></td>
     </tr>  </form>
</table>



2. Buatlah sintak JQuerynya seperti berikut,
<script type="text/javascript">
  $(document).ready(function(){
      $("#diskon").keyup(function(){
        var harga  = parseInt($("#harga").val());
        var diskon  = parseInt($("#diskon").val());
        var total = harga - (harga*(diskon/100));
        $("#totBayar").val(total);
      });
  });
</script>

3. Jangan lupa sertakan library jquery.
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>

4. Berikut sintak keseluruhannya,
<html>
<head>
  <title>Contoh Perhitungan Langsung</title> 
 <script src="code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#diskon").keyup(function(){
        var harga  = parseInt($("#harga").val());
        var diskon  = parseInt($("#diskon").val());
        var total = harga - (harga*(diskon/100));
        $("#totBayar").val(total);
      });
    });
  </script>
</head>
<body>
<table border="0" cellpadding="5" align="center">
  <form action="" method="post">
     <tr>
        <td>Harga :</td> 
        <td><input type="text" name="harga" id="harga" /></td>
     </tr> 
     <tr>
        <td>Diskon :</td> 
        <td><input type="text" name="diskon" id="diskon" /></td>
     </tr>
     <tr>
        <td>Yang Harus Dibayar :</td> 
        <td><input type="text" name="totBayar" id="totBayar" disabled /></td>
     </tr>  </form>
</table> </body>
</html>

5. Simpan dengan nama penjualan.html
6. Jalankan file penjualan.html tersebut pada browser yang kita inginkan.

Untuk lebih jelas bisa lihat pada link berikut

Semoga bermanfaat..

Baca Selengkapnya »

Membuat Menu Dropdown Dengan CSS

Dalam sebuah aplikasi berbasis web atau website kita sangat membutuhkan yang namanya menu, karena dengan adanya menu di aplikasi yang kita buat dapat memudahkan user / pengguna untuk pergi ke halaman yang diinginkan.

Pada kesempatan kali ini kita akan mencoba membuat contoh pembuatan menu dropdown yang sederhana dengan bantuan CSS. Pertama buatlah tag list HTML seperti berikut

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Berita</a></li>
 <li><a href="#">Pengumuman</a></li>
 <li><a href="#">Buku Tamu</a></li>
  <li><a href="#">Tentang Kami</a></li>
</ul>

Pada kode diatas akan terbentuk 5 buah menu. Jika kita menginginkan submenu atau anak dari menu diatas kita tambahkan tag list baru di dalam list yang tadi kita buat, seperti berikut,

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Berita</a>
     <ul>
          <li><a href="#">Mancanegara</a></li>
          <li><a href="#">Nasional</a></li>
          <li><a href="#">Olahraga</a></li>
     </ul>
 </li>
 <li><a href="#">Pengumuman</a></li>
 <li><a href="#">Buku Tamu</a></li>
  <li><a href="#">Tentang Kami</a></li>
</ul>

Setelah kode html tadi kita buat, saatnya kita menambahkan CSS untuk membuat list tadi menjadi menu yang kita inginkan. Sebagai contoh tuliskan sintak CSS seperti berikut

#menu{

   padding: 0;

}

#menu li{

  float: left;
  background: #4679BD;
  border: 1px solid #939C8A;
  list-style-type: none;

}

#menu li ul{

   display: none;

}

 #menu li a{

    text-decoration: none;

    display: block;

    padding: 10px;

    color: #edffec;

    font-family: tahoma;

}

#menu li a:hover{

   background: black;

}

#menu li:hover ul{

   display: block;

   position: absolute;

}

#menu li:hover li{

   float: none;

}

#menu li ul{

   padding: 0px;

}

Setelah dibuatkan CSS nya seperti diatas, maka hasilnya akan seperti gambar berikut,

Untuk lebih jelas bisa lihat contoh pada link berikut

Baca Selengkapnya »