Adding settings to the Open Event Android app

Adding settings to the Open Event Android app

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

Tags: GSoC18, FOSSASIA, Open Event, Android, Settings

Close Menu