The Open Event Android app has a lot of fragments and some activities. But, when it comes to settings of an app, we need not create a whole new fragment, with different text views (clickable), with multiple sections. This is where a specific fragment called PreferenceFragment comes into place. This blog will illustrate about how we have implemented Settings in the Open Event android app by using a Preference Fragment.
Initially, we need to add the preference dependency in the app.gradle file.
| implementation “com.takisoft.fix:preference-v7:${versions.support_lib}.0″ |
After that, we need to set up our settings layout. We create an xml file. Let us head into the code below.
| <?xml version=“1.0” encoding=“utf-8”?>
<PreferenceScreen xmlns:android=“http://schemas.android.com/apk/res/android” > <PreferenceCategory android:title=“@string/about_settings” > <Preference android:key=“@string/key_rating” android:title=“@string/rating_settings” /> <Preference android:key=“@string/key_suggestion” android:title=“@string/suggestion_settings” /> </PreferenceCategory> <PreferenceCategory android:title=“@string/profile” > <Preference android:key=“@string/key_profile” android:title=“@string/logged_in_account” /> </PreferenceCategory> <PreferenceCategory android:title=“@string/app_name_capital” > <Preference android:key=“@string/key_version” android:title=“@string/version_settings” /> </PreferenceCategory> </PreferenceScreen> |
Thus a settings layout is a Preference Screen. Inside a preference screen, we can put containers like PreferenceCategories. Inside a preference category, preferences are used. A preference contains a key and a title. The key is used in the actual backend code to refer to the Preference. We can perform actions if the Preference is clicked, by referring to that key. The above layout looks exactly like the feature image!
Let us dive into the backend part. We will observe that a PreferenceFragmentCompat will have methods similar to a Fragment. For example, the method onCreatePreferencesFix is a method overriden in a PreferenceFragmentCompat. In this method, we set the layout, which the Fragment will use. We can also set text details to any view using keys in this method.
| override fun onCreatePreferencesFix(savedInstanceState: Bundle?, rootKey: String?) {
// Load the preferences from an XML resource setPreferencesFromResource(R.xml.settings, rootKey) val activity = activity as? AppCompatActivity activity?.supportActionBar?.setDisplayHomeAsUpEnabled(true) activity?.supportActionBar?.title = “Settings” setHasOptionsMenu(true) //Set Email email = arguments?.getString(EMAIL) preferenceScreen.findPreference(resources.getString(R.string.key_profile)).summary = email //Set Build Version preferenceScreen.findPreference(resources.getString(R.string.key_version)).title = “Version ” + BuildConfig.VERSION_NAME } |
After this, we need to implement another method called onPreferenceTreeClick. This method is useful and is helpful for us to perform any actions whenever any preference is clicked! The below code demonstrates that.
| override fun onPreferenceTreeClick(preference: Preference?): Boolean {
if (preference?.key == resources.getString(R.string.key_rating)) { //Opens our app in play store startAppPlayStore(activity?.packageName.nullToEmpty()) return true } if (preference?.key == resources.getString(R.string.key_suggestion)) { //Links to suggestion form context?.let { Utils.openUrl(it, FORM_LINK) } return true } if (preference?.key == resources.getString(R.string.key_profile)) { //Logout Dialog shown showDialog() return true } return false } |
Thus, we have our SettingsFragment. But, it’s not totally complete. We need to add a preference theme in styles.xml. Let us observe the code.
| <style name=“AppTheme” parent=“@style/Theme.Preference”>
<!– Customize your theme here. –> <item name=“colorPrimary”>@color/colorPrimary</item> <item name=“colorPrimaryDark”>@color/colorPrimaryDark</item> <item name=“colorAccent”>@color/colorAccent</item> </style> <style name=“Theme.Preference” parent=“@style/PreferenceFixTheme.Light.DarkActionBar”> <item name=“preferenceCategory_marginBottom”>0dp</item> <item name=“android:dividerHeight”>1dp</item> </style> |
So we see that we are changing the parent theme of AppTheme to Theme.Preference. The theme Theme.Preference is stated below the AppTheme. It has a parent theme of PreferenceFixTheme.Light.DarkActionBar. Thus all preference themes need to have a parent of the form PreferenceFixTheme. (…). This is how the Settings screen is implemented in the Open Event android app
Additional Resources
- George Martin (2016) – Dynamically create a Preference screen: https://medium.com/@arasthel92/dynamically-creating-preferences-on-android-ecc56e4f0789
- Jakob Ulbrich (2016) – Building an Android Preference Screen: https://medium.com/@JakobUlbrich/building-a-settings-screen-for-android-part-1-5959aa49337c
Tags: GSoC18, FOSSASIA, Open Event, Android, Settings