DrawerLayout on top of the action bar

Question

When using the box layout, is there a way to overlay the box view on the action bar? I do not want to hide the action bar when the box is displayed. I want the action bar to just stay in place, but be sent to the background. An example of this is an iOS music app ...

My current implementation hides and shows the action bar when the state of the box changes, but I don't like it.

public void onDrawerClosed(View view) { getActionBar().show(); invalidateOptionsMenu(); } public void onDrawerOpened(View drawerView) { getActionBar().hide(); invalidateOptionsMenu(); } 

Answer 1

I searched the Internet to find any good solution to this problem and did not find it. So I did the trick that did it.

First of all, we need to request the overlay function of the action bar. So in onCreate() your activity before setContntView() call: requestWindowFeature(com.actionbarsherlock.view.Window.FEATURE_ACTION_BAR_OVERLAY);

He will do everything, including the navigation box, outside the action bar. We don’t need this, so we need to set the top edge of our FrameLayout, which places our fragments in activity with the exact height of the action bar. In the activity layout file, we need to do the following:

 <!-- Framelayout to display Fragments --> <FrameLayout android:id="@+id/frame_container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="?attr/actionBarSize" /> 

This will only result in a navigation box behind the action bar. Now we will hide the action bar when the navigation box is opened in half, and will show it when the box is almost closed. To do this, we need to do the following:

 @Override public void onDrawerSlide(View drawerView, float slideOffset) { super.onDrawerSlide(drawerView, slideOffset); if(slideOffset > 0.5){ actionBar.setBackgroundDrawable(null); actionBar.hide(); } else { actionBar.show(); if(slideOffset < 0.1){ actionBar.setBackgroundDrawable(layerDrawable); } } } 

As you can see, I also change the background image of the action bar to make it transparent before I start hiding it, and change it back using my own background when I show it.

My custom background is a layerListDrawable which is all transparent but has a separator at the bottom with some shadow.

And for this, I defined the following list layer in XML:

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:top="0dp" android:left="0dp" android:bottom="0dp" android:right="0dp"> <shape android:shape="rectangle"> <solid android:color="@android:color/transparent"/> </shape> </item> <item android:top="0dp" android:left="0dp" android:bottom="0dp" android:right="0dp"> <shape android:shape="rectangle"> <solid android:color="#afafaf"/> </shape> </item> <item android:top="0dp" android:left="0dp" android:bottom="0dp" android:right="0dp"> <shape android:shape="rectangle"> <gradient android:angle="270" android:startColor="#88afafaf" android:endColor="#33afafaf" /> </shape> </item> </layer-list> 

And to get the background that I need from this XML, I do the following in this step:

 final ActionBar actionBar = getSupportActionBar(); final LayerDrawable layerDrawable = (LayerDrawable) getResources() .getDrawable(R.drawable.shadow_divider); final TypedArray styledAttributes = getTheme().obtainStyledAttributes( new int[] { R.attr.actionBarSize }); int topOffset = (int) (styledAttributes.getDimension(0, 0)); styledAttributes.recycle(); layerDrawable.setLayerInset(1, 0, topOffset - 3, 0, 2); layerDrawable.setLayerInset(2, 0, topOffset - 2, 0, 0); actionBar.setBackgroundDrawable(layerDrawable); 

where R.drawable.shadow_divider is the list of XML layers that I defined earlier.

It looks great! Hope this can help someone.

EDIT

I had a small error, which can sometimes be the cause of crushing. Here is the fixed code: `

  <FrameLayout android:id="@+id/frame_container" android:layout_width="match_parent" android:layout_height="match_parent" **android:paddingTop="?attr/actionBarSize"** />` 

It should be paddingTop not layout_marginTop !

Answer 2

This is the correct effect in Android by default. If you want to emulate the effect of iOS, you probably have to do it yourself, because the AFAIK component of the support library box does not allow these types of configurations.

In any case, every time a programmer coordinates a lot of things to imitate some of the bizarre (and probably not worthy) effects of iOS in Android, the little cat dies ...

Answer 3

I don’t think that you can do this with the Drawer Android navigator (without really hacking something), as it really contradicts Android patterns. If you want the library to do what you are looking for, I used this library before Android comes out with its own widgets, and that does what you are looking for.

Answer 4

I found the answer in my question, also added a sample project for reference. You can see if this works for you. Android navigator at the top of the ActionBar

Answer 5

You can achieve this with ActionBarSherlock.

http://actionbarsherlock.com/

Answer 6

You can do it, but the box will look so awkward that you will not like it. I had the same requirement, and I ended up using Radio Buttons buttons configured to display as tabs. You can also try to hide the tabs when the box opens, and vice versa, but this is definitely not what you want here.

You can try using ViewPager, a tabbed indicator such as PagerTabStrip and / or TabPageIndicator.

Source