Gmail tablet style scroll bars with transparent actionbar - android

I've been trying stuff and searching for the last couple of hours and got no where so I thought I'd ask here.
Basically the Honeycomb version of Gmail has a listview on the right for it's message list and when you scroll the listview the items go under the actionbar which appears to have some form of gradient on it with #00FFFFFF at the bottom going up to #FFFFFFFF at the top giving the impression of the items fading out.
But they important thing to notice here is that the SCROLLBAR on the listview never goes underneath the ActionBar! and the default top position for the listview is underneath the scrollbar.
I've tried to implement a similar style layout for my app with a scrollview that scrolls underneath the actionbar which has an alpha set on it, it looks all nice and well but the scrollbars go underneath as well! :( and it makes it look a bit weird, it's not a nice option.
I've achieved what I have so far by using
getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
and
getActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar_bg));
which is a an XML drawable that simply has a color of #BB000000 (no gradient just yet)
this is the current effect, the scrollbar can be seen underneath the actionbar :(
this is the desired effect with the scrollbar never going into the actionbar but the content does scroll up underneath it
Edit: I think this probably uses something custom in Google and have all but given up figuring it out

call this before super.onCreate(savedInstanceState); in onCreate of your activity
requestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
More: http://developer.android.com/reference/android/view/Window.html#FEATURE_ACTION_BAR_OVERLAY

I can't see an easy way of doing this but I have come up with two possible solutions. There could well be a much better option that I couldn't see obviously.
The first and easiest, is to create a 9patch background file for you ActionBar that has an expanding gradient area and a fixed opaque area at the right hand side, the same side as your scroll bar. This way the scrollbar would still go under the ActionBar, but it would be hidden. However it would have the affect of the scrollbar disappearing / getting smaller.
Another option would be to edit the scrollbar thumb in the xml like this:
<ListView android:scrollbarThumbVertical="#drawable/YOUR_CUSTOM_THUMB" ></ListView>
Then create a scrollbar thumb with a transparent offset at the top.
Thinking about it I think the second option is probably the best to go for and will give you the best result. I realise it's a pretty crappy hack. Looking into a code way of doing it, I think you would have to extend a number of classes and override a load of methods.

simply use:
getActionBar().setBackgroundDrawable(null);

Related

Android Navigation Drawer over GLSurfaceView

Drawer placed over glSurface behaves wrong. It ignores layout width and height. Animation is bad too.
I took the sample project BasicGLSurfaceView from Android SDK and applied this official manual to it.
If i set glSurface's visibility to invisible or remove it and change to any another View everything is okay.
Am i doing something wrong?
UPD1: Just tried to set some solid color as background for drawer. Now it looks acceptable - width and height just as the supposed to be. And the shadow in its place. But animation still twitches.
I got it solved with workaround described here (just place dummy empty View over GLSurfaceView): DrawerLayout ListView not drawn with GLSurfaceView as content

Tips at start-up or update

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.

Tips on how to build a layout like this one

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".

Android View - manipulate the shadow

In a listview or many of the scrollable views, there are on top and buttom a shading effect.
I am not talking about the fading effect: It is the black color that appears on the top along with the fading effect.
Actually even if i am not scrolling seems like this black color will stay! please check the image
How can this effect be removed? (maybe manipulate the color or sth)
http://img28.imageshack.us/img28/4035/badtl.png
this is a list
thanks
You can manipulate the color of the fading edge with the android:cacheColorHint attribute, if thats what you're talking about and you haven't figured it out in the past 2 months - see This post in the android docs for details.

Android title buttons

I am trying to reproduce the account chooser widget that the GMail app has on top right.
I know already how to put things in the title but i have several problems:
I've tried putting a normal button in the title but it doesn't fit
It looks like the size of the title is bigger than what it is, for example if I put a normal button there, there is no way of making it the proper height, in fact goes below the app like if half of the title space was hidden below
I thought it might be a clickable label with a rectangular shape, but I tried it and no way to make it work.
Any hint?
Looking at the layout using the hierarchy viewer it seems like it really is just a Button inside a LinearLayout. The only interesting part is that the LinearLayout's layout_height is set to MATCH_PARENT (which is just the newer version of FILL_PARENT) where its parent the RelativeLayout has a hardcoded layout_height of 54.
I'm not sure if this is of help for you but maybe it can point you in the right direction.

Categories

Resources