Glovebox popsup one sidebar (concept taken from Ubuntu OS)at the left edge of the screen. What UI component should I use to replicate the same feature inside my application.
There is the ActionBar which can contain custom items with custom icons. though its meant to be on top (expanding on bottom too), and not on right or left side..
..OR..
..you can have a look on Drawers, which you can find HERE.
There are several different types of drawers, maybe the navigation-drawer suits your expectations.
Related
This may not be possible in react-navigation. But asking, just in case, there are some work-arounds or ways which I am not aware of.
In the above screenshot, I have two tabs - Trending and Watchlist. And on the right corner, are two buttons - search icon and filter icon to do some actions.
Is this kind of tabbed layout possible with react-navigation? Is this possible using Android SDK (Java code)? If possible, I like to know how (at high level).
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
ALL,
I am trying to port the application from iOS to Android.
In iOS there is a view at the bottom of the screen which holds couple of buttons and it looks like a status bar. One button is implemented as notification button (something like icon in SMS-like applications where you see number in the upper right corner of the icon) and the others are just regular buttons.
This view is always on screen and it looks like a notification area.
Now on Android, how do I implement such a view? Go to each layout.xml and add it there? Can ViewGroup be used for such a view?
Need some guidance here.
Thank you.
[EDIT]
As some people asked here is what I'd like to have.
If you look at the Android phone after boot up (I have an HTC one) there is a grey area at the bottom of the screen. In the middle there is a big button, which says "Phone" and there are 2 smaller buttons - one which directs you to the applications installed and the other is for Personalization of the device.
What we want is something like this with much smaller button images.
[/EDIT]
Tabs on Android are placed at the top of the screen; not at the bottom:
Please carefully read this page: http://developer.android.com/design/patterns/pure-android.html and http://developer.android.com/design/patterns/actionbar.html
You could of course use a custom View, but developing will be a nightmare.
The contents of tabs can be achieved using ViewPager and Fragments: http://developer.android.com/reference/android/support/v4/view/ViewPager.html
While the indicators can be achieved with PagerTabStrips
http://developer.android.com/reference/android/support/v4/view/PagerTabStrip.html
I'm not sure what exactly the view is you are talking about without an image but you can create this layout in its own xml file then you simply use an <include> tag in each xml file. Once you get the properties how you want them it is simply copy/paste into each file, for the most part
I do this in my layouts. I extend from a BaseActivity or BaseListActivityandincludea customActionBar` so I can have the look and functionality I need throughout the whole app.
Reu-using Layouts
my app is using using Sherlock action bar.
my designer gave me a new design.
the app logo need to be in the middle
2 action items to the left and 2 actionitems to the right of the logo
the app logo height is 1.5 the size of the actionbar (it suppose to be a little overflow)
is it possible to create a custom layout for the actionbar to implement this desing ?
or should i remove my actionbar and implement the design my own ?
if item #3 will be optional , does it changes your answers ?
Thanks
I'm sorry, but kick your designer in the...
He doesn't get Android at all and shouldn't design for Android. Either it's an ActionBar and then you should treat is as such and you (or your designer) should follow the common pattern on Android, or it is not.
If it is no ActionBar, please do not use an ActionBar (no matter which library) and create a custom design that deviates enough from an ActionBar so as not to confuse users!
Please forward your designer, and your manager to Android design patterns site at http://developer.android.com/design/patterns/actionbar.html . Also tell them that if they want Google to ever feature them, they pretty much have to adhere to these. With all failed use full screen layout and create a custom control on the top
I agree with other answers: that's not an action bar as defined by Android guidelines.
I'll just add that in case you can't go against the design decisions made (yeah, real-world projects sometimes suck and as a programmer you'll have to do what the client asks).
Go with your own implementation. I suggest simply creating a fragment with the appropriate listener interface (a common Android pattern, let the activity implement the interface, set the fragment's listener in onAttach).
If you want to implement this (and I pretty much agree with the other posters, that this is non-standard, and probably shouldn't be done).
You won't be able to create this style ActionBar with the standard APIs (or ActionBarSherlock for that matter) - since your UI is non-standard
You could create a RelativeLayout, with your icon in the center (centerInParent="true"). Then in the same layout, you could create a background, with width set to "fill_parent", and the height to 2/3 the size of your center icon (calculating this value in DP).
Then you can create ImageButtons for your 2 ActionItems to the left and to the right, then just put them in your layout relative to the center icon.
Bottom line, you probably should re-think your UI, to make this more standard to the design patterns specified by Android. If you still want to do it the way your designer asks, you will need to do a custom layout (using a RelativeLayout as I suggested is one way to accomplish the UI you are looking for).
You could create a RelativeLayout, with your icon in the center
centerInParent="true"
Then in the same layout, you could create a background, with width set to fill_parent, and the height to 2/3 the size of your center icon (calculating this value in DP).
Could anyone give me a tip on how to build a layout like in the following picture?
The application i'm working on has absolutely nothing to do with VoIP but I'm trying to build something like this. One fixed toolbar at the bottom, an interchangeable middle pane with listviews, scrollviews or other, and another toolbar at the top which would change depending on the button selected on the bottom bar.
Also, would it be possible and good practice to keep all of this within a single activity?
You should NOT build an interface like this. Don't use bottom bars! Don't use labelled back buttons on action views!
You should read the Android design guidelines and then work with tab views... and other stuff referenced there and build an Android app.
Also, would it be possible and good practice to keep all of this within a single activity?
-Yes for sure, and yes with a slight catch, depending on what you mean.
One approach would be to create your top and bottom bars inside their own XML. Then in your activity onCreate() inflate and add at the top and bottom of your Layout.
If the bottom bar will not change ever, then you could actually add that into the layouts you already have. If you do it that way, to handle the listeners you could create an Activity that contains just the bottom bar click listeners and then extend that with all of your other activities.
Since the top bar can change though you'll probably have to inflate and add the views to that at run time, that way you can react to what is going on to add / remove / present the appropriate views in the top bar.
Also just because it is somewhat of a pet peeve of mine:
When designing your bottom bar please seriously consider the fact that some devices have soft buttons directly underneath the touch screen. And they are rather close to the screen on some devices. Applications with a bottom bar that is not tall enough create an opportunity for the user to hit one of the system buttons instead of one of the bottom bar buttons as they are intending (or vice versa). Which from a users perspective I must say is VERY aggravating.
Do not use bottom bars. To give a more familiar UI, put all of those functions into the top bar. Start by looking at the source code for the ActionBarCompat project in your android sdk sample folder.
The Android developer site is a good place to start. See
UI Guide
I also agree with the poster who recommended against this specific layout. It seems to have been developed for an iPhone and shouldn't be used "as is".