Develop Reference

How do i change Android App Name Text Color in a Transparent App Bar

I'd like to set my app name color to gray with a transparent app bar and an image background. However, app name color stayed white for some reason. Below is my code. Any recommendations? Thank you in advance!
1. Themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.DailyBread" 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="AppTheme.ActionBar.Transparent" parent="Theme.DailyBread">
<item name="titleTextColor">#color/gray_dark</item>
<item name="android:textColorPrimary">#color/gray_dark</item>
<item name="android:windowContentOverlay">#null</item>
<item name="windowActionBarOverlay">true</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
</resources>
2. color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="gray_dark">#696665</color>
<color name="gary_light">#bdbab9</color>
</resources>

Create your toolbar.xml file with background of AppBarLayout is #null:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/general_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Application Name"
android:textSize="42sp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
PS: you can also use android:background="#android:color/transparent" instead of #null.
Result:

Android Material Exposed Dropdown Menu activated use custom color instead of primary color

I am having issue trying to change the color of both the underline and floating label of my exposed drop down menu when it is activated.
"colorControlActivated" of my filled exposed drop down menu is currently greenish blue. regardless of what I indicate (black) in the style file, my registerOrderName menu will still use colorPrimary color for colorControlActivated.
In my style file
<!-- Legacy TextField Theme-->
<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
<item name="colorControlNormal">#color/textPlaceholderColor</item>
<item name="colorControlActivated">#color/textFieldColor</item>
<item name="colorControlHighlight">#color/textFieldColor</item>
</style>
<!-- TextField Hint Theme-->
<style name="TextInputLayoutHintText">
<item name="android:textColor">#color/textPlaceholderColor</item>
<item name="android:textSize">16sp</item>
</style>
<!-- Legacy Drop Down Menu Theme-->
<style name="MenuLayoutAppearance" parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu">
<item name="colorControlNormal">#color/textPlaceholderColor</item>
<item name="boxBackgroundColor">#color/white</item>
<item name="colorControlActivated">#color/textFieldColor</item>
<item name="colorControlHighlight">#color/textFieldColor</item>
</style>
<style name="Autocomplete">
<item name="colorControlActivated">#color/textFieldColor</item>
<item name="colorControlHighlight">#color/textFieldColor</item>
</style>
in my activity.xml file
android:id="#+id/registerTextInputLayout4"
style="#style/MenuLayoutAppearance"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:elevation="12dp"
app:hintTextAppearance="#style/TextInputLayoutHintText"
app:layout_constraintEnd_toEndOf="#+id/registerForm"
app:layout_constraintStart_toStartOf="#+id/registerForm"
app:layout_constraintTop_toBottomOf="#+id/registerTextInputLayout3">
<androidx.appcompat.widget.AppCompatAutoCompleteTextView
android:id="#+id/registerOrderName"
android:theme="#style/Autocomplete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:fontFamily="#font/open_sans"
android:hint="#string/RegisterForm4"
android:paddingStart="0dp"
android:paddingEnd="0dp"
android:singleLine="true"
android:textColor="#color/textFieldColor"
android:textCursorDrawable="#drawable/cursor_color"
android:textSize="18sp" />
</com.google.android.material.textfield.TextInputLayout>
In my color file
<color name="colorPrimary">#00BEBA</color>
<color name="colorPrimaryDark">#00BEBA</color>
<color name="colorAccent">#F60606</color>
<color name="white">#FFFFFF</color>
<color name="green">#17B3AB</color>
<color name="version">#0B0008</color>
<color name="appBackgroundColor">#00BEBA</color>
<color name="textPlaceholderColor">#807E7E</color>
<color name="textFieldColor">#000000</color>
<color name="textFieldCursorColor">#FB0000</color>
<color name="textFieldHightLightColor">#2196F3</color>
<color name="customGreen">#92CFCD</color>
<color name="defaultLinkBlue">#007aff</color>
<color name="facebookBlue">#3B5998</color>

You can override the colorPrimary using the android:theme attribute:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:theme="#style/InputText_Overlay"
..>
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.google.android.material.textfield.TextInputLayout>
with:
<style name="InputText_Overlay">
<item name="colorPrimary">#color/....</item>
</style>

Can't change cursor and bubble color for Material TextInputEditText

I want to change Material TextInputEditText's bubble and cursor color. I tried colorAccent, android:textCursorDrawable these are not working correctly.
Files in here

The material attribute color colorControlActivated do the magic. You have to create a style for your TextInputLayout.
e.g:
<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/red</item>
<item name="colorControlHighlight">#color/blue</item>
</style>
Then you have to apply this style in the theme attribute of control:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/lblObservaciones"
android:theme="#style/TextInputLayoutAppearance"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:boxStrokeColor="#color/blue"
app:hintTextAppearance="#style/TextAppearance.AppCompat.Medium"
app:hintTextColor="#color/blue">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/comments"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="top"
android:inputType="textMultiLine"
android:maxLength="200" />
</com.google.android.material.textfield.TextInputLayout>

Just apply colorControlActivated in app theme(day/night) and all Material TextInputEditField will have the changed cursor color
<item name="android:colorControlActivated">#color/green</item>

You have to use following attributes:
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<item name="colorPrimary">#212121</item>
<item name="colorPrimaryVariant">#000000</item>
<item name="colorOnPrimary">#FFFFFF</item>
<item name="colorSecondary">#2962FF</item>
<item name="colorSecondaryVariant">#0039CB</item>
<item name="colorOnSecondary">#FFFFFF</item>
<item name="colorError">#F44336</item>
<item name="colorOnError">#FFFFFF</item>
<item name="colorSurface">#FFFFFF</item>
<item name="colorOnSurface">#212121</item>
<item name="android:colorBackground">#color/background</item>
<item name="colorOnBackground">#212121</item>
</style>
<color name="background">#FAFAFA</color>
To know more about : Setting up a Material Components theme for Android

Text Size and Style of Toolbar Android

I am developing application which have multi screen support. I have completed all remain layout as per device size but I am unable to increase Actionbar/Toolbar size for same. its looking small in 10inch tablet. How can I increase size of toolbar text ?
My Style XML is like below
<resources>
<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Light">
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.FullScreen" parent="noActionBar">
<item name="android:windowFullscreen">true</item>
</style>
<style name="noActionBar" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="OptionDialog" parent="Theme.AppCompat.Dialog.Alert">
<item name="colorAccent">#C5CAE9</item>
<item name="android:background">#3F51B5</item>
<item name="android:textColor">?android:attr/textColorPrimaryInverseDisableOnly</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="SelectableItemTheme">
<item name="colorControlHighlight">#888888</item>
</style>
<style name="SelectableItemBackground">
<item name="android:theme">#style/SelectableItemTheme</item>
<item name="android:background">?attr/selectableItemBackground</item>
</style>
<style name="HomeTabTextStyle"
parent="TextAppearance.Design.Tab">
<item name="android:textSize">35sp</item>
<item name="android:textStyle">bold</item>
</style>
<!-- Action Bar Style -->
and my layout xml which including toolbar is like below
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="110dp"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabTextAppearance="#style/HomeTabTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
My Java Code is like below
setContentView(R.layout.activity_home);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setTitle("My App Name");

Toolbar is like any other layout; that means you can add elements inside it like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:textColor="#color/colorText"
android:gravity="center|center_horizontal"
android:text="#string/title_activity_my_activity"/>
</android.support.v7.widget.Toolbar>
This will change the title size of your toolbar title; as you wish.
I hope this helps you achieve your goal! Good luck.
UPDATE
If you want to manually set the activity title, you can set an id for the text view like this:
<TextView
android:id="#+id/title_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:textColor="#color/colorText"
android:gravity="center|center_horizontal"
android:text="#string/title_activity_my_activity"/>
Then like usual,
TextView title = (TextView) toolbar.findViewById(R.id.title_text);
title.setText("New Title");
I hope this helps!

Android change popup menu text color

I've tried many things to change the text color when i click the "three dot" menu button but it always reverts back to the toolbar (android:theme) theme and not the android:popupTheme. I want the text to be black but it always shows up white.
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
</style>
<style name="MaterialWorkout_theme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColorSecondary">#48FFFFFF</item>
</style>
<style name="Popup_theme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#000000</item>
<item name="android:textColorSecondary">#38000000</item>
</style>
app_bar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:id="#+id/app_bar"
android:theme="#style/MaterialWorkout_theme"
android:popupTheme="#style/Popup_theme"
>
Here is what it looks like:
http://imgur.com/svRuuHK

Solved it. changed my toolbar.xml file to this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/primaryColor"
android:id="#+id/tool_bar"
android:theme="#style/MaterialWorkout_theme"
app:popupTheme="#style/Popup_theme">
notice the implementation of:
xmlns:app="http://schemas.android.com/apk/res-auto"
and
app:popupTheme="#style/Popup_theme"
these two lines solved my problem!

You need to define your popup menu theme in your style, not you Toolbar.
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
<item name="popupMenuStyle">#style/Popup_theme</item>
</style>

Use below code .I hope this will solve your problem.You can change both background color and textcolor.
<style name="AppFullScreenThemeNight" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<!-- if using android.support.v7.widget.PopupMenu -->
<item name="popupMenuStyle">#style/PopupMenu</item>
<item name="android:itemTextAppearance">#style/TextAppearance</item>
</style>
<style name="PopupMenu" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:popupBackground">#color/button_color</item>
</style>
<style name="TextAppearance">
<item name="android:textColor">#android:color/holo_red_dark</item>
</style>