Android : Styling SearchView and Spinner using AppCompat v21

on Saturday, October 25, 2014


I am having an issue when styling the SearchView and Spinner for actionbar (toolbar) using AppCompat v21.


I have implemented a toolbar to replace my actionbar and read Chris Banes article but there's something im not getting.


Both function but are doing odd things.


1st thing is this. I open app and goto the fragment with SearchView and it does not put the correct popup backgroud (its dark, should be light)


enter image description here


Then i go to my other fragment and use the spinner. One issue here is the spinner icon being dark. I have made the spinner white in my resources and still comes up dark. I have rebuilt project and still comes up dark


enter image description here


Then i go back to first fragment to initiate search and the text is black and has the correct popup background


enter image description here


Now i will post the relevant code. One thing im not understanding is where to put the searchview and spinner in layout. From what i read i think they go with toolbar in my layout but thats what im not getting.


My MainActivity Fragment



<?xml version="1.0" encoding="utf-8"?>

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:fitsSystemWindows="true">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/background_all">
</FrameLayout>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<ProgressBar
android:id="@+id/base_progressSpinner"
style="@style/ProgressBar_Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:visibility="gone"/>
</RelativeLayout>

</LinearLayout>

<ListView
android:fitsSystemWindows="true"
android:id="@+id/left_drawer"
android:layout_width="300dp"
android:layout_height="fill_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@null"
android:orientation="vertical"
android:overScrollMode="never"
android:scrollbars="none"
android:scrollingCache="true"
android:background="?attr/navigation_background_all"/>




</android.support.v4.widget.DrawerLayout>

<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="@+id/toolbar"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="?attr/colorPrimary"/>

<LinearLayout
android:id="@+id/filters_box"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:orientation="horizontal">

<Spinner
android:id="@+id/spinner_1"
android:layout_width="100dp"
android:layout_height="match_parent" />

</LinearLayout>

</FrameLayout >


A portion of my styles.xml



<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/theme</item>
<item name="colorPrimaryDark">@color/statusbar_bg</item>
<item name="colorAccent">@color/theme</item>
<item name="searchViewStyle">@style/MySearchViewStyle</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBar">false</item>
<item name="actionBarPopupTheme">@style/ThemeOverlay.AppCompat.Light</item>
<item name="android:windowBackground">@color/background_material_light</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:popupMenuStyle">@style/PopupMenu_Light</item>
<item name="android:dialogTheme">@style/DialogTheme_Light</item>
<item name="android:listPopupWindowStyle">@style/PopupMenu_Light</item>
<item name="android:actionMenuTextColor">@color/theme</item>
<item name="android:actionDropDownStyle">@style/SpinnerDropdown_Light</item>
<item name="android:dropDownSpinnerStyle">@style/SpinnerDropdown_Light</item>
<item name="android:actionModeCloseDrawable">@drawable/app_ic_cab_done_holo_dark</item>
<item name="android:actionBarTabBarStyle">@style/ActionBarTabBar</item>
<item name="android:actionBarTabTextStyle">@style/ActionBarTabBarText</item>
<item name="android:actionOverflowButtonStyle">@style/Overflow_Dark</item>
<item name="android:fastScrollThumbDrawable">@drawable/app_fastscroll_thumb_holo</item>
<item name="android:panelBackground">@drawable/app_menu_hardkey_panel_holo_light</item>
<item name="android:progressBarStyle">@style/ProgressBarHorizontal</item>
<item name="android:dropDownListViewStyle">@style/DropDownListView_Light</item>
<item name="android:divider">@drawable/app_action_bar_divider</item>
<item name="android:listViewStyle">@style/ListViewStyle_light</item>
<item name="android:progressBarStyleLarge">@style/ProgressBar_Large</item>
<item name="android:alertDialogStyle">@style/AlertDialog_Light</item>
<item name="android:listDividerAlertDialog">@drawable/app_list_divider_holo_light</item>
<item name="android:typeface">monospace</item>
<item name="background_all">@color/background_light</item>
<item name="card_selector_all">@drawable/app_card_selector_light</item>
<item name="navigation_background_all">@color/navigation_background_light</item>
<item name="navigation_divider_all">@drawable/app_nav_drawer_divider_holo_light</item>
<item name="text_all">@color/black</item>
<item name="text_all_secondary">@color/semiblack</item>
<item name="text_all_invert">@color/white</item>
<item name="button_all">@drawable/app_btn_default_holo_light</item>
<item name="text_back_all">@drawable/app_text_back_light</item>
<item name="text_back_small_all">@drawable/app_text_back_small_light</item>
<item name="text_divider_all">@drawable/app_text_divider2_light</item>
<item name="semi_back">@color/semiwhite</item>
<item name="text_accent_all">@style/ThemeText_Light</item>
<item name="text_accent_small_all">@style/ThemeText_Light</item>
<item name="text_theme">@color/theme</item>
<item name="icon_title_background_all">@color/dark_grey</item>
</style>

<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
<item name="queryBackground">@drawable/app_textfield_default</item>
<item name="closeIcon">@drawable/app_ic_cab_done_holo_dark</item>
<item name="searchIcon">@drawable/app_ic_menu_search</item>
</style>

<style name="DropDownListView_Light" parent="android:Widget.Holo.Light.ListView.DropDown">
<item name="android:listSelector">@drawable/app_item_background_holo_light</item>
</style>

<style name="SpinnerDropdown_Light" parent="android:Widget.Holo.Light.Spinner" >
<item name="android:background">@drawable/app_spinner_default_holo_dark</item>
<item name="android:popupBackground">@drawable/app_menu_panel_holo_light</item>
<item name="android:dropDownSelector">@drawable/app_item_background_holo_light</item>
</style>


My fragment that initiates the actionbar spinner



TitleNavigationAdapter adapter = new TitleNavigationAdapter(actionBar.getThemedContext(), rowItems);

spinnerContainer = LayoutInflater.from(((ActionBarActivity)getActivity()).getSupportActionBar().getThemedContext()).inflate(R.layout.actionbar_spinner,
AbstractNavDrawerActivity.mToolbar, false);
ActionBar.LayoutParams lp = new ActionBar.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
AbstractNavDrawerActivity.mToolbar.addView(spinnerContainer, lp);
Spinner spinner = (Spinner) spinnerContainer.findViewById(R.id.actionbar_spinner);
spinner.setAdapter(adapter);
@Override
public void onDestroy(){
super.onDestroy();
AbstractNavDrawerActivity.mToolbar.removeView(spinnerContainer);
}


And finally my SearchView initiated in my fragment



@Override
public void onPrepareOptionsMenu (Menu menu) {
Log.i(FRAG_TAG, "onPrepareOptionsMenu");
MenuInflater inflater = getActivity().getMenuInflater();
inflater.inflate(R.menu.icon_menu, menu);
MenuItem searchItem = menu.findItem(R.id.search);

SearchManager searchManager = (SearchManager) getActivity().getSystemService(Context.SEARCH_SERVICE);

SearchView searchView = null;
if (searchItem != null) {
searchView = (SearchView) searchItem.getActionView();
}
if (searchView != null) {
searchView.setSearchableInfo(searchManager.getSearchableInfo(getActivity().getComponentName()));
}

}


and icon_menu.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" >
<item android:id="@+id/search"
android:title="@string/search"
android:icon="@drawable/app_ic_menu_search"
app:showAsAction="always"
app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

0 comments:

Post a Comment