Fix part of #5344: Refactor Classroom List Screen UI

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,6 +1,6 @@
 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
@@ -9,7 +9,6 @@ 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 +23,45 @@ 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(),
+    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),
+    ),
   ) {
-    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)
-      }
+    items(classroomSummaryList) {
+      ClassroomCard(classroomSummaryViewModel = it, selectedClassroomId, isSticky)
     }
   }
 }
@@ -86,37 +70,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 +114,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 +129,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

@@ -66,9 +66,9 @@ fun PromotedStoryList(
   ) {
     Text(
       text = promotedStoryListViewModel.getHeader(),
-      color = colorResource(id = R.color.component_color_shared_primary_text_color),
+      color = colorResource(id = R.color.component_color_classroom_shared_header_text_color),
       fontFamily = FontFamily.SansSerif,
-      fontWeight = FontWeight.Medium,
+      fontWeight = FontWeight.Normal,
       fontSize = dimensionResource(id = R.dimen.promoted_story_list_header_text_size).value.sp,
       modifier = Modifier
         .weight(weight = 1f, fill = false),
@@ -127,7 +127,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),
   ) {

app/src/main/java/org/oppia/android/app/classroom/topiclist/AllTopicsHeaderText.kt

@@ -30,7 +30,9 @@ fun AllTopicsHeaderText() {
     modifier = Modifier
       .testTag(ALL_TOPICS_HEADER_TEST_TAG)
       .fillMaxWidth()
-      .background(colorResource(id = R.color.color_palette_classroom_topic_list_background_color))
+      .background(
+        colorResource(id = R.color.component_color_classroom_topic_list_background_color)
+      )
       .padding(
         start = dimensionResource(id = R.dimen.all_topics_text_margin_start),
         top = dimensionResource(id = R.dimen.all_topics_text_margin_top),

app/src/main/java/org/oppia/android/app/home/classroomlist/AllClassroomsViewModel.kt

@@ -0,0 +1,8 @@
+package org.oppia.android.app.home.classroomlist
+
+import androidx.lifecycle.ViewModel
+import org.oppia.android.app.classroom.ClassroomListFragment
+import org.oppia.android.app.home.HomeItemViewModel
+
+/** [ViewModel] for displaying the classroom header in [ClassroomListFragment]. */
+object AllClassroomsViewModel : HomeItemViewModel()

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

@@ -7,17 +7,17 @@
       android:pathData="M4,1.5L64,1.5A2.5,2.5 0,0 1,66.5 4L66.5,64A2.5,2.5 0,0 1,64 66.5L4,66.5A2.5,2.5 0,0 1,1.5 64L1.5,4A2.5,2.5 0,0 1,4 1.5z"
       android:strokeWidth="3"
       android:fillColor="#00000000"
-      android:strokeColor="#00645C"/>
+      android:strokeColor="@color/component_color_classroom_card_icon_stroke_color"/>
   <path
       android:pathData="M34,1.5V66.5"
       android:strokeWidth="3"
       android:fillColor="#00000000"
-      android:strokeColor="#00645C"/>
+      android:strokeColor="@color/component_color_classroom_card_icon_stroke_color"/>
   <path
       android:pathData="M66.5,34L1.5,34"
       android:strokeWidth="3"
       android:fillColor="#00000000"
-      android:strokeColor="#00645C"/>
+      android:strokeColor="@color/component_color_classroom_card_icon_stroke_color"/>
   <path
       android:pathData="M22.9502,13.0502L13.0507,22.9497"
       android:strokeWidth="4"

app/src/main/res/values-land/dimens.xml

@@ -556,6 +556,9 @@
   <dimen name="classrooms_text_margin_top">20dp</dimen>
   <dimen name="classrooms_text_margin_end">72dp</dimen>
   <dimen name="classrooms_text_margin_bottom">12dp</dimen>
-  <dimen name="classrooms_card_width">150dp</dimen>
-  <dimen name="classrooms_card_height">60dp</dimen>
+  <dimen name="classrooms_card_padding_vertical">36dp</dimen>
+  <dimen name="classrooms_card_icon_padding_bottom">28dp</dimen>
+  <dimen name="classrooms_card_icon_size">80dp</dimen>
+  <dimen name="classrooms_card_margin_start">8dp</dimen>
+  <dimen name="classrooms_card_margin_end">0dp</dimen>
 </resources>

app/src/main/res/values-night/color_palette.xml

@@ -132,7 +132,7 @@
   <color name="color_palette_revision_card_toolbar_color">@color/color_def_forest_green</color>
   <color name="color_palette_hints_and_solutions_fragment_toolbar_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_menu_selected_text_color">@color/color_def_oppia_turquoise</color>
-  <color name="color_palette_developer_option_menu_selected_color">@color/color_def_persian_blue</color>
+  <color name="color_palette_developer_option_menu_selected_color">@color/color_def_persian_blue_1</color>
   <color name="color_palette_underline_view_color">@color/color_def_bright_green</color>
   <color name="color_palette_menu_text_color">@color/color_def_white</color>
   <color name="color_palette_secondary_container_background_color">@color/color_def_oppia_metallic_blue</color>
@@ -242,7 +242,12 @@
   <color name="color_palette_text_error_color">@color/color_def_oppia_reddish_brown</color>
   <color name="color_palette_edittext_stroke_color">@color/color_def_accessible_light_grey_2</color>
   <!-- CLASSROOM -->
-  <color name="color_palette_classroom_card_color">@color/color_def_greenish_black</color>
+  <color name="color_palette_classroom_shared_header_text_color">@color/color_def_white_1</color>
+  <color name="color_palette_classroom_card_color">@color/color_def_greenish_black_1</color>
+  <color name="color_palette_classroom_card_selected_color">@color/color_def_greenish_black_2</color>
+  <color name="color_palette_classroom_card_icon_stroke_color">@color/color_def_pale_green_1</color>
   <color name="color_palette_classroom_shared_text_color">@color/color_def_white</color>
-  <color name="color_palette_classroom_topic_list_background_color">@color/color_def_greenish_black</color>
+  <color name="color_palette_classroom_topic_list_background_color">@color/color_def_greenish_black_3</color>
+  <color name="color_palette_classroom_promoted_list_classroom_label_color">@color/color_def_persian_blue_2</color>
+  <color name="color_palette_classroom_promoted_list_card_background_color">@color/color_def_greenish_black_2</color>
 </resources>