Android ArcMenu

Haloo semua,

Postingan pertama di awal tahun 2015 ini, saya akan membagikan tutorial cara membuat menu seperti di aplikasi “path”. Kalian bisa menggunakan library “ArcMenu” untuk membuat menu seperti di aplikasi path tersebut. Yang kalian perlukan yaitu menggunakan library nya download disini.

sekarang untuk membuat menu sendiri, kalian memerlukan :
1. gambar untuk daftar menu download disini
2. library arcmenu download disini

Pertama buat projectnya, dan masukan kode MainActivity.java sbb :

package com.kreativdeveloper.arcmenu;
/**
 * @author yudirahmat
 * @email yudirahmat7@gmail.com
 * @wordpress kreativdeveloper.wordpress.com
 */
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.Toast;

import com.capricorn.ArcMenu;
import com.capricorn.RayMenu;

public class MainActivity extends Activity {
 ArcMenu arcMenu, arcMenu2;
 RayMenu rayMenu;
 
 /* Gambar untuk menu */
 private int[] ITEM_DRAWABLES = { R.drawable.composer_camera, R.drawable.composer_music,
 R.drawable.composer_place, R.drawable.composer_sleep, R.drawable.composer_thought, R.drawable.composer_with };

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 arcMenu = (ArcMenu) findViewById(R.id.arc_menu);
 arcMenu2 = (ArcMenu) findViewById(R.id.arc_menu_2);
 rayMenu = (RayMenu) findViewById(R.id.ray_menu);
 
 /*
 * Menampikan menu dan menggunakan gambar yang telah di siapklan di
 * array ITEM_DRAWABLES
 */
 initArcMenu(arcMenu, ITEM_DRAWABLES);
 initArcMenu(arcMenu2, ITEM_DRAWABLES);
 initRayMenu(); 
 }
 
 private void initRayMenu() {
 final int itemCount = ITEM_DRAWABLES.length;
 for (int i = 0; i < itemCount; i++) {
 ImageView item = new ImageView(this);
 item.setImageResource(ITEM_DRAWABLES[i]);

 final int position = i;
 rayMenu.addItem(item, new OnClickListener() {

 @Override
 public void onClick(View v) {
 Toast.makeText(MainActivity.this, "position:" + position, Toast.LENGTH_SHORT).show();
 }
 });
 }
 }
 
 private void initArcMenu(ArcMenu menu, int[] itemDrawables) {
 final int itemCount = itemDrawables.length;
 for (int i = 0; i < itemCount; i++) {
 ImageView item = new ImageView(this);
 item.setImageResource(itemDrawables[i]);

 final int position = i;
 menu.addItem(item, new OnClickListener() {

 @Override
 public void onClick(View v) {
 Toast.makeText(MainActivity.this, "position:" + position, Toast.LENGTH_SHORT).show();
 }
 });
 }
 }

}

Sekarang masukan kode berikut di activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:arc="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#9ccf00" >

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

 <com.capricorn.RayMenu
 android:id="@+id/ray_menu"
 android:layout_width="fill_parent"
 android:layout_height="60dp"
 android:paddingLeft="5dp"
 android:paddingRight="5dp" />

 <com.capricorn.ArcMenu
 android:id="@+id/arc_menu"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="left" />

 <com.capricorn.ArcMenu
 android:id="@+id/arc_menu_2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 arc:childSize="@dimen/menuChildSize"
 arc:fromDegrees="@dimen/menuFromDegrees"
 arc:toDegrees="@dimen/menuToDegrees" />
 </LinearLayout>

 <TextView
 android:id="@+id/textview1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_centerHorizontal="true"
 android:gravity="center"
 android:padding="10dp"
 android:text="@string/footer"
 android:textColor="#ffffff"
 android:textSize="12sp" />

</RelativeLayout>

Selanjutnya masukan kode berikut di “Res -> Values ->  strings.xml”

<?xml version="1.0" encoding="utf-8"?>
<resources>

 <string name="app_name">Arc Menu</string>
 <string name="action_settings">Settings</string>
 <string name="hello_world">Hello world!</string>
 
 <string name="footer">Kreativdeveloper.wordpress.com</string>

</resources>

Selanjutnya masukan kode berikut di “Res -> Values -> dimens.xml”

<resources>

 <!-- Default screen margins, per the Android Design guidelines. -->
 <dimen name="activity_horizontal_margin">16dp</dimen>
 <dimen name="activity_vertical_margin">16dp</dimen>

 <item name="menuFromDegrees" format="float" type="dimen">180.0</item>
 <item name="menuToDegrees" format="float" type="dimen">360.0</item>
 <dimen name="menuChildSize">30dp</dimen>
</resources>

Jangan lupa kalian download gambar – gambar untuk daftar menunya disini. Setelah gambar di download dan extract, lalu simpan gambar di “Res – > drawable (buat sendiri)”.

Untuk full source code nya kalian bisa download disini

Sekian dari tutorial nya. Semoga bermmanfaat  :) :D

jangan lupa tinggalkan komentar kalian disini  :D

Terimakasih kepada :

https://github.com/daCapricorn/ArcMenu