I'm building Xamarin Android application and I want to implement right navigation drawer with drawer toogle in a custom action bar. Everything is working (drawer slides from right side,...) except one thing: the navigation drawer icon is not showing.
So, this is my Activity.axml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.v4.widget.DrawerLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:id="#+id/drawerLayout">
<!-- Main Content -->
<FrameLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:id="#+id/map" />
...
</FrameLayout>
<!-- Right Navigation Drawer -->
<LinearLayout
android:orientation="vertical"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#f2f2f2">
...
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
And this is my Activity.cs:
using Android.Support.V4.App;
using Android.Support.V4.Widget;
...
public class Activity : Activity
{
...
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToogle;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
ActionBar.SetDisplayShowHomeEnabled(false);
ActionBar.SetDisplayShowTitleEnabled(false);
ActionBar.SetCustomView(Resource.Layout.CustomActionBar);
ActionBar.SetDisplayShowCustomEnabled(true);
SetContentView(Resource.Layout.Activity2);
mDrawerLayout = FindViewById<DrawerLayout>(Resource.Id.drawerLayout);
mDrawerToogle = new ActionBarDrawerToggle(this, mDrawerLayout, Resource.Drawable.ic_drawer,Resource.String.open_drawer_layout, Resource.String.close_drawer_layout);
mDrawerLayout.SetDrawerListener(mDrawerToogle);
ActionBar.SetDisplayHomeAsUpEnabled(true);
ActionBar.SetHomeButtonEnabled(true);
...
}
protected override void OnPostCreate(Bundle savedInstanceState)
{
base.OnPostCreate(savedInstanceState);
mDrawerToogle.SyncState();
}
public override void OnConfigurationChanged(Configuration newConfig)
{
base.OnConfigurationChanged(newConfig);
mDrawerToogle.OnConfigurationChanged(newConfig);
}
public override bool OnOptionsItemSelected(IMenuItem item)
{
if (mDrawerToogle.OnOptionsItemSelected(item))
{
return true;
}
return base.OnOptionsItemSelected(item);
}
...
}
This is my Themes.xml:
<resources>
<style name="CustomActionBarTheme"
parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/ActionBar</item>
</style>
<style name="ActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:height">75dp</item>
<item name="android:background">#00000000</item>
</style>
</resources>
Am I doing something wrong? Any help is appreciated.
UPDATE
My CustomActionBar has app icon and app title. Is this maybe interrupting navigation drawer icon?
This is the solution I have found.
First, you need to add action_bar.xml file with the following content to the menu folder:
<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/personalInfoActionBar"
android:title="Informations"
android:icon="#drawable/infoIcon"
android:showAsAction="always"/>
</menu>
Then insert this code in your activity:
public override bool OnOptionsItemSelected(IMenuItem item)
{
if (item.ItemId == Resource.Id.personalInfoActionBar)
{
if (mDrawerLayout.IsDrawerOpen(mRightDrawer))
{
mDrawerLayout.CloseDrawer(mRightDrawer);
}
else
{
mDrawerLayout.OpenDrawer(mRightDrawer);
}
return true;
}
return base.OnOptionsItemSelected(item);
}
Don't forget call actionbarDrawerToggle.syncState()
Related
Navigation drawer menu and setting menu not working on Android kitkat and its lower version. But these menu options are completely functional on Android lollipop and its higher version. Even menu popup for setting does not display on kitkat or its lower version but it displays on android lollipop or its higher version. Following is the code :
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/appbar"/>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginTop="56dp"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
tools:context="com.vinitmandlesha.myins.MainActivity"
android:background="#f2374a">
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.vinitmandlesha.myins.MainActivity"
tools:showIn="#layout/app_bar_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
styles.xml(v21)
<resources>>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
}
#Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
#SuppressWarnings("StatementWithEmptyBody")
#Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
FragmentManager manager = getFragmentManager();
FragmentTransaction transaction = manager.beginTransaction();
if (id == R.id.nav_home) {
// Handle the camera act
} else if (id == R.id.nav_about_us) {
FragmentPersonal frag = new FragmentPersonal();
transaction.add(R.id.drawer_layout,frag, "About");
transaction.commit();
} else if (id == R.id.nav_contactus) {
} else if (id == R.id.nav_faq) {
} else if (id == R.id.nav_personal) {
} else if (id == R.id.nav_commercial) {
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
First when you are updating your toolbar it always hide your default menu. What you have to do is create your on menu with an icon and set is properties e.g ifroom. On the other hand for your navigation drawer you have to set your a theme with action bar activity and if you are using it in devices which are lollipop version than you will have to use AppCompat theme. I will reference the tutorial of slidenerd which are available on you tube which covers the material design it have details you need about navigation drawer in lollipop and pre-lollipop devices .
I've been playing with Google's new design support library and it's a blast! I'm just a little stumped though on the navigation view. All the things I read say that the NavigationView is smart enough to handle transparent scrim on its own. (The android-developers post, for one; search for scrim). Anyway, when I tried to do it I get the following result:
Which is great; Exactly what I want. Except for one thing. When the drawer is closed, the scrim is an ugly dark grey, not my primaryColorDark . . .
Here's my layout:
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" >
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<fragment
android:id="#+id/fragment"
android:name="com.gmail.rixx.justin.envelopebudget.HomeFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_home" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#color/accent"
android:src="#drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer" />
</android.support.v4.widget.DrawerLayout>
The Activity code:
public class Home extends ActionBarActivity {
private Toolbar mToolbar;
private DrawerLayout mDrawerLayout;
private Context mContext = this;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
setUpToolbar();
setUpNavDrawer();
findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
startActivity(new Intent(mContext, NewTransactionActivity.class));
}
});
}
private void setUpToolbar() {
mToolbar = (Toolbar) findViewById(R.id.toolbar);
if (mToolbar != null) {
setSupportActionBar(mToolbar);
}
}
private void setUpNavDrawer() {
if (mToolbar != null) {
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
mToolbar.setNavigationIcon(R.drawable.ic_menu_white_24dp);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mDrawerLayout.openDrawer(GravityCompat.START);
}
});
}
}
#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_home, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
And v21/styles:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/accent</item>
<item name="android:textColorPrimary">#color/primary_text</item>
<item name="android:textColorSecondary">#color/secondary_text</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
I modeled after Chris Banes's CheeseSquare app on github but I'm not getting the behavior I want.
I've tried removing the windowDrawsSystemBarBackgrounds and statusBarColor from v21/styles, and I get the proper color, but the status bar never goes transparent:
Help would be appreciated. This is new stuff, So I know we're all learning.
Thanks for reading!
-Justin
After struggling with this for several more hours, and copiously comparing my code to the cheesesquare app, I found the following: The DrawerLayout must have the attribute android:fitsSystemWindows="true", and the NavigationView as well, but the CoordinatorLayout should not. Once I made those changes, it worked.
Thanks all, and hopefully this is helpful to somebody!
You can look at my code for the layout here.
-Justin
set this to your navigationView android:fitsSystemWindows="false"
You should check newer SDK examples.
actually they are using Coordinatorlayout in activity that you want to draw under statusbar and have different theme for that layout, because if you put transparent statusbar for other activities where you don't have root layout Coordinatorlayout it will show white uncolored statusbar.
set this to your navigationView android:fitsSystemWindows="true" this will ensure that the navigation will be behind the statusbar and add colorAccent to your style in values folder.
In your style file try to use AppCompact theme as parent ...
<style name="AppTheme" parent="Base.Theme.AppCompat">
I hope it helps you..
I am trying to learn implementations of Navigation Drawer in Android.
In one activity, i have made the Navigation Drawer come under the Status Bar(transparent) and over the App Bar and everything works fine.(left Screenshot)
In another activity in the same App, i am trying to create Navigation Drawer that pulls up under the App Bar. But here, the status bar turns grey for some reason(whether nav drawer is open or closed)(Right Screenshot). Other than this, everything seems fine.
Below is the screenshot:
The green Nav Drawer is a fragment.
What i want to know is how to make the status normal(darker shade of. Please remember, if i click that twin arrow icon in the App Bar, it will take me to another activity which contains another Nav Drawer which works like the one in Material Design(Full height of the screen and comes under a transparent Status Bar). This is shown in the left side of the screenshot.
Below is the code:
MainActivity.java:
public class MainActivity extends ActionBarActivity {
Toolbar toolbar;
DrawerLayout xDrawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_alt);
toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
xDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
xDrawerLayout.setStatusBarBackgroundColor(getResources().getColor(R.color.primary_dark));
NavDrawerFragment mfragment = (NavDrawerFragment) getFragmentManager().findFragmentById(R.id.nav_drawer_fragment);
mfragment.SetUp(xDrawerLayout, toolbar, R.id.nav_drawer_fragment);
}
...
activity_alt.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:fitsSystemWindows="true"
android:orientation="vertical">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
</RelativeLayout>
<fragment
android:id="#+id/nav_drawer_fragment"
android:name="com.rt.droid.mattest.NavDrawerFragment"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_nav_drawer" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
NavDrawerFragment.java:
public class NavDrawerFragment extends Fragment {
private ActionBarDrawerToggle mDrawerToggle;
private DrawerLayout mDrawerLayout;
public DrawerLearner yDrawerLearner;
public NavDrawerFragment() {
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View fView = inflater.inflate(R.layout.fragment_nav_drawer, container, false);
//fView.setFitsSystemWindows(true);
fView.setBackgroundColor(getResources().getColor(R.color.accent));
return fView;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
public void SetUp(DrawerLayout drawerLayout, Toolbar toolbar, int frag_id) {
this.mDrawerLayout = drawerLayout;
View drawerFrag = getActivity().findViewById(frag_id);
mDrawerToggle = new ActionBarDrawerToggle(getActivity(), mDrawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {
#Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActivity().invalidateOptionsMenu();
}
#Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
getActivity().invalidateOptionsMenu();
}
};
yDrawerLearner = new DrawerLearner(mDrawerLayout, drawerFrag, getActivity());
yDrawerLearner.execute();
this.mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerLayout.setStatusBarBackgroundColor(getResources().getColor(R.color.primary_dark));
mDrawerLayout.post(new Runnable() {
#Override
public void run() {
mDrawerToggle.syncState();
}
});
}
}
fragment_nav_drawer.xml:
<FrameLayout 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"
tools:context="com.rt.droid.mattest.NavDrawerFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_blank_fragment" />
</FrameLayout>
app_bar.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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
app:popupTheme="#style/AppTheme.PopupMenu"
android:theme="#style/AppTheme.Toolbar">
</android.support.v7.widget.Toolbar>
styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:textColorPrimary">#color/primary_text</item>
<item name="android:textColorSecondary">#color/accent</item>
</style>
<style name="AppTheme.PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:background">#color/accent</item>
</style>
</resources>
styles.xml(v21):
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme here. -->
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/accent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
Colors.xml(screenshot showing color samples):
Note: I do not want to compromise on the styles etc that would render my other navigation drawer not working. In other words, i prefer a solution wherein both types of navigation bar works as expected in the same app.
Please let me know if you need any info and i shall edit if required.
Edit: added app_bar.xml & colors.xml for clarity.
But here, the status bar turns grey for some reason
It's the translucent (25% black) status bar background over the white background of activity underneath it.
What i want to know is how to make the status normal
You need to disable translucent status bar for the second activity. It is activated by this line in your theme definition:
<item name="android:windowTranslucentStatus">true</item>
<item name="android:statusBarColor">#color/primary_dark</item>
So either define a child theme and override the flag with false or clear the flag programmatically by calling this from your activity:
if (Build.VERSION.SDK_INT >= 21) {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().setStatusBarColor(getResources().getColor(R.color.primary_dark);
}
I have written the following code to add drawer layout in my material design theme which is not showing up. Just the tool bar is showing up.
MainActivity.java
package com.example.materiald;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
public class MainActivity extends ActionBarActivity {
ActionBarDrawerToggle mActionBarDrawerToggle;
DrawerLayout mDrawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open_navigation_drawer, R.string.close_navigation_drawer);
mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);
}
}
activity_main.xml
<?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" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="#+id/mainContent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
<!-- Nav drawer -->
<ListView
android:id="#+id/drawerList"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#android:color/white"
android:divider="#android:color/white"
android:dividerHeight="8dp"
android:drawSelectorOnTop="true"
android:headerDividersEnabled="true" />
</android.support.v4.widget.DrawerLayout>
toolbar.xml
<?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_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/myColorPrimary"
android:minHeight="56dp"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
values/styles.xml
<style name="AppTheme.Base" parent="Theme.AppCompat"></style>
values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="colorPrimary">#color/myColorPrimary</item>
<item name="colorPrimaryDark">#color/myColorPrimaryDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
</resources>
values-v21/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
I missed out certain important statements in my activity. Here is the complete activity the remaining stays the same. With following changes I was able to add the new NavigationDrawer
public class MainActivity extends ActionBarActivity {
ActionBarDrawerToggle mDrawerToggle;
DrawerLayout mDrawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open_navigation_drawer, R.string.close_navigation_drawer);
mDrawerLayout.setDrawerListener(mDrawerToggle);
getSupportActionBar().setDisplayHomeAsUpEnabled(true); //<---- added
getSupportActionBar().setHomeButtonEnabled(true); //<---- added
}
#Override
public boolean onOptionsItemSelected(MenuItem item) { //<---- added
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
return super.onOptionsItemSelected(item);
}
#Override
protected void onPostCreate(Bundle savedInstanceState) { //<---- added
super.onPostCreate(savedInstanceState);
mDrawerToggle.syncState(); // important staetment for drawer to identify its state
}
#Override
public void onConfigurationChanged(Configuration newConfig) { //<---- added
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}
#Override
public void onBackPressed() {
if(mDrawerLayout.isDrawerOpen(Gravity.START|Gravity.LEFT)){ //<---- added
mDrawerLayout.closeDrawers();
return;
}
super.onBackPressed();
}
}
I am using the android.support.v7.widget.Toolbar with a android.support.v4.widget.DrawerLayout. It works fine, the Burger icon is shown when the Navigation Drawer is closed, and the Arrow icon is shown when the Drawer is open.
I want to disable the drawer and animate the Burger icon into Arrow on some event in the app. I have tried to set the lock mode to closed, but the v7.app.ActionBarDrawerToggle is still showing the Burger and it opens the Drawer.
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
Any ideas?
Thanks!
Update:
No I can change the state of the icon and I can enable/disable the drawer, but the animations are not working with this approach:
#Override
protected void onCreate(Bundle savedInstanceState) {
...
Toolbar toolbar = (Toolbar) findViewById(R.id.application_toolbar);
setSupportActionBar(toolbar);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.string1, R.string.string2) {
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
}
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
};
//mDrawerLayout.setDrawerListener(mDrawerToggle); // not needed
...
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
if (mDrawerLayout.getDrawerLockMode(GravityCompat.START) == LOCK_MODE_UNLOCKED) {
showDrawer();
} else {
handleBackButtonPress(); // On this stage the home button is a <-
}
}
...
}
private void setDrawerState(boolean isEnabled) {
if (isEnabled) {
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);
mDrawerToggle.onDrawerStateChanged(DrawerLayout.LOCK_MODE_UNLOCKED);
mDrawerToggle.syncState();
} else {
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
mDrawerToggle.onDrawerStateChanged(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
mDrawerToggle.syncState();
}
}
The drawer comes on the top of the Toolbar.
Have a look here, it describes how you solve it.
https://stackoverflow.com/a/26447144
The essential part is the following:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
I created a small application which had similar functionality
MainActivity
public class MyActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
android.support.v7.widget.Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(
this,
drawerLayout,
toolbar,
R.string.open,
R.string.close
)
{
public void onDrawerClosed(View view)
{
super.onDrawerClosed(view);
invalidateOptionsMenu();
syncState();
}
public void onDrawerOpened(View drawerView)
{
super.onDrawerOpened(drawerView);
invalidateOptionsMenu();
syncState();
}
};
drawerLayout.setDrawerListener(actionBarDrawerToggle);
//Set the custom toolbar
if (toolbar != null){
setSupportActionBar(toolbar);
}
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
actionBarDrawerToggle.syncState();
}
}
My XML of that Activity
<android.support.v4.widget.DrawerLayout 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"
tools:context=".MyActivity"
android:id="#+id/drawer"
>
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include layout="#layout/toolbar_custom"/>
</FrameLayout>
<!-- The navigation drawer -->
<ListView
android:layout_marginTop="?attr/actionBarSize"
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#457C50"/>
</android.support.v4.widget.DrawerLayout>
My Custom Toolbar XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:background="?attr/colorPrimaryDark">
<TextView android:text="U titel"
android:textAppearance="#android:style/TextAppearance.Theme"
android:textColor="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</android.support.v7.widget.Toolbar>
My Theme Style
<resources>
<style name="AppTheme" parent="Base.Theme.AppCompat"/>
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primaryDarker</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
<color name="primary">#457C50</color>
<color name="primaryDarker">#580C0C</color>
</resources>
My Styles in values-v21
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
</style>
</resources>