I'm using the Android component navigation for a DrawerLayout with NavigationView.
public class MainActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
LoginActivity.toClose.finish();
LoginViewModel viewModel = ViewModelProviders.of(this).get(LoginViewModel.class);
Toolbar toolbar = findViewById(R.id.toolbar_menu);
setSupportActionBar(toolbar);
ActionBar actionbar = getSupportActionBar();
assert actionbar != null;
drawerLayout = findViewById(R.id.drawer_layout);
NavigationView navigationView = findViewById(R.id.nav_view_menu);
navigationView.inflateMenu(viewModel.setUserInterface());
NavController navController = Navigation.findNavController(this, R.id.fragment_main);
NavigationUI.setupWithNavController(navigationView, navController);
NavigationUI.setupActionBarWithNavController(this,navController,drawerLayout);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
drawerLayout.openDrawer(GravityCompat.START);
return true;
}
return super.onOptionsItemSelected(item);
}
}
Everything's ok, except that the "Up button" are in a different color that my title in The action bar.
The XML for the Toolbar is:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:textColor="#FFF"
android:textColorPrimary="#FFF"
android:theme="#style/Toolbar"
app:layout_constraintTop_toTopOf="parent"
app:titleTextColor="#FFF"
app:title="#string/app_name"/>
The title is white, but the icon is black.
My question is: how can I change the color of this icon?
Even if I change the primary color to white and the theme editor show me the icon in white, when the app is running, the color is still black.
The app that I'm building has minSdkVersion 15
and I run it in a phone with API 7 SDK 24.
I didn't run in the emulator with SDK 15 yet.
use this style
<style name="ToolbarTheme" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<!-- Customize color of Toolbar -->
<item name="colorControlNormal">#color/WhiteColor</item>
</style>
and then use it in app:theme="#style/ToolbarTheme" in your Toolbar XML :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:textColor="#FFF"
android:textColorPrimary="#FFF"
app:theme="#style/ToolbarTheme"
app:layout_constraintTop_toTopOf="parent"
app:titleTextColor="#FFF"
app:title="#string/app_name"/>
Another option, with new Themes (Light/Dark modes) is to use styles and themes.
First approach.
This works if you use default icons and in a fragment (e.g.) you use following: toolbar.setupWithNavController(findNavController()), so then in layout you must do following:
In your app theme in xml:
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
<item name="drawerArrowStyle">#style/MyDrawerArrowToggleStyle</item>
Note: This solution is for your own toolbars, which you placed in your layout by yourself, that's why my main app theme is Theme.MaterialComponents.DayNight.NoActionBar. However, I haven't tried with default ActionBar, so maybe it will work as well.
Your drawer arrow/toggle style:
<style name="MyDrawerArrowToggleStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/your_color_here</item>
</style>
And now all default "<-" icons in toolbars will be in your color. It should work for Hamburger icons too. But I didn't check, as I don't have navigation drawer.
Second approach.
When you want your own icon or action in NavigationOnClickListener.
In the fragment:
toolbar.setNavigationOnClickListener {
findNavController().navigateUp()
//plus another actions if required
}
toolbar.setNavigationIcon(R.drawable.your_icon_here)
In main theme:
<item name="toolbarNavigationButtonStyle">#style/MyAppToolbarNavButtonStyle</item>
My style:
<style name="MyAppToolbarNavButtonStyle" parent="Widget.AppCompat.Toolbar.Button.Navigation">
<item name="tint">#color/your_color_here</item>
</style>
Related
Action provider back icon:
How do i change the back icon generated by the action provider.
I have already changed the back icon in all my activities with HomeAsUpIndicator.
But this generated back icon still with the default black arrow.
The image above show which icon i talk about, when i click on the search icon for example.
In my activity :
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_equipment);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_chevron_left_white_48dp);
[...]
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.equipments_menu, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchActionProvider searchActionProvider = new SearchActionProvider(this);
MenuItemCompat.setActionProvider(searchItem, searchActionProvider);
return super.onCreateOptionsMenu(menu);
}
It works with this line :
app:collapseIcon="#drawable/ic_chevron_left_white_48dp"
Put it here :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_equipment"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="#string/equipments"
app:titleTextColor="#color/white"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:collapseIcon="#drawable/ic_chevron_left_white_48dp" />
Edit your styles.xml and add the following:
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/CustomActionBar</item>
</style>
<style name="CustomActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:icon">#drawable/ic_close</item>
</style>
get the SupportActionbar and specfiy the id of the icon
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_close);
I've used the following in my style to make the status bar transparent:
<style name="TransparentStatusBar" parent="ThemeBase">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
But now there's a shadow at the top of the screen where the status bar was:
How can I remove this shadow?
Edit:
<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="?attr/actionBarSize"
android:background="#color/primary"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/ToolbarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
Activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(getLayoutResource());
toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(ContextCompat.getDrawable(this, R.drawable.ic_action_back));
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
onBackPressed();
}
});
}
}
ToolbarTheme:
<style name="ToolbarTheme" parent="ThemeBase">
<item name="android:textColorPrimary">#color/white</item>
</style>
Late to the party!
This black shadow is mainly due to
<item name="android:windowTranslucentStatus">true</item>
There are two ways you can handle that.
You only need to have the same color for status bar as the below view.
(This way is if you add a background image you gets caught.Because actually its two views,Status bar and its below View in same color.Yet some people need this! )
For this you do not need android:windowTranslucentStatus.It will make that black shadow!
Making <item name="android:statusBarColor">#color/asSameColorAsBelowViewColor</item> you can achieve it.Even this can be applied to OP's question here.But its for colors.Other wise you get trapped.
You really need to go your view behind StatusBarwithout that black shadow.
eg: In a situation that you need to use an image.
For this again if you are using <item name="android:windowTranslucentStatus">true</item> you can remove it and add <item name="android:statusBarColor">#color/transparent</item>
and add getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); in your Activity before setContentView().
My issue concerns using fully custom ActionBar views (as it's necessary for how my customer wants the ActionBar to work). I've removed the logo, title, and everything else possible. However, the custom view for the ActionBar will not extend all the way across the screen.
I've tried the following (as a quick overview):
Dynamically removing aspects of the ActionBar (snippet below)
Removing the Options Menu in its entirety
Specifying in the Style/Theme to remove everything from the ActionBar
Here is a screenshot of my issue:
Here is the style: (as a side note, I originally kept the native ActionBar but removed most of it)
<!-- Customized App Theme -->
<style name="AppTheme2" parent="Theme.AppCompat.Light">
<!-- Let the actioBbar overlay the activity, ie activity is full screen -->
<item name="android:windowActionBarOverlay">true</item>
<!-- Set up the action bar styles -->
<item name="android:actionBarStyle">#style/ActionBarEmpty</item>
<!-- Remove the shadow under the actionBar -->
<item name="android:windowContentOverlay">#null</item>
<!-- Set the drawer icon to show up instead of the "Up" caret icon
<item name="android:homeAsUpIndicator">#drawable/ic_drawer</item>
<item name="homeAsUpIndicator">#drawable/ic_drawer</item>
-->
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/ActionBarEmpty</item>
</style>
<!-- Final, empty Action Bar style | makes space for customized actionBar -->
<style name="ActionBarEmpty" parent="Widget.AppCompat.Base.ActionBar">
<!-- TODO: Add support versions -->
<item name="android:displayOptions">none</item>
<item name="android:background">#color/transparent</item>
<!-- Tested the below, does absolute nothing -->
<item name="android:layout_margin">0dp</item>
<item name="android:padding">0dp</item>
<item name="android:minWidth">0dp</item>
</style>
Here is the code in my Activity that concerns setting up the ActionBar:
// Initialize and set up the ActionBar
mActionBar = getActionBar();
mActionBar.setDisplayHomeAsUpEnabled(false);
mActionBar.setDisplayShowHomeEnabled(false);
mActionBar.setDisplayShowTitleEnabled(false);
mActionBar.setDisplayShowCustomEnabled(true);
// Set the actionBar layout initially to the simple one
mActionBar.setCustomView(mViewActionBarSimple);
Here is the view shown in the screenshot for the ActionBar:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
android:background="#color/white">
<ImageButton
android:id="#+id/navButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="#dimen/padding_actionbar_icon"
android:paddingBottom="#dimen/padding_actionbar_icon"
android:paddingRight="#dimen/padding_actionbar_icon"
android:paddingEnd="#dimen/padding_actionbar_icon"
android:layout_marginLeft="#dimen/margin_actionbar_icon_left"
android:layout_marginStart="#dimen/margin_actionbar_icon_left"
android:src="#drawable/ic_drawer_normal"
android:background="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/textTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_general"
android:layout_gravity="center"
android:textColor="#color/black"
android:textSize="#dimen/text_normal"
android:text="#string/garbage_fill_short"
/>
</LinearLayout>
In addition to trying to remove everything I could think of, I also tried to remove the options menu:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
return false;
}
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
// To remove the options menu - and make the custom actionBar take the full space -
// always return false
return false;
}
I'm running this on a Samsung Galaxy S4 with Android KitKat.
Thank you for reading this. Any help would be appreciated at this point.
Update: For anyone reading this, I don't know why it worked like this, but I came upon the problem after following the below answer. I surrounded the actionBar layout with a RelativeLayout [with the LinearLayout and its contents as the children], and the width/background fixed itself... The answer is still amazing as its very clear cut and absolutely removes the actionBar, while before I was still using it in some way.
Please try below for removing action bar content by creating base activity so you can refer in all your app & inflate custom action bar from layout
#SuppressLint("InlinedApi")
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
getSupportActionBar().hide();
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setHomeButtonEnabled(false);
actionBar.setIcon(new ColorDrawable(getResources().getColor(android.R.color.transparent)));
View homeIcon = findViewById(android.R.id.home);
// Hides the View (and so the icon)
if (homeIcon != null)
((View) homeIcon.getParent()).setVisibility(View.GONE);
overridePendingTransition(0, 0);
}
add custom view
#SuppressLint("InlinedApi")
#Override
public void setContentView(int layoutResID)
{
super.setContentView(R.layout.activity_base);
ViewGroup viewGroup = (ViewGroup) findViewById(R.id.container);
viewGroup.removeAllViews();
viewGroup.addView(getLayoutInflater().inflate(layoutResID, null));
// you can find action_bar layouts view & add listner
}
and customise XML containing custom action bar in activity_base.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:layout_gravity="right"
android:orientation="vertical" >
<include layout="#layout/action_bar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right" />
</LinearLayout>
Where you want to use then extend this activity.
I wanna change default ActionBar homeAsUp indicator (drawable) in my AppCompat Toolbar. How to achieve that?
Only default arrow shows up.
styles (same for other API's level):
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- API 14 theme customizations can go here. -->
<item name="android:windowActionBarOverlay">true</item>
<item name="android:homeAsUpIndicator">#drawable/home</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
<item name="homeAsUpIndicator">#drawable/home</item>
</style>
Toolbar in my fragment layout:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:homeAsUpIndicator="#drawable/home"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/AppTheme" />
In Fragment:
toolbar = (Toolbar) rootView.findViewById(R.id.my_awesome_toolbar);
activity.setSupportActionBar(toolbar);
ActionBar actionBar = activity.getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
To change icon just call at runtime:
toolbar.setNavigationIcon(R.drawable.home);
Trick with styles/themes not working.
How to enable homeAsUp or call setDisplayHomeAsUpEnabled() on standalone toolbar with appcompat v21
Just add this line to your styles.xml
<item name="navigationIcon">#drawable/ic_back_arrow</item>
I tried setHomeAsUpIndicator(int resId) ,it works.
private void initToolbar ( Toolbar mToolbar ) {
mToolbar.setTitleTextColor ( getResources ().getColor ( R.color.main_title ) );
setSupportActionBar ( mToolbar );
ActionBar actionbar = getSupportActionBar ();
actionbar.setDisplayHomeAsUpEnabled ( true );
actionbar.setHomeAsUpIndicator ( R.drawable.ic_action_back );
}
But mToolbar.setNavigationIcon(R.drawable.ic_action_back) doesn't work :(
If android.support.v7.app.ActionBarDrawerToggle used together with DrawerLayout and Toolbar you can change homeAsUp icon with the following code:
//set home as up indicator
mDrawerToggle.setHomeAsUpIndicator(R.drawable.ic_up_indicator);
//remove home as up indicator
mDrawerToggle.setHomeAsUpIndicator(null);
to show homeAsUpIndicator indicator instead of home indicator do following:
mDrawerToggle.setDrawerIndicatorEnabled(false);
Docs:
ActionBarDrawerToggle#setHomeAsUpIndicator
ActionBarDrawerToggle#setDrawerIndicatorEnabled
i just found out that it actually works
toolbar.setNavigationIcon(R.drawable.ic_action_back)
and here is the code to make it work.
#Override
protected void onCreate(Bundle savedInstanceState) {
.....
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_action_back);
Post the following code in onOptionsItemSelected(MenuItem item)
#Override
public boolean onOptionsItemSelected(MenuItem item) {
......
if (id == android.R.id.home) {
startActivity(new Intent(this, MainActivity.class));
return true;
}
return super.onOptionsItemSelected(item);
}
Note Mainactivity in this code is the current activity i want my back or home button to go to. I hope this helps
Unfortunately, if this style line is used in a commonly shared AppCompat ToolBar/App bar with other activities in the App, including the main activity, the "navigationIcon" specified will be automatically shown, unlike the standard default HomeAsUpIndicator, which is not shown unless explicitly enabled as desired in an Activity, typically as follows: (in the onCreate())
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
With the above style line, since it behaves in an opposite manner, in a similar fashion, the indicator needs to be explicitly disabled if it is not desired to be shown, as on the main activity, as follows: (in the onCreate())
getSupportActionBar().setDisplayHomeAsUpEnabled(false);
(as observed on Android 4.0.4, 4.3, and 4.4.2 phones)
Dears,
Look at the snapshot:
I use the following code to change the action bar background -same used in normal activities and works fine-:
#Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(getResources().getDrawable(R.color.actionbar_background));
actionBar.setIcon(R.drawable.ic_settings);
setupSimplePreferencesScreen();
}
the problem is that the action bar background color changed to specified color, but the text and icon background take the activity background color.
What's wrong?
This link help me to figure the problem:
My action bar title is taking the wrong color from theme
The problem was with setting Activity background color, instead of this:
<!-- Settings Activity -->
<style name="SettingsTheme">
<item name="android:Background">#color/main_menu_background</item>
<item name="android:textColor">#color/font_color</item>
</style>
I use this:
<!-- Settings Activity -->
<style name="SettingsTheme">
<item name="android:windowBackground">#color/main_menu_background</item>
<item name="android:textColor">#color/font_color</item>
</style>
Change:
actionBar.setBackgroundDrawable(getResources().getDrawable(R.color.actionbar_background));
To:
actionBar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.actionbar_background)));