Android Programlama -39 FloatingActionMenu

Merhaba arkadaşlar bu gün ki makalemde son zamanlarda bir çok uygulamada sıklıkla gördüğümüz  FloatingActionMenu konusuna değineceğim.

Önceki makalelerime buradan ulaşabilirsiniz.

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

//** Here is Circled Floating Action Button code **///

final ImageView fabIconNew = new ImageView(this);
// Setting the icon in the center of the Floating Action Button

fabIconNew.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.ic_add_button_with_plus_symbol_in_a_black_circle));
final FloatingActionButton rightLowerButton = new FloatingActionButton.Builder(this)
.setContentView(fabIconNew)
.setPosition(FloatingActionButton.POSITION_BOTTOM_RIGHT)
.setBackgroundDrawable(R.drawable.floatbtn_noshadow)
.build();


//Here I set the position to bottom of right.

// Created menu items which are also Floating Action Buttons

SubActionButton.Builder rLSubBuilder = new SubActionButton.Builder(this);
LayoutParams params = new LayoutParams(190, 190);
rLSubBuilder.setLayoutParams(params);
//Here I set the icons sizes 190-190.


// Created an image view for each menu item

final ImageView subMenuDebit = new ImageView(this);
ImageView subMenuAddGoal = new ImageView(this);

// Set the icon for each menu item

subMenuDebit.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.debit));
subMenuAddGoal.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.goal));

final FloatingActionMenu rightLowerMenu = new FloatingActionMenu.Builder(this)
.setStartAngle(260)
.setEndAngle(200)
.addSubActionView(rLSubBuilder.setContentView(subMenuDebit).build())
.addSubActionView(rLSubBuilder.setContentView(subMenuAddGoal).build())
.attachTo(rightLowerButton)
.build();

//Here is the Floating button menu builder

// This will listen for menu open and close events to animate the button content view
rightLowerMenu.setStateChangeListener(new FloatingActionMenu.MenuStateChangeListener() {
@Override
public void onMenuOpened(FloatingActionMenu menu) {
// Rotate the icon of rightLowerButton 45 degrees clockwise
fabIconNew.setRotation(0);
PropertyValuesHolder pvhR = PropertyValuesHolder.ofFloat(View.ROTATION, 45);
ObjectAnimator animation = ObjectAnimator.ofPropertyValuesHolder(fabIconNew, pvhR);
animation.start();

}

@Override
public void onMenuClosed(FloatingActionMenu menu) {
// Rotate the icon of rightLowerButton 45 degrees counter-clockwise
fabIconNew.setRotation(45);
PropertyValuesHolder pvhR = PropertyValuesHolder.ofFloat(View.ROTATION, 0);
ObjectAnimator animation = ObjectAnimator.ofPropertyValuesHolder(fabIconNew, pvhR);
animation.start();
}
});

Kodu detaylı olarak inceleyecek olursak, öncelikle imageview’ ı tanımlayıp olmasını istediğimiz image’e göre backgroud’ unu set ediyoruz. Sonra  butonun konum olarak nerede durmasını istiyorsak ona göre yerini ayarlıyoruz. Tasarımsal ayarları set ettikten sonra onMenuOpened ve onMenuClosed methodları ile butonun action’larını set ediyoruz. Bu methodların içini butona tıklandığında açılan menu de olmasını istediğimiz özelliklere göre revize edebilirsiniz.

Bir makalenin daha sonuna geldik, esenle kalın..