Cara Membuat Desain Menu Dashboard pada Android

TheHeran.com/ May 14, 2015/ Dashboard, Download, Java Android, Slide/ 0 comments

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
 Download Source Code Splash Screen Android  Download File Apk Splash Screen Android

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


Comments

comments