Develop Reference

Reduce overdraw android toolbar

I have an application in which the toolbar is overdrawn several times, the cause of this is the use of an additional background, if I remove this background, the problem is solved but the color of the toolbar is black and that's not what i want, the solution i think is to override the material background color instead of adding a new one (because it has already taken a background from the material theme) but i don't know how to do it.
Toolbar:
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" /> <!-- causing overdraw problem -->
</com.google.android.material.appbar.AppBarLayout>
Theme :
<style name="Theme.MyApp" parent="Base.Theme.MyApp">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/color_cape_cod</item>
<item name="colorPrimaryVariant">#color/color_mine_shaft</item>
<item name="colorOnPrimary">#color/color_white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/vivid_cerulean</item>
<item name="colorSecondaryVariant">#color/color_teal</item>
<item name="colorOnSecondary">#color/color_black</item>
<!-- background -->
<item name="android:colorBackground">#color/color_mine_shaft_dark</item>
<item name="colorOnBackground">#color/color_white</item>
<!-- surface -->
<item name="colorSurface">#color/color_black</item>
<item name="colorOnSurface">#color/color_white</item>
<!-- Customize your theme here. -->
<item name="imageTintColor">#color/color_white</item>
<item name="toolbarTextColor">#color/color_white</item>
<item name="lineHighlightColor">#color/color_tundora</item>
<item name="android:navigationBarColor">#color/color_black</item>
</style>
<style name="CustomRunButton" parent="ThemeOverlay.MaterialComponents">
<item name="colorSecondary">#color/color_raven</item>
</style>
<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.DayNight.Dialog.Alert">
<item name="android:textColorPrimary">#color/color_white</item>
</style>
<style name="Base.Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="alertDialogTheme">#style/AppCompatAlertDialogStyle</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">true</item>
<item name="android:windowBackground">?android:colorBackground</item>
<item name="android:windowLightStatusBar" tools:ignore="NewApi">?attr/isLightTheme</item>
</style>
<style name="BottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetStyle</item>
</style>
<style name="BottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#android:color/transparent</item>
</style>

Button background color is not showing in my android activity

I created a calculator activity as a part of a bigger app, and created a theme, and style for different components. yet, when I assign a background color of orange to the "buttonOperator" styles it doesn't show in the activity on the buttons that are using this style, appreciate explaining to me what i did wrong and maybe how/what tools can be used to troubleshoot such layout problems in android studio if such tools or methods are available.
below is the code relevant to the issue:
calculatorActivity.xml
<\?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_Black"
android:orientation="vertical"
android:theme="#style/Theme.UnitConverterAdvance.Calculator"
tools:context=".CalculatorActivity">
<LinearLayout style="#style/buttonRow">
<Button
style="#style/buttonNumber"
android:text="#string/button_7" />
<Button
style="#style/buttonNumber"
android:text="#string/button_8" />
<Button
style="#style/buttonNumber"
android:text="#string/button_9" />
<Button
style="#style/buttonOperator"
android:text="#string/button_division" />
</LinearLayout>
<LinearLayout style="#style/buttonRow">
<Button
style="#style/buttonNumber"
android:text="#string/button_0" />
<Button
style="#style/buttonNumber"
android:text="#string/button_dot" />
<Button
style="#style/buttonOperator"
android:text="#string/button_equal" />
<Button
style="#style/buttonOperator"
android:text="#string/button_plus" />
</LinearLayout>
</LinearLayout>
Style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="buttonRow">
<item name="android:layout_weight">1</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">0dp</item>
</style>
<style name="buttonNumber">
<item name="android:layout_weight">1</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">#null</item>
<item name="android:textSize">25sp</item>
<item name="android:textColor">#color/white</item>
</style>
<style name="buttonOperator">
<item name="android:layout_weight">1</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">match_parent</item>
<item name="backgroundColor">#color/orange</item>
<item name="android:textSize">25sp</item>
<item name="android:textColor">#color/white</item>
</style>
</resources>
Theme.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="Theme.UnitConverterAdvance" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
<style name="Theme.UnitConverterAdvance.Calculator" parent="Theme.AppCompat">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/light_Black</item>
<item name="colorPrimaryVariant">#color/orange</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
</style>
</resources>

////Try to give manually in .xml file it. It works fine.
<Button
android:id="#+id/btn_proceToPay"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_below="#id/rl3"
android:layout_marginTop="20dp"
android:background="#color/primaryBackgroung"
android:enabled="false"
android:text="Proceed To Pay"
android:textAllCaps="false"
android:textColor="#color/whiteText"
android:textSize="16sp"
android:textStyle="bold" />

as indicated by commonsware in his comment, the answer is in using the backgroundTint instead of the backgroundColor in the Style.xml. or changing 'button' tag into 'android.widget.Button'.
Because since Android Studio 4.1 any Button elements in a layout get turned into MaterialButton widgets, which ignores background attribute.
for more details refer to commonsware answer

Material 3 Android - dark theme uses shadows instead of lighter color elevations. Has anyone experienced this? How to solve a problem?

MaterialComponents works correctly and uses elevationOverlayColor.
enter image description here
But Material3...
enter image description here
night-theme:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.HiNote" parent="Theme.Material3.Dark">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryVariant">#color/primaryDarkColor</item>
<item name="colorOnPrimary">#color/primaryTextColor</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/secondaryColor</item>
<item name="colorSecondaryVariant">#color/secondaryDarkColor</item>
<item name="colorOnSecondary">#color/secondaryTextColor</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="colorOnSurface">#color/white</item>
<item name="elevationOverlayColor">#color/primaryColor</item>
<item name="backgroundColor">#color/backGroundDark</item>
<item name="android:textColorHint">#color/hintTextColor</item>
</style>
<style name="Theme.HiNote.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.HiNote.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="Theme.HiNote.PopupOverlay" parent="ThemeOverlay.Material3.Dark" />
card:
<com.google.android.material.card.MaterialCardView
android:id="#+id/note_card"
style="?attr/materialCardViewElevatedStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="?attr/backgroundColor"
app:cardElevation="2dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/note_timestamp">
And the appbar is affected so I can't solve this problem for very long. Maybe there is some type of elevation so that it can be set?
Maybe I'm doing something wrong?

After implementing codelab point by point, I achieved the desired result.

BottomNavigationView Text Resize Animation Issue based on theme used

I am using BottomNavigationView but observing a strange issue.
When used with the theme "Theme.AppCompat.Light.DarkActionBar", Text and Icon Resize animation works fine on each item when clicked.
But When used with theme "Theme.MaterialComponents.Light.DarkActionBar",
it's not working, No Resize animation happening.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#212121"
app:itemIconTint="#color/nav_item_color_state"
app:itemTextColor="#color/nav_item_color_state"
app:menu="#menu/bottom_menu_main"/>
nav_item_color_state.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/action_nav_feed"
android:icon="#android:drawable/ic_input_add"
android:checked="true"
android:title="List"/>
<item
android:id="#+id/action_nav_info"
android:icon="#android:drawable/ic_notification_overlay"
android:title="Info"/>
<item
android:id="#+id/action_nav_profile"
android:icon="#android:drawable/ic_delete"
android:title="Profile"/>
</menu>
style.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<!-- Theme.AppCompat.Light.DarkActionBar -->

Try using the properties app:itemTextAppearanceActive and app:itemTextAppearanceInactive
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#212121"
app:itemIconTint="#color/nav_item_color_state"
app:itemTextAppearanceActive="#style/BottomNavigationView.Active"
app:itemTextAppearanceInactive="#style/BottomNavigationView"
app:itemTextColor="#color/nav_item_color_state"
app:menu="#menu/bottom_menu_main"/>
In styles.xml
<style name="BottomNavigationView"
parent="#style/TextAppearance.AppCompat.Caption">
<item name="android:textSize">10sp</item>
</style>
<style name="BottomNavigationView.Active"
parent="#style/TextAppearance.AppCompat.Caption">
<item name="android:textSize">15sp</item>
</style>
There's no need to set theme for this View, these styles will do the thing.

popup menu items on listView are not visible

I am using an image button on ListView which shows a popup menu when clicked.
But the problem is that items are not visible.
This is how menu looks.I can see white text on menu in this image but on mobile screen it is invisible.
This is styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:colorBackground">#color/colorPrimary</item>
<item name="android:textColorPrimary">#android:color/black</item>
<item name="android:textColorSecondary">#fcfcfc</item>
<item name="android:actionMenuTextColor">#color/black</item>
</style>
<style name="itemTextStyle.AppTheme" parent="#android:style/TextAppearance.Widget.IconMenu.Item">
<item name="android:textColor">#android:color/black</item>
<item name="android:colorBackground">#color/colorPrimary</item>
</style>
<!-- LoginCreateText -->
<style name="LoginCreateText">
<item name="android:textSize">#dimen/login_buttons_text_size</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:layout_margin">2dp</item>
</style>
<!-- LoginCreateTextButton -->
<style name="LoginCreateTextButton">
<item name="android:textSize">#dimen/login_buttons_text_size</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:layout_margin">2dp</item>
<item name="android:clickable">true</item>
</style>
<style name="HintText">
<item name="android:textSize">0dp</item>
</style>
<style name="FAB">
<item name="android:layout_margin">0dp</item>
<item name="fabSize">normal</item>
<item name="rippleColor">#android:color/white</item>
<item name="backgroundTint">#color/colorAccent</item>
</style>
<style name="ListItemText">
<item name="android:textColor">#color/light_black</item>
<item name="android:textSize">#dimen/list_item_text_size</item>
<item name="android:layout_margin">2dp</item>
</style>
</resources>
This is themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Widget.Button.Login" parent="android:Widget.Button">
<item name="android:paddingLeft">18dp</item>
<item name="android:paddingRight">16dp</item>
<item name="android:textSize">#dimen/login_buttons_text_size</item>
<item name="android:layout_gravity">center</item>
<item name="android:background">#color/colorPrimary</item>
</style>
<style name="Toolbar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:itemTextAppearance">#style/itemTextStyle.AppTheme</item>
<item name="android:background">#color/colorPrimary</item>
<item name="android:textColorPrimary">#android:color/white</item>
</style>
<style name="CustomTheme.Dialog" parent="Theme.AppCompat.Light.Dialog"/>
</resources>
This is the menu which I am trying to display.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
app:popupTheme="#style/itemTextStyle.AppTheme">
<item
android:id="#+id/action_edit"
android:title="#string/action_edit" />
<item
android:id="#+id/action_delete"
android:title="#string/action_delete"/>
<item
android:id="#+id/action_assign"
android:title="#string/action_assign"
android:checkable="true"/>
<item
android:id="#+id/action_mark"
android:title="#string/action_mark"
android:enabled="false"/>
</menu>
This is layout file for Quiz Fragment.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/rl_fragment_quiz_lists"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/grey"
app:popupTheme="#style/itemTextStyle.AppTheme"
tools:context=".ui.fragments.QuizFragment">
<include layout="#layout/single_active_list" />
<ListView
android:id="#+id/list_view_active_lists"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none" />
<android.support.design.widget.FloatingActionButton xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fab"
style="#style/FAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:onClick="showAddQuizDialog"
android:src="#drawable/ic_add_quiz"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp">
<!--app:rippleColor="#android:color/white" /> -->
</android.support.design.widget.FloatingActionButton>
</RelativeLayout>
This is the layout file of the activity in which this fragment is displayed.
<?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:background="#color/grey"
android:orientation="vertical">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/Toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Toolbar" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
I have tried many solutions that were asked before ( all were about toolbar menu) but none worked for me.
I defined a new style in styles.xml
<style name="itemTextStyle.AppTheme" parent="#android:style/TextAppearance.Widget.IconMenu.Item">
<item name="android:textColor">#android:color/black</item>
<item name="android:colorBackground">#color/colorPrimary</item>
and included it in AppTheme which didn't work.then I included it in toolbar style, menu layout, QuizFragment layout but items were still invisible.How to change the background color or item color of menu to fix this, any one will work.

Try this
style.xml
<style name="CustomActionBarTheme" parent="#style/Theme.AppCompat">
<item name="android:actionOverflowButtonStyle">#style/OverflowButton</item>
<item name="actionOverflowButtonStyle">#style/OverflowButton</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:dropDownListViewStyle">#style/PopupMenuListView</item>
<item name="dropDownListViewStyle">#style/PopupMenuListView</item>
<item name="actionOverflowMenuStyle">#style/OverflowMenu</item>
<item name="actionBarDivider">#null</item>
<!-- OverFlow Menu Text Color -->
<item name="android:textColor">#color/black</item>
</style>
<!-- OverFlow menu Styles -->
<style name="PopupMenuListView" parent="#style/Widget.AppCompat.Light.ListView.DropDown">
<item name="android:divider">#color/black</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:background">#color/white</item>
</style>
<style name="OverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
<!-- Required for pre-Lollipop. -->
<item name="overlapAnchor">false</item>
<!-- Required for Lollipop. -->
<item name="android:overlapAnchor">false</item>
<item name="android:dropDownVerticalOffset">4.0dip</item>
</style>
and define theme for Activity in AndroidManifest.xml
<activity
android:name=".YourActivityName"
android:theme="#style/CustomActionBarTheme"/>

I am using only two themes files (for dark, and day)
Theme.MaterialComponents.DayNight.NoActionBar.Bridge
inside them, I have only items of the same name for both day and night, but in different colors. Found (after experimenting)...that this line is a game-changer in my case (same problem as yours) for title and menu to be white, while at the same time text on popup menu is black
<item name="android:textColorSecondary">#android:color/white</item>
here is the whole file, I used only this, and trying to not hard code anything.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Ch+++itche+++++" parent="Theme.MaterialComponents.DayNight.NoActionBar.Bridge">
<!-- Primary brand color. -->
<item name="android:textColorSecondary">#android:color/white</item>
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryVariant">#color/primaryDarkColor</item>
<item name="colorOnPrimary">#color/primaryLightColor</item>
<item name="colorOnSurface">#color/primaryColorWhiteDay</item>
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
That is all,
Happy coding,
Nenad