Cara Buat Circle Menu Menggunakan Android Studio

Pada kesempatan pagi ini saya akan kembali membagikan Source Code yaitu tentang Cara Buat Circle Menu untuk mempercantik tampilan UI kita dengan animasi.

Semoga Source Code kali ini bisa bermanfaat buat sahabat Baru Berbagi.

Mari kita membuat project baru dengan nama Circle Menu dengan menggunkan API 19.

Setelah itu tambahkan url jitpack.io dibawah ini pada build.gradle(Project: Circle Menu)

  // Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        google()
        jcenter()
        
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
        
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven {url "https://jitpack.io"}
        
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

Tambahkan juga liblary pada build.gradle(Module: app).

  dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation 'com.github.Hitomis:CircleMenu:v1.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
}

Buatlah icon dengan cara click kanan pada drawable > New > Vector Asset >Clip Art kemudian buatlah 7 icon dengan nama yang ada pada gambar dibawah ini.

Lalu pakai warna putih/warna kesukaan anda atau biarkan dengan warna default pada icon.

Buka MainActivity.java tambahkan Source Code berikut.

  
  package com.baruberbagi.circlemenu;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.widget.Toast;

import com.hitomi.cmlibrary.CircleMenu;
import com.hitomi.cmlibrary.OnMenuSelectedListener;

public class MainActivity extends AppCompatActivity {

    String arrayName[] = {"Airport Shuttle","Camera","Call","Alarm","Wifi"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        CircleMenu circleMenu = (CircleMenu)findViewById(R.id.circle_menu);
        circleMenu.setMainMenu(Color.parseColor("#000000"),R.drawable.ic_add, R.drawable.ic_remove)
                .addSubMenu(Color.parseColor("#6A1B9A"),R.drawable.ic_airport_shuttle)
                .addSubMenu(Color.parseColor("#0042FF"),R.drawable.ic_camera)
                .addSubMenu(Color.parseColor("#29FF0E"),R.drawable.ic_call)
                .addSubMenu(Color.parseColor("#FC0601"),R.drawable.ic_alarm)
                .addSubMenu(Color.parseColor("#F8026A"),R.drawable.ic_wifi)
                .setOnMenuSelectedListener(new OnMenuSelectedListener() {
                    @Override
                    public void onMenuSelected(int index) {
                        Toast.makeText(MainActivity.this,"Kamu Memilih "+arrayName[index],Toast.LENGTH_SHORT).show();
                    }
                });
    }
}

Buka juga pada activity_main.xml lalu tambahkan Source Code dibawah.

  
  <?xml version="1.0" encoding="utf-8"?>
<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">

    <com.hitomi.cmlibrary.CircleMenu
        android:id="@+id/circle_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

Untuk hasilnya bisa dilihat pada vidio dibawah ini.

Cara Buat Circle Menu Menggunakan Android Studio

0 Response to "Cara Buat Circle Menu Menggunakan Android Studio"

Posting Komentar