0

I've been trying to get the back button to become white using the default App Bar in my Android App. I looked at and tried a number of suggestions in this post as well and ran up against the following issues.

  • Adding colorControlNormal to my app style will mess with all of the other controls and essentially break the UI.
  • Subclassing other parent themes other than Widget.AppCompat.ActionBar usually just causes the title to disappear and I still can't change the back button color.
  • Setting android:homeAsUpIndicator in my theme OR on the ActionBar style has no effect.

I ended up settling on this, but it feels pretty hacky - although it works. It basically watches the navigation and sets a custom vector back button with the white color when the user can go back. Seems like overkill to me. Is there a better way to do it?

My Styles

 <style name="Theme.MyTheme" parent="Theme.Material3.Light"> <!-- ... --> <item name="actionBarStyle">@style/CustomActionBar</item> </style> <style name="ActionBarTitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"> <item name="android:textColor">@color/white</item> </style> <style name="CustomActionBar" parent="Widget.AppCompat.ActionBar"> <item name="background">@color/actionBarColor</item> <item name="titleTextStyle">@style/ActionBarTitleText</item> <item name="height">56dp</item> </style> 

MainActivity.kt

 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host) as NavHostFragment NavigationUI.setupActionBarWithNavController(this, navHostFragment.navController) navHostFragment.navController.addOnDestinationChangedListener { _, destination, _ -> // Only show the custom up indicator if not on the start destination val isStartDestination = destination.id == navHostFragment.navController.graph.startDestinationId if (!isStartDestination) { ContextCompat.getDrawable(this, R.drawable.baseline_arrow_back_24)?.let { upArrow -> upArrow.setTint(ContextCompat.getColor(this, R.color.white)) supportActionBar?.setHomeAsUpIndicator(upArrow) } } else { // Optionally reset to default or hide supportActionBar?.setHomeAsUpIndicator(null) } } } 

1 Answer 1

1

Can you try scoping the colorControlNormal to just the ActionBar? instead of adding it globally

Alternatively, You should use Toolbar instead of ActionBar

<style name="Theme.MyTheme" parent="Theme.Material3.Light.NoActionBar"> <!-- Remove actionBarStyle --> </style> <!-- In your layout --> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/actionBarColor" app:titleTextColor="@color/white" app:navigationIconTint="@color/white" /> 
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.