[英]Toolbar Navigation Hamburger Icon missing
I'm looking for a way to display the hamburger icon whitout using the Drawer/DrawerToggle and use the default icon included in Android我正在寻找一种使用 Drawer/DrawerToggle 显示汉堡包图标的方法,并使用 Android 中包含的默认图标
By setting getSupportActionBar().setDisplayHomeAsUpEnabled(true);
通过设置
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
it display the back arrow but not the hambuerger.它显示后退箭头但不显示汉堡包。 Other post on Stackoverflow (like this or this ) use the DrawerLayout or a custom drawable.
Stackoverflow 上的其他帖子(如this或this )使用 DrawerLayout 或自定义可绘制对象。 I cannot find the vector or png for the hamburger icon on the Android source.
我在 Android 源上找不到汉堡包图标的矢量或 png。
Do you know how can I find the original hamburger icon in android/support library?你知道如何在 android/support 库中找到原始的汉堡包图标吗? (or how to displayed it)
(或如何显示它)
Note: Vector and png can be found on google.com/design website : http://www.google.com/design/spec/resources/sticker-sheets-icons.html#注意:矢量和 png 可以在 google.com/design 网站上找到: http : //www.google.com/design/spec/resources/sticker-sheets-icons.html#
In my activity在我的活动中
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d(LOG_TAG, "navigation clicked");
}
});
Layout file布局文件
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>
Styles.xml样式文件
<!-- Base application theme. -->
<style name="Theme.AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/primaryDef</item>
<item name="colorPrimaryDark">@color/primaryDarkDef</item>
<item name="colorAccent">@color/primaryDef</item>
<!-- Remove the actionbar shadow-->
<item name="android:windowContentOverlay">@null</item>
</style>
If you want to use the same drawer as lollipop then let me tell you that's not a static image.如果您想使用与棒棒糖相同的抽屉,那么让我告诉您这不是静态图像。 That image is drawn in real time by a class called
DrawerArrowDrawableToggle
.该图像由名为
DrawerArrowDrawableToggle
的类实时绘制。 So there is no "hamburger" icon for that.所以没有“汉堡包”图标。
However if you want the hamburger icon with no animation you can find it here:但是,如果您想要没有动画的汉堡包图标,您可以在这里找到它:
https://material.io/tools/icons/?icon=menu&style=baseline https://material.io/tools/icons/?icon=menu&style=baseline
To have an animated hamburger icon you should use DrawerLayout
with ActionBarDrawerToggle
and enable the icon for the ActionBar
and for the ActionBarDrawerToggle
.有动画图标汉堡包,你应该使用
DrawerLayout
与ActionBarDrawerToggle
并启用该图标ActionBar
,为ActionBarDrawerToggle
。
Example:例子:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle mDrawerToggle;
setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();
if (actionBar != null)
{
actionBar.setDisplayHomeAsUpEnabled(true);
mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.hello_world, R.string.hello_world)
{
public void onDrawerClosed(View view)
{
supportInvalidateOptionsMenu();
//drawerOpened = false;
}
public void onDrawerOpened(View drawerView)
{
supportInvalidateOptionsMenu();
//drawerOpened = true;
}
};
mDrawerToggle.setDrawerIndicatorEnabled(true);
drawerLayout.setDrawerListener(mDrawerToggle);
mDrawerToggle.syncState();
}
Also, you need to add these methods to your Activity:此外,您需要将这些方法添加到您的活动中:
@Override
protected void onPostCreate(Bundle savedInstanceState)
{
super.onPostCreate(savedInstanceState);
mDrawerToggle.syncState();
}
@Override
public void onConfigurationChanged(Configuration newConfig)
{
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}
For that you just need write to some lines为此,您只需要写入一些行
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.addDrawerListener(toggle);
toggle.setDrawerIndicatorEnabled(true);
toggle.syncState();
toggle.setDrawerIndicatorEnabled(true); toggle.setDrawerIndicatorEnabled(true); if this is false make it true or remove this line
如果这是错误的,则使其为真或删除此行
Here is the simplest solution that worked for me.这是对我有用的最简单的解决方案。
The ActionBarDrawerToggle
has two types constructors. ActionBarDrawerToggle
有两种类型的构造函数。 One of them take toolbar as a parameter.其中之一将工具栏作为参数。 Use that (second one below) to get the animated hamburger.
使用它(下面的第二个)来获取动画汉堡包。
ActionBarDrawerToggle(this, mDrawerLayout, R.string.content_desc_drawer_open,
R.string.content_desc_drawer_close);
ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.content_desc_drawer_open,
R.string.content_desc_drawer_close);` //use this constructor
You can try to make your own drawable for the hamburger icon like this.您可以尝试为这样的汉堡包图标制作自己的可绘制对象。
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#ffffff"
android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z" />
</vector>
Then in your fragment/activity,然后在您的片段/活动中,
getSupportActionBar().setHomeAsUpIndicator(R.drawable.as_above);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
For other drawables, this might help: https://github.com/google/material-design-icons/blob/master/navigation/drawable-anydpi-v21/对于其他可绘制对象,这可能会有所帮助: https : //github.com/google/material-design-icons/blob/master/navigation/drawable-anydpi-v21/
I had the same problem and I found the simplest solution here:我遇到了同样的问题,我在这里找到了最简单的解决方案:
appcompatv7-v21-navigation-drawer-not-showing-hamburger-icon appcompatv7-v21-navigation-drawer-not-showing-hamburger-icon
All I had to do was to call:我所要做的就是打电话:
mDrawerToggle.syncState();
I had the same problem.我有同样的问题。 Get the
ToolBar
and then set Navigation icon获取
ToolBar
然后设置导航图标
final android.support.v7.widget.Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.blablabla);
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setTitle("title");
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_list);
ok to hide back arrow use可以隐藏后退箭头使用
getSupportActionBar().setDisplayHomeAsUpEnabled(false);
getSupportActionBar().setHomeButtonEnabled(false);
then find hamburger icon in web -> hamburger然后在网络中找到汉堡包图标 -> 汉堡包
and finally, set this drawable in your project with action bar method:最后,使用操作栏方法在您的项目中设置此可绘制对象:
getSupportActionBar().setLogo(R.drawable.hamburger_icon);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar,
R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.syncState();
it's work with me这是我的工作
Maybe you can try this, but you will lose animation between arrow and hamburger icon也许你可以试试这个,但你会失去箭头和汉堡图标之间的动画
@Override
protected void onCreate(Bundle arg0) {
super.onCreate(arg0);
super.setContentView(R.layout.activity_menu_drawer_left);
_drawerToggle = new ActionBarDrawerToggle(this, _drawerLayout, R.string.drawer_opened, R.string.drawer_closed) {
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
changeDrawerIconOnDrawerClick(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
}
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
changeDrawerIconOnDrawerClick(R.drawable.ic_drawer);
}
};
//to change default icon to hamburger item initially
changeDrawerIconOnDrawerClick(R.drawable.ic_drawer); }
private void changeDrawerIconOnDrawerClick(int resourceId) {
//Drawable icon = ContextCompat.getDrawable(getApplicationContext(), resourceId);
Drawable icon = ResourcesCompat.getDrawable(getResources(), resourceId, null);
icon.setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_ATOP);
_drawerToggle.setDrawerIndicatorEnabled(false);
_drawerToggle.setHomeAsUpIndicator(icon);
}
用你自己的 drawable 替换默认的向上箭头
getSupportActionBar().setHomeAsUpIndicator(R.drawable.hamburger);
Just Add the following in your onCreate method,只需在您的 onCreate 方法中添加以下内容,
if (getSupportActionBar() != null) {
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
}
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, mDrawer, mToolbar, R.string.home_navigation_drawer_open, R.string.home_navigation_drawer_close) {
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
invalidateOptionsMenu();
}
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
invalidateOptionsMenu();
}
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
}
};
mDrawer.addDrawerListener(toggle);
toggle.syncState();
and In strings.xml,和在strings.xml中,
<string name="home_navigation_drawer_open">Open navigation drawer</string>
<string name="home_navigation_drawer_close">Close navigation drawer</string>
Use this constructor in MyActionBarDrawerToggle :在 MyActionBarDrawerToggle 中使用此构造函数:
public MyActionBarDrawerToggle(AppCompatActivity host, DrawerLayout drawerlayout, SupportToolbar toolbar, int openedResource, int closedResource)
: base(host, drawerlayout, toolbar, openedResource, closedResource)
{
mHostActivity = host;
mOpenedResource = openedResource;
mClosedResource = closedResource;
}
and Call this method in teh mainActivity (Using AppCompatActivity)并在 mainActivity 中调用此方法(使用 AppCompatActivity)
mDrawerToggle = new MyActionBarDrawerToggle(
this, //Host Activity
mDrawerLayout, //DrawerLayout
mToolbar, //Toolbar
Resource.String.openDrawer, //Opened Message
Resource.String.closeDrawer //Closed Message
);
mDrawerLayout.AddDrawerListener(mDrawerToggle);
SupportActionBar.SetHomeButtonEnabled(true);
SupportActionBar.SetDisplayShowTitleEnabled(true);
mDrawerToggle.DrawerIndicatorEnabled = true;
mDrawerToggle.SyncState();
in onCreate()
:在
onCreate()
:
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close) {
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
supportInvalidateOptionsMenu();
}
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
supportInvalidateOptionsMenu();
}
};
drawerLayout.setDrawerListener(drawerToggle);
drawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Backstack.get(MainActivity.this).goBack();
}
});
//actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
//getSupportActionBar().setDisplayHomeAsUpEnabled(false);
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setHomeButtonEnabled(true);
And when setting up UP navigation:在设置 UP 导航时:
private void setupViewsForKey(Key key) {
if(key.shouldShowUp()) {
drawerToggle.setDrawerIndicatorEnabled(false);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
else {
getSupportActionBar().setDisplayHomeAsUpEnabled(false);
drawerToggle.setDrawerIndicatorEnabled(true);
}
drawerToggle.syncState();
in JetPack it work for me在 JetPack 中它对我有用
NavigationUI.setupWithNavController(vb.toolbar, nav)
vb.toolbar.navigationIcon = ResourcesCompat.getDrawable(resources, R.drawable.icon_home, null)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.