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
Related
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.
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.
My app contains a DrawerLayout and inside it I include the appcompat toolbar.
Everything works fine when the drawer "opens" the fragments but when from fragment I start an activity and then it shows the action mode menus, they are shown on top of the toolbar but I want it over the toolbar in the same manner fragments work.
This effect is present on Android 5.0.1 and KitKat 4.4.2
No solution found on SO worked for me.
How can I fix it and show only the action mode over the toolbar when action mode menus are visible?
The image below shows the wrong result
This is the expected result
The called activity layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include layout="#layout/toolbar_app"/>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
The toolbar layout
<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_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary"/>
Adding <item name="windowActionModeOverlay">true</item> to the style will fix the issue
Okay, I've been going through several StackOverflow posts now, but I'm still confused as to where this xml for my Toolbar goes.
<android.support.v7.widget.Toolbar
android:id=”#+id/my_awesome_toolbar”
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:background=”#styles/colorPrimary” />
Does it go in my /layout/activity_main.xml?
Toolbar is a generalization of Action bars for use within app layouts, now to answer your question there are two practices:
Bad practice:
Bad practice is to define the Toolbar in every layouts.
Standard practice:
Standard practice is to define a layout and reference it in a base activity. You just need to include this Toolbar layout in whichever layout you want (by using <include>) and extend the defined base activity in whichever activity.
This standard practice will help you keeping a single code base for Toolbar and save your time from defining Toolbar every time.
Example: Google I/O 2014 android app
toolbar_actionbar_with_headerbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:iosched="http://schemas.android.com/apk/res-auto"
style="#style/HeaderBar"
iosched:theme="#style/ActionBarThemeOverlay"
iosched:popupTheme="#style/ActionBarPopupThemeOverlay"
android:id="#+id/toolbar_actionbar"
iosched:titleTextAppearance="#style/ActionBar.TitleText"
iosched:contentInsetStart="?actionBarInsetStart"
android:layout_width="match_parent"
android:layout_height="?actionBarSize" />
This toolbar layout is referenced in settings activity as given below:
activity_settings.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ui.SettingsActivity">
<include layout="#layout/toolbar_actionbar_with_headerbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
As for me, I usually make a ToolbarActivity. Next, if you want your activity to have a toolbar, you just need to YourActivity extends ToolbarActivity.
public class ToolbarActivity extends AppCompatActivity {
#Override
public void setContentView(int layoutResID) {
super.setContentView(R.layout.activity_toolbar);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
LayoutInflater inflater = LayoutInflater.from(this);
View contentView = inflater.inflate(layoutResID, null);
LinearLayout layout = (LinearLayout) findViewById(R.id.layout);
layout.addView(contentView, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
}
}
XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/layout"
tools:context=".ToolbarActivity" >
<android.support.v7.widget.Toolbar
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:id="#+id/toolbar" />
</LinearLayout>
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.