Develop Reference

Android: how to change color of back button, font family and text size of title in material tool bar?

I am using a custom material toolbar (showing a back button and activity's title) in my activity. I would like the back button and title to be black in color.
This activity's navigation and status bar (battery, time) is currently immersive. I have tried overriding the default color using material tool bar method using the link below but its not working. The back button is still white in color. And I am not sure why is that so. I even play around to see if the tool bar is showing me open sans, but it does not neither does the changing the textSize work.
How to change color of Toolbar back button in Android?
In my manifest file my activity is using the following theme.
<activity
android:name=".RegisterActivity"
android:theme="#style/CustomActivityTheme">
</activity>
In my custom action_bar_layout.xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:fontFamily="#font/open_sans"
android:textSize="24sp"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
android:theme="#style/MyThemeOverlay_Toolbar2"
/>
</LinearLayout>
In my color file
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#00BEBA</color>
<color name="colorPrimaryDark">#00BEBA</color>
<color name="colorAccent">#F60606</color>
<color name="appBackgroundColor">#00BEBA</color>
<color name="textFieldColor">#000000</color>
</resources>
In my Style file
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/textFieldColor</item>
</style>
<style name="CustomActivityTheme" parent="AppTheme">
<!-- Customize your theme here. -->
<item name="windowNoTitle">false</item>
<item name="windowActionBar">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowAnimationStyle">#android:style/Animation</item>
</style>
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<!-- color used by navigation icon and overflow icon -->
<item name="colorOnPrimary">#color/textFieldColor</item>
<item name="actionBarTheme">#style/MyThemeOverlay_Toolbar2</item>
<item name="colorControlNormal">#color/colorAccent</item>
</style>
<style name="MyThemeOverlay_Toolbar2" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<!-- This attributes is used by title -->
<item name="android:textColorPrimary">#color/textFieldColor</item>
<!-- This attributes is used by navigation icon and overflow icon -->
<item name="colorOnPrimary">#color/textFieldColor</item>
</style>
In my registerActivity java code
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
public class RegisterActivity extends AppCompatActivity implements View.OnClickListener{
Toolbar actionBar;
int currentApiVersion;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);
Log.d("TestToolBar", "inside Register Activity");
//using custom toolbar instead of custom textView as action bar
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.action_bar_layout);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
actionBar = findViewById(R.id.tvTitle);
actionBar.setTitle(R.string.RegisterActionBar);
hideNavigationBar();
}
public void hideNavigationBar() {
currentApiVersion = android.os.Build.VERSION.SDK_INT;
Log.d("TestToolBar", "api version is " + currentApiVersion);
if (Build.VERSION.SDK_INT <= 21) {
View v = this.getWindow().getDecorView();
v.setSystemUiVisibility(View.GONE);
} else {
this.getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY |
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
View.SYSTEM_UI_FLAG_FULLSCREEN);
getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimary));
getWindow().setNavigationBarColor(getResources().getColor(R.color.colorPrimary));
}
}
UPDATED.
After using setSupportActionBar(toolbar); It work. But I still need to amend my activity_register.xml. To include my action_bar_layout inside using include. If not my RegisterActivity.java cannot find my toolbar.(null exception error)
The font family can be changed by having a textview inside MaterialToolbar in action_bar_layout.xml

As far as I know, there are simpler ways. In your Toolbar, add the following attribute:
app:titleTextAppearance="#style/ToolbarTheme"
app:navigationIcon="#drawable/ic_back"
Then in styles.xml, add
<style name="ToolbarThemeC" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:fontFamily">#font/lato</item>
<item name="fontFamily">#font/lato</item>
<item name="android:background">#color/White</item>
<item name="android:textSize">24sp</item>
<item name="iconTint">#color/colorPrimary</item>
<item name="android:colorForeground">#color/colorPrimary</item>
<item name="android:textColor">#color/colorPrimary</item>
<item name="android:textColorSecondary">#color/colorPrimary</item>
<item name="actionOverflowButtonStyle">#style/OverFlowTheme</item>
<item name="actionOverflowMenuStyle">#style/OverFlowMenuTheme</item>
</style>
And whatever other attributes you want.

It's working for me.
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
style="#style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/teal_700"
app:layout_constraintTop_toTopOf="parent"
app:navigationIcon="#drawable/ic_back"
app:navigationIconTint="#color/purple_700"
app:title="Title" />
MyToolbarStyle:
<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="titleTextColor">#color/teal_200</item>
<item name="titleCentered">true</item>
<item name="titleTextAppearance">#style/MyTextAppearanceToolbarStyle</item>
</style>
MyTextAppearanceToolbarStyle:
<style name="MyTextAppearanceToolbarStyle" parent="#style/TextAppearance.MaterialComponents.Headline6">
<item name="android:fontFamily">#font/public_sans_italic</item>
<item name="fontFamily">#font/public_sans_italic</item>
<item name="android:textSize">30sp</item>
</style>
Result

Android Splash Screen shifts

I have an Android Splash Screen which renders a drawable. When it is opened via a cold start, I find that my asset simply shifts in an upward direction.
You can find the appropriate code below, all unnecessary code has been omitted.
Here's the slight shift:
SplashActivity.java
public class SplashActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
finish();
}
}
MainActivity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this, R.style.SplashTheme);
super.onCreate(savedInstanceState);
}
res/drawable/background_splash.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<item android:drawable="#color/splash_background_color"/>
<item
android:gravity="center"
>
<bitmap
android:src="#drawable/x150"/>
</item>
</layer-list>
res/layout/launch_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/splash_background_color">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/background_splash"
/>
</FrameLayout>
res/values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/background_splash</item>
</style>
</resources>

I found the solution:
You should remove ImageView because you've already set splash via android:windowBackground.
Also remove android:background="#color/splash_background_color" from FrameLayout to make it transparent
Btw, you could delete res/layout/launch_screen.xml if you are not going to draw some layouts over your splash.
For Activity don't call setContentView()
For Fragment don't override onCreateView()
It's ok, Android doesn't require to set layout for them.

In styles.xml, replace:
<item name="android:windowBackground">#drawable/background_splash</item>
with
<item name="android:background">#drawable/background_splash</item>
Note the windowBackground -> background
That solves the issue for me.

Recyclerview list end overlay color and alpha

How can I change the grey or white overlay that comes on recyclerview when we try to scroll even when we reached the end(top or bottom) of list. I am not able to find the property name to which I can use to do it.

The RecyclerView take the shadow from the colorPrimary of your Theme.
You need to create new theme for RecyclerView then apply this Theme to your RecyclerView
In below example themes colorPrimary is colorGreen so it will take green color shadow.
SAMPLE CODE
<android.support.v7.widget.RecyclerView
android:id="#+id/ha_citiesRC"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:requiresFadingEdge="vertical"
android:theme="#style/CustomTheme"
android:nestedScrollingEnabled="false" />
theme
<style name="CustomTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorGreen</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>

try this in your RecylerView
android:overScrollMode="never"
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
android:background="#000"
android:scrollbars="vertical" />

Change the ColorPrimary for that Activity and Fragment using style
Firstly create the style
<style name="RecyclerView" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">"Enter the Color Which you want"</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
After then just set the style to Activity
#Override
protected void onCreate(Bundle savedInstanceState) {
setTheme(R.style.RecyclerView);
setContentView(R.layout.activity_home);
super.onCreate(savedInstanceState);
}

How to give the user the possibility to switch between different colors skin in your App

I want to give the user the opportunity to select wich color skin will have the app. For example, i whould implement a black skin with black colours with different tonalities and also a white skin with withe tonalities.
Which whould be the best approach to achieve this?
For example i know that there is a colors.xml file in Android that should contain the colours of your app. Whould be a way to have two colors files or something and to use one or other depending of user selection? Maybe a styles.xml file?
Please tell me your opinion about which whould be the best approach to achieve this
Thank you
MY LAYOUT:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<RelativeLayout
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingTop="4dp"
android:paddingBottom="4dp"
style="#style/CustomPagerTitleStrip"/>
</android.support.v4.view.ViewPager>
</RelativeLayout>
<!-- The navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer_menu"
style="#style/NavigationDrawerStyle"/>
</android.support.v4.widget.DrawerLayout>
My styles.xml file:
<resources>
<style name="AppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="actionBarTheme">#style/CustomActionBar</item>
<item name="android:textColor">#color/colorFontMenus</item>
<item name="itemTextColor">#color/colorFontMenus</item>
<item name="itemIconTint">#color/colorFontMenus</item>
</style>
<style name="CustomActionBar">
<!-- title text color -->
<item name="android:textColorPrimary">#color/colorFontMenus</item>
<!-- subtitle text color -->
<item name="android:textColorSecondary">?android:textColorPrimary</item>
<!-- action menu item text color -->
<item name="actionMenuTextColor">?android:textColorPrimary</item>
<!-- action menu item icon color - only applies to appcompat-v7 icons :( -->
<item name="colorControlNormal">?android:textColorPrimary</item>
</style>
<style name="CustomPagerTitleStrip">
<item name="android:background">#color/mainColorWithAlpha</item>
</style>
<style name="CustomTextView">
<item name="android:textColor">#color/colorFontContent</item>
</style>
<style name="CustomScrollBar">
<item name="android:scrollbarThumbVertical">#drawable/scrollbar_green</item>
</style>
<style name="CustomDrawerHeader">
<item name="android:background">#drawable/drawer_header_background_green</item>
</style>
<style name="NavigationDrawerStyle">
<item name="android:background">#color/colorPrimaryDark</item>
</style>
</resources>

Regarding to #Joaquim Ley's answer we can change Theme before super.onCreate() .
In my app(at work) my styles.xml :
This is my default theme
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:colorAccent">#color/colorPrimary</item>
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
<item name="android:colorFocusedHighlight">#color/colorPrimary</item>
<item name="android:colorControlNormal">#color/amber_300</item>
<item name="android:colorControlActivated">#color/amber_300</item>
<item name="android:colorControlHighlight">#color/colorControlHighlight</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowTranslucentStatus">false</item>
<item name="actionBarItemBackground">?attr/selectableItemBackground</item>
<item name="colorControlHighlight">#color/colorControlHighlight</item>
<item name="android:windowContentTransitions">true</item>
<!-- Customize your theme here. -->
</style>
And this is my Green Theme :
<style name="AppTheme.Green" parent="AppTheme">
<item name="colorPrimary">#color/green_500</item>
<item name="colorPrimaryDark">#color/green_700</item>
<item name="android:colorAccent">#color/green_300</item>
<item name="android:statusBarColor">#color/green_700</item>
<item name="android:colorFocusedHighlight">#color/green_500</item>
<item name="android:colorControlNormal">#color/green_300</item>
<item name="android:colorControlActivated">#color/green_300</item>
</style>
When changing theme :
#Override
protected void onCreate(Bundle savedInstanceState) {
mPrefs=getSharedPreferences(getResources().getString(R.string.preference_name),MODE_PRIVATE);
mEditor=mPrefs.edit();
mEditor.apply();
defaultColor=mPrefs.getInt(getResources().getString(R.string.default_color),0);
//you can do some switch case or if else of defaultColor and change theme
setTheme(R.style.AppTheme_Green);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_add_voice_record);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
This is my first app in work, but in my personal app i created a BaseActivity and created a method handleColor(int color,int darkcolor). But this won't change entire theme just Toolbar, StatusBar, NavigationBar and EditText marker and underline colors:
public class BaseActivity extends AppCompatActivity {
public void handleColor(int color,int darkcolor){
//changing toolbar color
if(getSupportActionBar()!=null){
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(color));
}
//if bigger than Api 21 change status bar color
if(isLolipop()){
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(darkcolor);
}
}
public boolean isLolipop(){
return Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP;
}
}
When changing color i am using Material Dialogs Color Picker. Sample apk : sample.apk and Github: material-dialogs. If you want to see how it looks like i can give you a video of my app.
Colors from : Material Color Palette
Anyways i know 2 different approach , if you like one of them i can explain more.
#Edit : Good news for you, I found this Github repo : app-theme-engine and its working good. You can try sample apk. If you can't import it via gradle try this : compile 'com.github.naman14:app-theme-engine:0.5.1#aar'

This should be done in the styles/AppTheme.xml
It’s only possible to change the theme of an Activity in the onCreate() method and that to only before super() has been called. Changing the theme is fairly straight forward, something like below should do it:
setTheme(someBooleanFlag ? R.style.AppThemeOne : R.style.AppThemeTwo);
Read more here:
Ali Muzaffar's Medium post on this
Styles and Themes
Material Theme

Can't set hex color and view the icon on the action bar using Theme.AppCompat

I'm new in Android and i've followed exactly the Android official tutorial until this point: https://developer.android.com/training/basics/actionbar/styling.html and i'm trying to change the background color and view the default Android icon on the action bar using the Support Library (with the Theme.AppCompact). But Android Studio gives me the error "Cannot resolve symbol" (on the Support Library row in the themes.xml) when i try to set an Hex color like #AA0000, and also if there is no error i can't see the Android icon on the left of the action bar.
The expectation is like:
The real result (when i remove the hex and set a background image for avoid the error) is like:
The icon on the left is missing (and also the menu bottom on the right, but i don't know if the problem is related to the inches dimension of the screen).
However, in this condition i can only set a background image, not a hex color, and i can't view the icon, these are my files (with the hex color on themes.xml):
This is the AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.mycompany.myfirstapp" >
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
<activity
android:name=".MyActivity"
android:label="#string/app_name"
android:theme="#style/CustomActionBarTheme" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".DisplayMessageActivity"
android:label="#string/title_activity_display_message"
android:parentActivityName=".MyActivity" >
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="com.mycompany.myfirstapp.MyActivity" />
</activity>
</application>
<uses-sdk android:minSdkVersion="14" />
</manifest>
Themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#AA0000</item>
<!-- Support library compatibility -->
<item name="background">#AA0000</item>
</style>
</resources>
MyActivity.java
public class MyActivity extends AppCompatActivity {
public final static String EXTRA_MESSAGE = "com.mycompany.myfirstapp.MESSAGE";
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu items for use in the action bar
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main_activity_actions, menu);
return super.onCreateOptionsMenu(menu);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
// Handle presses on the action bar items
switch (id) {
case R.id.action_search:
//openSearch();
Log.i("MyActivity", "SEARCH PRESSED");
return true;
case R.id.action_settings:
//openSettings();
Log.i("MyActivity", "SETTINGS PRESSED");
return true;
default:
return super.onOptionsItemSelected(item);
}
}
/** Called when the user clicks the Send button */
public void sendMessage(View view) {
Intent intent = new Intent(this, DisplayMessageActivity.class);
EditText editText = (EditText) findViewById(R.id.edit_message);
String message = editText.getText().toString();
intent.putExtra(EXTRA_MESSAGE, message);
startActivity(intent);
}
}
activity_my.xml
<LinearLayout 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"
android:orientation="horizontal" >
<EditText android:id="#+id/edit_message"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:onClick="sendMessage"/>
</LinearLayout>
**main_activity_actions.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- Search, should appear as action button -->
<item android:id="#+id/action_search"
android:icon="#drawable/ic_action_search"
android:title="#string/action_search"
app:showAsAction="ifRoom" />
<!-- Settings, should always be in the overflow -->
<item android:id="#+id/action_settings"
android:title="#string/action_settings"
app:showAsAction="never" />
</menu>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
How can i solve the problem?

<style name="MyActionBar"
parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#AA0000</item>
<!-- Support library compatibility -->
<item name="background">#AA0000</item>
</style>
</resources>
That's not working because you need to define the color and name it if you want to use it.
In your res/values folder, there should be a file named colors.xml. If not, create colors.xml in the res/values folder and then add your color definition to colors.xml:
<item name="my_color" type="color">#AA0000</item>
And then use the color by refering to it by its resource name:
<style name="MyActionBar"
parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/my_color</item>
<!-- Support library compatibility -->
<item name="background">#color/my_color</item>
</style>
</resources>
More about colors: https://developer.android.com/samples/BasicMediaRouter/res/values/colors.html
Also, you won't see the app icon in the actionbar when using AppCompatActivity. That's just the default behavior for that class. But if you'd like to see it: show icon in actionbar/toolbar with AppCompat-v7 21

this work for me:
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="BuffTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle" tools:ignore="NewApi">#style/MyActionBar</item>
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background" tools:ignore="NewApi">#color/dark_action_bar</item>
<item name="background">#color/dark_action_bar</item>
<item name="titleTextStyle">#style/TitleTextStyle</item>
<item name="subtitleTextStyle">#style/SubTitleTextStyle</item>
</style>
<style name="TitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="SubTitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">11sp</item>
</style>
</resources>
pay attention for tools:ignore="NewApi" attribute