In iOS screen, tab-bar and segment controller on the same screen. In android normally tab-bar on the top side. As per Google standards tabs should not be nested. How can I convert iOS screen to android UI.
2 Answers
Google guidelines were updated not too long ago in a way that allows you to replicate this iOS UI.
Google's guidelines statement about nesting tabs refers to using the tabs navigation structure multiple times in a nested fashion. There are two different navigation elements in the interface you included a picture of. Similarly, in android, there are two different elements that can be used to recreate this navigation structure.
See: material.google.com/components/bottom-navigation.html for bottom navigation
And: material.google.com/components/tabs.html for tabs
Below is an implementation of these elements like I am describing, where tabs are used for secondary navigation withing the category of the bottom navigation element. This comes from the Android Google Plus app.
Best practice states you should follow the UI standards and conventions for each platform. The big challenge of course is iOS and Google Android standards are not always that compatible, plus it can be more expensive to build two different looking solutions, even though this would be best for the person using the phone.
So you really only have two options:
- Create 2 different solutions optimised for each platform
- Create 1 solution which works for both platforms, which might mean deviating from their respective standards and conventions.
