Cara Membuat Desain Menu Dashboard pada Android

Selamat Pagi Readers!

Desain dashboard pada android biasanya digunakan pada homescreen suatu aplikasi android. Dasboard berisi icon beserta nama menu sesuai dengan jenis dari aplikasi yang ingin dibuat. Untuk membuat desain dasboard pada android ada beberapa cara, namun cara yang menurut saya yang paling mudah adalah dengan memanfaatkan TableLayout. Dengan menggunakan TableLayout ukuran pada setiap kolom akan secara otomatis sama tanpa harus ditentukan sebelumnya. Untuk lebih jelasnya ikuti tahap demi tahap berikut ini.

1. Buat project baru di Eclipse dengan cara File ⇒ New Project ⇒ Application Project dan beri nama main classnya MainActivity.  Yang belum jelas bisa klik disni
2. Selanjutnya buatlah Sebuah file activity_main.xml dengan cara klik kanan pada res/layout ⇒ New ⇒ Android XML File  dan paste code di bawah ini

<RelativeLayout
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:background="@drawable/bg"
android:layout_height="match_parent"
>
<TableLayout
android:id="@+id/tableLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/imageView1"
android:layout_marginTop="10dp"
android:shrinkColumns="*"
android:stretchColumns="*" >
<TableRow
android:id="@+id/tableRowBtn"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:paddingBottom="10dp"
>
<TextView
android:id="@+id/txa"
android:text=""
android:padding="2dp">
</TextView>
<Button
android:id="@+id/btn_grafik"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/icon_grafik"
android:text="Grafik"
android:textStyle="bold"
android:background="@layout/activity_button_menu"
android:gravity="center|center_horizontal"
android:padding="1dp"
/>
<TextView
android:id="@+id/txb"
android:text=""
android:padding="2dp">
</TextView>
<Button
android:id="@+id/btnLokasi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/icon_lokasi"
android:text="Lokasi"
android:textStyle="bold"
android:background="@layout/activity_button_menu"
android:gravity="center|center_horizontal"
android:padding="1dp" />
<TextView
android:id="@+id/txc"
android:text=""
android:padding="2dp">
</TextView>
<Button
android:id="@+id/btnLike"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/icon_like"
android:text="Like"
android:textStyle="bold"
android:background="@layout/activity_button_menu"
android:gravity="center|center_horizontal"
android:padding="1dp"
/>
<TextView
android:id="@+id/txd"
android:text=""
android:padding="2dp">
</TextView>
</TableRow>
<TableRow
android:id="@+id/tableRowBtn1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:paddingBottom="10dp"
>
<TextView
android:id="@+id/txa1"
android:text=""
android:padding="2dp">
</TextView>
<Button
android:id="@+id/btn_pesan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/icon_message"
android:text="Pesan"
android:textStyle="bold"
android:background="@layout/activity_button_menu"
android:gravity="center|center_horizontal"
android:padding="1dp"
/>
<TextView
android:id="@+id/txb1"
android:text=""
android:padding="2dp">
</TextView>
<Button
android:id="@+id/btnView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/icon_view"
android:text="View"
android:textStyle="bold"
android:background="@layout/activity_button_menu"
android:gravity="center|center_horizontal"
android:padding="1dp" />
<TextView
android:id="@+id/txc2"
android:text=""
android:padding="2dp">
</TextView>
<Button
android:id="@+id/btnWeb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/icon_web"
android:text="Web"
android:textStyle="bold"
android:background="@layout/activity_button_menu"
android:gravity="center|center_horizontal"
android:padding="1dp"
/>
<TextView
android:id="@+id/txd3"
android:text=""
android:padding="2dp">
</TextView>
</TableRow>
<TableRow
android:id="@+id/tableRowBtn2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center_horizontal">
<TextView
android:id="@+id/txi"
android:text=""
android:padding="2dp">
</TextView>
<Button
android:id="@+id/btnCari"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/icon_cari"
android:text="Cari"
android:textStyle="bold"
android:background="@layout/activity_button_menu"
android:gravity="center|center_horizontal" />
<TextView
android:id="@+id/txe"
android:text=""
android:padding="2dp">
</TextView>
<Button
android:id="@+id/btnKomentar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/icon_komentar"
android:text="Komentar"
android:textStyle="bold"
android:background="@layout/activity_button_menu"
android:gravity="center|center_horizontal" />
<TextView
android:id="@+id/txf"
android:text=""
android:padding="2dp">
</TextView>
<Button
android:id="@+id/btnNotif"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/icon_notif"
android:text="Notifikasi"
android:textStyle="bold"
android:background="@layout/activity_button_menu"
android:gravity="center|center_horizontal" />
<TextView
android:id="@+id/txg"
android:text=""
android:padding="2dp">
</TextView>
</TableRow>
</TableLayout>
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:gravity="center_horizontal"
android:src="@drawable/logo_theheran" />
</RelativeLayout>

3. Buka class MainActivity.java kemudian ketik or copy-paste code di bawah ini

package com.theheran.desaindasboardandroid;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends Activity {
//Deklarasi Tombol
Button btnGrafik,btnLokasi,btnLike,btnPesan,btnView,btnWeb,btnCari,btnKomentar,btnNotifikasi;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Get ID tombol & Event Tombol
btnGrafik= (Button) findViewById(R.id.btn_grafik);
btnGrafik.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Anda Menekan Tombol Grafik", Toast.LENGTH_SHORT).show();
} });
btnLokasi= (Button) findViewById(R.id.btnLokasi);
btnLokasi.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Anda Menekan Tombol Lokasi", Toast.LENGTH_SHORT).show();
} });
btnLike= (Button) findViewById(R.id.btnLike);
btnLike.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Anda Menekan Tombol Like", Toast.LENGTH_SHORT).show();
} });
btnPesan= (Button) findViewById(R.id.btn_pesan);
btnPesan.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Anda Menekan Tombol Pesan", Toast.LENGTH_SHORT).show();
} });
btnView= (Button) findViewById(R.id.btnView);
btnView.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Anda Menekan Tombol View", Toast.LENGTH_SHORT).show();
} });
btnWeb= (Button) findViewById(R.id.btnWeb);
btnWeb.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Anda Menekan Tombol Web", Toast.LENGTH_SHORT).show();
} });
btnCari= (Button) findViewById(R.id.btnCari);
btnCari.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Anda Menekan Tombol Cari", Toast.LENGTH_SHORT).show();
} });
btnKomentar= (Button) findViewById(R.id.btnKomentar);
btnKomentar.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Anda Menekan Tombol Komentar", Toast.LENGTH_SHORT).show();
} });
btnNotifikasi= (Button) findViewById(R.id.btnNotif);
btnNotifikasi.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Anda Menekan Tombol Notifikasi", Toast.LENGTH_SHORT).show();
} });
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, 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);
}
}

4. Terakhir adalah editing AndroidManivest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.theheran.desaindasboardandroid"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="11"
android:targetSdkVersion="21" />
<application
android:allowBackup="true"
android:icon="@drawable/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>

5. Sebaga catanan bahwa sesuaikan package project anda. Saya sendiri membuat package dengan nama com.theheran.desaindasboardandroid

6. Finally jalankan project dengan cara Klik kanan pada project⇒ Run As ⇒ 1 Android Application

7. Ketika Salah Satu Tombol di Tekan maka akan mengeluarkan Toast. Lihat gambar

Screen Shoot 1  Screen Shoot 2
 tutorial notification android manager theheran.com tutorial notification android manager theheran.com
  

Password file.zip : follow dan mention ke @the_heran atau invite PIN 571078A7

Sekian dulu readers pembahasan Tutorial Desain Dasboard pada Android . Sampai jumpa :)

Salam Hangat

@the_heran

Related posts:
  1. Tutorial Membuat Notification Bar di Android
  2. Cara membuat ListView dengan kombinasi Icon dan text
  3. Tutorial Download dan Menampilkan Gambar di ImageView Android
  4. Tutorial Android Membuat Option Menu dan Popup Menu
 
 2 Comments
  1.    
     wismatata eltra jaya 
    Terima kasih … artikelnya sangat membantu saya yg baru belajar
     
  2.    
     Whatever 
    Passwordnya apa bos kok ribet kali
     
Leave a Reply