Kamis, 15 Juni 2017

Home » » Cara Membuat Menu Grup pada Android

Cara Membuat Menu Grup pada Android

By No comments
Cara Membuat Grup pada Android

 Pada tutorial Programming Android kali ini kita akan membuat desain tampilan menu dashboard. Tampilan menu dashboard pada Android merupakan elemen penting dalam aplikasi Android yang menyediakan navigasi yang mudah digunakan oleh pengguna aplikasi. Tutorial akan lebih menfokuskan pada tata letak dashboard dan memberikan navigasi untuk beralih pada layar yang terhubung ketika user memilih icon yang sesuai pada dashboard. Untuk lebih jelasnya kita akan langsung praktek dengan membuat aplikasinya.
Buat project android seperti berikut:
Application Name                : AndroidDashboard
Project Name                       : AndroidDashboard
Package Name                     : firman.salatigadev.dashboard
Minimum Required SDK    : Andoid 2.2
Target SDK                           : Android 4.2
Yang lain biarkan default.
*Untuk kebutuhan desain gambar menu maupun background bisa Anda download pada link di akhir artikel.
Buka file styles.xml di direktori res/values dan ubah code menjadi seperti berikut:
res/values/styles.xml
<resources>
    <style name="ActionBarCompat">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">50dp</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:background">@drawable/actionbar_background</item>
    </style>
        
    <style name="DashboardButton">
        <item name="android:layout_gravity">center_vertical</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:drawablePadding">2dp</item>
        <item name="android:textSize">16dp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">#ff29549f</item>
        <item name="android:background">@null</item>
    </style>    
     
   <style name="FooterBar">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">40dp</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:background">#dedede</item>
    </style>     
</resources>
Desain header action bar
Buat file baru actionbar_layout.xml di direktori res/layout isi code berikut:
res/layout/actionbar_layout.xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/ActionBarCompat" >
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:clickable="false"
        android:paddingLeft="15dip"
        android:scaleType="center"
        android:src="@drawable/logo" />
 
</LinearLayout>
Buat class baru DashboardLayout.java di src/package isi dengan code berikut:
src/package/DashboardLayout.java
package firman.salatigadev.dashboard;
/*
 * Copyright 2011 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
 
/**
 * Custom layout that arranges children in a grid-like manner, optimizing for even horizontal and
 * vertical whitespace.
 */
public class DashboardLayout extends ViewGroup {
 
    private static final int UNEVEN_GRID_PENALTY_MULTIPLIER = 10;
 
    private int mMaxChildWidth = 0;
    private int mMaxChildHeight = 0;
 
    public DashboardLayout(Context context) {
        super(context, null);
    }
 
    public DashboardLayout(Context context, AttributeSet attrs) {
        super(context, attrs, 0);
    }
 
    public DashboardLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mMaxChildWidth = 0;
        mMaxChildHeight = 0;
 
        // Measure once to find the maximum child size.
 
        int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(
                MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.AT_MOST);
        int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(
                MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.AT_MOST);
 
        final int count = getChildCount();
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }
 
            child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
 
            mMaxChildWidth = Math.max(mMaxChildWidth, child.getMeasuredWidth());
            mMaxChildHeight = Math.max(mMaxChildHeight, child.getMeasuredHeight());
        }
 
        // Measure again for each child to be exactly the same size.
 
        childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(
                mMaxChildWidth, MeasureSpec.EXACTLY);
        childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(
                mMaxChildHeight, MeasureSpec.EXACTLY);
 
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }
 
            child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
        }
 
        setMeasuredDimension(
                resolveSize(mMaxChildWidth, widthMeasureSpec),
                resolveSize(mMaxChildHeight, heightMeasureSpec));
    }
 
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int width = r - l;
        int height = b - t;
 
        final int count = getChildCount();
 
        // Calculate the number of visible children.
        int visibleCount = 0;
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }
            ++visibleCount;
        }
 
        if (visibleCount == 0) {
            return;
        }
 
        // Calculate what number of rows and columns will optimize for even horizontal and
        // vertical whitespace between items. Start with a 1 x N grid, then try 2 x N, and so on.
        int bestSpaceDifference = Integer.MAX_VALUE;
        int spaceDifference;
 
        // Horizontal and vertical space between items
        int hSpace = 0;
        int vSpace = 0;
 
        int cols = 1;
        int rows;
 
        while (true) {
            rows = (visibleCount - 1) / cols + 1;
 
            hSpace = ((width - mMaxChildWidth * cols) / (cols + 1));
            vSpace = ((height - mMaxChildHeight * rows) / (rows + 1));
 
            spaceDifference = Math.abs(vSpace - hSpace);
            if (rows * cols != visibleCount) {
                spaceDifference *= UNEVEN_GRID_PENALTY_MULTIPLIER;
            }
 
            if (spaceDifference < bestSpaceDifference) {
                // Found a better whitespace squareness/ratio
                bestSpaceDifference = spaceDifference;
 
                // If we found a better whitespace squareness and there's only 1 row, this is
                // the best we can do.
                if (rows == 1) {
                    break;
                }
            } else {
                // This is a worse whitespace ratio, use the previous value of cols and exit.
                --cols;
                rows = (visibleCount - 1) / cols + 1;
                hSpace = ((width - mMaxChildWidth * cols) / (cols + 1));
                vSpace = ((height - mMaxChildHeight * rows) / (rows + 1));
                break;
            }
 
            ++cols;
        }
 
        // Lay out children based on calculated best-fit number of rows and cols.
 
        // If we chose a layout that has negative horizontal or vertical space, force it to zero.
        hSpace = Math.max(0, hSpace);
        vSpace = Math.max(0, vSpace);
 
        // Re-use width/height variables to be child width/height.
        width = (width - hSpace * (cols + 1)) / cols;
        height = (height - vSpace * (rows + 1)) / rows;
 
        int left, top;
        int col, row;
        int visibleIndex = 0;
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }
 
            row = visibleIndex / cols;
            col = visibleIndex % cols;
 
            left = hSpace * (col + 1) + width * col;
            top = vSpace * (row + 1) + height * row;
 
            child.layout(left, top,
                    (hSpace == 0 && col == cols - 1) ? r : (left + width),
                    (vSpace == 0 && row == rows - 1) ? b : (top + height));
            ++visibleIndex;
        }
    }
}
Desain menu utama dashboard
Sekarang kita membutuhkan file layout yang akan menampilkan menu dashboard. Buat file layout fragment_layout.xml di direktori res/layout dan isi code seperti dibawah ini:
res/layout/fragment_layout.xml
<?xml version="1.0" encoding="UTF-8"?>
<!-- Folder Package -->
<firman.salatigadev.dashboard.DashboardLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:background="#f8f9fe" >
    <!--  Tombol Berita -->
    <Button
        android:id="@+id/btn_berita"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/btn_berita"
        android:text="Berita" />
     
    <!--  Tombol Teman -->
    <Button
        android:id="@+id/btn_teman"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/btn_teman"
        android:text="Teman" />
     
    <!--  Tombol Pesan -->
    <Button
        android:id="@+id/btn_pesan"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/btn_pesan"
        android:text="Pesan" />
     
    <!--  Tombol Tempat -->
    <Button
        android:id="@+id/btn_tempat"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/btn_tempat"
        android:text="Tempat" />
 
    <!--  Tombol Acara -->
    <Button
        android:id="@+id/btn_acara"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/btn_acara"
        android:text="Acara" />
 
    <!--  Tombol Foto -->
    <Button
        android:id="@+id/btn_foto"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/btn_foto"
        android:text="Foto" />
 
</firman.salatigadev.dashboard.DashboardLayout>
Desain footer
Buat file baru footer_layout.xml di res/layout isi code berikut:
res/layout/footer_layout.xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/FooterBar" >
    <TextView android:text="firman.salatigadev.com"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="#606060"
            android:gravity="center"
            android:paddingTop="10dip"/>
</LinearLayout>
Menggabungkan semua layout
Setelah kita selesai mendesain masing – masing header action bar untuk bagian header, dashboard sebagai menu utama, dan footer. Sekarang kita akan menggabungkan semua file layout tersebut dalam satu file layout xml.
Buat file xml baru dashboard_layout.xml di direktori res/layout isi code seperti berikut:
res/layout/dashboard_layout.xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/home_root"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
        <!-- Memasukan action bar -->
        <include layout="@layout/actionbar_layout"/>
         
        <!--  Memasukan fragmented dashboard -->   
        <include layout="@layout/fragment_layout"/>   
         
        <!--  Memasukan footer -->
        <include layout="@layout/footer_layout"/>
             
</LinearLayout>
Output dari code-code diatas sebenarnya sudah bisa menampilkan menu dashboard, akan tetapi belum bisa masuk atau beralih dari screen menu yang kita pilih, maka kita akan menambahkan beberapa fungsi activity untuk setiap menu dashboard. Karena terdapat 6 menu icon, maka kita akan membutuhkan 6 activity untuk setiap icon menu. Anda bisa membaca kembali artikel Berpindah Screen Dengan Activity Pada Aplikasi Android untuk lebih menjelaskan bagaimana cara aplikasi beralih atau berpindah antar activity.
Buka activity utama DashboardActivity.java pada direktori src/package tambahkan code menjadi seperti berikut:
src/package/DashboardActivity.java
package firman.salatigadev.dashboard;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.content.Intent;
import android.view.View;
import android.widget.Button;
import firman.salatigadev.dashboard.R;

public class DashboardActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.dashboard_layout);
		
		/**
         * Membuat tombol kejadian
         * */
        // Dashboard Tombol berita
        Button btn_berita = (Button) findViewById(R.id.btn_berita);
         
        // Dashboard Tombol teman
        Button btn_teman = (Button) findViewById(R.id.btn_teman);
         
        // Dashboard Tombol pesan
        Button btn_pesan = (Button) findViewById(R.id.btn_pesan);
         
        // Dashboard Tombol tempat
        Button btn_tempat = (Button) findViewById(R.id.btn_tempat);
         
        // Dashboard Tombol acara
        Button btn_acara = (Button) findViewById(R.id.btn_acara);
         
        // Dashboard Tombol foto
        Button btn_foto = (Button) findViewById(R.id.btn_foto);
         
        /**
         * Menangani klik events pada tombol
         * */
         
        // Menangkap klik event tombol berita
        btn_berita.setOnClickListener(new View.OnClickListener() {
             
            @Override
            public void onClick(View view) {
                // Menampilkan screen berita
                Intent i = new Intent(getApplicationContext(), BeritaActivity.class);
                startActivity(i);
            }
        });
         
       // Menangkap klik event tombol teman
        btn_teman.setOnClickListener(new View.OnClickListener() {
             
            @Override
            public void onClick(View view) {
                // Menampilkan screen teman
                Intent i = new Intent(getApplicationContext(), TemanActivity.class);
                startActivity(i);
            }
        });
         
        // Menangkap klik event tombol pesan
        btn_pesan.setOnClickListener(new View.OnClickListener() {
             
            @Override
            public void onClick(View view) {
                // Menampilkan screen pesan
                Intent i = new Intent(getApplicationContext(), PesanActivity.class);
                startActivity(i);
            }
        });
         
        // Menangkap klik event tombol tempat
        btn_tempat.setOnClickListener(new View.OnClickListener() {
             
            @Override
            public void onClick(View view) {
                // Menampilkan screen tempat
                Intent i = new Intent(getApplicationContext(), TempatActivity.class);
                startActivity(i);
            }
        });
         
        // Menangkap klik event tombol acara
        btn_acara.setOnClickListener(new View.OnClickListener() {
             
            @Override
            public void onClick(View view) {
                // Menampilkan screen acara
                Intent i = new Intent(getApplicationContext(), AcaraActivity.class);
                startActivity(i);
            }
        });
         
        // Menangkap klik event tombol foto
        btn_foto.setOnClickListener(new View.OnClickListener() {
             
            @Override
            public void onClick(View view) {
                // Menampilkan screen foto
                Intent i = new Intent(getApplicationContext(), FotoActivity.class);
                startActivity(i);
            }
        });
    }

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

}
Buat class baru BeritaActivity.java di src/package isi code berikut:
src/package/BeritaActivity.java
package firman.salatigadev.dashboard;

import android.app.Activity;
import android.os.Bundle;
import firman.salatigadev.dashboard.R;

public class BeritaActivity extends Activity {
	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.berita_layout);
    }
}
Buat juga class TemanActivity.java, PesanActivity.java, TempatActivity.java, AcaraActivity.java, dan FotoActivity.java isi code kurang lebih seperti pada class BeritaActivity.java diatas.
Jangan lupa buat file layout untuk masing – masing class activity diatas.
berita_layout.xml, teman_layout.xml, pesan_layout.xml, tempat_layout.xml, acara_layout.xml, dan foto_layout.xml.
isi code layout xml seperti pada contoh berita_layout.xml berikut:
res/layout/berita_layout.xml
<?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:background="#f8f9fe"
    android:orientation="vertical" >

    <include layout="@layout/actionbar_layout" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="50dip"
            android:text="Halaman Berita"
            android:textColor="#ff29549f"
            android:textSize="25dip"
            android:textStyle="bold"
            android:drawableBottom="@drawable/news_feed_default" />
    </LinearLayout>

</LinearLayout>
Terakhir tambahkan semua activity yang dibuat pada file AndroidManifest.xml.
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="firman.salatigadev.dashboard"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name="firman.salatigadev.dashboard.DashboardActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        
        <!-- Berita Activity -->
        <activity android:name="firman.salatigadev.dashboard.BeritaActivity" ></activity>
 
        <!-- Teman Activity -->
        <activity android:name="firman.salatigadev.dashboard.TemanActivity" ></activity>
 
        <!-- Pesan Activity -->
        <activity android:name="firman.salatigadev.dashboard.PesanActivity" ></activity>
 
        <!-- Tempat Activity -->
        <activity android:name="firman.salatigadev.dashboard.TempatActivity" ></activity>
 
        <!-- Acara Activity -->
        <activity android:name="firman.salatigadev.dashboard.AcaraActivity" ></activity>
         
        <!-- Photos Activity -->
        <activity android:name="firman.salatigadev.dashboard.FotoActivity" ></activity>
    
    </application>

</manifest>
Running aplikasi Android Dashboard yang baru saja kita buat.


Share:  Facebook Twitter Google+

0 komentar:

Posting Komentar