I have implemented the action bar (not the quick action bar) in my app. The action bar is based on the one used in the Google IO app and the Facebook app. I am stumped though, trying to understand how to keep the action bar fixed. When an activity needs scrolling, the action bar needs to be remain fixed. Can anyone help with this problem?
Some good stuff in Jon's post, but if you're just looking for the simple answer to work with your existing layouts/activities, just use a vertical LinearLayout with the first child as the titlebar and the second as the ScrollView, setting the ScrollView height to fill_parent (or setting fillViewport to true). Alternatively, use a RelativeLayout with the scrollview set to layout below the title, or with a top margin on the scrollview equal to the height of the title bar.
I'm developing an open-source app that is adapted from Google IO. I made a generic version of the titlebar that they used - called CustomTitlebarActivity which subclasses Activity.
As an example, I'll refer you to my HomeActivity implementation which subclasses CustomTitlebarActivity; since I abstract the titlebar away from the activity's layout, you can easily add a ScrollView below it that will not scroll the titlebar out of view.
An added benefit to this design choice is a lot more code re-use than Google IO had, with some ..quirks that are easily circumvented. I won't go into that in more detail here though.
HomeActivity
res:
http://code.google.com/p/electricsleep/source/browse/beta/res/layout/activity_home.xml
src:
http://code.google.com/p/electricsleep/source/browse/beta/src/com/androsz/electricsleepbeta/app/HomeActivity.java
CustomTitlebarActivity
res:
http://code.google.com/p/electricsleep/source/browse/beta/res/layout/titlebar.xml
src:
http://code.google.com/p/electricsleep/source/browse/beta/src/com/androsz/electricsleepbeta/app/CustomTitlebarActivity.java
Also, I have one activity that has a scrollview inside it, (though it is inside a ViewFlipper) in case you have trouble. Check out the res:
http://code.google.com/p/electricsleep/source/browse/beta/res/layout/wizard_welcome.xml
Related
I have an update for my app that includes ActionBarSherlock with a sliding menu. I have put my navigation entirely in to the sliding menu, leaving my main_activity pretty bare. I am worried the user won't know about the menu. So I want to add a prompt at start-up that will highlight the new feature. Like this:
I am not even sure what this is called, so I don't know how to research it. Any help or suggestions will be rewarded. Thanks!
You could just use overlay layout (Frame layout with multiple inner layouts will fit perfectly. Please note Frame Layout Z axis is by the lower the layout is in the xml, so the guide should be the last in the XML). Make that layout's background mostly transparent and add buttons and design to fit your needs. When you don't want to show the layout just set visibility to gone. And when you need it set to visible.
So I'm using Garuma's FlyOutContainer class in my project (http://blog.neteril.org/blog/2013/04/19/fly-out-menu-xamarin-android/)
But I'm having trouble using the menu to change the content layout. Whenever I remove a view from the content layout and inflate another, it draws the entire content layout at 0, 0 so when the menu layout closes, it drags the content layout past the left edge of the screen as well!
I've been looking for answers and fiddling with this for days now, so I thought I'd ask if anyone here has run into this issue and fixed it as well.
Alternatively, a layout that I could hold static to switch between several other layouts might work as a solution, I just haven't been able to find one that could do so that worked with this FlyOutContainer.
Thanks in advance for any and all replies!
-Sibley
I suggest using the DrawerLayout which Google supplies in the Support.v4 packages, which shows the standardized version of the FlyOut/Sliding/NavMenu which has been implemented in various ways previously, including FlyOutMenu.
I have a sample showing both DrawerLayout and SlidingPaneLayout in my GitHub repo.
One thing to notice is that SlidingPaneLayout is not meant for navigation, while DrawerLayout is. The former is meant as a responsive design, where a Pane's visibility is toggled in portrait mode, while always visible in landscape mode.
I'm trying to do minor tweaks to the layout of items inside an ActionBar, and hitting a lot of problems. It would help if I knew (or even better: could override!) the layout which Android is using for the ActionBar itself.
(Android's layout system doesn't allow you to fully control layout of "items" direct from the item itself - all the options are enabled/disabled based on what type the parent/container layout has)
So, for instance...
try to make a custom ActionView that takes "all remaining space" (because you have no title / don't need a title)
...everything breaks. There are lots of workarounds, all of which have their own bugs (I've tried 3 from SO already, and they all break on different versions of Android / different handsets)
this would be TRIVIAL if I could set the ActionBar's layout to "RelativeLayout" and use "layout_toLeftOf" etc
...but the docs don't seem to answer this, nor do they provide a way of setting it. Any ideas? I don't want to have lots of hardcoded, broken code to workaround the API (because it'll make maintaining this app a nightmare :( )
Have you looked at ActionBarSherlock? It's a support library extension that implements action bar on all versions of Android using single API. Also, when it comes to layouts, I often find it very useful to look at the source code. You can find action bar layouts on the very top of the list here.
Load the view hierarchy and then you will be able to see the views that compose any layout.
http://developer.android.com/tools/debugging/debugging-ui.html
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".