Using Android Picker without useSpinner in Appcelerator

Question

Here it reads http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Picker that the useSpinner property is deprecated. How do I use the picker properly then?

When I use the picker in Android without the useSpinner property it does not show up (left picker). When I click on the picker (green border) the values are showing up and it works properly.

With useSpinner set to true, it shows up properly (right). see screenshot.

Visibility of the picker is initially in the .xml set to false. When the user clicks on corresponding labels, the picker becomes visible. This works fine in iOS.

Answer 1

Actually, this is not any wrong behaviour. The red-border picker is outdated and you will hardly see it in any app, even native ones.

The standard picker is the left one which initially shows the selected value or the first value as default. As far as I know, you cannot directly change the text-color of left picker through .tss files.

---

Instead you can use custom themes and use it for that window which contains pickers.

Here is a quick example of how you can apply themes to pickers and other elements.

• Save this xml code in a file (name it anything, let's say theme.xml).
• Put this file at below location (create folders if doesn't exist).

Your_Project_Folder -> app -> platform -> android -> res -> values -> theme.xml

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

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="PickerTheme" parent="@style/Theme.AppCompat.Light">
        <item name="android:spinnerItemStyle">@style/SpinnerItem</item>

        <!-- Activate this for Spinners/Plain Pickers in selected/popup state -->
        <!-- <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item> -->

        <!-- Override Date Dialog -->
        <item name="android:datePickerDialogTheme">@style/MyDatePickerDialogTheme</item>

        <!-- Override Time Dialog -->
        <item name="android:timePickerDialogTheme">@style/MyTimePickerDialogTheme</item>
    </style>

    <!-- Use this style for Spinners/Plain Pickers in default state -->
    <style name="SpinnerItem">
        <item name="android:textColor">#000000</item>
    </style>

    <style name="SpinnerDropDownItem">
        <item name="android:textColor">@color/primary_dark</item>
        <item name="android:background">@color/accent</item>
    </style>


    <style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
        <item name="colorAccent">@color/primary</item>
        <item name="android:textColorSecondary">#000000</item>
    </style>

    <style name="MyTimePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
        <item name="colorAccent">@color/primary</item>
        <item name="android:textColorSecondary">#000000</item>
    </style>
</resources>

Now, you can use this theme either globally for all windows, or for particular window.

1 - Using theme for whole app, use this in tiapp.xml file.

<android xmlns:android="http://schemas.android.com/apk/res/android">
    <manifest>
        <application android:theme="@style/PickerTheme">
            ....
        </application>
    </manifest>
</android>

2 - Using theme in .tss file

"Window[platform=android]": {
    theme : 'PickerTheme',
    backgroundColor : 'white',
    windowSoftInputMode : Ti.UI.Android.SOFT_INPUT_STATE_ALWAYS_HIDDEN | Titanium.UI.Android.SOFT_INPUT_ADJUST_RESIZE
}