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