How to change the color of the back arrow

Question

Hey there i am trying to setup homeindicator in my action bar but looks like the arrow have a white color i've tried many things i've set a drawble as a home indicator but same issue it's white here's what i tried

supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_baseline_arrow_back_24)

the theme i am using

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="android:textColorSecondary">@android:color/black</item>
        <item name="android:statusBarColor" tools:targetApi="l">@color/bar_color</item>
        <item name="colorPrimary">@color/splashscreen_text_color</item>
        <item name="colorOnPrimary">@color/black</item>
        <item name="itemBackground">@color/black</item>
        <item name="actionOverflowButtonStyle">@style/actionOverflowButtonStyle</item>
        <item name="homeAsUpIndicator">@drawable/ic_baseline_arrow_back_24</item>
    </style>

    <style name="actionOverflowButtonStyle" parent="@style/Widget.AppCompat.ActionButton.Overflow">
        <item name="android:tint">@color/black</item>
    </style>

the result i am getting Result

what i am expecting: the expected result

the arrow drawble file

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="@color/black">
  <path
      android:fillColor="@android:color/black"
      android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

did you add those two line ? `supportActionBar!!.setDisplayHomeAsUpEnabled(true) supportActionBar!!.setDisplayShowHomeEnabled(true)` — Shay Kin, Apr 07 '21 at 15:12
i just did but still the arrow is clickable but it doesn't show — souid chaima, Apr 07 '21 at 15:18
Official answer: https://stackoverflow.com/a/58052112/3466808 — Sam Chen, Apr 07 '21 at 15:31

score 0 · Answer 1 · answered Apr 07 '21 at 14:56

0

easy is define image view in activity file and imageView.setColorFilter(Color.argb(0, 0, 0, 0));

technical view --> how to set tint for imageview

answered Apr 07 '21 at 14:56

vaimalaviya

53
6

it's not what i am looking for thanks anyway – souid chaima Apr 07 '21 at 15:24

Rus_o · Answer 2 · 2021-04-08T13:26:37.037

in your "App Theme" add item named "drawerArrowStyle" and create it's style:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- your style here... -->

    <item name="drawerArrowStyle">@style/backArrowTheme</item>
</style>


<style name="backArrowTheme" parent="AppTheme">

    <!-- your arrow color: -->
    <item name="android:textColorSecondary">@color/black</item>

    <!-- your app bar bgc: -->
    <item name="android:background">@color/white</item>

</style>

add file - app_bar_main.xml:

<androidx.constraintlayout.widget.ConstraintLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto">

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:ignore="MissingConstraints">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolBar"
        android:fitsSystemWindows="true"
        android:theme="@style/backArrowTheme"/>

</com.google.android.material.appbar.AppBarLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Then include this file in your main xml file

    <include
    layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

and set in your main java file:

    Toolbar toolbar = findViewById(R.id.toolBar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

How to change the color of the back arrow

2 Answers2