Feat: Migrate About screen to Jetpack Compose with Material 3 by Kota-Jagadeesh · Pull Request #6791 · commons-app/apps-android-commons

Kota-Jagadeesh · 2026-03-24T06:13:45Z

Description (required)

Part of #6626

Changes:

Migrated the AboutActivity to a modern, declarative Jetpack Compose architecture.
implemented Material 3 components, including CenterAlignedTopAppBar, Card, and AssistChip.
Centralized the color management using a custom CommonsTheme to ensure perfect support for both Light and Dark modes.
and grouped the UI actions into an AboutActions data class for better scalability and cleaner code structure.
then refactored the layout to use a modern card-based design with interactive social icons and link rows.

Tests performed (required)

Tested ProdDebug on Redmi Note 13 Pro with API level 35.

Screenshots (for UI changes only)

Before (XML)	After (Compose)

… fix visibility issues

RitikaPahwa4444

Thanks @Kota-Jagadeesh. I would have tried to loop in the WMF design team for a review on design but since this is a very basic one, we're good to migrate it at this point.

Do we still need the corresponding XML file? If not, please remove it.

RitikaPahwa4444 · 2026-03-24T13:29:17Z

+            Card(
+                modifier = Modifier.fillMaxWidth(),
+                shape = RoundedCornerShape(16.dp),
+                colors = CardDefaults.cardColors(containerColor = if (isSystemInDarkTheme()) Color(0xFF1E1E1E) else Color.White),


How about maintaining colors in one file? Those could be reused later in other activities according to the theme. Same goes for other primary design tokens.

Kota-Jagadeesh · 2026-03-25T15:24:35Z

@RitikaPahwa4444 moved all colors into thee new, reusable CommonsTheme file to allow for consistent styling across the app. and, removed activity_about.xml file as it is no longer needed 🙂

neeldoshii · 2026-03-25T19:16:06Z

+@Composable
+fun EnhancedLinkRow(text: String, onClick: () -> Unit) {
+    Row(modifier = Modifier.fillMaxWidth().clickable { onClick() }.padding(16.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween) {
+        Text(text = text, style = MaterialTheme.typography.bodyLarge, color = MaterialTheme.colorScheme.onSurface)


Can we create a reusable component for TextView this will be helpful in reusing for other screens?

fun CommonsText( text: AnnotatedString, preset: CommonsTextPreset, modifier: Modifier = Modifier, color: Color = Color.Unspecified, textAlign: TextAlign? = null, maxLines: Int = Int.MAX_VALUE, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, )

@RitikaPahwa4444 for future component should we have a predefined text style format which can be used like below? Should we get this from Wikimedia designer?

Edit : Android Doc Suggest Something like this https://developer.android.com/codelabs/jetpack-compose-theming#5

enum class CommonsTextPreset { Body, BodySmall, Title, TitleSmall, Label, } @Composable private fun CommonsTextPreset.toTextStyle(): TextStyle = when (this) { CommonsTextPreset.Body -> MaterialTheme.typography.bodyLarge CommonsTextPreset.BodySmall -> MaterialTheme.typography.bodySmall CommonsTextPreset.Title -> MaterialTheme.typography.titleLarge CommonsTextPreset.TitleSmall -> MaterialTheme.typography.titleSmall CommonsTextPreset.Label -> MaterialTheme.typography.labelLarge }

or

pass it like this

@Immutable data class TextPreset( val fontFamily: FontFamily, val fontWeight: FontWeight, val fontSize: TextUnit, val lineHeight: TextUnit, ) { internal fun toTextStyle(): TextStyle = TextStyle( fontFamily = fontFamily, fontWeight = fontWeight, fontSize = fontSize, lineHeight = lineHeight, ) } object Roboto { private val family: FontFamily = FontFamily.Default object Medium { val sp14 = TextPreset(family, FontWeight.Medium, 14.sp, 20.sp) val sp16 = TextPreset(family, FontWeight.Medium, 16.sp, 24.sp) val sp18 = TextPreset(family, FontWeight.Medium, 18.sp, 26.sp) } // Regular, Bold, ... } object AppTypographyTokens { val Medium = Roboto.Medium val Regular = Roboto.Regular val Bold = Roboto.Bold }

Call it like this

CommonsText( text = "Caption", color = Color.Black, preset = Roboto.Medium.sp16, )

Note : Used LLM to generate, also I plan that this CommonsText supports HtmlText bydefault if received. That's why I have given annotatedString as the data type for text.

Both have pros and cons I really like and have used 2nd option as it is readable and debugable, but first one is configurable i.e font family, size one change can make the changes throughout the app.

Can you @ALL suggest what approach should we go also feel free to suggest if you have some other way in mind.

Actually, I had a different approach in mind, but that's too much for this PR. I'd suggested to do it for all the design tokens in my earlier comment, but my bad, I need to explain what that is, why we're adopting that style, etc. since not everyone is aware about the design system issue.

I would accept this PR as is, but for any subsequent work on this, I'll create tasks with clear instructions and not accept PRs without any assignees.

#6791 (comment)

Not just colors, by primary design tokens I meant everything including typography, sizes, styles, etc. All of them need to be created as separate files with a style similar to the Wikipedia app so that we could generate code leveraging Codex as well.

Can we create a reusable component for TextView this will be helpful in reusing for other screens?

yes, i will implement that :)

All of them need to be created as separate files

makes sense @RitikaPahwa4444, i will extract all design tokens into separate files :)

If you want @Kota-Jagadeesh, you can take reference from my PR #5964 or just copy paste the ui/theme folder. That looks good for Custom Selector but please feel free to make any changes as suggested by @RitikaPahwa4444 and @neeldoshii :)

I would accept this PR as is, but for any subsequent work on this, I'll create tasks with clear instructions and not accept PRs without any assignees.

I would agree with @RitikaPahwa4444 over here.

Not just colors, by primary design tokens I meant everything including typography, sizes, styles, etc. All of them need to be created as separate files with a style similar to the Wikipedia app so that we could generate code leveraging Codex as well.

Let's not focus on this over here and focus on it properly in a separate PR. Can you revert those changes? @Kota-Jagadeesh. Rest LGTM after that.

If the changes have been done already and they look good, let's not revert. Apologies @Kota-Jagadeesh for the conflicting suggestions here.

neeldoshii · 2026-03-25T19:21:57Z

+                elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
+            ) {
+                Column {
+                    EnhancedLinkRow(stringResource(R.string.about_rate_us), actions.onRateUs)


How about we use LazyColumn here, somewhat like the below? WDYT? @Kota-Jagadeesh
pass this as an Item to LazyColumn

data class AboutLinkItem( val text: String, val onClick: () -> Unit, )

val aboutLinks = listOf( AboutLinkItem(getString(R.string.about_rate_us)) { launchRatings() }, AboutLinkItem(getString(R.string.user_guide)) { launchUserGuide() }, AboutLinkItem(getString(R.string.about_privacy_policy)) { launchPrivacyPolicy() }, AboutLinkItem(getString(R.string.about_translate)) { launchTranslate() }, AboutLinkItem(getString(R.string.about_credits)) { launchCredits() }, AboutLinkItem(getString(R.string.about_faq)) { launchFrequentlyAskedQuestions() }, )

for me it feels like a great idea. refactooring the links into a LazyColumn using a data class model, makes the list more scalable and easier to manage. i'll do that, thanks for the review :)

neeldoshii · 2026-03-25T19:28:45Z

+fun CommonsTheme(content: @Composable () -> Unit) {
+    val isDarkTheme = isSystemInDarkTheme()
+    val background = if (isDarkTheme)
+        colorResource(R.color.main_background_dark)


Can we setup color scheme in the compose way rather than getting it from xml file?

See Doc : https://developer.android.com/codelabs/jetpack-compose-theming#3

Can we setup color scheme in the compose way rather than getting it from xml file?

Sure @neeldoshii. i will move the hex values into a Color.kt file and define full lightColorScheme and darkColorScheme objects to remove all dependencies on theXML file.

…y presets

…istency

…aterial 3 surface

…ing design tokens

Kota-Jagadeesh · 2026-03-27T18:55:30Z

by primary design tokens I meant everything including typography, sizes, styles

@neeldoshii @RitikaPahwa4444, i have refactored the implementation to fully align with a token-based design system.

extracted the all colors, typography, and spacing/dimensions into seperate files (Color.kt, Type.kt, Spacing.kt)
implemented the CommonsText component with a CommonsTextPreset system for the consistent typography.
updated the CommonsTheme to use pure Compose color schemes, removing the dependenciees onthe XML color resources.
refactored the links section into a LazyColumn using a data model for the better scalability.

github-actions · 2026-04-09T11:08:54Z

✅ Generated APK variants!

🤖 Download prodDebugAPK
🤖 Download betaDebugAPK

neeldoshii · 2026-04-19T14:43:52Z

+    overflow: TextOverflow = TextOverflow.Clip,
+    fontWeight: FontWeight? = null
+) {
+    CommonsText(AnnotatedString(text), preset, modifier, color, textAlign, maxLines, overflow, fontWeight)


This seems like a recursion function call. Why can't we pass AnnotatedString as a type parameter so it will support html.

But for now I would recommned let's use the Text directly and have a separate PR that focuses on design tokens and Codex colour, as said by @RitikaPahwa4444, #6791 (comment).

Feel free to have a ToDo that says that once the component is made, it takes it from there something.

neeldoshii · 2026-04-19T14:46:41Z

+    val gigantic = 48.dp
+}
+
+object Dimensions {


Unsure what's the use of this? I am not sure this is gonna be reused somewhere?

The below makes sense, but having an object for this, I am not sure it's needed. Open for suggestions over here :-)

val cardCorner = 16.dp
val cardElevation = 2.dp

https://developer.android.com/develop/ui/compose/designsystems

The documentation is really good for anyone who wants to dive deeper 🙂

neeldoshii · 2026-04-19T14:49:18Z

-        handleWebUrl(this, BuildConfig.PRIVACY_POLICY_URL.toUri())
+    internal fun launchTranslate() {
+        val instance = CommonsApplication.instance
+        val sortedNames = instance.languageLookUpTable!!.getCanonicalNames().toMutableList().apply { Collections.sort(this) }


make it nullable

neeldoshii · 2026-04-19T14:49:29Z

+        showAlertDialog(this, getString(R.string.about_translate_title), getString(R.string.about_translate_message),
+            getString(R.string.about_translate_proceed), getString(R.string.about_translate_cancel),
+            {
+                val langCode = instance.languageLookUpTable!!.getCodes()[spinner.selectedItemPosition]


neeldoshii · 2026-04-19T14:51:34Z

+                    elevation = CardDefaults.cardElevation(defaultElevation = Dimensions.cardElevation)
+                ) {
+                    Column {
+                        aboutLinks.forEachIndexed { index, item ->


instead of for loop can you pass the aboutLinks list in itemIndexed and utlizie LazyColumn here?

neeldoshii · 2026-04-19T14:52:08Z

-        val inflater = menuInflater
-        inflater.inflate(R.menu.menu_about, menu)
-        return super.onCreateOptionsMenu(menu)
+    val aboutLinks = remember {


Can you give a good naming convention here, like aboutLinkItemsList? Have you checked does it survives configuration changes?

The above #6791 (comment) was just for reference

Kota-Jagadeesh · 2026-05-05T16:21:40Z

@neeldoshii @RitikaPahwa4444 thanks for the review. i have a tight schedule for the next few days, so i'll get back to this issue after a few days. until then, i'll mark this as a draft

feat: migrate AboutActivity UI to Jetpack Compose

6a79c27

Kota-Jagadeesh marked this pull request as ready for review March 24, 2026 06:13

Kota-Jagadeesh requested a review from nicolas-raoul March 24, 2026 06:14

Kota-Jagadeesh added enhancement code-quality user interface labels Mar 24, 2026

fix: change visibility of launch methods to internal for unit testing

74c0c89

Kota-Jagadeesh requested review from RitikaPahwa4444 and neeldoshii March 24, 2026 06:28

fix: update unit tests to support AboutActivity compose migration and…

038d8c9

… fix visibility issues

RitikaPahwa4444 requested changes Mar 24, 2026

View reviewed changes

Kota-Jagadeesh added 2 commits March 25, 2026 20:48

feat: create reusable CommonsTheme with Material 3 design tokens

14e7c0f

refactor: AboutActivity to extract design tokens to CommonsTheme

d0bb8e9

Merge branch 'main' into feat/migrate-about-to-compose

fe4fc33

neeldoshii mentioned this pull request Mar 25, 2026

Refactor: Migrate About screen UI from XML to Jetpack Compose #6803

Closed

neeldoshii reviewed Mar 25, 2026

View reviewed changes

Kota-Jagadeesh added 6 commits March 28, 2026 00:16

Feat: create reusable CommonsText component with predefined typograph…

b5a0741

…y presets

establish grid spacing and component dimension tokens for layout cons…

35cef74

…istency

define core brand color tokens for light and dark modes

34680c2

chore: implement global CommonsTheme usin compose color schemes and m…

ad4feb5

…aterial 3 surface

Refactor: about screen to LazyColumn and migrate UI to CommonsText us…

e5207d2

…ing design tokens

Merge branch 'main' into feat/migrate-about-to-compose

4f2ba74

Merge branch 'main' into feat/migrate-about-to-compose

1a4ad3e

neeldoshii reviewed Apr 19, 2026

View reviewed changes

Kota-Jagadeesh closed this May 5, 2026

Kota-Jagadeesh reopened this May 5, 2026

Kota-Jagadeesh marked this pull request as draft May 5, 2026 16:22

Conversation

Kota-Jagadeesh commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RitikaPahwa4444 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Kota-Jagadeesh commented Mar 25, 2026

Uh oh!

neeldoshii Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RitikaPahwa4444 Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Kota-Jagadeesh commented Mar 27, 2026

Uh oh!

github-actions Bot commented Apr 9, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

neeldoshii Apr 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Kota-Jagadeesh commented May 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Kota-Jagadeesh commented Mar 24, 2026 •

edited

Loading

neeldoshii Mar 25, 2026 •

edited

Loading

RitikaPahwa4444 Mar 25, 2026 •

edited

Loading

neeldoshii Apr 19, 2026 •

edited

Loading