WebView/Phonegap change select (dropdown) style

Question

In my AndroidManifest.xml file I set up the theme to be Holo.Light (or even Holo)

The alert dialog are being designed according to the Holo Theme (either light or dark) but the dropdowns (select) are looking like this:

dropdown design1

Is there a way to style the dropdowns like Google Chrome and other apps do?
The native select looks like this:

enter image description here

Couls you post your manifest file? Just to check your theming. — Alejandro Colorado, Jun 04 '13 at 22:07
Sure! http://pastebin.com/FE1iqWTp Let me know if you need anything else — Jad Joubran, Jun 05 '13 at 13:43
I haven't used phonegap but I was wondering if we can add some other support library to achive this, like I do use actionbarsherlock for the theming that you are trying to achieve on a device that doesn't natively support the style of dropdown that I need. — Prateek, Jun 07 '13 at 08:51

score 5 · Accepted Answer · answered Jun 07 '13 at 10:54

There is no easy way to achieve that. What you need to do there is to build a native plugin that will open a custom dialog when you click on a <select>.

That dropdown you want to get rid of is the default view for selects on webviews, opposed to the second one that was built in chrome. To help getting you started:

//get all the options and store in an array

var values = $.map($('#group_select option'), function(e) { return e.value; });

//Native function that gets the options and display a dialog

function void showDialog(String[] values){
    AlertDialog.Builder b = new Builder(this);
    b.setTitle("Example");
    b.setItems(values, new OnClickListener() {

    @Override
    public void onClick(DialogInterface dialog, int which) {

        dialog.dismiss();
        switch(which){
        case 0:
            //call some javascript method to use this value here
            break;
        case 1:
            //call some javascript method to use this value here
            break;
        }
    }

});
b.show();
}

Make sure to set your theme to Holo or Holo.Light as you prefer, and do your preferred bit to call a native code from the javascript layer whenever there is a click on a select element.

Rahul Thakur · Answer 2 · 2013-06-07T11:30:42.877

You can use jQuery mobile and get yourself a customized theme from from their themeroller

or

Try using "android:Theme" as your parent theme as

<style name="YourTheme" parent="android:Theme">

it is the old android theme and gives the style you are looking for

or you can also specifically change

<item name="spinnerStyle">@android:style/Widget.Spinner</item>
<item name="spinnerDropDownItemStyle">@android:style/Widget.DropDownItem.Spinner</item>
<item name="spinnerItemStyle">@android:style/Widget.TextView.SpinnerItem</item

to create your own style

WebView/Phonegap change select (dropdown) style

2 Answers2