Styling select inputs on Android as seen in SworkIt app

ionic-v1
1

Hello Everyone,

Please is there any easy way to style select inputs on android to get close to the look and feel of selects as seen in the SworkIt app? Or is there a plugin to achieve that? Have tried to reach out to Ryan, the SworkIt developer to get his views but haven’t got his feedback yet.

Select input in Sworkit app:

image

Select input in My App:

image
Screenshot_2015-02-20-09-37-13.png720×1280 53.5 KB

Would appreciate any help or contribution. Thanks!

1 Like
2

I used the directions here: http://stackoverflow.com/questions/9681648/how-to-use-holo-light-theme-and-fall-back-to-light-on-pre-honeycomb-devices

This will choose the default types for each version of Android.

1 Like
3

Thanks @gylippus, glad to get your response. I’d try to wrap my head around the instructions on that page you shared.

4

Please @gylippus, another quick question would be - did you have to set up all the three custom theme directories mentioned on that Stack Overflow page?

5

You will have 3 values folders as you can see in this image. “values”, “values-v11”, “values-v14”

image

Each of those will have a themes.xml file:

“value”:

 <?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CustomTheme" parent="@android:style/Theme.NoTitleBar">
        <!-- Any customizations for your app running on pre-3.0 devices here -->
    </style>
</resources>

“value-v11”

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CustomTheme" parent="@android:style/Theme.Holo">
        <!-- Any customizations for your app running on 3.0+ devices here -->
    </style>
</resources>

“value-v14”

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CustomTheme" parent="@android:style/Theme.DeviceDefault.NoActionBar">
        <!-- Any customizations for your app running on 4.0+ devices here -->
    </style>
</resources>

then don’t miss the part where you need to add the references to the CustomTheme to your AndroidManifest.xml

<application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@style/CustomTheme">
    <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:launchMode="singleTop" android:name="YOURAPPNAME" android:theme="@style/CustomTheme">
1 Like
6

Thank you for sharing the details, @gylippus. I have been able to get my select inputs looking like yours (with the native Holo theme). Now trying to go a step further and style the background color of the selected item/option.