Fix part of #5344: Fix Localization Issues of Classroom List Screen

app/src/main/java/org/oppia/android/app/classroom/ClassroomListFragmentPresenter.kt

@@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -29,6 +30,7 @@ import androidx.databinding.ObservableList
 import androidx.fragment.app.Fragment
 import androidx.lifecycle.Observer
 import org.oppia.android.R
+import org.oppia.android.app.classroom.classroomlist.AllClassroomsHeaderText
 import org.oppia.android.app.classroom.classroomlist.ClassroomList
 import org.oppia.android.app.classroom.promotedlist.ComingSoonTopicList
 import org.oppia.android.app.classroom.promotedlist.PromotedStoryList
@@ -38,6 +40,7 @@ import org.oppia.android.app.classroom.welcome.WelcomeText
 import org.oppia.android.app.home.HomeItemViewModel
 import org.oppia.android.app.home.RouteToTopicPlayStoryListener
 import org.oppia.android.app.home.WelcomeViewModel
+import org.oppia.android.app.home.classroomlist.AllClassroomsViewModel
 import org.oppia.android.app.home.classroomlist.ClassroomSummaryViewModel
 import org.oppia.android.app.home.promotedlist.ComingSoonTopicListViewModel
 import org.oppia.android.app.home.promotedlist.PromotedStoryListViewModel
@@ -197,8 +200,15 @@ class ClassroomListFragmentPresenter @Inject constructor(
       ?.plus(classroomListViewModel.topicList)
       ?.groupBy { it::class }
     val topicListSpanCount = integerResource(id = R.integer.home_span_count)
+    val listState = rememberLazyListState()
+    val classroomListIndex = groupedItems
+      ?.flatMap { (type, items) -> items.map { type to it } }
+      ?.indexOfFirst { it.first == AllClassroomsViewModel::class }
+      ?: -1
+
     LazyColumn(
-      modifier = Modifier.testTag(CLASSROOM_LIST_SCREEN_TEST_TAG)
+      modifier = Modifier.testTag(CLASSROOM_LIST_SCREEN_TEST_TAG),
+      state = listState
     ) {
       groupedItems?.forEach { (type, items) ->
         when (type) {
@@ -223,10 +233,16 @@ class ClassroomListFragmentPresenter @Inject constructor(
               )
             }
           }
-          ClassroomSummaryViewModel::class -> stickyHeader {
+          AllClassroomsViewModel::class -> items.forEach { _ ->
+            item {
+              AllClassroomsHeaderText()
+            }
+          }
+          ClassroomSummaryViewModel::class -> stickyHeader() {
             ClassroomList(
               classroomSummaryList = items.map { it as ClassroomSummaryViewModel },
-              classroomListViewModel.selectedClassroomId.get() ?: ""
+              selectedClassroomId = classroomListViewModel.selectedClassroomId.get() ?: "",
+              isSticky = listState.firstVisibleItemIndex >= classroomListIndex
             )
           }
           AllTopicsViewModel::class -> items.forEach { _ ->

app/src/main/java/org/oppia/android/app/classroom/ClassroomListViewModel.kt

@@ -10,6 +10,7 @@ import androidx.lifecycle.Transformations
 import org.oppia.android.R
 import org.oppia.android.app.home.HomeItemViewModel
 import org.oppia.android.app.home.WelcomeViewModel
+import org.oppia.android.app.home.classroomlist.AllClassroomsViewModel
 import org.oppia.android.app.home.classroomlist.ClassroomSummaryClickListener
 import org.oppia.android.app.home.classroomlist.ClassroomSummaryViewModel
 import org.oppia.android.app.home.promotedlist.ComingSoonTopicListViewModel
@@ -264,13 +265,14 @@ class ClassroomListViewModel(
   private fun computeClassroomItemViewModelList(
     classroomList: ClassroomList
   ): List<HomeItemViewModel> {
-    return classroomList.classroomSummaryList.map { ephemeralClassroomSummary ->
-      ClassroomSummaryViewModel(
-        fragment as ClassroomSummaryClickListener,
-        ephemeralClassroomSummary,
-        translationController
-      )
-    }
+    return listOf(AllClassroomsViewModel) +
+      classroomList.classroomSummaryList.map { ephemeralClassroomSummary ->
+        ClassroomSummaryViewModel(
+          fragment as ClassroomSummaryClickListener,
+          ephemeralClassroomSummary,
+          translationController
+        )
+      }
   }
 
   /**

app/src/main/java/org/oppia/android/app/classroom/classroomlist/AllClassroomsHeaderText.kt

@@ -0,0 +1,36 @@
+package org.oppia.android.app.classroom.classroomlist
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+import org.oppia.android.R
+
+/** Test tag for the all classrooms section header. */
+const val ALL_CLASSROOMS_HEADER_TEST_TAG = "TEST_TAG.all_classrooms_header"
+
+/** Displays the header text for the classroom list section. */
+@Composable
+fun AllClassroomsHeaderText() {
+  Text(
+    text = stringResource(id = R.string.classrooms_list_activity_section_header),
+    color = colorResource(id = R.color.component_color_classroom_shared_header_text_color),
+    fontFamily = FontFamily.SansSerif,
+    fontWeight = FontWeight.Normal,
+    fontSize = dimensionResource(id = R.dimen.classrooms_list_header_text_size).value.sp,
+    modifier = Modifier
+      .testTag(ALL_CLASSROOMS_HEADER_TEST_TAG)
+      .padding(
+        start = dimensionResource(id = R.dimen.classrooms_text_margin_start),
+        top = dimensionResource(id = R.dimen.classrooms_text_margin_top),
+        end = dimensionResource(id = R.dimen.classrooms_text_margin_end),
+      ),
+  )
+}

app/src/main/java/org/oppia/android/app/classroom/classroomlist/ClassroomList.kt

@@ -1,15 +1,13 @@
 package org.oppia.android.app.classroom.classroomlist
 
-import android.content.res.Configuration
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -24,60 +22,44 @@ import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.integerResource
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.oppia.android.R
 import org.oppia.android.app.classroom.getDrawableResource
 import org.oppia.android.app.home.classroomlist.ClassroomSummaryViewModel
 
-/** Test tag for the header of the classroom section. */
-const val CLASSROOM_HEADER_TEST_TAG = "TEST_TAG.classroom_header"
-
 /** Test tag for the classroom list. */
 const val CLASSROOM_LIST_TEST_TAG = "TEST_TAG.classroom_list"
 
+/** Test tag for the classroom card icon. */
+const val CLASSROOM_CARD_ICON_TEST_TAG = "TEST_TAG.classroom_card_icon"
+
 /** Displays a list of classroom summaries with a header. */
 @Composable
 fun ClassroomList(
   classroomSummaryList: List<ClassroomSummaryViewModel>,
-  selectedClassroomId: String
+  selectedClassroomId: String,
+  isSticky: Boolean,
 ) {
-  Column(
+  LazyRow(
     modifier = Modifier
+      .testTag(CLASSROOM_LIST_TEST_TAG)
       .background(
         color = colorResource(id = R.color.component_color_shared_screen_primary_background_color)
-      )
-      .fillMaxWidth(),
-  ) {
-    Text(
-      text = stringResource(id = R.string.classrooms_list_activity_section_header),
-      color = colorResource(id = R.color.component_color_shared_primary_text_color),
-      fontFamily = FontFamily.SansSerif,
-      fontWeight = FontWeight.Medium,
-      fontSize = dimensionResource(id = R.dimen.classrooms_list_header_text_size).value.sp,
-      modifier = Modifier
-        .testTag(CLASSROOM_HEADER_TEST_TAG)
-        .padding(
-          start = dimensionResource(id = R.dimen.classrooms_text_margin_start),
-          top = dimensionResource(id = R.dimen.classrooms_text_margin_top),
-          end = dimensionResource(id = R.dimen.classrooms_text_margin_end),
-          bottom = dimensionResource(id = R.dimen.classrooms_text_margin_bottom),
-        ),
-    )
-    LazyRow(
-      modifier = Modifier.testTag(CLASSROOM_LIST_TEST_TAG),
-      contentPadding = PaddingValues(
-        start = dimensionResource(id = R.dimen.classrooms_text_margin_start),
-        end = dimensionResource(id = R.dimen.classrooms_text_margin_end),
       ),
-    ) {
-      items(classroomSummaryList) {
-        ClassroomCard(classroomSummaryViewModel = it, selectedClassroomId)
-      }
+    contentPadding = PaddingValues(
+      start = dimensionResource(id = R.dimen.classrooms_text_margin_start),
+      top = dimensionResource(id = R.dimen.classrooms_text_margin_bottom),
+      end = dimensionResource(id = R.dimen.classrooms_text_margin_end),
+    ),
+  ) {
+    items(classroomSummaryList) {
+      ClassroomCard(classroomSummaryViewModel = it, selectedClassroomId, isSticky)
     }
   }
 }
@@ -86,37 +68,41 @@ fun ClassroomList(
 @Composable
 fun ClassroomCard(
   classroomSummaryViewModel: ClassroomSummaryViewModel,
-  selectedClassroomId: String
+  selectedClassroomId: String,
+  isSticky: Boolean,
 ) {
-  val screenWidth = LocalConfiguration.current.screenWidthDp
-  val isPortrait = LocalConfiguration.current.orientation == Configuration.ORIENTATION_PORTRAIT
-  val isTablet = if (isPortrait) screenWidth > 600 else screenWidth > 840
   val isCardSelected = classroomSummaryViewModel.classroomSummary.classroomId == selectedClassroomId
   Card(
     modifier = Modifier
-      .height(dimensionResource(id = R.dimen.classrooms_card_height))
-      .width(dimensionResource(id = R.dimen.classrooms_card_width))
+      .width(getClassroomCardWidth())
       .padding(
-        start = dimensionResource(R.dimen.promoted_story_card_layout_margin_start),
-        end = dimensionResource(R.dimen.promoted_story_card_layout_margin_end),
+        start = dimensionResource(R.dimen.classrooms_card_margin_start),
+        end = dimensionResource(R.dimen.classrooms_card_margin_end),
       )
       .clickable {
         classroomSummaryViewModel.handleClassroomClick()
       },
     backgroundColor = if (isCardSelected) {
-      colorResource(id = R.color.component_color_classroom_card_color)
+      colorResource(id = R.color.component_color_classroom_card_selected_color)
     } else {
-      colorResource(id = R.color.component_color_shared_screen_primary_background_color)
+      colorResource(id = R.color.component_color_classroom_card_color)
     },
     border = BorderStroke(2.dp, color = colorResource(id = R.color.color_def_oppia_green)),
     elevation = dimensionResource(id = R.dimen.classrooms_card_elevation),
   ) {
     Column(
-      modifier = Modifier.padding(all = dimensionResource(id = R.dimen.classrooms_card_padding)),
+      modifier = Modifier.padding(
+        horizontal = dimensionResource(id = R.dimen.classrooms_card_padding_horizontal),
+        vertical = if (isSticky) {
+          dimensionResource(id = R.dimen.classrooms_card_collapsed_padding_vertical)
+        } else {
+          dimensionResource(id = R.dimen.classrooms_card_padding_vertical)
+        },
+      ),
       verticalArrangement = Arrangement.Center,
       horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-      if (isPortrait || isTablet) { // Hides the classroom icon for landscape phone layouts.
+      AnimatedVisibility(visible = !isSticky) {
         Image(
           painter = painterResource(
             id = classroomSummaryViewModel
@@ -126,6 +112,7 @@ fun ClassroomCard(
           ),
           contentDescription = classroomSummaryViewModel.title,
           modifier = Modifier
+            .testTag("${CLASSROOM_CARD_ICON_TEST_TAG}_${classroomSummaryViewModel.title}")
             .padding(bottom = dimensionResource(id = R.dimen.classrooms_card_icon_padding_bottom))
             .size(size = dimensionResource(id = R.dimen.classrooms_card_icon_size)),
         )
@@ -140,3 +127,17 @@ fun ClassroomCard(
     }
   }
 }
+
+@Composable
+private fun getClassroomCardWidth(): Dp {
+  val configuration = LocalConfiguration.current
+  val screenWidth = configuration.screenWidthDp.dp
+  val horizontalPadding = dimensionResource(id = R.dimen.classrooms_text_margin_start)
+  val topicCardHorizontalMargin = 8.dp
+  val topicListSpanCount = integerResource(id = R.integer.home_span_count)
+
+  val totalTopicCardWidth = screenWidth -
+    (horizontalPadding.times(2) + (topicCardHorizontalMargin * (topicListSpanCount - 1) * 2))
+
+  return totalTopicCardWidth.div(topicListSpanCount)
+}

app/src/main/java/org/oppia/android/app/classroom/promotedlist/PromotedStoryList.kt

@@ -7,6 +7,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -52,40 +53,46 @@ fun PromotedStoryList(
   promotedStoryListViewModel: PromotedStoryListViewModel,
   machineLocale: OppiaLocale.MachineLocale,
 ) {
-  Row(
-    modifier = Modifier
-      .testTag(PROMOTED_STORY_LIST_HEADER_TEST_TAG)
-      .fillMaxWidth()
-      .padding(
-        start = dimensionResource(id = R.dimen.promoted_story_list_layout_margin_start),
-        top = dimensionResource(id = R.dimen.promoted_story_list_layout_margin_top),
-        end = dimensionResource(id = R.dimen.promoted_story_list_layout_margin_end),
-      ),
-    horizontalArrangement = Arrangement.SpaceBetween,
-    verticalAlignment = Alignment.CenterVertically,
+  Box(
+    contentAlignment = Alignment.Center,
   ) {
-    Text(
-      text = promotedStoryListViewModel.getHeader(),
-      color = colorResource(id = R.color.component_color_shared_primary_text_color),
-      fontFamily = FontFamily.SansSerif,
-      fontWeight = FontWeight.Medium,
-      fontSize = dimensionResource(id = R.dimen.promoted_story_list_header_text_size).value.sp,
+    Row(
       modifier = Modifier
-        .weight(weight = 1f, fill = false),
-    )
-    if (promotedStoryListViewModel.getViewAllButtonVisibility() == View.VISIBLE) {
+        .testTag(PROMOTED_STORY_LIST_HEADER_TEST_TAG)
+        .fillMaxWidth()
+        .padding(
+          start = dimensionResource(id = R.dimen.promoted_story_list_layout_margin_start),
+          top = dimensionResource(id = R.dimen.promoted_story_list_layout_margin_top),
+          end = dimensionResource(id = R.dimen.promoted_story_list_layout_margin_end),
+        ),
+      horizontalArrangement = Arrangement.SpaceBetween,
+      verticalAlignment = Alignment.CenterVertically,
+    ) {
       Text(
-        text = machineLocale.run { stringResource(id = R.string.view_all).toMachineUpperCase() },
-        color = colorResource(id = R.color.component_color_home_activity_view_all_text_color),
+        text = promotedStoryListViewModel.getHeader(),
+        color = colorResource(id = R.color.component_color_classroom_shared_header_text_color),
         fontFamily = FontFamily.SansSerif,
-        fontWeight = FontWeight.Medium,
-        fontSize = dimensionResource(id = R.dimen.promoted_story_list_view_all_text_size).value.sp,
+        fontWeight = FontWeight.Normal,
+        fontSize = dimensionResource(id = R.dimen.promoted_story_list_header_text_size).value.sp,
         modifier = Modifier
-          .padding(
-            start = dimensionResource(id = R.dimen.promoted_story_list_view_all_padding_start)
-          )
-          .clickable { promotedStoryListViewModel.clickOnViewAll() },
+          .weight(weight = 1f, fill = false),
       )
+      if (promotedStoryListViewModel.getViewAllButtonVisibility() == View.VISIBLE) {
+        Text(
+          text = machineLocale.run { stringResource(id = R.string.view_all).toMachineUpperCase() },
+          color = colorResource(id = R.color.component_color_home_activity_view_all_text_color),
+          fontFamily = FontFamily.SansSerif,
+          fontWeight = FontWeight.Medium,
+          fontSize = dimensionResource(
+            id = R.dimen.promoted_story_list_view_all_text_size
+          ).value.sp,
+          modifier = Modifier
+            .padding(
+              start = dimensionResource(id = R.dimen.promoted_story_list_view_all_padding_start)
+            )
+            .clickable { promotedStoryListViewModel.clickOnViewAll() },
+        )
+      }
     }
   }
   LazyRow(
@@ -127,7 +134,7 @@ fun PromotedStoryCard(
       )
       .clickable { promotedStoryViewModel.clickOnStoryTile() },
     backgroundColor = colorResource(
-      id = R.color.component_color_shared_screen_primary_background_color
+      id = R.color.component_color_classroom_promoted_list_card_background_color
     ),
     elevation = dimensionResource(id = R.dimen.promoted_story_card_elevation),
   ) {