markormesher / android-fab Goto Github PK

It seems the floating button remains in position when a snackbar is being shown, whilst the native FAB implementation has it float up above the snackbar. Is there a way to get this to work with your implementation?

Thanks alot

How can I set fab gravity to the center, not to left right bottom tops

Hi Writing this to know, how can i customize each row in menu item. I dont want to use the icons at right hand side, and the mehu text should have a background color, how can i implement this using your lib. could you please help me on this?

I didn't find this on wiki, but it would be a good option if I can set not only icon but also background color for speed-dial buttons

Just FYI, when adding implementation 'uk.co.markormesher:android-fab:2.4.0 to dependencies, I got a "Failed to resolve" error.

I checked the releases, and the 2.4.0 release appears to be mislabeled (along with the documentation).

I changed the dependency to implementation 'uk.co.markormesher:android-fab:2.4.1, and it resolved fine.

Thanks for this repo!

Hello!
When I set FAB Icon using custom XML drawable not all devices were displaying icon.
Setting icon as normal png helped. I guess it should not work this way :D

Hey there!

First, thanks for this brilliant small library.

I have one issue though - I've been trying to customize the round menu items - to make them slightly larger. This became a quite involved exercise as there are sizes (which programatically require conversions of dp to px), multiple offsets, paddings and margins to realign. Is it possible that such customizations are easier to do - via the SpeedDialAdapter for example? Or maybe there is an easy way to override the library resource files (menu_item_icon.xml) that I don't know about? If there is an easy way to achieve what I want, can we document it in the README?

Thanks!

Currently the only direction that the menu follows when it's opened is up. It would be great if the developer can choose another direction (having by default the menu going up).

In my case I want to put the button on the top of the screen and open the menu as dropdown.

It can be done just introducing a flag and changing a bit this method:

private void setSpeedDialMenuVisible(final boolean visible) {
// busy?
if (busyAnimatingSpeedDialMenu) return;
busyAnimatingSpeedDialMenu = true;

	// animate, setting visibility as well to prevent phantom clicks
	int distance = button.getHeight();
	for (int i = 0, n = speedDialMenuItems.size(); i < n; ++i) {
		final View v = speedDialMenuItems.get(i);
		if (visible) v.setVisibility(VISIBLE);
		v.animate()
				.translationY(visible ? ((i + 1) * distance * -1) - (distance / 8) : 0F)
				.alpha(visible ? 1F : 0F)
				.setDuration(SPEED_DIAL_ANIMATION_DURATION)
				.setListener(new AnimatorListenerAdapter() {
					@Override
					public void onAnimationEnd(Animator animation) {
						busyAnimatingSpeedDialMenu = false;
						if (!visible) v.setVisibility(GONE);
					}
				});
	}
}

This method is inside FloatActionButton.

I have thought in something like this:

private void setSpeedDialMenuVisible(final boolean visible, int direction) {
// busy?
if (busyAnimatingSpeedDialMenu) return;
busyAnimatingSpeedDialMenu = true;

	// animate, setting visibility as well to prevent phantom clicks
	int distance = button.getHeight();
	for (int i = 0, n = speedDialMenuItems.size(); i < n; ++i) {
		final View v = speedDialMenuItems.get(i);
		if (visible) v.setVisibility(VISIBLE);
		v.animate()
				.alpha(visible ? 1F : 0F)
				.setDuration(SPEED_DIAL_ANIMATION_DURATION)
				.setListener(new AnimatorListenerAdapter() {
					@Override
					public void onAnimationEnd(Animator animation) {
						busyAnimatingSpeedDialMenu = false;
						if (!visible) v.setVisibility(GONE);
					}
				});

                     switch(direction){
                           case DOWN:
                                    v.animate().translationY(visible ? ((i + 1) * distance * -1) - (distance / 8) : 0F)
                                     break;
                           case UP:
                                    v.animate().translationY(visible ? ((i + 1) * distance * +1) - (distance / 8) : 0F)
                                     break;
                           case RIGHT:
                                    v.animate().translationX(visible ? ((i + 1) * distance * -1) - (distance / 8) : 0F)
                                     break;
                           case LEFT:
                                    v.animate().translationX(visible ? ((i + 1) * distance * +1) - (distance / 8) : 0F)
                                     break;
                     }
	}
}

What do you think?

Is it possible to change the color of menu items?

With v2.0, code to set the open and close listener looks like this:

mLayersFab.setSpeedDialMenuAdapter(adapter);
mLayersFab.setOnSpeedMenuDialOpenListener(...);
mLayersFab.setOnSpeedDialMenuCloseListener(...);

The naming convention of the two set listeners methods are different:

• setOnSpeedMenuDialOpenListener()
• setOnSpeedDialMenuCloseListener()

Judging by the setSpeedDialMenuAdapter() method, it looks like the open listener method:

setOnSpeedMenuDialOpenListener()

should have been:

setOnSpeedDialMenulOpenListener()

If speed dial menu is opened and FloatingActionButton.rebuildSpeedDialMenu() method is called currently rendered items are not destroyed and new set of speed dial items is created.

Hi there, I'm trying to implement you library in a project but I found an issue when i'm trying to display a SpeedDialer menu, no only that just when I press click on fab button show me this:

• Skipped 38 frames! The application may be doing too much work on its main thread.

I'm working on a fragment, don't know if this is part of the issue but it's rare. I Just need to implement a fab with speed dial 2 items, not anymore... so it's an easy implementation.

im trying to change the icon based on the page selected so for instance:
binding.fab.setButtonIconResource(R.drawable.profile_goto_arrow);
doesn't change the icon.

Any ideas?

It is really nice project. How can we extend the distance between fab buttons? Currently, it is very near to each other.

If a ClickListener is set to the FAB, the speedDialMenu doesn't show when clicked (otherwise it shows).
Cheers

Hi I'm trying to change the color of the options s text but I didn't see a way to do it

Thanks again for the great library!

We have a setting in our app "Left hand mode" that flips FABs to align the left side of the screen instead of the right (used by a small but appreciative audience :)).

I can't seem to find a way to programmatically flip the FAB speed dial menu items so they align to the left side of the screen instead of the right.

Here's what I have so far - I was able to flip the FAB itself - heres, the screenshot:

Here's the code:

...
boolean leftHandMode = true;  // This should flip all FABs to the left side of screen
if (mLayersFab != null) {
	// Update all the Layers FAB-contained layouts
	RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mLayersFab.getFabContainer()
			.getLayoutParams();
	updateLeftHandMode(mLayersFab.getFabContainer(), layoutParams, leftHandMode);

	layoutParams = (RelativeLayout.LayoutParams) mLayersFab
			.getLayoutParams();
	updateLeftHandMode(mLayersFab, layoutParams, leftHandMode);
	layoutParams = (RelativeLayout.LayoutParams) mLayersFab.getButton().getLayoutParams();
	updateLeftHandMode(mLayersFab.getButton(), layoutParams, leftHandMode);

	for (int i = 0; i < mLayersFab.getButton().getChildCount(); i++) {
		View v = mLayersFab.getChildAt(i);
		RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) v.getLayoutParams();
		updateLeftHandMode(v, p, leftHandMode);
	}
}
...
private void updateLeftHandMode(View v, RelativeLayout.LayoutParams layoutParams,
		boolean leftHandMode) {
	if (leftHandMode) {
		layoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
		layoutParams.addRule(RelativeLayout.ALIGN_PARENT_START);
		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
			layoutParams.removeRule(RelativeLayout.ALIGN_PARENT_RIGHT);
			layoutParams.removeRule(RelativeLayout.ALIGN_PARENT_END);
		}
	} else {
		layoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
		layoutParams.addRule(RelativeLayout.ALIGN_PARENT_END);
		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
			layoutParams.removeRule(RelativeLayout.ALIGN_PARENT_LEFT);
			layoutParams.removeRule(RelativeLayout.ALIGN_PARENT_START);
		}
	}
	v.setLayoutParams(layoutParams);
}

Despite looping through the children views, I can't seem to get the expanded speed dial to align left - here's what it looks like expanded:

Ideally the placement of the bike icon and "bikeshare" text would be reversed when changed to the left margin (so the bike icon is against left side of screen), but I'd take just moving the existing label and icon to the left margin as-is.

Am I missing something, or is this just not possible with the current library?

A WIP PR with the above code is at OneBusAway/onebusaway-android#806 if you want to take it for a spin yourself.

I’ve run into a bug in our app where, due to how our app is structured and how we handle configuration changes, we can run into a race condition where when we get to animateSpeedDialMenuItems() In FloatingActionButton.kt when trying to close the menu after clearing out speedDialMenuViews (basically, the source of our menu items gets destroyed before we can close the menu). This means speedDialMenuViews.forEachInexed() iterates over no items and busyAnimatingSpeedDialMenuItems is never set to false. When this happens the menu won’t open again.

If you changed line 575 (on master as of today) from

busyAnimatingSpeedDialMenuItems = true

to

busyAnimatingSpeedDialMenuItems = speedDialMenuViews.count() != 0

that would prevent situations where busyAnimatingSpeedDialMenuItems gets stuck when you don’t have any items.

Great library!

We're using this library to control which map layers are visible on a map. We currently have it implemented for bikeshare.

The below screenshots show from left to right:

• Bikes visible and speed dial control closed
• Bikes visible and speed dial control expanded
• Bikes disabled and speed dial control expanded

The main usability issue we have now is that when the user taps on the bikeshare icon to toggle layer visibility, the control closes and you can't see the color of the control change. Ideally, we'd like to leave the control expanded and change the color so it's easier to visually associate with the same color markers disappearing and appearing on the map. So, the user could tap on the expanded "Bikeshare" control multiple times while it's expanded to toggle the layer on and off, without the control closing on each tap.

Would adding an option to allow the control to remain expanded when tapped be something you'd be interested in integrating? If we find the time to implement this ourselves, would you merge a pull request with this feature?

(FYI, WIP PR that includes this control is at OneBusAway/onebusaway-android#776)

cc @carvalhorr

Hey there again

I know there is a listener which we could use to set our own property to track whether or not the SpeedDialMenu is open, but it would be nice to have a simple getter for speedDialMenuOpen field instead so on methods like onBackPressed the SpeedDialMenu can be closed via the back button too.

Currently the expand direction can be changed only in the xml with the expandDirection property. It would be very helpful if this property could be accessed programmatically.

If you clone the project, and try to run the app in /app in Android Studio v3.0.1, you get the following:

Looks like this is because in build.gradle the debug build type specifies the same keystore process as release. I'll open a PR for this shortly.

Hi there, when library is used on small screen device with Android Jelly Bean (4.2.2) buttons are not circles. I tried to change width, height and radius of CardView but couldn't mange to get the circle. I'm thinking that maybe it's the drawable. I'm attaching the screenshot of your demo app so you understand better. As I said Android version is 4.2.2 and screen size is 320x480.

Cheers

When using padding for FAB component, to trim its position in layout, after expanding the content cover, it's not filling the whole area. I'm not sure if this is bug, or expected behavior.

For more info, check the screenshot. The area on left is covered, the area on right is not. FAB is in the layout which is covering whole screen

Hello! Your library is published only to jcenter. Please consider publishing it also to mavenCentral, as jcenter is shutting down in May.

Here is some info on how to publish artifacts to mavenCentral.

If the floating action button's visibility is initially set as gone, then the show() method won't work properly.

Show() returns immediately if FloatingActionButton.isShown is true. The problem is that isShown is always initialized as true regardless of the view's visibility attribute.

Hi,

I just updated from Java to Kotlin (latest) version of the library and my app crashes when I try to pass null to FloatingActionButton.setOnSpeedDialMenuCloseListener() method.

I get the following error

Fatal Exception: java.lang.IllegalArgumentException: Parameter specified as non-null is null: method kotlin.jvm.internal.Intrinsics.checkParameterIsNotNull, parameter listener
       at uk.co.markormesher.android_fab.FloatingActionButton.setOnSpeedDialMenuCloseListener(FloatingActionButton.kt)

I don't know Kotlin so I'm not sure what's the problem.

I'm experiencing significant lag or better say slow animation when opening/closing speed dial menu. I'm using MaterialViewPager library too.

Is there a way to make speed-dial menu scrollable? If there are too many items, they go out of the screen.

Summary:

@markormesher I did a fairly straightforward port of our project to use v2 of this library - WIP PR at:
OneBusAway/onebusaway-android#856

However, I'm seeing different behavior in terms of the visibility of menu items.

If I tap on the "Bikeshare" menu item (see left screenshot below), the entire menu item disappears (see right screenshot below):

If I tap on the FAB twice (to close and re-open it) then the correct state is shown (i.e., after first tapping on the "Bikeshare" menu item, I would expect it to look like this instead of disappearing:

Is there new behavior in v2 that I'm missing that's causing this?

Steps to reproduce:

1. Clone and pull in WIP PR at OneBusAway/onebusaway-android#856
2. Run gradlew assembleObaGoogleDebug or build this build variant via Android Studio
3. Run app
4. Tap on hamburger menu
5. Tap on "Settings"
6. Tap on "Your region" and choose Tampa
7. Tap on "Layers" FAB button (top FAB in lower-right corner)
8. Tap on "Bikeshare" menu item

Expected behavior:

"Bikeshare" menu item should stay visible and background should change from blue to gray, indicating that the layer is disabled

Observed behavior:

"Bikeshare" menu item disappears

Device and Android version:

Samsung Galaxy S8+ w/ Android 8.0 beta

Why was FloatingActionButton chosen for the class name when Android has one with the same name? android.support.design.widget.FloatingActionButton

In OneBusAway Android, we use this FAB library for a "Layers" button on top of the map (and it works quite well - thanks! 👍)- see below screenshot (closed on left, open on right):

Because the underlying map can be quite busy, we added a solid background to the label on menu items to make them more readable (see solid blue background for "Bikeshare" label in above screenshot on right).

For v1 of this library, in our LayersSpeedDialAdapter we had the following (simplified a bit below - see link for full source code):

@Override
protected MenuItem getViews(Context context, int position) {
	MenuItem menuItem = new MenuItem();
	menuItem.iconDrawableId = layer.getIconDrawableId();

	// Set the TextView (label) background color to be solid
	TextView label = new TextView(context);
	label.setText(layer.getLayerlabel());
	label.setTextColor(Color.WHITE);
        label.setBackground(R.drawable.speed_dial_disabled_item_label);
	menuItem.labelView = label; // <--- This doesn't seem possible in v2?

	return menuItem;
}

It seems like in v2, you can set the menu item label as a String via the constructor or setter method:

SpeedDialMenuItem menuItem = new SpeedDialMenuItem(context, layer.getIconDrawableId(), layer.getLayerlabel());
menuItem.setLabel(layer.getLayerlabel());

...but there is no way of setting the View for the menu item label, or the background color for the menu item label.

@markormesher Am I missing a new way to do this in v2 of the library? If not, could this be added as a new feature?

Right now this blocks our migration to v2 of this library.

Hi,

In my layout I am having recycler view. Initially I put floating action button as hidden I want that whenever i click on any recyclerview item fab should get visible and speed dial menu should open and when after opening the speed dial menu clicking on content cover speed dial menu should first close and then gets hidden. I tried it using an interface to get the click event of recyclerview item and checked for speed dialmenu is opened or not then tried to toggle that.But speed dial menu is not opening it is getting opened all menu items get overlapped.Below is my code.

interface callback:
public void onLongPressed() {
if(floatingActionButton.isSpeedDialMenuOpen()){
floatingActionButton.hide(true);
floatingActionButton.setVisibility(View.GONE);
}else {
floatingActionButton.setVisibility(View.VISIBLE);
floatingActionButton.setContentCoverEnabled(true);
floatingActionButton.setContentCoverColour(0xffff9900);
floatingActionButton.setContentCoverEnabled(true);
floatingActionButton.callOnClick();
}
}
where floatingActionButton is initialised as in onCreate of activity
floatingActionButton = findViewById(R.id.fabMenu);
floatingActionButton.setSpeedDialMenuAdapter(new CustomSpeedMenuAdapter(this));

In layout

<uk.co.markormesher.android_fab.FloatingActionButton
android:id="@+id/fabMenu"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
app:buttonBackgroundColour="@color/dashboard1"
app:buttonIcon="@drawable/ic_add"
app:buttonPosition="top|start" />

Hi,
assembleRelease of a project including this dependency is failing (error bellow).
Could you give some input on how to avoid this.
Cheers

Warning: uk.co.markormesher.android_fab.FloatingActionButton$$Lambda$1: can't find referenced class java.lang.invoke.LambdaForm$Hidden
Warning: uk.co.markormesher.android_fab.FloatingActionButton$$Lambda$4: can't find referenced class java.lang.invoke.LambdaForm$Hidden
Warning: uk.co.markormesher.android_fab.FloatingActionButton$$Lambda$5: can't find referenced class java.lang.invoke.LambdaForm$Hidden

Hi,

In my layout I am having recycler view. Initially I put floating action button as hidden I want that whenever i click on any recyclerview item fab should get visible and speed dial menu should open and when after opening the speed dial menu clicking on content cover speed dial menu should first close and then gets hidden. I tried it using an interface to get the click event of recyclerview item and checked for speed dialmenu is opened or not then tried to toggle that.But speed dial menu is not opening it is getting opened all menu items get overlapped.Below is my code.

interface callback:
public void onLongPressed() {
if(floatingActionButton.isSpeedDialMenuOpen()){
floatingActionButton.hide(true);
floatingActionButton.setVisibility(View.GONE);
}else {
floatingActionButton.setVisibility(View.VISIBLE);
floatingActionButton.setContentCoverEnabled(true);
floatingActionButton.setContentCoverColour(0xffff9900);
floatingActionButton.setContentCoverEnabled(true);
floatingActionButton.callOnClick();
}
}
where floatingActionButton is initialised as in onCreate of activity
floatingActionButton = findViewById(R.id.fabMenu);
floatingActionButton.setSpeedDialMenuAdapter(new CustomSpeedMenuAdapter(this));

In layout


<uk.co.markormesher.android_fab.FloatingActionButton
android:id="@+id/fabMenu"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
app:buttonBackgroundColour="@color/dashboard1"
app:buttonIcon="@drawable/ic_add"
app:buttonPosition="top|start" />

When I apply a style in XML to the FAB what gets styled is the clickable area that fills the entire screen. Would it be possible to apply the style to the button instead?

Example:

If I use the style tag:
<uk.co.markormesher.android_fab.FloatingActionButton style="my_style_here" />

I get this:

Hi there

I'm having an issue, when I switched from the standard android FAB to this one my ripple effect on the FAB is no longer grey (or a darker orange), it now seems to use my primary colour of my application which is green, and on an orange FAB it really does not look right.

I set the FABs colour via app:buttonBackgroundColour="@color/accent" in the XML.

How would i go about changing this? I've tried setting the cardViews drawable to my own selector which didn't work. Not sure what else to do.

This also happens on the SpeedDialMenuItems but the green isn't so bad on a grey background, though id prefer to use a darker grey then green too.

UPDATE
It is strange though when I press the FAB it does look like it goes grey or possibly a darker orange (which is great), but then suddenly tints a slight green.

Device: Samsung SM-T580
Version android-fab: v2.2.2

On the tablet device, the cover keeps the left upper corner uncovered. My guess is, the circle which is used for animation has too small diameter. For more details, see the screenshot.

Thanks for your time :)

android-fab uses currently old version of android-support package.
Any plans to update to androidx?

Hi, is there any way to customize the background color when the menu is open? That is, that white with alpha?

Congratulations on the lib... tks!

Hey markormesher,
I was wondering, is it possible to change the label color in the SpeedDialMenuItem?

Regard, Vladimir

See #55