android: How to make settings navigation like native settings app

Question

How do I make the settings navigation for SwitchReference like Android native settings app?

Where when u click on WiFi region(not on the switch) it will navigate to a new screen:

My app only change the switch from ON to OFF and vice versa even when I'm not clicking on the switch.

I'm using PreferenceFragment and xml for the screen. And my preference is following the example from Android PreferenceFragment documentation. I develop my app on ICS 4.0 API 14.

Anyone know how to do this?

Edited:

My XML look like this:

<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" >

    <PreferenceCategory
        android:layout="@layout/preference_category"
        android:title="User Settings" >
        <SwitchPreference
            android:key="pref_autorun"
            android:layout="@layout/preference"
            android:summary="Autorun SMODE on boot"
            android:title="Autorun SMODE" />
        <SwitchPreference
            android:key="pref_wifi_control"
            android:layout="@layout/preference"
            android:selectable="false"
            android:summary="Controls your Wi-Fi radio automatically based on hotspot availability"
            android:title="Wi-Fi Radio Control" />
    </PreferenceCategory>
</PreferenceScreen> 

Answer 1

By taking a look at the source of the stock Settings app, you can find how they did it.

Basically, they use a custom ArrayAdapter (much like you would do with a ListView) to display rows with Switch buttons. And for the second screen, they simply use the CustomView available in the ActionBar.

I wrote an article with a sample code to show how you can do it in your project. Be careful though, this can only wirk in API Level 14 or higher, so if you target older devices, keep an old style preference screen.

Answer 2

I see 2 questions here: 1. How to listen to preference click outside the switch area? 2. How to put a switch in the actionbar?

I'll answer question 1:

I created a new SwitchPreference class and overrode the onClick method to do nothing. This prevents the setting change when clicking outside the switch.

public class SwitchPreference extends android.preference.SwitchPreference {
    @Override
    protected void onClick() {
    }
}

Usage (xml):

<android.util.SwitchPreference
    android:key="whatever"
    android:title="Whatever" />

Usage (java):

SwitchPreference switchPreference = (SwitchPreference) findPreference("whatever");
switchPreference.setOnPreferenceClickListener(new OnPreferenceClickListener() {
    @Override
    public boolean onPreferenceClick(Preference preference) {
        DialogUtils.showToast(Preferences.this, "Clicked outside switch");
        return true;
    }
});
switchPreference.setOnPreferenceChangeListener(new OnPreferenceChangeListener() {
    @Override
    public boolean onPreferenceChange(Preference preference, Object newValue) {
        DialogUtils.showToast(Preferences.this, "Clicked inside switch and setting changed");
        return true;
    }
});