Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom seekbar with material design

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>
like image 677
greywolf82 Avatar asked Jun 29 '14 12:06

greywolf82


People also ask

How can I make my own SeekBar?

Now go to the activity_main. xml create a layout and inside the layout add a SeekBar. Specify the height width of SeekBar and the max progress that you want to use set progress to 0. This will create a customized Seekbar inside activity_main.

How do I change my thumb SeekBar?

Just add android:thumbTint="@color/yourColor" in your seekbar.

How do I change the color of my SeekBar line?

If you are using default SeekBar provided by android Sdk then their is a simple way to change the color of that . just go to color. xml inside /res/values/colors. xml and change the colorAccent.

How do I SeekBar progress?

We can get the current progress value from a Seekbar in java class using getProgress() method. This method returns an integer value. Below code is used to get the current progress value from a Seek bar.


2 Answers

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

like image 147
LOG_TAG Avatar answered Oct 21 '22 16:10

LOG_TAG


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>
like image 32
alanv Avatar answered Oct 21 '22 14:10

alanv