Use Jetpack Compose in MainActivity instead of XML layout #260
Conversation
WalkthroughThis update migrates the Android app’s main UI from XML layouts and view binding to Jetpack Compose, updating build configurations and dependencies to support Compose. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MainActivity
participant MainScreen (Composable)
participant ensurePackageInstalledOrPrompt
participant StoryBooksActivity
User->>MainActivity: Launch app
MainActivity->>MainScreen: Set Compose content
MainScreen->>ensurePackageInstalledOrPrompt: On first composition (LaunchedEffect)
ensurePackageInstalledOrPrompt-->>MainScreen: Return package check result
MainScreen->>MainActivity: Invoke onPackageCheck callback
alt Package present
MainActivity->>StoryBooksActivity: Start activity
MainActivity->>MainActivity: Finish self
else Package missing
MainScreen->>User: Prompt for installation (handled in ensurePackageInstalledOrPrompt)
end
Possibly related PRs
Suggested labels
Suggested reviewers
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
⏰ Context from checks skipped due to timeout of 90000ms (9)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/src/main/java/ai/elimu/vitabu/MainActivity.kt (3)
43-53: Theme implementation could be enhanced.The current VitabuTheme implementation uses default Material theming without customization. Consider enhancing it with app-specific colors, typography, and support for dark theme.
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months.
@Composable -fun VitabuTheme(content: @Composable () -> Unit) { - MaterialTheme { +fun VitabuTheme( + darkTheme: Boolean = isSystemInDarkTheme(), + dynamicColor: Boolean = true, + content: @Composable () -> Unit +) { + val colorScheme = when { + dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> { + val context = LocalContext.current + if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) + } + darkTheme -> VitabuDarkColorScheme + else -> VitabuLightColorScheme + } + + MaterialTheme( + colorScheme = colorScheme, + typography = VitabuTypography, + ) { Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { content() } } }
55-73: Consider enhancing MainScreen with loading state.The MainScreen implementation works but lacks visual feedback during the package check. Consider adding a loading indicator and handling different states.
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months.
@Composable fun MainScreen(onPackageCheck: (Boolean) -> Unit) { val context = LocalContext.current + var isChecking by remember { mutableStateOf(true) } // Empty Box as container - the UI is minimal since this is just a launcher activity Box(modifier = Modifier.fillMaxSize()) { + if (isChecking) { + CircularProgressIndicator( + modifier = Modifier.align(Alignment.Center) + ) + } + // Check for required package when the composable is first launched LaunchedEffect(key1 = Unit) { val hasPackage = ensurePackageInstalledOrPrompt( packageName = BuildConfig.CONTENT_PROVIDER_APPLICATION_ID, launchPackage = BuildConfig.APPSTORE_APPLICATION_ID, launchClass = "ai.elimu.appstore.MainActivity", dialogMessage = context.resources.getString(R.string.content_provider_needed), buttonText = context.getString(R.string.install) ) + isChecking = false onPackageCheck(hasPackage) } } }
63-69: Avoid hardcoded class name references.The full path to "ai.elimu.appstore.MainActivity" is hardcoded. Consider using a constant or BuildConfig value to make it easier to maintain.
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months.
val hasPackage = ensurePackageInstalledOrPrompt( packageName = BuildConfig.CONTENT_PROVIDER_APPLICATION_ID, launchPackage = BuildConfig.APPSTORE_APPLICATION_ID, - launchClass = "ai.elimu.appstore.MainActivity", + launchClass = BuildConfig.APPSTORE_MAIN_ACTIVITY_CLASS, dialogMessage = context.resources.getString(R.string.content_provider_needed), buttonText = context.getString(R.string.install) )You would also need to add this constant to your buildConfigField in app/build.gradle:
buildConfigField("String", "APPSTORE_APPLICATION_ID", '"ai.elimu.appstore"') +buildConfigField("String", "APPSTORE_MAIN_ACTIVITY_CLASS", '"ai.elimu.appstore.MainActivity"')
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app/build.gradle(2 hunks)app/src/main/java/ai/elimu/vitabu/MainActivity.kt(1 hunks)gradle/libs.versions.toml(2 hunks)
🔇 Additional comments (8)
gradle/libs.versions.toml (2)
36-43: Good organization of Compose dependencies.The library declarations properly reference the version declarations, making future updates easier to manage. The organization with comments helps maintain clarity in the version catalog.
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months.
16-21:❓ Verification inconclusive
Jetpack Compose versions look appropriate, but verify compatibility with other components.
The added Compose version declarations are reasonable choices for this migration, but it's always good practice to ensure version compatibility across the ecosystem, especially with your Kotlin version (2.1.21).
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months.
🌐 Web query:
Are Jetpack Compose versions 1.5.4 (UI), 1.1.2 (Material3), and compiler 1.5.3 compatible with Kotlin 2.1.21?💡 Result:
Jetpack Compose versions 1.5.4 (UI), 1.1.2 (Material3), and compiler 1.5.3 are compatible with Kotlin 1.9.10. However, Kotlin 2.1.21 is a newer version, and there is no official information confirming compatibility between these specific versions of Jetpack Compose and Kotlin 2.1.21.
Starting with Kotlin 2.0.0, the Compose compiler has been integrated into the Kotlin repository, ensuring that the Compose compiler version matches the Kotlin version. This integration simplifies the setup and ensures compatibility between Compose and Kotlin versions. (android-developers.googleblog.com)
Given that Kotlin 2.1.21 is a newer release, it's advisable to check the official Jetpack Compose and Kotlin documentation or release notes for any updates regarding compatibility. If no information is available, consider testing your project with Kotlin 2.1.21 to identify any potential issues.
Citations:
Verify Compose–Kotlin compatibility
The selected Jetpack Compose versions (1.5.4 UI, 1.1.2 Material3, 1.5.3 compiler) are officially supported on Kotlin 1.9.10, but there’s no published confirmation for Kotlin 2.1.21. Since Kotlin 2.0.0 integrates the Compose compiler into the Kotlin repo—meaning the compiler plugin version should match your Kotlin version—please:
- Check the official Jetpack Compose and Kotlin release notes for any updates on Kotlin 2.x support.
- Ensure
composeCompiler = "1.5.3"is compatible with Kotlin 2.1.21 or update it to the matching version.- Run a full local build and exercise your Compose UI to catch any runtime or compile-time issues.
File to review:
- gradle/libs.versions.toml (lines 16–21)
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months.
app/build.gradle (4)
48-48: Jetpack Compose enabled correctly.Properly enabling Compose in the build features is essential for the migration. Note that you're keeping viewBinding enabled as well, which is good for a gradual migration approach.
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months.
51-53: Compose compiler version properly configured.Using the version reference from the version catalog ensures consistency across the project.
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months.
75-82: Complete set of Compose dependencies added.All necessary dependencies for Jetpack Compose are included, with proper separation between implementation and debugImplementation for tooling. This follows best practices to keep release APK size optimized.
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months.
87-87: Compose UI testing dependency correctly added.Adding the Compose UI test dependency to androidTestImplementation is appropriate and will enable testing of the Compose UI components.
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months.
app/src/main/java/ai/elimu/vitabu/MainActivity.kt (2)
19-19: Correctly extending ComponentActivity.ComponentActivity is the appropriate base class for Compose-based UIs, replacing AppCompatActivity.
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months.
27-39: Clean transition to Compose content.The setContent approach is well-structured with proper separation of concerns. The callback pattern for handling the package check result is a good approach.
elimu.ai's mission is to build innovative learning software that empowers out-of-school children to teach themselves basic reading📖, writing✍🏽 and math🔢 within 6 months.
tuancoltech
force-pushed
the
replace_xml_layout_with_jetpack_compose_main_acativity
branch
3 times, most recently
from
e33083f to
3dc1477
Compare
|
@tuancoltech Since this change adds 71 lines of code, is it an improvement of maintainability? (If we want to make it easy for other engineers to modify the code in the future.) |
tuancoltech
force-pushed
the
replace_xml_layout_with_jetpack_compose_main_acativity
branch
from
3dc1477 to
1064e63
Compare
tuancoltech
force-pushed
the
replace_xml_layout_with_jetpack_compose_main_acativity
branch
from
1064e63 to
a9af28b
Compare
@jo-elimu I have been trying to switch from XML layout to using Jetpack Compose for |
|
@tuancoltech Got it, thanks for clarifying. If we move away from using XML files for the app layout, will we no longer have access to see the UI preview/visualizations in Android Studio? |
@jo-elimu We still can see the UI crafted via @Preview annotation provided by Compose library. |
Issue Number
Purpose
Use Jetpack Compose in MainActivity instead of XML layout
Technical Details
Screenshots
Testing Instructions
Regression Tests
UI Tests
Content Tests
eng.elimu.ai)hin.elimu.ai)tgl.elimu.ai)tha.elimu.ai)vie.elimu.ai)Summary by CodeRabbit