Activity tab onboarding

app/src/main/AndroidManifest.xml

@@ -383,6 +383,9 @@
         <activity
             android:name=".activitytab.ActivityTabCustomizationActivity" />
 
+        <activity
+            android:name=".activitytab.ActivityTabOnboardingActivity" />
+
         <activity
             android:name=".donate.donationreminder.DonationReminderActivity"
             android:windowSoftInputMode="adjustResize"/>

app/src/main/java/org/wikipedia/activitytab/ActivityTabOnboardingActivity.kt

@@ -0,0 +1,222 @@
+package org.wikipedia.activitytab
+
+import android.content.Context
+import android.content.Intent
+import android.os.Bundle
+import androidx.activity.compose.setContent
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeDrawingPadding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.ListItemDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.wikipedia.R
+import org.wikipedia.activity.BaseActivity
+import org.wikipedia.compose.theme.BaseTheme
+import org.wikipedia.compose.theme.WikipediaTheme
+import org.wikipedia.settings.Prefs
+import org.wikipedia.theme.Theme
+import org.wikipedia.util.DeviceUtil
+
+private val onboardingItems = listOf(
+    OnboardingItem(
+        icon = R.drawable.ic_newsstand_24,
+        title = R.string.activity_tab_onboarding_reading_patterns_title,
+        subTitle = R.string.activity_tab_onboarding_reading_patterns_message
+    ),
+    OnboardingItem(
+        icon = R.drawable.ic_mode_edit_white_24dp,
+        title = R.string.activity_tab_onboarding_impact_title,
+        subTitle = R.string.activity_tab_onboarding_impact_message
+    ),
+    OnboardingItem(
+        icon = R.drawable.ic_outline_stadia_controller_24,
+        title = R.string.activity_tab_onboarding_engage_title,
+        subTitle = R.string.activity_tab_onboarding_engage_message
+    ),
+    OnboardingItem(
+        icon = R.drawable.ic_outline_lock_24,
+        title = R.string.activity_tab_onboarding_stay_in_control_title,
+        subTitle = R.string.activity_tab_onboarding_stay_in_control_message
+    )
+)
+
+class ActivityTabOnboardingActivity : BaseActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        DeviceUtil.setEdgeToEdge(this)
+        setContent {
+            BaseTheme {
+                OnboardingScreen(
+                    onboardingItems = onboardingItems,
+                    onLearnMoreClick = {
+                        // TODO: MARK_ACTIVITY_TAB waiting for mediawiki page link
+                        Prefs.isActivityTabOnboardingShown = true
+                    },
+                    onContinueClick = {
+                        Prefs.isActivityTabOnboardingShown = true
+                        setResult(RESULT_OK)
+                        finish()
+                    }
+                )
+            }
+        }
+    }
+
+    companion object {
+        fun newIntent(context: Context): Intent {
+            return Intent(context, ActivityTabOnboardingActivity::class.java)
+        }
+    }
+}
+
+@Composable
+fun OnboardingScreen(
+    modifier: Modifier = Modifier,
+    onboardingItems: List<OnboardingItem>,
+    onLearnMoreClick: () -> Unit,
+    onContinueClick: () -> Unit
+) {
+    Scaffold(
+        modifier = modifier
+            .safeDrawingPadding(),
+        containerColor = WikipediaTheme.colors.paperColor,
+    ) { paddingValues ->
+        Column(
+            modifier = Modifier
+                .padding(paddingValues)
+                .fillMaxSize()
+                .verticalScroll(rememberScrollState())
+        ) {
+            Text(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 64.dp, bottom = 32.dp),
+                textAlign = TextAlign.Center,
+                text = stringResource(R.string.activity_tab_onboarding_screen_title),
+                style = MaterialTheme.typography.headlineLarge.copy(fontWeight = FontWeight.Medium),
+                color = WikipediaTheme.colors.primaryColor
+            )
+
+            onboardingItems.forEach { onboardingItem ->
+                ListItem(
+                    modifier = Modifier
+                        .padding(horizontal = 8.dp)
+                        .padding(bottom = 16.dp),
+                    colors = ListItemDefaults.colors(
+                        containerColor = WikipediaTheme.colors.paperColor
+                    ),
+                    headlineContent = {
+                        Text(
+                            text = stringResource(onboardingItem.title),
+                            style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.SemiBold),
+                            color = WikipediaTheme.colors.primaryColor
+                        )
+                    },
+                    supportingContent = {
+                        Text(
+                            text = stringResource(onboardingItem.subTitle),
+                            style = MaterialTheme.typography.bodyMedium,
+                            color = WikipediaTheme.colors.secondaryColor
+                        )
+                    },
+                    leadingContent = {
+                        Icon(
+                            painter = painterResource(onboardingItem.icon),
+                            tint = WikipediaTheme.colors.progressiveColor,
+                            contentDescription = null
+                        )
+                    }
+                )
+            }
+
+            Spacer(modifier = Modifier.weight(1f))
+
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 16.dp, vertical = 32.dp),
+                horizontalArrangement = Arrangement.spacedBy(
+                    space = 24.dp,
+                    alignment = Alignment.CenterHorizontally
+                )
+            ) {
+                Button(
+                    modifier = Modifier
+                        .weight(1f),
+                    border = BorderStroke(
+                        width = 1.dp,
+                        color = WikipediaTheme.colors.borderColor
+                    ),
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = WikipediaTheme.colors.paperColor
+                    ),
+                    onClick = onLearnMoreClick
+                ) {
+                    Text(
+                        text = stringResource(R.string.activity_tab_menu_info),
+                        style = MaterialTheme.typography.labelLarge,
+                        color = WikipediaTheme.colors.progressiveColor
+                    )
+                }
+
+                Button(
+                    modifier = Modifier
+                        .weight(1f),
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = WikipediaTheme.colors.progressiveColor
+                    ),
+                    onClick = onContinueClick
+                ) {
+                    Text(
+                        text = stringResource(R.string.onboarding_continue),
+                        style = MaterialTheme.typography.labelLarge,
+                        color = WikipediaTheme.colors.paperColor
+                    )
+                }
+            }
+        }
+    }
+}
+
+data class OnboardingItem(
+    val icon: Int,
+    val title: Int,
+    val subTitle: Int
+)
+
+@Preview
+@Composable
+private fun OnboardingScreenPreview() {
+    BaseTheme(
+        currentTheme = Theme.LIGHT
+    ) {
+        OnboardingScreen(
+            onboardingItems = onboardingItems,
+            onLearnMoreClick = {},
+            onContinueClick = {}
+        )
+    }
+}

app/src/main/java/org/wikipedia/main/MainFragment.kt

@@ -21,6 +21,7 @@ import androidx.activity.result.contract.ActivityResultContracts
 import androidx.core.content.ContextCompat
 import androidx.core.view.MenuProvider
 import androidx.core.view.descendants
+import androidx.core.view.get
 import androidx.core.view.isVisible
 import androidx.fragment.app.Fragment
 import androidx.lifecycle.Lifecycle
@@ -39,6 +40,7 @@ import org.wikipedia.activity.BaseActivity
 import org.wikipedia.activity.FragmentUtil.getCallback
 import org.wikipedia.activitytab.ActivityTabABTest
 import org.wikipedia.activitytab.ActivityTabFragment
+import org.wikipedia.activitytab.ActivityTabOnboardingActivity
 import org.wikipedia.analytics.eventplatform.ReadingListsAnalyticsHelper
 import org.wikipedia.auth.AccountUtil
 import org.wikipedia.commons.FilePageActivity
@@ -123,6 +125,12 @@ class MainFragment : Fragment(), BackPressedHandler, MenuProvider, FeedFragment.
         }
     }
 
+    private val onboardingLauncher = registerForActivityResult(ActivityResultContracts.StartActivityForResult()) { result ->
+        if (result.resultCode == Activity.RESULT_OK) {
+            goToTab(NavTab.EDITS)
+        }
+    }
+
     val currentFragment get() = (binding.mainViewPager.adapter as NavTabFragmentPagerAdapter).getFragmentAt(binding.mainViewPager.currentItem)
 
     override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
@@ -157,6 +165,12 @@ class MainFragment : Fragment(), BackPressedHandler, MenuProvider, FeedFragment.
         val shouldShowRedDotForRecommendedReadingList = (!Prefs.isRecommendedReadingListOnboardingShown) || (Prefs.isRecommendedReadingListEnabled && Prefs.isNewRecommendedReadingListGenerated)
         binding.mainNavTabLayout.setOverlayDot(NavTab.READING_LISTS, shouldShowRedDotForRecommendedReadingList)
         binding.mainNavTabLayout.setOnItemSelectedListener { item ->
+            if (item.order == NavTab.EDITS.code()) {
+                if (ActivityTabABTest().isInTestGroup() && !Prefs.isActivityTabOnboardingShown) {
+                    onboardingLauncher.launch(ActivityTabOnboardingActivity.newIntent(requireContext()))
+                    return@setOnItemSelectedListener false
+                }
+            }
             if (item.order == NavTab.MORE.code()) {
                 ExclusiveBottomSheetPresenter.show(childFragmentManager, MenuNavTabDialog.newInstance())
                 return@setOnItemSelectedListener false
@@ -539,7 +553,7 @@ class MainFragment : Fragment(), BackPressedHandler, MenuProvider, FeedFragment.
     }
 
     private fun goToTab(tab: NavTab) {
-        binding.mainNavTabLayout.selectedItemId = binding.mainNavTabLayout.menu.getItem(tab.code()).itemId
+        binding.mainNavTabLayout.selectedItemId = binding.mainNavTabLayout.menu[tab.code()].itemId
     }
 
     private fun refreshContents() {

app/src/main/java/org/wikipedia/settings/Prefs.kt

@@ -854,4 +854,8 @@ object Prefs {
         get() = JsonUtil.decodeFromString<ActivityTabModules>(PrefsIoUtil.getString(R.string.preference_key_activity_tab_modules, null))
             ?: ActivityTabModules()
         set(modules) = PrefsIoUtil.setString(R.string.preference_key_activity_tab_modules, JsonUtil.encodeToString(modules))
+
+    var isActivityTabOnboardingShown
+        get() = PrefsIoUtil.getBoolean(R.string.preference_key_activity_tab_onboarding_shown, false)
+        set(value) = PrefsIoUtil.setBoolean(R.string.preference_key_activity_tab_onboarding_shown, value)
 }

app/src/main/res/drawable/ic_outline_lock_24.xml

@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="960" android:viewportWidth="960" android:width="24dp">
+
+    <path android:fillColor="@android:color/white" android:pathData="M240,880Q207,880 183.5,856.5Q160,833 160,800L160,400Q160,367 183.5,343.5Q207,320 240,320L280,320L280,240Q280,157 338.5,98.5Q397,40 480,40Q563,40 621.5,98.5Q680,157 680,240L680,320L720,320Q753,320 776.5,343.5Q800,367 800,400L800,800Q800,833 776.5,856.5Q753,880 720,880L240,880ZM240,800L720,800Q720,800 720,800Q720,800 720,800L720,400Q720,400 720,400Q720,400 720,400L240,400Q240,400 240,400Q240,400 240,400L240,800Q240,800 240,800Q240,800 240,800ZM480,680Q513,680 536.5,656.5Q560,633 560,600Q560,567 536.5,543.5Q513,520 480,520Q447,520 423.5,543.5Q400,567 400,600Q400,633 423.5,656.5Q447,680 480,680ZM360,320L600,320L600,240Q600,190 565,155Q530,120 480,120Q430,120 395,155Q360,190 360,240L360,320ZM240,800Q240,800 240,800Q240,800 240,800L240,400Q240,400 240,400Q240,400 240,400L240,400Q240,400 240,400Q240,400 240,400L240,800Q240,800 240,800Q240,800 240,800Z"/>
+
+</vector>

app/src/main/res/drawable/ic_outline_stadia_controller_24.xml

@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="960" android:viewportWidth="960" android:width="24dp">
+
+    <path android:fillColor="@android:color/white" android:pathData="M189,800Q129,800 86.5,757Q44,714 42,653Q42,644 43,635Q44,626 46,617L130,281Q144,227 187,193.5Q230,160 285,160L675,160Q730,160 773,193.5Q816,227 830,281L914,617Q916,626 917.5,635.5Q919,645 919,654Q919,715 875.5,757.5Q832,800 771,800Q729,800 693,778Q657,756 639,718L611,660Q606,650 596,645Q586,640 575,640L385,640Q374,640 364,645Q354,650 349,660L321,718Q303,756 267,778Q231,800 189,800ZM192,720Q211,720 226.5,710Q242,700 250,683L278,626Q293,595 322,577.5Q351,560 385,560L575,560Q609,560 638,578Q667,596 683,626L711,683Q719,700 734.5,710Q750,720 769,720Q797,720 817,701.5Q837,683 838,655Q838,656 836,636L752,301Q745,274 724,257Q703,240 675,240L285,240Q257,240 235.5,257Q214,274 208,301L124,636Q122,642 122,654Q122,682 142.5,701Q163,720 192,720ZM540,440Q557,440 568.5,428.5Q580,417 580,400Q580,383 568.5,371.5Q557,360 540,360Q523,360 511.5,371.5Q500,383 500,400Q500,417 511.5,428.5Q523,440 540,440ZM620,360Q637,360 648.5,348.5Q660,337 660,320Q660,303 648.5,291.5Q637,280 620,280Q603,280 591.5,291.5Q580,303 580,320Q580,337 591.5,348.5Q603,360 620,360ZM620,520Q637,520 648.5,508.5Q660,497 660,480Q660,463 648.5,451.5Q637,440 620,440Q603,440 591.5,451.5Q580,463 580,480Q580,497 591.5,508.5Q603,520 620,520ZM700,440Q717,440 728.5,428.5Q740,417 740,400Q740,383 728.5,371.5Q717,360 700,360Q683,360 671.5,371.5Q660,383 660,400Q660,417 671.5,428.5Q683,440 700,440ZM340,500Q353,500 361.5,491.5Q370,483 370,470L370,430L410,430Q423,430 431.5,421.5Q440,413 440,400Q440,387 431.5,378.5Q423,370 410,370L370,370L370,330Q370,317 361.5,308.5Q353,300 340,300Q327,300 318.5,308.5Q310,317 310,330L310,370L270,370Q257,370 248.5,378.5Q240,387 240,400Q240,413 248.5,421.5Q257,430 270,430L310,430L310,470Q310,483 318.5,491.5Q327,500 340,500ZM480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480L480,480Q480,480 480,480Q480,480 480,480L480,480Q480,480 480,480Q480,480 480,480L480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480L480,480Q480,480 480,480Q480,480 480,480L480,480Q480,480 480,480Q480,480 480,480L480,480Q480,480 480,480Q480,480 480,480Z"/>
+
+</vector>

app/src/main/res/values-qq/strings.xml

@@ -1242,6 +1242,15 @@
   <string name="activity_tab_timeline_yesterday">Date separator label for yesterday\'s entries in activity timeline.</string>
   <string name="activity_tab_timeline_empty_state_title">Title displayed when the timeline is empty.</string>
   <string name="activity_tab_timeline_empty_state_message">Message shown when there are no items in the timeline.</string>
+  <string name="activity_tab_onboarding_screen_title">Title for the activity tab onboarding screen.</string>
+  <string name="activity_tab_onboarding_reading_patterns_title">Title for the section about user\'s reading habits.</string>
+  <string name="activity_tab_onboarding_reading_patterns_message">Short explanation about user\'s reading habits.</string>
+  <string name="activity_tab_onboarding_impact_title">Title for the section about user\'s impact.</string>
+  <string name="activity_tab_onboarding_impact_message">Short explanation about the user\'s impact.</string>
+  <string name="activity_tab_onboarding_engage_title">Title for the section about about ways to engage with Wikipedia..</string>
+  <string name="activity_tab_onboarding_engage_message">Short explanation about the stats, saved articles, and other activities that connect the user more deeply with Wikipedia.</string>
+  <string name="activity_tab_onboarding_stay_in_control_title">Title for the section about privacy and control.</string>
+  <string name="activity_tab_onboarding_stay_in_control_message">Short explanation about privacy and control.</string>
   <string name="file_page_activity_title">Title shown at the top of the activity for the file page.</string>
   <string name="file_page_add_image_caption_button">Button label to add image caption for the file.</string>
   <string name="file_page_add_image_tags_button">Button label to add image tags for the file.</string>

app/src/main/res/values/preference_keys.xml

@@ -203,5 +203,6 @@
     <string name="preference_key_donation_reminders_dev_reset_seen_date">donationReminderDevResetSeenDate</string>
     <string name="preference_category_donations">donations</string>
     <string name="preference_key_activity_tab_modules">activityTabModules</string>
+    <string name="preference_key_activity_tab_onboarding_shown">activityTabOnboardingShown</string>
 
 </resources>

app/src/main/res/values/strings.xml

@@ -1264,6 +1264,16 @@
     <string name="activity_tab_timeline_yesterday">Yesterday</string>
     <string name="activity_tab_timeline_empty_state_title">Nothing to show</string>
     <string name="activity_tab_timeline_empty_state_message">Start reading and editing to build your history</string>
+    <string name="activity_tab_onboarding_reading_patterns_title">Reading patterns</string>
+    <string name="activity_tab_onboarding_reading_patterns_message">See how much time you\'ve spent reading and which articles or topics you\'ve explored over time.</string>
+    <string name="activity_tab_onboarding_screen_title">Introducing Activity</string>
+    <string name="activity_tab_onboarding_impact_title">Impact highlights</string>
+    <string name="activity_tab_onboarding_impact_message">Discover insights about your contributions and the reach of the knowledge you\'ve shared.</string>
+    <string name="activity_tab_onboarding_engage_title">More ways to engage</string>
+    <string name="activity_tab_onboarding_engage_message">Explore stats for games, saved articles, and other activities that connect you more deeply with Wikipedia.</string>
+    <string name="activity_tab_onboarding_stay_in_control_title">Stay in control</string>
+    <string name="activity_tab_onboarding_stay_in_control_message">Choose which modules to display. All personal data stays private on your device and browsing history can be cleared at anytime.</string>
+
     <!-- /Suggested edits -->
 
     <!-- File page -->

app/src/main/res/xml/developer_preferences.xml

@@ -559,5 +559,9 @@
             android:key="@string/preference_key_activity_tab_red_dot_shown"
             android:title="@string/preference_key_activity_tab_red_dot_shown" />
 
+        <org.wikipedia.settings.SwitchPreferenceMultiLine
+            android:key="@string/preference_key_activity_tab_onboarding_shown"
+            android:title="@string/preference_key_activity_tab_onboarding_shown" />
+
     </PreferenceCategory>
 </PreferenceScreen>