This is the issue I am encountering
On pre-lollipop devices I have the following issue
On Lollipop and Marshmallow devices everything appears fine
I am trying to create the translucent status bar effect when opening the navigation drawer.
On Marshmallow and lollipop devices this is working fine.
Here is my code
activity_base.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerLayout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ToolbarStyle"
app:theme="#style/ToolbarStyle" />
<FrameLayout
android:id="#+id/activity_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<include layout="#layout/view_navigation_drawer_layout" />
</android.support.v4.widget.DrawerLayout>
view_navigation_drawer_layout.xml
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/nav_header" />
<ListView
android:id="#+id/lst_menu_items"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.design.widget.NavigationView>
Note that I do the above because of the answer to this question NavigationView and custom Layout
Notice that both layouts have the android:fitsSystemWindows="true"
I thought maybe its because I include the layout so I tried copying the whole layout into the activity layout. Did not help
I also have this styles xml file in my values-v19 directory (for KitKat and above)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="MaterialDesign">
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
I made a solution to this issue. However, my solution requires a BaseActivity that hijacks the layout as stated in this blog post http://mateoj.com/2015/06/21/adding-toolbar-and-navigation-drawer-all-activities-android/
here is my code
public class BaseActivity extends AppCompatActivity {
#Override
public void setContentView(int layoutResID) {
ViewGroup baseView = (ViewGroup) getLayoutInflater().inflate(R.layout.activity_base_with_drawer);
FrameLayout activityContainer = (FrameLayout) baseView.findViewById(R.id.activity_content);
getLayoutInflater().inflate(layoutResID, activityContainer, true);
super.setContentView(layoutResID);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (useToolbar()) { //Does the activity have a toolbar?
toolbar.setFitsSystemWindows(true); //toolbar will stretch underneath the status bar and because it naturally has a semi translucent background, it will assume a darker color of the toolbar which is usually the color primary.
setSupportActionBar(toolbar); //Set the toolbar
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
}
} else {
toolbar.setVisibility(View.GONE);
activityContainer.setFitsSystemWindows(true); //No toolbar so we set the container to have the fitsSystemWindow attribute to ensure contents do not overlay the system window such as status bar and navigation bar.
TypedValue outValue = new TypedValue();
boolean doesThemeHaveTranslucentWindow = getTheme().resolveAttribute(android.R.attr.windowIsTranslucent, outValue, true); //Check if the current activity theme has translucent window, this includes SearchActivity
if (!doesThemeHaveTranslucentWindow) { //If it does not then set the container background to colour primary to have the same effect as the toolbar being there and avoid a white status bar. We do not want to do this for translucent windows otherwise they would not be see through
activityContainer.setBackgroundColor(ContextCompat.getColor(this, R.color.colorPrimary));
}
}
}
And this is the layout
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ToolbarStyle"
app:theme="#style/ToolbarStyle" />
<FrameLayout
android:id="#+id/activity_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<include layout="#layout/view_navigation_drawer_layout" />
</android.support.v4.widget.DrawerLayout>
FitsSystemWindows is no longer set in any of the XML layouts. This is done in the setContentViewMethod of the BaseActivity class.
If the activity does not have a toolbar, the activity container has the fitsSystemWindow attribute set to true otherwise, the toolbar has it applied.
If the activity does not have a toolbar, its container layout has a background colour set to the colour primary.
Why I do this is because when you set fitsSystemWindows on your toolbar it stretches underneath the status bar and because the status bar naturally has a semi translucent background, it will assume a darker color of the toolbar which is usually the color primary so we do this for the activity container to have the same effect.
Now there is a use-case I had in my app where I had an activity with a transparent window background which I check. If not true, the activity container has this colour set.
Not sure if its the best solution but its working well for me so far on Marshmallow, pre-lollipop and pre-KitKat too :P . Hope it helps out others.
Related
1
I´m trying to use CollapsingToolbarLayout with a ScrollView but I do not why it doesn't work. I try this:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="256dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
app:layout_scrollFlags="scroll|enterAlways"></include>
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/graph"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:background="#color/white"></com.github.mikephil.charting.charts.LineChart>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/nested_scroll_view" />
</android.support.design.widget.CoordinatorLayout>
my nested scrollview that its bhavior set to appbar_scrolling_view_behavior
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="10dp">
<include layout="#layout/scroll_view_aba"/>
<include layout="#layout/scroll_view_aci"/>
<include layout="#layout/scroll_view_aci_reduced"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
my nestedScrollView is scrolled but the collapsing toolbar is pinned!
make sure you are using toolbar as actionbar
To use Toolbar as an ActionBar, first ensure the AppCompat-v7 support library is added to your application build.gradle (Module:app) file:
dependencies {
...
compile 'com.android.support:appcompat-v7:23.1.0'
}
Second, let's disable the theme-provided ActionBar. The easiest way is to have your theme extend from Theme.AppCompat.NoActionBar (or the light variant) within the res/styles.xml file:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
</resources>
Now you need to add a Toolbar to your Activity layout file. One of the biggest advantages of using the Toolbar widget is that you can place the view anywhere within your layout. Below we place the toolbar at the top of a LinearLayout like the standard ActionBar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
<!-- Layout for content is here. This can be a RelativeLayout -->
</LinearLayout>
Note: You'll want to add android:fitsSystemWindows="true" to the parent layout of the Toolbar to ensure that the height of the activity is calculated correctly.
As Toolbar is just a ViewGroup and can be styled and positioned like any other view. Note that this means if you are in a RelativeLayout, you need to ensure that all other views are positioned below the toolbar explicitly. The toolbar is not given any special treatment as a view.
Next, in your Activity or Fragment, set the Toolbar to act as the ActionBar by calling the setSupportActionBar(Toolbar) method:
Note: When using the support library, make sure that you are importing android.support.v7.widget.Toolbar and not android.widget.Toolbar.
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
public class MyActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
// Find the toolbar view inside the activity layout
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// Sets the Toolbar to act as the ActionBar for this Activity window.
// Make sure the toolbar exists in the activity and is not null
setSupportActionBar(toolbar);
}
// Menu icons are inflated just as they were with actionbar
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
}
Next, we need to make sure we have the action items listed within a menu resource file such as res/menu/menu_main.xml which is inflated above in onCreateOptionsMenu:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/miCompose"
android:icon="#drawable/ic_compose"
app:showAsAction="ifRoom"
android:title="Compose">
</item>
<item
android:id="#+id/miProfile"
android:icon="#drawable/ic_profile"
app:showAsAction="ifRoom|withText"
android:title="Profile">
</item>
</menu>
From this point on, all menu items are displayed in your Toolbar, populated via the standard options menu callbacks.
Also make sure that the CoordinatorLayout is the main layout container.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CoordinatorLayout>
I found my answer
in my toolbar XML file ,layout_height is set to "wrap_content". I set it to "?attr/actionBarSize" and CollapsingToolbarLayout scrolled charmly
I have main activity with NavigationDrawer Toolbar and BottomBar. Inside the activity is container for fragments. And the fragment has RecyclerView. So when user is scrolling, I want to hide the Toolbar and BottomBar accordingly. I did that using layout behavior on recycler app:layout_behavior="#string/appbar_scrolling_view_behavior" and layout scroll flags app:layout_scrollFlags="scroll|enterAlways|snap" on Toolbar. For BottomBar I'm using this library: https://github.com/roughike/BottomBar
The problem is, that when the Toolbar and BottomBar are scrolled off the view, they are still visible under the StatusBar and NavBar
My code:
STYLE:
<style name="TranslucentStatusTheme" parent="AppTheme">
<item name="android:windowTranslucentNavigation">false</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
MAIN ACTIVITY CONTENT:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/app_bar_main_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.test.activity.MainActivity"
>
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomBar"
android:fitsSystemWindows="true"
/>
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_bar_menu_height"
app:bb_activeTabColor="#color/colorAccent"
app:bb_behavior="shifting|shy|underNavbar"
app:bb_inActiveTabColor="#color/bottom_bar_inactive_tab_color"
app:bb_tabXmlResource="#xml/bottombar_tabs"
app:layout_anchor="#id/container"
app:layout_anchorGravity="bottom"
android:layout_gravity="bottom"
/>
</android.support.design.widget.CoordinatorLayout>
AND IMAGES OF MY PROBLEM:
When no fitsSystemWindows flag is set - the toolbar is below stauts bar
When no fitsSystemWindows flag is set and content is scrolled - the toolbar is hide properly, but the bootom bar is still visible below nav bar
When fitsSystemWindows flag is set to root coordinator - the normal state looks ok
When fitsSystemWindows flag is set to root coordinator and content is scrolled - the status bar and bottom bare are visible below the transparent status bar and nav bar
Can anybody help me what I'm doing wrong? I already tried all possible combinations of fitsSystemWindows on different views.
EDIT:
I fixed the Toolbar below status bar issue, but I don't think that the solution is clean. I'm still looking for better one. And I still cannot solve the bottom bar issue
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
}
.....
// A method to find height of the status bar
private int getStatusBarHeight() {
int result = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = getResources().getDimensionPixelSize(resourceId);
}
return result;
}
To hide BottomBar on scroll, you need to set app:bb_behavior="shy"
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_bar_menu_height"
app:bb_activeTabColor="#color/colorAccent"
app:bb_behavior="shy"
app:bb_inActiveTabColor="#color/bottom_bar_inactive_tab_color"
app:bb_tabXmlResource="#xml/bottombar_tabs"
app:layout_anchor="#id/container"
app:layout_anchorGravity="bottom"
android:layout_gravity="bottom"
/>
I've searched for solutions but don't seem to find any answer for my issue. I navigated several potential solutions I found here but all of them ended up with the same issue.
Context: I have a FragmentContainer that holds a Viewpager with RecyclerView in each page. When I click an item in the RecyclerView, it opens a new different FragmentContainer2 with a ViewPager that holds the detail of the selected card and I can swipe reading the different cards.
What I want to do: when I select an item in the RecyclerView, I want the appBar GONE.
Problem: when I hit any item of the RecyclerView and the new ViewPager loads, the appBar buttons and title are gone, but not the background!
Here there are two screenshots of the states of appBar in one ViewPager and the other:
FragmentContainer that holds a ViewPager with a RecyclerView:
FragmentContainer that holds a ViewPager with the news detail:
METHOD TO SHOW AND HIDE TOOLBAR/FLOATING ACTION BUTTON:
public void setToolbarAndFabVisibility(Boolean trueOrFale){
ActionBar actionBar = getSupportActionBar();
if(trueOrFale!=null){
if(trueOrFale){
if (actionBar != null) {
actionBar.show();
}
fab.setVisibility(View.VISIBLE);
}else{
if (actionBar != null) {
actionBar.hide();
}
fab.setVisibility(View.GONE);
}
}
}
activity_main.xml:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<include layout="#layout/app_bar_main"/>
<android.support.design.widget.NavigationView
android:id="#+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/nav_header"
app:menu="#menu/menu" />
app_bar_main.xml:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<include layout="#layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_pressed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:elevation="20dp"
android:src="#drawable/favourite_button"
app:fabSize="mini"
app:layout_anchor="#id/fragment_container"
app:layout_anchorGravity="bottom|right|end" />
Both xml are closed with appropiate tags. For some reason preview here doesn't show.
Any idea where I might be failing? I have everything in one activity.
Let me know if there's anything else I can post here that might help. Thanks for taking the time.
EDIT;
sorry, I forgot to include the toolbar.xml:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="16dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways|snap">
<Button
android:id="#+id/favourites_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:background="#drawable/favourite_button" />
<Button
android:id="#+id/bookmarked_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:background="#drawable/bookmarked_button" />
<Button
android:id="#+id/history_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:background="#drawable/ic_history_white_24dp" />
use this:
getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
getActionBar().hide();
My guess is that you are dealing with two action bars:
One is provided by the system through a theme like #style/ThemeOverlay.AppCompat.Dark.ActionBar
and the other is declared in your app_bar_main.xml.
getSupportActionBar().hide() only hides the action bar that is provided by the system.
Check the theme that is set in the application manifest and consult the documentation at https://developer.android.com/training/appbar/setting-up.html
if
getActionbar().hide();
getActionbar().show();
doesn't work then try
getSupportActionBar().hide();
getSupportActionBar().show();
It will work.or try to use toolbar
I was issuing this same problem. ActionBar was being overridden and that's why it leaves a black gap when hide() is called.
Fix:
styles.xml:
<style name="Theme.AppCompat.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
AndroidManifest.xml:
<activity android:name="com.stonetree.supercart.controller.activities.SuperCart"
android:theme="#style/Theme.AppCompat.NoActionBar"></activity>
<activity
Make sure to call on your manifest the proper style name which has windowActionBar set to false.
Activity.xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"></android.support.v7.widget.Toolbar>
Add Toolbar to your layout. Make sure to call dependencies to compile android.support.v7.widget.
compile 'com.android.support:appcompat-v7:23.1.1'
Watch out for version and further minor details. Moving on...
Activity.java:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity);
Toolbar myToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(myToolbar);
}
In my case, my menu was separated on xml. A custom menu.
Menu.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/itemId"
android:icon="#android:drawable/stat_notify_sync"
android:title="Menu item"
app:showAsAction="collapseActionView" />
</menu>
Also call on Activity.java:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.supercart_app_bar, menu);
return super.onCreateOptionsMenu(menu);
}
Now Toolbar has your custom layout from Menu.xml - Just call hide() or show() wherever your want and the Bar will act like visibility is set to View.GONE and View.VISIBLE.
I am not getting it which is ActionBar and which is ToolBar.
How do i implement this?
Any answers appreciated..Thanks in Advance.
In this example, the blue toolbar is an extended height, overlaid by the screen content and provides the navigation button. There is another toolbar used in the detail view. I have circled both Toolbars below.
Haven't tried this yet but it should work. Here is your layout :
<?xml version="1.0" encoding="utf-8"?>
<!-- The important thing to note here is the added fitSystemWindows -->
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Your content -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Your main ActionBar (with the blue background).
The height is 56 + 72dp according to specs -->
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="128dp" />
<!-- The white sheet -->
<FrameLayout
android:id="#+id/content_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="64dp"
android:layout_marginStart="64dp"
android:layout_marginTop="56dp"
android:background="#android:color/white">
<!-- This is the secondary toolbar, 72dp also according to specs -->
<android.support.v7.widget.Toolbar
android:id="#+id/secondary_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:minHeight="72dp" />
<!-- Your main frame container where you put your fragment -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</RelativeLayout>
<!-- Your drawer view. This can be any view, LinearLayout
is just an example. As we have set fitSystemWindows=true
this will be displayed under the status bar. -->
<LinearLayout
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:fitsSystemWindows="true"/>
</android.support.v4.widget.DrawerLayout>
This will include a NavigationDrawer that goes on top of the ActionBar (for more information about this, read this answer by Chris Banes), and the layout you're requesting.
Then in your Fragment/Activity :
public void onCreate(Bundled savedInstanceState) {
super.onCreate(savedInstanceState);
// ...
// Set the main Toolbar as the ActionBar
Toolbar mainToolbar = (...) findViewById(R.id.main_toolbar);
setSupportActionBar(mainToolbar);
// Now retrieve the DrawerLayout so that we can set the status bar color.
// This only takes effect on Lollipop, or when using translucentStatusBar
// on KitKat.
DrawerLayout drawerLayout = (...) findViewById(R.id.my_drawer_layout);
drawerLayout.setStatusBarBackgroundColor(yourChosenColor);
// Use the secondary toolbar in Standalone mode. This means you don't set is as the ActionBar
// but it also implies you have to handle the Toolbar items yourslef
Toolbar secondaryToolbar = (...) findViewById(R.id.secondary_toolbar);
// For example, to set an OnMenuItemClickListener to handle menu item clicks :
toolbar.setOnMenuItemClickListener(
new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
// Handle the menu item
return true;
}
});
// To inflate a menu to be displayed in the toolbar :
toolbar.inflateMenu(R.menu.your_toolbar_menu);
// ...
}
I think this should do it (don't forget to replace hard-coded values with dimensions to adapt to the device size).
For more information, take a look at the AppCompat v21 doc or at Chris Banes' post on the AppCompat v21.
I'm trying to make the navigation drawer over the action bar when it was slide to the right like this app:
[Removed]
This is my main activity's layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout ...>
<RelativeLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
...
</RelativeLayout>
<fragment android:name="com...."
android:layout_gravity="start"
android:id="#id/navigation"
android:layout_width="#dimen/navigation_menu_width"
android:layout_height="fill_parent" />
</android.support.v4.widget.DrawerLayout>
Some other questions on stackoverflow are similar such as this question but all answers are recommend to use sliding menu lib. But this app they still use android.support.v4.widget.DrawerLayout and they succeed. Don't ask me how I know they use the standard navigation drawer but I sure about it.
Would be really appreciate for your helps.
HERE IS THE FINAL SOLUTION: many thanks to #Peter Cai THIS WORKS PERFECTLY.
https://github.com/lemycanh/DrawerOnTopActionBar
I have a tiny "trick" learnt from https://github.com/jfeinstein10/SlidingMenu to implement the effect you required.
You only need to remove the first child of the window's decor view, and add the first child to your drawer's content view. After that, you only need to add your drawer to the window's decor view.
Below is some detailed steps for you to do that.
First, create a xml named "decor.xml" or anything you like. Only put the DrawerLayout and the drawer in. The "FrameLayout" below is just a container. We will use it to wrap your activity's content.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout ...>
<FrameLayout android:id="#+id/container"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<fragment android:name="com...."
android:layout_gravity="start"
android:id="#id/navigation"
android:layout_width="#dimen/navigation_menu_width"
android:layout_height="fill_parent" />
</android.support.v4.widget.DrawerLayout>
and then remove the DrawerLayout in your main layout. Now the layout of your main activity should look like
<RelativeLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
...
</RelativeLayout>
we assume that the main activity's layout is named "main.xml".
in your MainActivity, write as the following:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Inflate the "decor.xml"
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
DrawerLayout drawer = (DrawerLayout) inflater.inflate(R.layout.decor, null); // "null" is important.
// HACK: "steal" the first child of decor view
ViewGroup decor = (ViewGroup) getWindow().getDecorView();
View child = decor.getChildAt(0);
decor.removeView(child);
FrameLayout container = (FrameLayout) drawer.findViewById(R.id.container); // This is the container we defined just now.
container.addView(child);
// Make the drawer replace the first child
decor.addView(drawer);
// Do what you want to do.......
}
Now you've got a DrawerLayout which can slide over the ActionBar. But you might find it covered by status bar. You might need to add a paddingTop to the Drawer in order to fix that.
UPDATE: How to overlay the actionbar with nav drawer. (With the new Toolbar)
Use these in your dependencies in your build.gradle
compile 'com.android.support:appcompat-v7:21.0.0'
compile 'com.android.support:support-v4:21.0.0'
This as your drawerlayout
<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar"/>
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"/>
</LinearLayout>
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/list_background"
/>
</android.support.v4.widget.DrawerLayout>
Make new toolbar.xml file in your layout folder.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
Go to you activity which extend the navigation drawer.
and add this after SetContentView()
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Don't forget to extend your theme NoActionBar in your values folder.
<style name="Theme.Whtsnxt" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<!-- colorPrimary is used for the default action bar background -->
<item name="windowActionModeOverlay">true</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="colorPrimary">#color/splashscreen</item>
<item name="colorPrimaryDark">#color/holo_blue_light</item>
<item name="android:windowBackground">#color/white</item>
<item name="android:colorBackground">#color/white</item>
</style>
If you do not want to use a lib or this hack:
Extend "Theme.AppCompat.NoActionBar"
Move the first Element of your DrawerLayout into a LinearLayout.
Add a Toolbar to this LinearLayout.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
in Activity add following line after setContentView
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
now it should work.
I have posted a trick that makes this possible in prior Android L versions.
You can find my solution in this post. Hope it can be useful to someone.