SeekBarPreference with discrete values ()

Question

I just wanted to include a SeekBarPreference in my project with only 3 values (level of emergency : low-Medium-high)

This can easily be done on a classic SeekBar (see example below) but I don't get how I could inlude that is a Preference.

If I use this code, it will work in a SeekBar (not Preference) but in Preferences it will still display a SeekBar without the thick marks.

CODE:

<SeekBar
     android:id="@+id/sb"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:max="10"
     android:thumb="@drawable/ic_location"
     android:theme="@style/Widget.AppCompat.SeekBar.Discrete" />

Any idea, or suggestion?

Vide

I edited the post, but the discrete marks won't appear and the seekbar will remain like the default seekbar – Vide

Answer 1

You need to use the support SeekbarPreference to customize the thumb and all. You can pass in your own custom layout for your seek bar preference. please check the example from below.

Your activity where you will add your preference fragment

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        BlankFragment mPrefsFragment = new BlankFragment();

        FragmentManager mFragmentManager = getSupportFragmentManager();
        FragmentTransaction mFragmentTransaction = mFragmentManager
                .beginTransaction();
        mFragmentTransaction.replace(android.R.id.content, mPrefsFragment);
        mFragmentTransaction.commit();

    }
}

You have to add a specific theme in your manifest for this activity

<activity
    android:name=".MainActivity"
    android:theme="@style/AppTheme.SettingsTheme" />

styles.xml

<style name="AppTheme.SettingsTheme" parent="AppTheme.NoActionBar">
    <item name="preferenceTheme">@style/PreferenceThemeOverlay</item>
</style>

Your fragment where you load your preferences from xml

BlankFragment.java

public class BlankFragment extends PreferenceFragmentCompat {

    @Override
    public void onCreatePreferences(Bundle savedInstanceState, String rootKey) {
        setPreferencesFromResource(R.xml.preferences, rootKey);
    }
}

And your preference file from xml res folder

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.preference.PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">

    <android.support.v7.preference.SeekBarPreference
        android:key="your_pref_key"
        android:max="3"
        android:thumb="@drawable/thumb_icon"
        android:summary="Summary"
        android:layout="@layout/my_custom_seekbar"
        android:title="Title" />
</android.support.v7.preference.PreferenceScreen>

Here you can see that the android:layout attribute takes a resource layout file where you can supply your own custom seekbar and a textview-which shows the selected value from seekbar

my_custom_seekbar.xml

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

    <SeekBar xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/seekbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/seekbar_value"
        android:max="10"
        android:theme="@style/Widget.AppCompat.SeekBar.Discrete"
        android:thumb="@drawable/ic_location" />

    <TextView
        android:id="@+id/seekbar_value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true" />
</RelativeLayout>

Note that you have to use the exact same identifier for your custom SeekBar and TextView, otherwise it will throw a NullPointerException

    android:id="@+id/seekbar" for your custom Seekbar
    android:id="@+id/seekbar_value" for your custom TextView

Gwin

Accepted but some remarks: 1) use wrap_content in the root absolutelayout of the xml. 2) I will try to find the original layout, because we should add the title and summary of the preference, Where can I find them in the original appcompat lib source, maybe? – Vide

1) Please adjust the layout as your requirement, I just posted a working example. 2) I didn't understand what you meant by "original layout". You can add title and summary in the preference xml – Gwin

Did you mean the default layout that shows if we didn't supply a custom layout? Then you are right, It can be found in the appcombat lib source. But to set the title and summary, you can do that in the preference xml itself. – Gwin

@Gwin and Waza_Be: I have just implemented a SeekBarPreference according to this nice example, but I can't see the title and summary, just like Waza_Be mentioned. What is the way the make them visible? – Broeder