nambicompany / expandable-fab

A highly customizable 'speed dial' FloatingActionButton implementation.
https://nambicompany.github.io/expandable-fab/
MIT License
200 stars 21 forks source link

Attribute to set icon when FAB is opened #24

Closed kartik0198 closed 3 years ago

kartik0198 commented 3 years ago

There is no option to set a different icon (such as cross icon) when FAB is opened. We can only rotate our previous icon. Kindly add this functionality please.

kabumere commented 3 years ago

Hey @kartik0198,

For changing the icon on an ExpandableFab, you can use this field.

For changing the icon on a FabOption, you can use this field.

Is this the functionality you're looking for? If not, can you further clarify what you're trying to accomplish?

kartik0198 commented 3 years ago

No, this field does not solve my problem. My use case is that I show icon A when FAB is not open but when it's opened by the user then I need to change it to close(X) icon but the library only provides functionality to change the icon but I want to use different icons for open and closed states. Also, I could not find any boolean which could tell me whether the FAB is opened or not. Thanks

On Wed, Aug 11, 2021, 1:19 PM Kelvin Abumere @.***> wrote:

Hey @kartik0198 https://github.com/kartik0198,

For changing the icon on an ExpandableFab, you can use this field https://github.com/nambicompany/expandable-fab/blob/master/library/src/main/kotlin/com/nambimobile/widgets/efab/ExpandableFab.kt#L73 .

For changing the icon on a FabOption, you can use this field https://github.com/nambicompany/expandable-fab/blob/master/library/src/main/kotlin/com/nambimobile/widgets/efab/FabOption.kt#L67 .

Is this the functionality you're looking for? If not, can you further clarify what you're trying to accomplish?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nambicompany/expandable-fab/issues/24#issuecomment-896582929, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHX5OYSQFFP4BZRYZ6DU6ULT4ITRTANCNFSM5B5YN3EQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

kabumere commented 3 years ago

Hey @kartik0198,

I think the available API does what you need for your use case.

If you need to see whether the ExpandableFab in the current screen orientation is opened or not, use the isOpen() method on your ExpandableFabLayout container.

If you want to change the icon on the ExpandableFab, use efabIcon like I mentioned before.

You can also call setOnClickListener on your ExpandableFab and set a custom callback that is invoked when the ExpandableFab (or its label) is clicked.

So a rough outline of what it sounds like you want to do would be something like this (I'm typing this Kotlin snippet on my phone, so it may contain some slight syntax errors and such):

val expandableFabLayout = view.findViewById<ExpandableFabLayout>(R.id.expandableFabLayout)
val expandableFab = view.findViewById<ExpandableFab>(R.id.expandableFab)
val openedIcon = ContextCompat.getDrawable(context, R.drawable.opened_icon_24dp)
val closedIcon = ContextCompat.getDrawable(context, R.drawable.closed_icon_24dp)

expandableFab.setOnClickListener {
  if(expandableFabLayout.isOpen()){
    expandableFab.efabIcon = openedIcon
  } else {
    expandableFab.efabIcon = closedIcon
  }
}

Please note that isOpen will only return true when the ExpandableFab is completely open and all animations are finished. So if your animations are long, the snippet I gave above may not work as expected. But there are multiple work arounds for this though. The easiest one for you may just be to clone the library locally, then change this method so that onClickListener?.onClick(it) is called before defaultOnClickBehavior?.invoke().

kabumere commented 3 years ago

Hey @kartik0198,

Did the above solution help?

kartik0198 commented 3 years ago

Hey @kabumere, yes the above solution worked but due to the animation issue I am now cloning the library and changing the onClick method as you suggested. Thanks for the help.

kartik0198 commented 3 years ago

One more issue, even though I am setting openingAnimationDurationMs and closingAnimationDurationMs as 0L, the animation is still appearing. Any value that I set is not being reflected

kabumere commented 3 years ago

Hey @kartik0198,

Every View within the library has animations for hiding and showing or opening and closing, so you need to update the right field for every View in the library you use.

For the ExpandableFab: use openingAnimationDurationMs and closingAnimationDurationMs. For FabOptions: use openingAnimationDurationMs and closingAnimationDurationMs. For Overlays: use openingAnimationDurationMs and closingAnimationDurationMs. For Labels: use visibleToHiddenAnimationDurationMs and hiddenToVisibleAnimationDurationMs. You only need to modify label animation durations if you're actually using labels.

The example below shows how you can set all animation durations on the 3 custom Views below to 0 milliseconds:

<com.nambimobile.widgets.efab.ExpandableFabLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.nambimobile.widgets.efab.Overlay
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:overlay_openingAnimationDurationMs="0"
            app:overlay_closingAnimationDurationMs="0"/>

        <com.nambimobile.widgets.efab.ExpandableFab
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginBottom="@dimen/ui_margin_medium"
            android:layout_marginEnd="@dimen/ui_margin_medium"
            android:layout_marginRight="@dimen/ui_margin_medium"
            app:efab_openingAnimationDurationMs="0"
            app:efab_closingAnimationDurationMs="0"
            app:label_text="Click Me!"
            app:label_visibleToHiddenAnimationDurationMs="0"
            app:label_hiddenToVisibleAnimationDurationMs="0"/>

        <com.nambimobile.widgets.efab.FabOption
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_openingAnimationDurationMs="0"
            app:fab_closingAnimationDurationMs="0"
            app:label_text="Option 1"
            app:label_visibleToHiddenAnimationDurationMs="0"
            app:label_hiddenToVisibleAnimationDurationMs="0"/>

</com.nambimobile.widgets.efab.ExpandableFabLayout>

I made it this way because I wanted to give developers like you the ultimate control over the widget - I wanted you to be able to customize as much as possible and set different values for every single View if you wanted. But I can see how this becomes tedious in practice. I'll probably update the library soon to allow users to set the same animation duration for all components in a single place. For now though, if you wanted no animations at all, you'll have to set the animation duration on every single custom View you use.

However, since you're cloning the library and updating the onClick function as I suggested earlier, do you even need to update the animation durations? Or is this a separate issue and you just don't want animations?

kartik0198 commented 3 years ago

Hi, I was successfully able to disable all animations after your previous answer so I do not need to clone the lib locally. I was even apprehensive of cloning it locally as I would not be able to update it whenever you release new changes. Just a suggestion - you may provide API to set the same animation duration for all components in a single place and change the icon on close and open of expandableFAB gracefully. Or maybe I will raise a PR to contribute to your project. Great work, by the way!

kabumere commented 3 years ago

Thank you for the great suggestions and kind words, @kartik0198! I think implementing those features would definitely add value to the project. If you choose to implement them before I do, please read our Contributing guidelines.

Closing the ticket since the issue has been resolved, but of course feel free to open a new issue if anything else comes up.

kartik0198 commented 3 years ago

Another issue is that ideally isOpen should've been a livedata as I need to change open/close icon on user clicks on overlay(which closes the FAB), and also when user clicks on a FAB option. But currently since I was setting click listener on FAB button so other cases were missed.

kabumere commented 3 years ago

Hey @kartik0198,

Good news, starting from v1.2.1, the ExpandableFab library now lets you set global animation durations on the parent layout (instead of having to set the durations on each of the individual Overlays, ExpandableFabs, FabOptions and Labels). This version also includes other new features and bug fixes.

You can get it by cloning the master branch of this repo, or pulling it from Maven Central. Thanks for using the library!

**EDIT: to those viewing this in the future, please use v1.2.1 or higher, not v1.2.0 (v1.2.0 contains a bug in the Label class when ran on some older devices).

kartik0198 commented 3 years ago

Great, thanks for the update!

On Wed, Oct 20, 2021 at 12:56 PM Kelvin Abumere @.***> wrote:

Hey @kartik0198 https://github.com/kartik0198,

Good news, starting from v1.2.0, the ExpandableFab library now lets you set global animation durations on the parent layout (instead of having to set the durations on each of the individual Overlays, ExpandableFabs, FabOptions and Labels). This version also includes other new features and bug fixes.

You can get it by cloning the master branch of this repo, or pulling it from Maven Central. Thanks for using the library!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nambicompany/expandable-fab/issues/24#issuecomment-947400769, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHX5OYWULXYDDVFOWPVSMRLUHZVLPANCNFSM5B5YN3EQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.