"Enter"a basıp içeriğe geçin

Android Studio Çember Menü (Circle Menu) Oluşturma

Aşağıda gördüğünüz şekilde basılı tutunca açılan circle menüyü oluşturmayı göstereceğim.

Öncelikle depoyu ekleyelim.

Gradle Scripts altında build.gradle (Project: proje adı) yazanı açalım. allproject altına jitpack deposunu ekleyelim.

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

 

Şimdi kütüphanemizi ekleyelim.

Bunun için yine aynı yoldan build.gradle (Module:app) yazanı açalım. dependencies altına ekleyelim.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    /*Circlemenu kütüphanesini ekleyelim.*/
    implementation 'com.github.Hitomis:CircleMenu:v1.1.0'
}

 

Seçeneklerde kullanılacak olan ikonları belirleyelim.

Bunun için aşağıdaki sosyal medya ikonlarını veya kendi seçeceğiniz resimleri kullanabilirsiniz. İkonları res -> drawable klasörü altına kopyala yapıştır yöntemi ile atabilirsiniz.

 

Circle Menüyü tasarıma ekleyelim.

activity_main.xml dosyasına gelelim ve tanımlayalım.

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

 

Java’da ikon adları için bir dizi oluşturalım.

MainActivity.java dosyasını açalım. Önce kullanacağımız ikonların adlarını bir dizi içerisine global değişken olarak tanımlayalım.

/*İkonların isimleri için dizi oluşturalım.*/
String arrayName[] = {"Facebook",
        "İnstagram",
        "Twitter",
        "Whatsapp",
        "Google+"};

 

Java’da Circle Menü bağlantısını oluşturalım.

activity_main.xml’de oluşturulan circle menüyü onCreate altında tanımlayalım.

/*Java bağlantısını oluşturalım.*/
CircleMenu circleMenu = findViewById(R.id.circle_menu);

 

Tıklandığında ve kapatıldığında gözükecek ikonları belirleyelim.

Yukarıdaki kodun devamına yazalım.

/*setMainMenu, ilk görünecek ikonu ve kapatma ikonunu gösteriyor.*/
circleMenu.setMainMenu(Color.parseColor("#CDCDCD"), R.drawable.ic_ekle, R.drawable.ic_sil) /*; yok dikkat edin!*/

 

Tıklandığında açılacak ikonları belirleyelim.

Yukarıdaki koda devam edelim.

/*Tıklandığında gözükecek ikonları belirleyelim.*/
.addSubMenu(Color.parseColor("#258CFF"), R.drawable.ic_facebook)
.addSubMenu(Color.parseColor("#FF0000"), R.drawable.ic_instagram)
.addSubMenu(Color.parseColor("#6d4c41"), R.drawable.ic_twitter)
.addSubMenu(Color.parseColor("#FF0000"), R.drawable.ic_whatsapp)
.addSubMenu(Color.parseColor("#FF0000"), R.drawable.ic_google_plus) /*; yok dikkat edin!*/

 

Tıklandığında oluşacak olayları belirlemek için dinleyici ekleyelim.

Yukarıdaki koda devam edelim.

/*Tıklandığında oluşacak olayları belirlemek için bir listener(dinleyici) ekleyelim.*/
.setOnMenuSelectedListener(new OnMenuSelectedListener() {
    @Override
    public void onMenuSelected(int index) {
        /*Bu şekilde hangisine tıklanırsa yapılacak işlemleri ayarlayabilirsiniz.*/
        switch (index) {
            case 0:
                Toast.makeText(MainActivity.this, "Facebook", Toast.LENGTH_SHORT).show();
                break;
            case 1:
                Toast.makeText(MainActivity.this, "İnstagram", Toast.LENGTH_SHORT).show();
                break;
        }
    }
});

 

Renkleri pek tutturamadım kendiniz ayarlarsınız :). Menü kapanıp açıldığında yapılacak işlemleri belirlemek istiyorsanız yukarıdaki noktalı virgülün yerine şu kodları yazabilirsiniz:

.setOnMenuStatusChangeListener(new OnMenuStatusChangeListener() {
    @Override
    /*Menü açılırken yapılacak işlemler.*/
    public void onMenuOpened() {

    }

    @Override
    /*Menü kapanırken yapılacak işlemler.*/
    public void onMenuClosed() {

    }
});

 

MainActivity.java

public class MainActivity extends AppCompatActivity {

    /*İkonların isimleri için dizi oluşturalım.*/
    String arrayName[] = {"Facebook",
            "İnstagram",
            "Twitter",
            "Whatsapp",
            "Google+"};

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

        /*Java bağlantısını oluşturalım.*/
        CircleMenu circleMenu = findViewById(R.id.circle_menu);

        /*setMainMenu, ilk görünecek ikonu ve kapatma ikonunu gösteriyor.*/
        circleMenu.setMainMenu(Color.parseColor("#CDCDCD"), R.drawable.ic_ekle, R.drawable.ic_sil) /*; yok dikkat edin!*/

                /*Tıklandığında gözükecek ikonları belirleyelim.*/
                .addSubMenu(Color.parseColor("#258CFF"), R.drawable.ic_facebook)
                .addSubMenu(Color.parseColor("#FF0000"), R.drawable.ic_instagram)
                .addSubMenu(Color.parseColor("#6d4c41"), R.drawable.ic_twitter)
                .addSubMenu(Color.parseColor("#FF0000"), R.drawable.ic_whatsapp)
                .addSubMenu(Color.parseColor("#FF0000"), R.drawable.ic_google_plus) /*; yok dikkat edin!*/


                /*Tıklandığında oluşacak olayları belirlemek için bir listener(dinleyici) ekleyelim.*/
                .setOnMenuSelectedListener(new OnMenuSelectedListener() {
                    @Override
                    public void onMenuSelected(int index) {
                        /*Bu şekilde hangisine tıklanırsa yapılacak işlemleri ayarlayabilirsiniz.*/
                        switch (index) {
                            case 0:
                                Toast.makeText(MainActivity.this, "Facebook", Toast.LENGTH_SHORT).show();
                                break;
                            case 1:
                                Toast.makeText(MainActivity.this, "İnstagram", Toast.LENGTH_SHORT).show();
                                break;
                        }
                    }
                    /*Menünün açılıp kapanmasında oluşacak olayları kontrol etmek için.*/
                }).setOnMenuStatusChangeListener(new OnMenuStatusChangeListener() {
            @Override
            /*Menü açılırken yapılacak işlemler.*/
            public void onMenuOpened() {

            }

            @Override
            /*Menü kapanırken yapılacak işlemler.*/
            public void onMenuClosed() {

            }
        });
    }
}

 

Projenin tamamına aşağıdan bakabilirsiniz.

https://github.com/Osmananilozcan/AndroidCircleMenu

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.