feat(android): add drawable to Slider

[m1ga]

Currently the Slider only allows images in leftTrackImage and rightTrackImage. This PR adds the option to use drawables.

const win = Ti.UI.createWindow({layout:"vertical"});
const slider1 = Ti.UI.createSlider({top:10, min:1, max:100, value:50});
const slider2 = Ti.UI.createSlider({top:10, min:1, max:100, value:50, rightTrackImage: "/images/line-right.png"});
const slider3 = Ti.UI.createSlider({top:10, min:1, max:100, value:50, leftTrackImage: "/images/line-left.png"});
const slider4 = Ti.UI.createSlider({top:10, min:1, max:100, value:50, leftTrackImage: "/images/line-left.png", rightTrackImage: "/images/line-right.png"});
const slider5 = Ti.UI.createSlider({top:10, min:1, max:100, value:50, leftTrackImage: Ti.App.Android.R.drawable.seekbar_style});
const slider6 = Ti.UI.createSlider({top:10, min:1, max:100, value:50, rightTrackImage: Ti.App.Android.R.drawable.seekbar_style});
const slider7 = Ti.UI.createSlider({top:10, min:1, max:100, value:50, thumbImage: Ti.App.Android.R.drawable.custom_thumb});
const slider8 = Ti.UI.createSlider({top:10, min:1, max:100, value:50, leftTrackImage: Ti.App.Android.R.drawable.seekbar_style, thumbImage: Ti.App.Android.R.drawable.custom_thumb});

win.add([slider1,slider2,slider3,slider4,slider5,slider6,slider7,slider8]);
win.open();

add the following images to app/assets/images

add the following xml files to /app/platform/android/res/drawable/:

border_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <corners
                android:radius="5dp" />
            <gradient
                android:angle="270"
                android:startColor="#33000000"
                android:centerColor="#11000000"
                android:endColor="#11000000"
                android:centerY="0.2"
                android:type="linear"
            />
        </shape>
    </item>
</layer-list>

custom_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#f00"/>
            <size
                android:width="35dp"
                android:height="35dp"/>
        </shape>
    </item>
</layer-list>

seekbar_style.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/border_shadow" >
    </item>

    <item
        android:id="@android:id/progress" >
        <clip
            android:drawable="@drawable/seekbar_progress" />
    </item>
</layer-list>

11.0.0:

after the PR: (to see the shadows better :smile: )

Note: it won't use the image for the progress, just the outline (clipPath), that's why the 4th images looks like this.

fixes: https://github.com/tidev/titanium-sdk/issues/13519