Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(android): add drawable to Slider #13521

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

feat(android): add drawable to Slider #13521

wants to merge 5 commits into from

Conversation

m1ga
Copy link
Contributor

@m1ga m1ga commented Jul 29, 2022

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
line-left
line-right

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:
ti1100

after the PR:
ti1110
Screenshot_20220729-214939
(to see the shadows better 😄 )

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

fixes: #13519

apidoc/Titanium/UI/Slider.yml Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Android : Slider does not set leftTrackImage in latest ti sdk 11.0.0.GA
1 participant