ActionBar styling after updating to Android lollipop

Ahmed Nawaz picture Ahmed Nawaz · Oct 21, 2014 · Viewed 7.6k times · Source

I was developing custom ActionBar by selecting API19 yesterday today I updated support libraries and project to API21 with cause me into problem. In my actionbar there is a menu-to-arrow button with I don't need and style of actionbar changes.

Before update: enter image description here

After Update: enter image description here

Following is the style.xml

<resources>
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">

    </style>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <item name="android:buttonStyle">@style/ButtonAppTheme</item>

        <item name="actionBarItemBackground">@drawable/selectable_background_apptheme</item>
        <item name="popupMenuStyle">@style/PopupMenu.Apptheme</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Apptheme</item>
        <item name="actionBarTabStyle">@style/ActionBarTabStyle.Apptheme</item>
        <item name="actionDropDownStyle">@style/DropDownNav.Apptheme</item>
        <item name="actionBarStyle">@style/ActionBar.Solid.Apptheme</item>
        <item name="actionModeBackground">@drawable/cab_background_top_apptheme</item>
        <item name="actionModeSplitBackground">@drawable/cab_background_bottom_apptheme</item>
        <item name="actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Apptheme</item>

        <!-- Light.DarkActionBar specific -->
        <item name="actionBarWidgetTheme">@style/Theme.Apptheme.Widget</item>

    </style>

    <!-- Base application theme for Full screen Activities -->
    <style name="AppThemeFullScreen" parent="@android:style/Theme.Light.NoTitleBar.Fullscreen">
        <item name="android:buttonStyle">@style/ButtonAppTheme</item>
    </style>

    <!-- Button Style -->
    <style name="ButtonAppTheme" parent="android:Widget.Button">
        <item name="android:background">@drawable/btn_background</item>
        <item name="android:minHeight">48dip</item>
        <item name="android:minWidth">64dip</item>
        <item name="android:textColor">@color/btn_text_color_default</item>

    </style>


    <style name="ActionBar.Solid.Apptheme" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@drawable/ab_solid_apptheme</item>
        <item name="backgroundStacked">@drawable/ab_stacked_solid_apptheme</item>
        <item name="backgroundSplit">@drawable/ab_bottom_solid_apptheme</item>
        <item name="progressBarStyle">@style/ProgressBar.Apptheme</item>
    </style>

    <style name="ActionBar.Transparent.Apptheme" parent="@style/Widget.AppCompat.ActionBar">
        <item name="background">@drawable/ab_transparent_apptheme</item>
        <item name="progressBarStyle">@style/ProgressBar.Apptheme</item>
    </style>

    <style name="PopupMenu.Apptheme" parent="@style/Widget.AppCompat.PopupMenu">
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_apptheme</item>
    </style>

    <style name="DropDownListView.Apptheme" parent="@style/Widget.AppCompat.ListView.DropDown">
        <item name="android:listSelector">@drawable/selectable_background_apptheme</item>
    </style>

    <style name="ActionBarTabStyle.Apptheme" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:background">@drawable/tab_indicator_ab_apptheme</item>
    </style>

    <style name="DropDownNav.Apptheme" parent="@style/Widget.AppCompat.Spinner.DropDown.ActionBar">
        <item name="android:background">@drawable/spinner_background_ab_apptheme</item>
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_apptheme</item>
        <item name="android:dropDownSelector">@drawable/selectable_background_apptheme</item>
    </style>

    <style name="ProgressBar.Apptheme" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progress_horizontal_apptheme</item>
    </style>

    <style name="ActionButton.CloseMode.Apptheme" parent="@style/Widget.AppCompat.ActionButton.CloseMode">
        <item name="android:background">@drawable/btn_cab_done_apptheme</item>
    </style>

    <!-- this style is only referenced in a Light.DarkActionBar based theme -->
    <style name="Theme.Apptheme.Widget" parent="@style/Theme.AppCompat">
        <item name="popupMenuStyle">@style/PopupMenu.Apptheme</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Apptheme</item>
    </style>

</resources>

onCreate from MainActivity

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mNavigationDrawerFragment = (NavigationDrawerFragment)
        getSupportFragmentManager().findFragmentById(R.id.navigation_drawer);
    // mTitle = getTitle();

    // Set up the drawer.
    mNavigationDrawerFragment.setUp(
        R.id.navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout));

    actionBar = getSupportActionBar();
    // Toolbar toolbar =(Toolbar) findViewById(R.id.toolbar);
    // setSupportActionBar(toolbar);

    LayoutInflater mInflater = LayoutInflater.from(this);

    LayoutParams layout = new LayoutParams(
        LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
    View mCustomView = mInflater.inflate(R.layout.actionbar, null);
    actionBar.setCustomView(mCustomView,layout);
    actionBar.setDisplayShowCustomEnabled(true);
    actionBar.setDisplayShowHomeEnabled(false);
    actionBar.setDisplayShowTitleEnabled(false);
    actionBar.setDefaultDisplayHomeAsUpEnabled(false);
    actionBar.setDisplayUseLogoEnabled(false);
}

Any Solution to restore actionbar like previously using latest SDK?

Update: I am able to remove arrow from actionbar by deleting ActionBarDrawerToggle from everywhere in my Drawerfragment.

enter image description here

Now I am facing only styling issue of actionbar. Padding on left and background color of Actionabr

Answer

J.G.Sebring picture J.G.Sebring · Oct 29, 2014

If you just want the color you should define it as primaryColor in your theme. It looks like a lot of stuff you got there to simply put a hue on the ActionBar.

 <style name="Theme.MyTheme" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/primary</item>
 </style>

 <color name="primary">#ff5722</color>

The arrow you are referring to is getSupportActionBar().setDisplayHomeAsUpEnabled(true|false); and you no longer need (should not) use your own drawer icon as it is included in appcompat v7. (mDrawerToggle.setDrawerIndicatorEnabled(true);)