Custom seekbar with material design

Question

I've got a seekbar in a layout for a custom dialog preference. I changed my styles.xml to use the new material desing. It works because it change text and checkboxes of my settings but I can't apply the color to my seekbar. It works only if I put a seekbar in an activity, it means I have to do something in my custom layout but I don't know what. I post styles.xml and the layout with the seekbar:

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

    <style name="AppBaseTheme" parent="android:Theme.Material">

        <!-- Main theme colors -->
        <!-- your app's branding color (for the app bar) -->
        <item name="android:colorPrimary">#FFFF4444</item>
        <!-- darker variant of colorPrimary (for status bar, contextual app bars) -->
        <item name="android:colorPrimaryDark">#FFCC0000</item>
        <!-- theme UI controls like checkboxes and text fields -->
        <item name="android:colorAccent">#FFFF00</item>
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
    </style>

</resources>

custom layout for dialog preference:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <SeekBar
        android:id="@+id/seek_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="6dip"
        android:theme="@android:style/Theme.Material"
        android:layout_marginTop="6dip" />

</LinearLayout>

LOG_TAG · Answer 1 · 2015-01-07T07:09:55.717

7

With Lollipop it's no more needed at all. The colors are applied well even in custom preference dialogs ~greywolf82

I want to share few custom Libs

enter image description here

You can use this Material Design lib ,this also includes many other widgets.

or

enter image description here

Custom seek bar Lib DiscreteSeekBar

edited Jan 07 '15 at 07:09

answered Jan 05 '15 at 09:17

LOG_TAG

19,894
12
72
105

With Lollipop it's no more needed at all. The colors are applied well even in custom preference dialogs. – greywolf82 Jan 05 '15 at 15:05
@greywolf82 you mean the new Appcompat lib will does that? looking at the support up to 2.3 ? – LOG_TAG Jan 06 '15 at 06:56
Yep, even if the Appcompat support is limited, but with lollipop works like a charm. – greywolf82 Jan 06 '15 at 17:39

alanv · Answer 2 · 2014-08-27T20:30:39.957

1

You don't need to specify the android:theme attribute on your SeekBar element. Instead, you should set up the default dialog and alert dialog themes in your AppBaseTheme:

<style name="AppBaseTheme" parent="android:Theme.Material">
    ...
    <item name="android:dialogTheme">@style/AppDialogTheme</item>
    <item name="android:alertDialogTheme">@style/AppAlertTheme</item>
</style>

<style name="AppDialogTheme" parent="android:Theme.Material.Dialog">
    <item name="android:colorPrimary">#FFFF4444</item>
    <item name="android:colorPrimaryDark">#FFCC0000</item>
    <item name="android:colorAccent">#FFFF00</item>
</style>

<!-- This should extend Theme.Material.Dialog.Alert, but that style was
     incorrectly hidden in L-preview. It will be fixed in a future release.
     You can approximate the style using the last two MinWidth attributes.-->
<style name="AppAlertTheme" parent="android:Theme.Material.Dialog">
    <item name="android:colorPrimary">#FFFF4444</item>
    <item name="android:colorPrimaryDark">#FFCC0000</item>
    <item name="android:colorAccent">#FFFF00</item>
    <item name="android:windowMinWidthMajor">65%</item>
    <item name="android:windowMinWidthMinor">95%</item>
</style>

edited Aug 27 '14 at 20:30

answered Aug 22 '14 at 01:34

alanv

23,966
4
93
80

do you know if it's possible something like that even for holo? colorAccent is a Material item, I can't find anything for holo. Thanks. – greywolf82 Aug 22 '14 at 07:13
You can do it programmatically by setting a PorterDuffColorFilter on the drawable (see Drawable.setColorFilter), but not from XML. – alanv Aug 26 '14 at 00:09
Just tried your solution, but it doesn't work at all. Material.Dialog.Alert doesn't exist. And all dialogs with my seekbar still uses the blue holo. I think the problem is the dialog preference, it uses the default constructor of AlertDialog without specifying the theme, in this particular case, the override doesn't work at all. – greywolf82 Aug 26 '14 at 07:43
Sorry, you are completely right, it is a bug in dialog preference. It has been fixed internally but is broken in lmp-preview release. Same with the Alert dialog theme being public. – alanv Aug 27 '14 at 00:03
Can you share a link to see the internal fix? Just curious :) – greywolf82 Aug 27 '14 at 07:06
I was mistaken, the bug was with dialogPreferenceStyle not being loaded but this shouldn't affect the dialog theme. You should still be able to override alertDialogTheme in your app/activity theme to get the desired effect. See the updated answer. – alanv Aug 27 '14 at 20:34
Actually my custom view with the posted layout is used in a custom dialog preference. – greywolf82 Aug 29 '14 at 09:12
Could you add code for how you're adding the custom view to the dialog? – alanv Aug 29 '14 at 17:42
I'm not doing anything special. I've got a class that extend DialogPreference and I call setDialogLayoutResource() in the constructor to use the layout. What information you need? – greywolf82 Aug 30 '14 at 06:46
DialogPreference.onCreateDialogView() uses the theme resolved from android:attr/alertDialogTheme, so the above snippet ought to work as long as there are no android:theme overrides being used. – alanv Sep 02 '14 at 18:22

Custom seekbar with material design

2 Answers2

Linked