I'm totally new to Android development. I even don't know the name of components yet, something that make a bit harder to find how can I reach my goals.
Now my main goal is to desing a screen with a bottom tabbed bar, where the user can click in the tabs and the body of the screen changes, like the Spotify's do.
This image shows exactly what I'm looking for with those five icons at the bottom.
You are looking for navigation bottom bar.
Link for design guidelines:
https://material.io/guidelines/components/bottom-navigation.html
Link for example library implementation: https://github.com/aurelhubert/ahbottomnavigation
Related
How can I learn how to cuztomize the android navigation bar?
I know that it is not recommended because of the material ui commandments (but I wanna do it anyways).
There is a few applications out there who supports this - and I was looking into them to see if I can learn it from them.
Lichess
I know a chess app called lichess which added 2 buttons in each side of the navigation bar - and the code is open source on github, but I can't find where the specific buttons are implemented. Also many things in the app is developen in typescript and scala with a wierd html dls.
Edit
I see that lichess is implemented in webview and they might just have created their own "fake" navigation bar in typescript.
CustomNavigationBar
Also there is another app called CuztomNavigationBar which should be able to change the settings for the android navigation bar on a global scale, so that it will persist after the app is closed.
This code is not open source so I cannot find out how he did it. Here is a tutorial how to use his app
Thank you in advance
Here is a image of the bottombar on lichess.
I am using SimonVT's MenuDrawer library (https://github.com/SimonVT/android-menudrawer) and have followed his Fragments sample in his code. Everything is working great, however in the fragments sample the menu appears on the entire left side of the screen (top to bottom) which goes thru/over the ActionBar. I am looking to have the Menu Drawer appear below the ActionBar at all times so the ActionBar stays in place. I have tried both properties OVERLAY and BEHIND but both take over the entire left side of the screen.
This is NOT what I want - http://i102.photobucket.com/albums/m91/saucergumshoe/MenuDrawerFragmentExampleMenuOverActionBar_zpsda4664f1.jpg
This is what I want, you can see the menu is below the ActionBar - http://i102.photobucket.com/albums/m91/saucergumshoe/MenuDrawerLeftOverlayExampleMenuUnderActionBar_zps7a20baa9.jpg
I am fairly new to Android so maybe I am making a silly mistake?
Here are the main settings on the Drawer:
mMenuDrawer = MenuDrawer.attach(this, MenuDrawer.Type.OVERLAY, getDrawerPosition(), getDragMode());
mMenuDrawer.setTouchMode(MenuDrawer.TOUCH_MODE_FULLSCREEN);
mMenuDrawer.setSlideDrawable(R.drawable.ic_drawer);
mMenuDrawer.setDrawerIndicatorEnabled(true);
Set the drag mode to MENU_DRAG_CONTENT
mMenuDrawer = MenuDrawer.attach(this, MenuDrawer.Type.OVERLAY, getDrawerPosition(), MenuDrawer.MENU_DRAG_CONTENT);
What I can suggest you, is to use the official NavigationDrawer from Google as explained at https://developer.android.com/design/patterns/navigation-drawer.html.
There's also a link to a tutorial with sample code: https://developer.android.com/training/implementing-navigation/nav-drawer.html.
You can follow it to understand how to create a correct drawer and you can also download the source code as well.
This is the official component provided by Google and it behaves exactly as you asked in your question and like all the Google apps (and many others).
What is complete replacement of iOS Tabs Replacement in Android.
I Know that Android is Android and we don't Imitate other platforms on Android. I have Studied Pure Android
But All I want to have the replacment of iOS tabs in Android with following features.
1.) Stores Navigation flow for each tab, As in iOS there is navigation controller for each tab and we can have the previous state for each tab while switching from tab to tab.
2.) Desirable but not necessary- Double click on tab button will refresh the view with the root view as per in iOS.
3.) The animation while switching from tab to tab or with in Tab does not swipe the complete Tabs(including the TAB Bar). It means only the content of each Tab should be replaceable with separate Activity or something like this.
4.) In short User Experience must be similar to iOS Tab Bar.
What I have Tried so far.
1.) Added Tabs with TabHost on bottom of screen.But I Haven't got the stack navigation for each Tab separately.
(Something like: https://github.com/AdilSoomro/Iphone-Tab-in-Android)
2.) Also I have an idea of Using Stack (Java Collection Framework.) But that will be a headache to maintain all the stack by my self.
So, Guys In short:
Do you have any ideas of any Third Party Library, that I can use in my project without much problem to achieve all the features mentioned above?
Any help would be appreciated.
Thanks.
This one is best to implement iOS like tabs in Android
Like this:
You can use the native tabs and style it to seem like iOS ones.
Use Fragments, and store/reload the "Natigation flow" at the onPause/onRestore methods in each Fragment or in the FragmentActivity when you change form one fragment to an other.
BTW, please don't do that. If you studied Pure Android, what's the point do you want to achieve? Android is Android and iOS is iOS, do not mix them please.
UPDATE: 3 September 2017
An other, and imho better, approach to do so is make use of the Bottom Navigation. Take a look to materialdocs to learn how to use it.
I have seen a couple of application having a TabBar like the following here. I am talking about the widget the bottom left hand corner of the image. You can drag the circular disc and change the tab. Also an Image POP ups about the current TAB. I have tried searching about but so far no luck.
Kind Regards
This is something that HTC developed for their own usage.
it is not available openly to developers sorry.
If you want something like this you will need to develop it on your own.
You can achieve this by using a TabHost widget with TabWidget placed in a horizontal scroll view and then on tab click show some kind of custom fullscreen Toast message with the description and the image. also customize the TabWidget, you can definitely find info on the Tabhost and customizing the tabwidget either here on stackoverflow or some tutorials on google.
In any case you definitely need to do this from scratch, but its certainly possible.
I have used an Android application recently that has an interesting UI pattern in it. I have made two screenshots to show you what I'm talking about:
Initial State (look at the blue rectangle on the right of the screen):
After clicking on that blue rectangle, it slides smoothly to the left, which results in the following screen:
My question is simple, how do you think this could be achieved? Also, what's the name of this pattern? A sliding pane?
This is called sliding drawer in the android vocabulary.
You can find is as an ui component.
To obtain the same result you would actually need to change the default handle to a blue one (from an image a priori).
Some links on the topic:
official documentation
A good example on how to customize it