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

Question

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?

Answer 1

<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