0

So I have a floating action button (FAB) in a fragment, along with some buttons in the layout. Depending on which button is pressed, I would like to hide the FAB, then if another button is pressed, show the FAB. Basically I would like to toggle the visibility of the FAB in the same fragment. Is this a good design method, or should the FAB be always visible (except on scroll for some cases) if included?

4
  • Could you clarify; What's an "FAB"? and what is the "fragment"? Also, to answer your question "Is this a good design method?" properly, we need to know more about the context: what sort of information is being shown/hidden? how does this relate to the rest of the UI? Are the users familiar with this sort of action? etc... You'll probably find that, once you've answered those questions, you'll be able figure the rest out for yourself. Jan 4 '18 at 8:16
  • FAB is a floating action button. The fragment would be the layout of my page. So in this workout tracker, I have buttons where you can add an exercise, add rest, start, stop, etc. If start is clicked, add exercise and add rest are hidden, and stop appears. If stop is clicked, add exercise and rest are shown and stop is hidden. I also have the FAB so that users can create a new workout. I have 2 design ideas, one would be to keep the buttons, and have the FAB to only create new workouts. Or, use the FAB to create new workouts, add exercise, and add rest, and have start and stop as buttons still
    – Gerald Tan
    Jan 4 '18 at 8:38
  • In both cases, I want to hide the FAB once start is clicked, as to me, it may be in the way of viewing your workout. Then when stop is clicked, and the user is given the choice to edit their workout, I want the FAB to re appear
    – Gerald Tan
    Jan 4 '18 at 8:40
  • 1
    As long as there are no further actions you expect the user to want to take once the workout is in progress that hiding the button seems reasonable to me. Jan 4 '18 at 9:04
1

IMO this would violate the material design practices. What I get from your question is that you have multiple actions assigned to FAB based on what selection user have selected.

The best practice is to keep a single action mapped to FAB. If you are on limited screen space, hiding the FAB would not violate the material design.

I think your approach would be a bad design practice since, user would get confused with multiple action FAB.

4
  • To clarify, my FAB contains the same actions no matter what. I do in addition have other buttons in my layout, such as start and stop. Say for example, the user presses start, I would like to hide the FAB, then when the user presses stop, show the FAB.
    – Gerald Tan
    Jan 4 '18 at 5:53
  • Well in that case, I reckon you are building a media player sort of an application! if the FAB is on it's way of the player itself then, I don't think anything wrong with hiding the FAB, considering that your FAB is contains only one action. Jan 4 '18 at 5:56
  • I'm actually creating a workout tracker application. Thanks for the response though.
    – Gerald Tan
    Jan 4 '18 at 7:57
  • If I have answered your question, please mark it as an answer! :) Jan 4 '18 at 8:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.