How can I fix the Spinner style for Android 4.x placed on top of the Toolbar –

Development issue/problem:

According to the Android documentation, the material design style is supported for the Spinner widget.

That’s why I decided to use it in my application by placing it in the top toolbar.

layout/activity_base.xml

Theme of the activity

BaseActivity.java

The BaseActivity public class expands the ActionBarActivity {

@InjectView(R.id.my_awesome_toolbar)
mToolbar ;

@InjectView(R.id.spinner)
Spinner ;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_base);
ButterKnife.injection(this);
//toolbar
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
mToolbar.setNavigationIcon(R.drawable.ic_action_menu;)

ArrayAdapter adapter = ArrayAdapter.createFromResource(mToolbar.getContext(),
R.array.planets_array, R.layout.support_simple_spinner_dropdown_item);
adapter.setDropDownViewResource(R.layout.support_simple_spinner_dropdown_item);
spinner.setAdapter(adapter);
}
}

The lollipop and the drop-down menu look good, although the background colour of the drop-down menu is black compared to the drop-down menu which is white. I don’t think app:[email protected]/ThemeOverlay.AppCompat.Light applies to the eccentric.

Android 5.0

Now the big problem with Android 4.x, where the background color of the drop-down list is white (popup Theme spread?) and the icon next to the rotating top is black.

Android 4.4

Update

I noticed that the colorControlNormal setting affects the rotary filter icon. If someone knows how to use it for spinners (without modifying the other content checks), I have a solution that combines this search with @Sven’s answer.

Update

The following change solves a text and color problem in the popup. The only problem for the final solution is therefore the filter symbol.

ArrayAdapter adapter = ArrayAdapter.createFromResource(getSupportActionBar().getThemedContext(),
R.array.planets_array, R.layout.support_simple_spinner_dropdown_item) ;
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item) ;

Update

I discovered that the filter icon is actually part of the background of the android specified for the toll, and that it is transparent. By giving your own background, for example, you correct this.

Android: Selectable wallpaper

Mystery solved!

The last piece of the puzzle is a popup on Android 5 with a black background and white text, but I think this can be solved with a custom layout. If no one gives a complete answer, I’ll do it myself and mark it as accepted.

How can I solve this problem?

Solution 1:

I know it’s late, but I came across this problem myself and found a solution in the BrowseSessionsActivity application of Google I/O 2014.

Classification

toolbar_spinner.xml

spinner_item_actionbar.xml

A drawing of the spinner_triangle can be found here.

toolbar_spinner_item_update.xml

Types

Toolbar_spinner.xml uses the following style.

Adapter

This adapter must be adapted to your own needs. getTitle() returns the text of each element displayed on the toll.

The Closed Class YourObjectSpinnerAdapter expands the BaseAdapter {
Closed List Items = New ArrayList() ;

public void cleared() {
mItems.clear();
}

public null addItem(yourObject yourObject) {
mItems.add(yourObject);
}

public invalid addItems(List yourObjectList) {
mItems.addAll(yourObjectList);
}

@Override
public int getCount() {
return mItems.size();
}

@Check
public object getItem(int position) {
return mItems.get(position);
}

@Override
public long getItemId(int position) {
position returned;
}

@Overview
public View getDropDownView(int position, View View, ViewGroup parent) {
if (view == null | !view.getTag().toString().is equal to (DROPDOWN)) {
view = getLayoutInflater().inflate(R.layout.toolbar_spinner_item_dropdown, parent, false);
view.setTag(DROPDOWN);
}

TextView textView = (TextView) view.findViewById(android.R.id.text1) ;
textView.setText(getTitle(position)) ;

Rear view;
}

@Browse
public View getView(int position, View view, ViewGroup parent) {
if (view == null | !view.getTag().toString().equals(NON_DROPDOWN)) {
view = getLayoutInflater().inflate(R.layout.
toolbar_spinner_item_actionbar, parent, false);
view.setTag(NON_DROPDOWN);
}
TextView textView = (TextView) view.findViewById(android.R.id.text1);
textView.setText(getTitle(position));
return view;
}

private string getTitle(int position) {
return position >= 0 && position

Add a turnstile to the toolbar

Toolbar = getActionBarToolbar() ;

View spinnerContainer = LayoutInflater.from(this).inflate(R.layout.toolbar_spinner,
toolbar, false);
ActionBar.LayoutParams lp = new ActionBar.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
toolbar.addView(spinnerContainer, lp;)

YourObjectSpinnerAdapter spinnerAdapter = new YourObjectSpinnerAdapter() ;
spinnerAdapter.addItems(getMyObjectSpinnerData() ) ;

Spinner spinner = (Spinner) spinnerContainer.findViewById(R.id.toolbar_spinner) ;
spinner.setAdapter(spinnerAdapter) ;

Net revenue

Solution 2:

Do not include the centrifuge in the xml.

final ArrayAdapter spinnerAdapter = ArrayAdapter.createFromResource(getSupportActionBar().getThemedContext(),
R.array.main_navigation_list, R.layout.spinner_text);
spinnerAdapter.setDropDownViewResource(R.layout.spinner_dropdown_item);
mNavigationTags = getResources().getStringArray(R.array.main_navigation_list) ;

mNavigationSpinner = new Spinner(getSupportActionBar().getThemedContext()) ;
mNavigationSpinner.setAdapter(spinnerAdapter) ;

mNavigationSpinner.setOnItemSelectedListener(this) ;
mToolbar.addView(mNavigationSpinner) ;

Therefore, the icon next to the toll will be white.

Solution 3:

Forgive my poor English.
I think it’s better to make a spinner directly in the toolbar.

Here’s an example from my excerpt.

The public class Test fragment1 expands the fragment {

mToolbar;
Spinner mSpinner;
……

@PublicView surfaceCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {……..mToolbar = (Toolbar) getActivity().findViewById(R.id.toolbar);// You can also define the style with the constructormSpinner = new Spinner(getActivity());String[] frags = new String[]{category1,category2,category3,};ArrayAdapter arrayAdapter = new ArrayAdapter(getActivity(),android.R.layout.simple_list_item_1,frags);mSpinner.setAdapter(arrayAdapter);mToolbar.addView(mSpinner);return inflater.inflate(R.layout.fragment_testfragment1, container, false);};.

………

@General
public null and void onDestroyView() {
super.onDestroyView();
if (mToolbar != null && mSpinner != null) {
mToolbar.removeView(mSpinner);
}
}
}

It looks great on my Android 4.1 device:
android-4.1spinner.

Solution 4:

I have the same problem.

Try changing the display of the dropdown resource. That solved the problem of text colour, at least for me – but the colour of the arrow icon is still dark. It is therefore only a partial solution.

setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item) ;

Solution No 5:

A simple method that is not perfect, but consistent enough for both 4.x and 5.0.

I deleted and added the formatting files by programming – this allowed the white triangle to be displayed correctly.

I also made a layout of articles with the desired color in appcompat.

layout/spinner_dropdown_item.xml, note android:[email protected]/primaryColor

And in the activities:

SpinnerAdapter spinnerAdapter = ArrayAdapter.createFromResource(getApplicationContext(), R.array.your_array, R.layout.spinner_dropdown_item);
Spinner navigationSpinner = new Spinner(getSupportActionBar().getThemedContext());
navigationSpinner.setAdapter(spinnerAdapter);
toolbar.addView(navigationSpinner, 0) ;

It’s not perfect and the items don’t stand out when you click them, but it’s enough until future appcompat libraries solve these problems (at least, hopefully).

Solution No 6:

I’ve been working on this problem for two days, but now, after reading a lot of answers, I can post my solution. I set up two custom layouts for the spinner element and the popup. If you set this attribute for the spinning top: android:background=?android:selectableItemBackground, the black arrow of the spinning top will be hidden by default and we can use what we prefer. I used the setDropDownVerticalOffset(int) method to check the position of popups on Android Lollipop previews.

My general application theme

Now a presentation of the activities with a toolbar and a toll:

Active_main.xml

custom_spinner_toolbar.xml

custom_spinner_dropdown_item.xml

SpinnerAdapter.java

The public class SpinnerAdapter extends the BaseAdapter
{
private Context mContext ;
private List mValuesList ;

public SpinnerAdapter(mContext, mValuesList)
{
this.mContext = mContext;
this.mList = mValuesList;
}

@Override
public int getCount()
{
return mValuesList.size();
}

@Override
public Object getItem(int position)
{
return mValuesList.get(position);
}

@Override
public long getItemId(int position) {
// TODO Automatically generated heel method
returns 0;
}

@Browse
public View getDropDownView(int position, view view, ViewGroup parent)
{
if (view == null | !view.getTag().toString().is equal to(DROPDOWN))
{
LayoutInflater inflater = LayoutInflater.from(mContext);
view = inflater.inflate(R.layout.custom_spinner_dropdown_item, parent, false);
view.setTag(DROPDOWN);
}

TextView textView = (TextView) view.findViewById(R.id.spinner_item_text) ;
textView.setText(getTitle(position)) ;

Rear view;
}

@Browse
public View getView(int position, View view, ViewGroup parent)
{
if (view == null | !view.getTag().toString().equals(NON_DROPDOWN))
{
LayoutInflater inflater = LayoutInflater.van(mContext);
view = inflater.inflate(R.layout.custom_spinner_toolbar, parent, false);
view.setTag(NON_DROPDOWN);
}.

TextView textView = (TextView) view.findViewById(R.id.spinner_item_text);
textView.setText(getTitle(position));
Return view;
}

private string getTitle(int position)
{
return position >= 0 && position

Finally, the relevant part of the source code of the :

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

mToolbar = (Toolbar) findViewById(R.id.toolbar) ;
setSupportActionBar(mToolbar) ;

final ActionBar actionBar = getSupportActionBar() ;
actionBar.setDisplayShowTitleEnabled(false) ;
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu) ;
actionBar.setDisplayHomeAsUpEnabled(true) ;

mSpinner = (spinner) findViewById(R.id.spinner_rss) ;

String[] items = getResources().getStringArray(R.array.spinner_rss_items) ;
ListspinnerItems = new ArrayList() ;

for(int i = 0; i

Here are the results for Lollipop and Kitkat:

HIH

Solution No 7:

Can’t you do that?

Custom xml file for the spinner element: your_spinner.xml :

Use this to turn things around:

ArrayAdapter = new ArrayAdapter (this, R.layout.your_spinner, list) ;

Then remove the fold-out option.

Solution No 8:

He had exactly the same problem with the centrifuge.

What I did was add a special theme for the centrifuge.

styles.xml

Solution No 9:

Use the android:dropDownVerticalOffset property in the spinner to specify an interval at the vertex.

Don’t forget to set android:spinnerMode=dropdown even if it doesn’t work in the spinnerMode= dialog box.

Solution No 10:

You can also simply skip the wheel symbol from the code to color the symbol correctly:

spinner_toolbar.xml :

You must then attach the spinner to the toolbar of your activity:

ArrayAdapter adapter = ArrayAdapter.createFromResource(getSupportActionBar().getThemedContext(),
R.array.planets_array, R.layout.support_simple_spinner_dropdown_item);
adapter.setDropDownViewResource(R.layout.support_simple_spinner_dropdown_item);
spinner.setAdapter(adapter) ;

// we inflate the spinner with a thematic toolbar context -> the right shading icon
LayoutInflater.from(getSupportActionBar().getThemedContext()).inflate(R.layout.spinner_toolbar, tb, true) ;

Spinner spinner = (spinner) toolbar.findViewById(R.id.spinner_toolbar) ;
spinner.setAdapter(adapter) ;

However, for the entire spinner, including the popup menu, we use app:popupTheme instead of app:theme.
The result is that the icon and the text of the rotating spoon are colored correctly, but the popup menu is also in the style of the toolbar, not in the style of the popup theme.

So if you want a dark toolbar and a light drop-down menu, for example, you have to correct the style of the drop-down menu somehow. B. Creating a custom style for the centrifuge that defines a white background, and a custom scrolling display with a dark text color.

Maybe someone else has a better solution to pass the app:popup theme to the spinner’s popup menu.

Good luck!

Related Tags: