Android Actionbar doesn't apply custom image background

Question

I'm using Android Studio, and I've tried to add custom image to the action bar background, now I've used some tutorial on youtube which says that I should add the following code to my styles.xml

 <style name="custom_actionbar" parent="@android:style/Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/custom_style</item>
    </style>
    <style name="custom_style" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/bar</item>
    </style>

and manifest.xml

<activity
       android:name=".MainActivity"
       android:label="@string/app_name"
       android:screenOrientation="portrait"
       android:theme="@style/custom_actionbar">

Now, it should be working though it showing me this error:

java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity

So I've looked it up on internet and I've found this, though after using the solutions to this, the application still crashing with the same error (I've used debugging to check the error few times after using the solutions).

How can I use Theme.AppCompact theme correctly so the application will work?

My entire manifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.none.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:screenOrientation="portrait"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".Food"
            android:label="@string/title_activity_food"
            android:screenOrientation="portrait"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name=".Time"
            android:label="@string/title_activity_time"
            android:screenOrientation="portrait"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name=".Info"
            android:screenOrientation="portrait" />
        <activity
            android:name=".Training"
            android:label="@string/title_activity_training"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity android:name=".firstEntry"></activity>
    </application>

Styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    </style>

    <style name="custom_actionbar" parent="@style/Theme.AppCompat.Light">
        <item name="android:actionBarStyle">@style/custom_style</item>
    </style>

    <style name="custom_style" parent="@style/Widget.AppCompat.Light.ActionBar">
        <item name="android:background">@drawable/bar</item>
    </style>

    <style name="LightDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="android:textColor">@android:color/primary_text_light</item>
        <item name="background">@drawable/bar</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

Answer 1

Try using the AppCompatTheme:

in res/values/styles.xml : replace your style with

 <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="custom_actionbar" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/custom_style</item>
</style>

<style name="custom_style" parent="@style/Widget.AppCompat.Light.ActionBar">
    <item name="android:background">@drawable/bar</item>
</style>

Now in your manifest add the custom action bar theme in your activity using:

 <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait"
        android:theme="@style/custom_actionbar">

EDIT

in your mainactivity modify:

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    //setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);

    prefs = getSharedPreferences("com.none.myapplication", MODE_PRIVATE);

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawer, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.setDrawerListener(toggle);
    toggle.syncState();

Alternative solution

Add the image to your toolbar background:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@drawable/bar"  //your image
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.v7.widget.Toolbar>

And also modify the theme in manifest: to use the toolbar instead of ActionBar

<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait"
        android:theme="@style/AppTheme.NoActionBar">