3

I have 3 screens which I would like what would be the best method to organize them.

In mobile phone is straightforward, just 3 Activities for each screen would be enough.

In tablets the system is different. I know that most Tablet applications use a List Fragment on the left, and the Details Fragment on the right.

But in my case, the Details Fragment include another list. Both of them in phone will use Floating Action Buttons to add more elements to the list. However, I understand that having 2 FAB in the same screen is not a good practice.

Next, I will show a draw of these 3 screens:

Picture 1

As you can see, Screen 1 is the first screen. When I press the FAB, we go to Screen 2. In the header we introduce details of the elements of screen 1, and there is a list of elements. In the FAB of screen 2, we go to Screen 3, where we fill details and then we add the element to the list of screen 2.

However, I want to do this on tablet:

Picture 2

And Screen 3 would be another one apart.

So, after having seen the screens, I want to ask these questions:

  • Is correct to include two FAB as shown in the Picture 2? Or should I just leave the screen 2 FAB, and include the function of FAB from screen 1 in the Toolbar for instance?

  • What is better, leave screen 1 and 2 in the same Activity, and open other activity for screen 3; or include all 3 fragments on the same activity, and therefore show all in the same screen in tablet?

Improve this question
2
  • 2
    I'd suggest moving away from the whole FAB button concept when dealing with tablets. Android only made this to help phone devs decide quicker, earlier and faster (yes, all three) so they'd make more apps. There's an app volume war ( just about over) that's been going on for a while, and drove the push towards minimalism in UI that started with Metro and early Windows Phone, and the use of Java on Android, and the iOS 7 visual changes, autolayout prior to it and the whole HIG nonsense on iOS. When designing for Android tablets, feel free to think freely.
    – Confused
    Oct 30, 2016 at 5:12
  • 2
    Well, I have thought using an ActionBarButton with multiple options using Phone, and in tablet just introducing the buttons inside the toolbar. I think that in this case would be enough.
    – programmer23
    Nov 2, 2016 at 19:21

2 Answers 2

Reset to default
1

As you can see, Screen 1 is the first screen. When I press the FAB, we go to Screen 2. In the header we introduce details of the elements of screen 1, and there is a list of elements.

What kind of content is on Screen 1? A FAB seems not to be the correct pattern to switch to screen 2. Floating Action Buttons are used to manipulate the content on the current screen, not for navigation. FABs may be used to create an item, change a (global, non item specific) status etc.. You should provide us more details and/or rethink the whole navigation concept of this application. Using a FAB for navigation will be confusing for your users.

Improve this answer
1
  • I explain: Screen1 has a list of Items. If I click on one of these items, or the Screen1 FAB, opens Screen2. Screen2 contains information regarding of Screen1 elements, and this information includes some details (such as the name), and a list of other items. What I mean is that the Screen2 is the Edition or Creation of an element which will be listed in Screen1
    – programmer23
    Jan 5, 2017 at 19:18
1

I think you might have to rethink on the interaction which you are providing here.

I will first explain the use of Floating Action Button.

  1. There can be only one FAB as per the best practice.
  2. FAB is used as a shortcut for the most frequently used tasks with respect to that page/screen.
  3. It is not used for navigation.

Here is my understanding from your question.

  • you are using FAB for navigating from screen 1 to screen 2.

  • when you click on the FAB, it will take you to the next screen when you will enter the details of the elements shown in the screen 1.

If my understanding is right, I can suggest you on how to solve your scenario. Use cards. When you click on the card, it can expand and show the fields for the details. This could very well work on tablets too.

Search for cards on how to use cards as interface and search for FAB if you want to learn on how to use them on the link

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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