How to change toolbar back button icon in android material components - android

I would like to change the default navigate up icon (back button icon) to my custom icon. I not using a drawer, just a simple toolbar and material components
Is this possible?

If you are using a Toolbar to change the icon just use:
Toolbar toolbar = findViewById(R.id.xxx);
toolbar.setNavigationIcon(R.drawable.xxxx4);
setSupportActionBar(toolbar);
If you are using the ActionBar you can use:
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.xxx);
You can also change it overriding in your app theme the homeAsUpIndicator attribute:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<item name="homeAsUpIndicator">#drawable/...</item>
</style>
If you are using the Navigation Components, currently there isn't a way to customize the HomeAsUpIndicator icon, and it is an expected behavior with the Up button displayed when you are on a non-root destination.
There is a workaround adding an addOnDestinationChangedListener after your setup method and checking the destination.
Something like:
navController.addOnDestinationChangedListener(
new NavController.OnDestinationChangedListener() {
#Override
public void onDestinationChanged(#NonNull NavController controller, #NonNull NavDestination destination, #Nullable Bundle arguments) {
if (destination.getId() == R.id.nav_xxx) {
//With ActionBar
//getSupportActionBar().setHomeAsUpIndicator(R.drawable.xxxx);
//With a Toolbar
toolbar.setNavigationIcon(R.drawable.xxxx);
}
}
});

If you have created a toolbar and set it as an ActionBar like below
toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)
You have two options in setting a custom icon:
Option 1
toolbar?.setNavigationIcon(R.drawable.homeNavigationIcon)
Option 2
supportActionBar?.setHomeAsUpIndicator(R.drawable.homeNavigationIcon)

Related

How to hide the default fragment actionBar create our own actionBar in android & kotlin

I have an android app with bottom navigation containing 3 fragments and all have their own actionBar by default. I want to hide all the default actionBar of three fragments and create my own actionbar with many options. I am using Kotlin.
You just need to set the style of the app. Go to values/styles.xml, edit the value of AppTheme as NoActionBar. Then to create your own AppBar in each fragments, just use AppBarLayout in your Xml. For instance:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
...
</style>
Heres a quick solution.
You find styles.xml and you change the base application theme to "Theme.AppCompat.NoActionBar" as shown below.
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
</style>
and define custom layout of action bar in xml
I have solved the problem.
val appBarConfiguration = AppBarConfiguration(setOf( R.id.navigation_home, R.id.navigation_messages, R.id.navigation_profile))
setupActionBarWithNavController(navController, appBarConfiguration)
Just remove the above two lines from the main activity and your problem is solved.
First of all, ActionBar is Activities property, not fragments. If you want a custom action bar follow this link, https://myandroid.site/custom-toolbar-with-style-in-kotlin-design-colorful-toolbar/
or
You can have the default ActionBar in Activity & create your own layout that look like an action bar.
Hide Action Bar(Below code should be inside Activity):
if (supportActionBar != null)
supportActionBar?.hide()

Change back icon color in toolbar

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>

How to use back button on toolbar with sliding navigation drawer

I have a Activity in which I have created NavigationDrawer functionality and rest I have fragments using this tutorial
My problem is I want that if I navigate using navigation drawer to all fragments except home like photos, notification, etc. It must show a back button instead of hamburger icon and also includes sliding navigation. I am not able to implement this.
Also want to change toolbar back button color. Please help.
to change back button color try this.
<style name="toolbar_theme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">#color/arrow_color</item>
</style>
or
<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorControlNormal">#color/arrow_color</item>
</style>
You can do actionBarDrawerToggle.setHomeAsUpIndicator(R.drawable.ic_new_icon); where toggle is your ActionBarDrawerToggle instance
To change Drawer icon to Back arrow use:
MenuFragment fragment = new MenuFragment();
//disable the toggle menu and show up carat
theDrawerToggle.setDrawerIndicatorEnabled(false); // add this
getSupportFragmentManager().beginTransaction().replace(R.id.frag_layout,fragment).addToBackStack(null).commit();
Add this code in your Drawer Item's Fragment Transaction without the Home Fragment
To revert back the change:
overwrite onBackPressed() in your Activity
#Override
public void onBackPressed() {
super.onBackPressed();
// turn on the Navigation Drawer image;
setDrawerIndicatorEnabled(true)
}

How to change HomeAsUp indicator in new AppCompat Toolbar?

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)

How can I use an icon instead of a title in the Android Toolbar?

I'm using the Toolbar (instead of ActionBar) via AppCompat. I'd like to replace the Toolbar's title (the app/actity name) with an icon, but I don't see how.
My icon is just text using a non-standard font, so I guess it might be allowed in Material Design.
Use the following steps in your activity:
Declare the Toolbar object:
Toolbar toolbar = (Toolbar) findViewById(R.id.tool1);
Set the support actionbar:
setSupportActionBar(toolbar);
Remove title:
getSupportActionBar().setDisplayShowTitleEnabled(false);
Add your logo in drawable folder in:
res/drawable.
Add logo using this code:
toolbar.setLogo(R.drawable.ic_launcher);
At styles.xml first make a style for action bar with no title and with the logo like that
<style name="ActionBar.NoTitle" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="displayOptions">useLogo|showHome</item>
<item name="logo">#drawable/ic_logo</item>
</style>
Then create custome theme for your activity with new actionbar style
<!-- Create a style for MainActivity called AppTheme.Main that uses our custom ActionBar style -->
<style name="AppTheme.Main" parent="#style/AppTheme">
<item name="actionBarStyle">#style/ActionBar.NoTitle</item>
</style>
Then go to manifest file under the specified activity set theme to AppTheme.Main
android:theme="#style/AppTheme.Main"
I wish that help everyone
Here is the answer to a very similar question:
Android Lollipop, add popup menu from title in toolbar
It comes down to using the Toolbar as a ViewGroup (LinearLayout is a ViewGroup too, for instance). The layout designer doesn't currently support that, but you can add a child node in the XML.
Then you need to call this to remove the standard title text:
getSupportActionBar().setDisplayShowTitleEnabled(false);

Categories

Resources