I have the following Settings fragment which looks like below:
I want to have the Preference categories displayed as separate card layouts like
the following picture: 
Please ignore the inner pictures from the latest image, only the layout is important.
I have this xml file
<?xml version="1.0" encoding="utf-8"?>
<PreferenceCategory
android:title="Wsdl">
<EditTextPreference
android:defaultValue="@string/ws_url_default"
android:dialogTitle="@string/services_summary_modify"
android:key="ws_url"
android:summary="@string/services_summary"
android:title="@string/services_url" />
<EditTextPreference
android:defaultValue="@string/recognition_url_default"
android:dialogTitle="@string/recognition_services_summary_modify"
android:key="recognition_ws_url"
android:summary="@string/recognition_services_summary"
android:title="@string/recognition_services_url" />
<PreferenceCategory
android:title="Xyzmo Significant settings">
<EditTextPreference
android:defaultValue="WorkstepController.Process.asmx"
android:enabled="true"
android:key="xyzmo_path"
android:selectable="true"
android:title="@string/path" />
<EditTextPreference
android:defaultValue="91.234.168.116"
android:enabled="true"
android:key="xyzmo_server"
android:selectable="true"
android:title="@string/server" />
<EditTextPreference
android:defaultValue="57003"
android:enabled="true"
android:key="xyzmo_port"
android:selectable="true"
android:title="@string/port" />
<EditTextPreference
android:defaultValue="http"
android:enabled="true"
android:key="xyzmo_protocol"
android:selectable="true"
android:title="@string/protocol" />
</PreferenceCategory>
<PreferenceCategory
android:title="Application's version">
<Preference
android:enabled="true"
android:key="version"
android:selectable="true"
android:summary="@string/version_description"
android:title="@string/version" />
and this java code
public class PrefsFragment extends PreferenceFragment implements OnSharedPreferenceChangeListener {
private static final Object KEY_PREF_SYNC = BeanConstants.WS_URL_PARAMETER;
private static final Object KEY_PREF_RECOG = BeanConstants.RECOGNITION_URL_PARAMETER;
private static final String KEY_VERSION = "version";
@Override
public void onResume() {
super.onResume();
getPreferenceScreen().getSharedPreferences()
.registerOnSharedPreferenceChangeListener(this);
}
@Override
public void onPause() {
super.onPause();
getPreferenceScreen().getSharedPreferences()
.unregisterOnSharedPreferenceChangeListener(this);
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Load the preferences from an XML resource
addPreferencesFromResource(R.xml.preferences);
try {
PackageManager pm = getActivity().getPackageManager();
PackageInfo packageInfo = pm.getPackageInfo(getActivity().getPackageName(), 0);
findPreference(KEY_VERSION).setSummary(packageInfo.versionName);
} catch (NameNotFoundException e) {
LogS.e(e);
}
}
@Override
public void onSharedPreferenceChanged(SharedPreferences sharedPreferences, String key) {
if (key.equals(KEY_PREF_SYNC)) {
// Set summary to be the user-description for the selected value
BeanConstants.WS_URL = sharedPreferences.getString(key, BeanConstants.WS_URL);
if (BeanConstants.WS_URL != null && !BeanConstants.WS_URL.endsWith("/")) {
BeanConstants.WS_URL = BeanConstants.WS_URL + "/";
}
sharedPreferences.edit().putString(BeanConstants.WS_URL_PARAMETER, BeanConstants.WS_URL).commit();
Log.d(PrefsFragment.class.toString(), "Changing WS url to [" + BeanConstants.WS_URL + "]");
}
if (key.equals(KEY_PREF_RECOG)) {
// Set summary to be the user-description for the selected value
BeanConstants.RECOGNITION_WS_URL = sharedPreferences.getString(key, BeanConstants.RECOGNITION_WS_URL);
if (BeanConstants.RECOGNITION_WS_URL != null && !BeanConstants.RECOGNITION_WS_URL.endsWith("/")) {
BeanConstants.RECOGNITION_WS_URL = BeanConstants.RECOGNITION_WS_URL + "/";
}
sharedPreferences.edit().putString(BeanConstants.RECOGNITION_URL_PARAMETER, BeanConstants.RECOGNITION_WS_URL).commit();
Log.d(PrefsFragment.class.toString(), "Changing RECOGNITION WS url to [" + BeanConstants.RECOGNITION_WS_URL + "]");
}
if (key.equals(BeanConstants.XYZMO_PATH_PARAMETER)) {
// Set summary to be the user-description for the selected value
BeanConstants.XYZMO_PATH_VALUE = sharedPreferences.getString(key, BeanConstants.XYZMO_PATH_VALUE);
if (BeanConstants.XYZMO_PATH_VALUE != null) {
sharedPreferences.edit().putString(BeanConstants.XYZMO_PATH_PARAMETER, BeanConstants.XYZMO_PATH_VALUE).commit();
Log.d(PrefsFragment.class.toString(), "Changing " + BeanConstants.XYZMO_PATH_PARAMETER + " to [" + BeanConstants.XYZMO_PATH_VALUE + "]");
}
}
if (key.equals(BeanConstants.XYZMO_SERVER_PARAMETER)) {
// Set summary to be the user-description for the selected value
BeanConstants.XYZMO_SERVER_VALUE = sharedPreferences.getString(key, BeanConstants.XYZMO_SERVER_VALUE);
if (BeanConstants.XYZMO_SERVER_VALUE != null) {
sharedPreferences.edit().putString(BeanConstants.XYZMO_SERVER_PARAMETER, BeanConstants.XYZMO_SERVER_VALUE).commit();
Log.d(PrefsFragment.class.toString(), "Changing " + BeanConstants.XYZMO_SERVER_PARAMETER + " to [" + BeanConstants.XYZMO_SERVER_VALUE + "]");
}
}
if (key.equals(BeanConstants.XYZMO_PORT_PARAMETER)) {
// Set summary to be the user-description for the selected value
BeanConstants.XYZMO_PORT_VALUE = sharedPreferences.getString(key, BeanConstants.XYZMO_PORT_VALUE);
if (BeanConstants.XYZMO_PORT_VALUE != null) {
sharedPreferences.edit().putString(BeanConstants.XYZMO_PORT_PARAMETER, BeanConstants.XYZMO_PORT_VALUE).commit();
Log.d(PrefsFragment.class.toString(), "Changing " + BeanConstants.XYZMO_PORT_PARAMETER + " to [" + BeanConstants.XYZMO_PORT_VALUE + "]");
}
}
if (key.equals(BeanConstants.XYZMO_PROTOCOL_PARAMETER)) {
// Set summary to be the user-description for the selected value
BeanConstants.XYZMO_PROTOCOL_VALUE = sharedPreferences.getString(key, BeanConstants.XYZMO_PROTOCOL_VALUE);
if (BeanConstants.XYZMO_PROTOCOL_VALUE != null) {
sharedPreferences.edit().putString(BeanConstants.XYZMO_PROTOCOL_PARAMETER, BeanConstants.XYZMO_PROTOCOL_VALUE).commit();
Log.d(PrefsFragment.class.toString(), "Changing " + BeanConstants.XYZMO_PROTOCOL_PARAMETER + " to [" + BeanConstants.XYZMO_PROTOCOL_VALUE + "]");
}
}
}
}
I need to know how I can update the code in the xml file or in java file to have the SettingsFragment displayed like second picture
