Rewrite to Jetpack Compose

[rfc2822]

To experiment with Jetpack Compose (also for DAVx⁵), I'd suggest to rewrite ICSx⁵ to Jetpack Compose as a clean "sample" :)

Depends on #151

[ArnyminerZ]

A thing that must be discussed is whether to keep using Activities, or use a variant of Jetpack Compose's navigation system. I think that navigation would be more performant for using the app, but also having all the view models and logic in the same activity may not be the best option.

[ArnyminerZ]

Implementation steps

Phase I - Setup

Description

In this phase the project is configured, and all the dependencies are added, as well as properly configuring Jetpack Compose. Even though more dependencies may be added in the following phases, the base ones will be in this one.

Steps

• Add versions:
  • compose to 1.4.4
  • composeBom to 2023.01.00
• Add Jetpack Compose dependencies.

  // Jetpack Compose
  def composeBom = platform("androidx.compose:compose-bom:${versions.composeBom}")
  implementation composeBom
  androidTestImplementation composeBom
  implementation 'androidx.compose.material3:material3'
  implementation 'androidx.compose.ui:ui-tooling-preview'
  debugImplementation 'androidx.compose.ui:ui-tooling'
  implementation 'androidx.compose.material:material-icons-extended'
  implementation 'androidx.compose.material3:material3-window-size-class'
  implementation 'androidx.compose.runtime:runtime-livedata'
  implementation 'androidx.activity:activity-compose:1.6.1'
  implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'

• Set android.buildFeatures.compose to true.
• Set android.composeOptions.kotlinCompilerExtensionVersion = versions.compose
• Create .ui.theme.Color.kt which contains all the colors to be used. Note that those will be fallback colors, the best thing would be to start using dynamic themes that were introduced in Android 12.
• Create ui.theme.Theme.kt which contains the AppTheme, and sets the color declared in Color if not on Android 12.

Phase II - Foundations

Description

May be implemented together with Phase I. In this phase, we should design and discuss all the individual components needed by the application. Those will be packaged inside .ui.reusable.

Steps

• Design ColorCircle. Replaces the current color circle view. Simply a view that draws a circle with the given color.
• Design ColorPicker. It's a button that uses ColorCircle, and when clicked opens a dialog with some color options to choose from. In here we might also include the system's generated dynamic colors, and a custom color picker.
• Design LoadingBox. Simply a progress indicator.
• Design SwitchRow. It's a row with a title, subtitle, and a switch at the end. Used for preferences (ignore alarms...).

Phase III - Calendars list

Description

Since we are already using Room, migrating the calendars list screen (CalendarListActivity) is the easiest first step.
This would involve migrating all the fragments and layouts to a single activity with all the contents designed.

Steps

• Remove the layouts calendar_list_activity.xml, calendar_list_item.xml and set_sync_interval.xml.
• Remove the class CalendarListActivity.SubscriptionListAdapter.
• Remove the functions onCreateOptionsMenu, onPrepareOptionsMenu, onRefresh, onRefreshRequested, onShowInfo, onSetSyncInterval, onToggleDarkMode; and clean the contents of onCreate (leave just the super call). checkSyncSettings will also be reworked completely, but can be left as is right now.
• Create a composable function called Content, with a Scaffold. Adding the toolbar with the options dropdown, and a LazyColumn.
• Create a composable function called CalendarListItem, that should match the current design for calendar_list_item.xml. Should take a Subscription as argument.
• Inside the LazyColumn, load all the items from SubscriptionsModel.subscriptions.

[ArnyminerZ]

@rfc2822 I've finished the first three phases of the planning for the migration. I think it's a good start to migrate the calendar list screen, which is a quite simple Activity, and it would give a good feeling about the migration process, and how it works. It's Phase III on the planning above.

I've opened #140 so you can take a look, but that's just some dependencies and theme.

[github-actions]

This PR/issue depends on: * #151

[ArnyminerZ]

Some screenshots of the new subscriptions list screen migrated to Jetpack Compose:

The only thing that cannot be migrated are the colors of the "pull-to-refresh" spinner. It's not supported by Jetpack Compose. Just one color can be set. We can just set it to the primary blue color and call it a day