Fix part of #3258 : Replacing CircularImageView with ShapeableImageVi…

…ew (#4155) * Fix part of #3258 : Replacing CircularImageView with ShapeableImageView * Updated bazel version * Updated maven_install.json * Added missing appearance overlay property in some files * Added missing appearance overlay property in some files * Added comment to style.xml and removed blank line * Syncing with latest develop branch * added elevation * decreased elevation * decreased elevation and replaced CircularImageView with ShapeableImageView in nav_header_navigation_drawer.xml * added comment for style * empty_commit * empty_commit * maven_install * Update maven_install.json to latest version * added corner_family * added comment for shapeableimageview * changed style name
oppia · Apr 20, 2022 · 5221bfc · 5221bfc
1 parent 5ae96db
commit 5221bfc
Show file tree

Hide file tree

Showing 21 changed files with 266 additions and 133 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -161,7 +161,7 @@ dependencies {
       'androidx.work:work-runtime-ktx:2.4.0',
       'com.github.bumptech.glide:glide:4.11.0',
       'com.google.android.flexbox:flexbox:3.0.0',
-      'com.google.android.material:material:1.2.0-alpha02',
+      'com.google.android.material:material:1.2.0',
       'com.google.dagger:dagger:2.24',
       'com.google.firebase:firebase-analytics:17.5.0',
       'com.google.firebase:firebase-analytics-ktx:17.5.0',

diff --git a/app/src/main/res/layout-land/profile_chooser_add_view.xml b/app/src/main/res/layout-land/profile_chooser_add_view.xml
@@ -28,14 +28,15 @@
       app:layoutMarginBottom="@{hasProfileEverBeenAddedValue ? @dimen/profile_view_already_added_margin : @dimen/profile_chooser_add_view_margin_bottom_profile_not_added}"
       app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_add_view_margin_top_profile_already_added : @dimen/profile_chooser_add_view_margin_top_profile_not_added}">
 
-      <de.hdodenhof.circleimageview.CircleImageView
+      <com.google.android.material.imageview.ShapeableImageView
         android:id="@+id/profile_add_button"
         android:layout_width="72dp"
         android:layout_height="72dp"
         android:layout_marginBottom="8dp"
         app:srcCompat="@{@drawable/ic_add_profile}"
-        app:civ_border_color="@color/avatar_border"
-        app:civ_border_width="1dp" />
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
+        app:strokeColor="@color/avatar_border"
+        app:strokeWidth="1dp" />
 
       <TextView
         android:id="@+id/add_profile_text"

diff --git a/app/src/main/res/layout-land/profile_chooser_profile_view.xml b/app/src/main/res/layout-land/profile_chooser_profile_view.xml
@@ -35,13 +35,14 @@
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent">
 
-      <de.hdodenhof.circleimageview.CircleImageView
+      <com.google.android.material.imageview.ShapeableImageView
         android:id="@+id/profile_avatar_img"
         android:layout_width="72dp"
         android:layout_height="72dp"
         android:layout_marginBottom="8dp"
-        app:civ_border_color="@color/avatar_border"
-        app:civ_border_width="1dp"
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
+        app:strokeColor="@color/avatar_border"
+        app:strokeWidth="1dp"
         profile:src="@{viewModel.profile.avatar}" />
 
       <LinearLayout

diff --git a/app/src/main/res/layout-land/profile_edit_fragment.xml b/app/src/main/res/layout-land/profile_edit_fragment.xml
@@ -33,7 +33,7 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-      <de.hdodenhof.circleimageview.CircleImageView
+      <com.google.android.material.imageview.ShapeableImageView
         android:id="@+id/profile_edit_image"
         android:layout_width="90dp"
         android:layout_height="90dp"
@@ -43,6 +43,7 @@
         android:translationZ="4dp"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
         profile:src="@{viewModel.profile.avatar}" />
 
       <TextView

diff --git a/app/src/main/res/layout-land/profile_progress_header.xml b/app/src/main/res/layout-land/profile_progress_header.xml
@@ -20,7 +20,7 @@
     android:paddingTop="32dp"
     android:paddingEnd="16dp">
 
-    <com.jackandphantom.circularimageview.CircleImage
+    <com.google.android.material.imageview.ShapeableImageView
       android:id="@+id/profile_edit_image"
       android:layout_width="160dp"
       android:layout_height="160dp"
@@ -29,10 +29,12 @@
       android:contentDescription="@string/current_profile_picture_content_description"
       android:focusable="true"
       android:onClick="@{() -> viewModel.clickOnProfilePicture()}"
+      android:elevation="4dp"
       app:add_shadow="true"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:shadow_radius="8"
+      app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
       profile:src="@{viewModel.profile.avatar}" />
 
     <ImageView
@@ -42,6 +44,7 @@
       android:onClick="@{() -> viewModel.clickOnProfilePicture()}"
       android:paddingStart="12dp"
       android:paddingTop="12dp"
+      android:elevation="4dp"
       app:layout_constraintBottom_toBottomOf="@+id/profile_edit_image"
       app:layout_constraintEnd_toEndOf="@+id/profile_edit_image"
       app:srcCompat="@drawable/rounded_white_background_with_shadow" />

diff --git a/app/src/main/res/layout-sw600dp-land/profile_chooser_add_view.xml b/app/src/main/res/layout-sw600dp-land/profile_chooser_add_view.xml
@@ -35,14 +35,15 @@
       android:paddingStart="@{hasProfileEverBeenAddedValue ? @dimen/space_0dp : @dimen/profile_chooser_add_view_margin_start_profile_not_added}"
       tools:ignore="RtlSymmetry">
 
-      <de.hdodenhof.circleimageview.CircleImageView
+      <com.google.android.material.imageview.ShapeableImageView
         android:id="@+id/profile_add_button"
         android:layout_width="108dp"
         android:layout_height="108dp"
         app:srcCompat="@{@drawable/ic_add_profile}"
         app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_add_view_circular_image_margin_top_profile_already_added : @dimen/space_0dp}"
-        app:civ_border_color="@color/avatar_border"
-        app:civ_border_width="1dp" />
+        app:strokeColor="@color/avatar_border"
+        app:strokeWidth="1dp"
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape" />
 
       <LinearLayout
         android:layout_width="match_parent"

diff --git a/app/src/main/res/layout-sw600dp-land/profile_chooser_profile_view.xml b/app/src/main/res/layout-sw600dp-land/profile_chooser_profile_view.xml
@@ -42,12 +42,13 @@
       app:layout_constraintTop_toTopOf="parent"
       profile:ignore="RtlSymmetry">
 
-      <de.hdodenhof.circleimageview.CircleImageView
+      <com.google.android.material.imageview.ShapeableImageView
         android:id="@+id/profile_avatar_img"
         android:layout_width="108dp"
         android:layout_height="108dp"
-        app:civ_border_color="@color/avatar_border"
-        app:civ_border_width="1dp"
+        app:strokeColor="@color/avatar_border"
+        app:strokeWidth="1dp"
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
         app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_circular_image_margin_top_profile_already_added : @dimen/space_0dp}"
         profile:src="@{viewModel.profile.avatar}" />
 

diff --git a/app/src/main/res/layout-sw600dp-port/profile_chooser_add_view.xml b/app/src/main/res/layout-sw600dp-port/profile_chooser_add_view.xml
@@ -36,14 +36,15 @@
       android:paddingStart="@{hasProfileEverBeenAddedValue ? @dimen/space_0dp : @dimen/profile_chooser_add_view_margin_start_profile_not_added}"
       tools:ignore="RtlSymmetry">
 
-      <de.hdodenhof.circleimageview.CircleImageView
+      <com.google.android.material.imageview.ShapeableImageView
         android:id="@+id/profile_add_button"
         android:layout_width="108dp"
         android:layout_height="108dp"
         app:srcCompat="@{@drawable/ic_add_profile}"
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
         app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_add_view_circular_image_margin_top_profile_already_added : @dimen/space_0dp}"
-        app:civ_border_color="@color/avatar_border"
-        app:civ_border_width="1dp" />
+        app:strokeColor="@color/avatar_border"
+        app:strokeWidth="1dp" />
 
       <LinearLayout
         android:layout_width="match_parent"

diff --git a/app/src/main/res/layout-sw600dp-port/profile_chooser_profile_view.xml b/app/src/main/res/layout-sw600dp-port/profile_chooser_profile_view.xml
@@ -33,19 +33,20 @@
       android:layout_height="wrap_content"
       android:gravity="@{hasProfileEverBeenAddedValue ? Gravity.CENTER_HORIZONTAL : Gravity.CENTER_VERTICAL}"
       android:orientation="@{hasProfileEverBeenAddedValue ? LinearLayout.VERTICAL : LinearLayout.HORIZONTAL}"
-    android:paddingEnd="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_margin_end_profile_already_added : @dimen/profile_view_not_added_margin}"
-    android:paddingStart="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_margin_start_profile_already_added : @dimen/profile_view_not_added_margin}"
+      android:paddingEnd="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_margin_end_profile_already_added : @dimen/profile_view_not_added_margin}"
+      android:paddingStart="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_margin_start_profile_already_added : @dimen/profile_view_not_added_margin}"
       app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/space_0dp : @dimen/profile_chooser_profile_view_margin_top_profile_not_added}"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       profile:ignore="RtlSymmetry">
 
-      <de.hdodenhof.circleimageview.CircleImageView
+      <com.google.android.material.imageview.ShapeableImageView
         android:id="@+id/profile_avatar_img"
         android:layout_width="108dp"
         android:layout_height="108dp"
-        app:civ_border_color="@color/avatar_border"
-        app:civ_border_width="1dp"
+        app:strokeColor="@color/avatar_border"
+        app:strokeWidth="1dp"
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
         app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_circular_image_margin_top_profile_already_added : @dimen/space_0dp}"
         profile:src="@{viewModel.profile.avatar}" />
 

diff --git a/app/src/main/res/layout-sw600dp/profile_progress_header.xml b/app/src/main/res/layout-sw600dp/profile_progress_header.xml
@@ -18,7 +18,7 @@
     android:importantForAccessibility="no"
     android:paddingTop="92dp">
 
-    <com.jackandphantom.circularimageview.CircleImage
+    <com.google.android.material.imageview.ShapeableImageView
       android:id="@+id/profile_edit_image"
       android:layout_width="160dp"
       android:layout_height="160dp"
@@ -28,10 +28,12 @@
       android:contentDescription="@string/current_profile_picture_content_description"
       android:focusable="true"
       android:onClick="@{() -> viewModel.clickOnProfilePicture()}"
+      android:elevation="4dp"
       app:add_shadow="true"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:shadow_radius="8"
+      app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
       profile:src="@{viewModel.profile.avatar}" />
 
     <ImageView
@@ -41,6 +43,7 @@
       android:onClick="@{() -> viewModel.clickOnProfilePicture()}"
       android:paddingStart="12dp"
       android:paddingTop="12dp"
+      android:elevation="4dp"
       app:layout_constraintBottom_toBottomOf="@+id/profile_edit_image"
       app:layout_constraintEnd_toEndOf="@+id/profile_edit_image"
       app:srcCompat="@drawable/rounded_white_background_with_shadow" />

diff --git a/app/src/main/res/layout/add_profile_activity.xml b/app/src/main/res/layout/add_profile_activity.xml
@@ -38,19 +38,21 @@
           android:paddingTop="@dimen/add_profile_main_padding_top"
           android:paddingBottom="@dimen/add_profile_main_padding_bottom">
 
-          <com.jackandphantom.circularimageview.CircleImage
+          <com.google.android.material.imageview.ShapeableImageView
             android:id="@+id/add_profile_activity_user_image_view"
             android:layout_width="120dp"
             android:layout_height="120dp"
             android:clickable="true"
             android:contentDescription="@string/current_profile_picture_content_description"
             android:focusable="true"
+            android:elevation="4dp"
             app:add_shadow="true"
+            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             app:shadow_radius="8"
-            app:srcCompat="@drawable/ic_default_avatar" />
+            app:srcCompat="@{@drawable/ic_add_profile}"/>
 
           <ImageView
             android:id="@+id/add_profile_activity_edit_user_image_view"
@@ -59,6 +61,7 @@
             android:contentDescription="@string/edit_profile_picture_content_description"
             android:paddingStart="12dp"
             android:paddingTop="12dp"
+            android:elevation="4dp"
             app:layout_constraintBottom_toBottomOf="@+id/add_profile_activity_user_image_view"
             app:layout_constraintEnd_toEndOf="@+id/add_profile_activity_user_image_view"
             app:srcCompat="@drawable/rounded_white_background_with_shadow" />

diff --git a/app/src/main/res/layout/nav_header_navigation_drawer.xml b/app/src/main/res/layout/nav_header_navigation_drawer.xml
@@ -24,9 +24,10 @@
     android:paddingBottom="@dimen/activity_vertical_margin"
     android:theme="@style/ThemeOverlay.AppCompat.Dark">
 
-    <de.hdodenhof.circleimageview.CircleImageView
+    <com.google.android.material.imageview.ShapeableImageView
       android:layout_width="64dp"
       android:layout_height="64dp"
+      app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"

diff --git a/app/src/main/res/layout/profile_chooser_add_view.xml b/app/src/main/res/layout/profile_chooser_add_view.xml
@@ -30,14 +30,15 @@
       app:layoutMarginEnd="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_add_view_margin_end_profile_already_added : @dimen/profile_view_not_added_margin}"
       app:layoutMarginStart="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_add_view_margin_start_profile_already_added : @dimen/profile_view_not_added_margin}"
       app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/space_0dp : @dimen/profile_chooser_add_view_margin_top_profile_not_added}">
-
-      <de.hdodenhof.circleimageview.CircleImageView
+      
+      <com.google.android.material.imageview.ShapeableImageView
         android:id="@+id/profile_add_button"
         android:layout_width="72dp"
         android:layout_height="72dp"
         app:srcCompat="@{@drawable/ic_add_profile}"
-        app:civ_border_color="@color/avatar_border"
-        app:civ_border_width="1dp" />
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
+        app:strokeColor="@color/avatar_border"
+        app:strokeWidth="1dp" />
 
       <LinearLayout
         android:layout_width="match_parent"

diff --git a/app/src/main/res/layout/profile_chooser_profile_view.xml b/app/src/main/res/layout/profile_chooser_profile_view.xml
@@ -37,12 +37,13 @@
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent">
 
-      <de.hdodenhof.circleimageview.CircleImageView
+      <com.google.android.material.imageview.ShapeableImageView
         android:id="@+id/profile_avatar_img"
         android:layout_width="72dp"
         android:layout_height="72dp"
-        app:civ_border_color="@color/avatar_border"
-        app:civ_border_width="1dp"
+        app:strokeColor="@color/avatar_border"
+        app:strokeWidth="1dp"
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
         profile:src="@{viewModel.profile.avatar}" />
 
       <LinearLayout

diff --git a/app/src/main/res/layout/profile_edit_fragment.xml b/app/src/main/res/layout/profile_edit_fragment.xml
@@ -33,7 +33,7 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-      <de.hdodenhof.circleimageview.CircleImageView
+      <com.google.android.material.imageview.ShapeableImageView
         android:id="@+id/profile_edit_image"
         android:layout_width="90dp"
         android:layout_height="90dp"
@@ -43,6 +43,7 @@
         android:translationZ="4dp"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
         profile:src="@{viewModel.profile.avatar}" />
 
       <TextView

diff --git a/app/src/main/res/layout/profile_list_profile_view.xml b/app/src/main/res/layout/profile_list_profile_view.xml
@@ -17,17 +17,19 @@
     android:layout_height="wrap_content"
     android:background="@drawable/general_item_background_border">
 
-    <de.hdodenhof.circleimageview.CircleImageView
+    <com.google.android.material.imageview.ShapeableImageView
       android:id="@+id/profile_list_image"
       android:layout_width="40dp"
       android:layout_height="40dp"
       android:layout_marginStart="@dimen/profile_list_profile_view_margin_start"
       android:layout_marginTop="18dp"
       android:layout_marginBottom="18dp"
       android:background="@drawable/profile_image_shadow"
+      android:elevation="4dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
+      app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
       profile:src="@{profile.avatar}" />
 
     <TextView

diff --git a/app/src/main/res/layout/profile_progress_header.xml b/app/src/main/res/layout/profile_progress_header.xml
@@ -20,7 +20,7 @@
     android:importantForAccessibility="no"
     android:paddingTop="32dp">
 
-    <com.jackandphantom.circularimageview.CircleImage
+    <com.google.android.material.imageview.ShapeableImageView
       android:id="@+id/profile_edit_image"
       android:layout_width="100dp"
       android:layout_height="100dp"
@@ -29,11 +29,13 @@
       android:contentDescription="@string/current_profile_picture_content_description"
       android:focusable="true"
       android:onClick="@{() -> viewModel.clickOnProfilePicture()}"
+      android:elevation="4dp"
       app:add_shadow="true"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:shadow_radius="8"
+      app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
       profile:src="@{viewModel.profile.avatar}" />
 
     <ImageView
@@ -43,6 +45,7 @@
       android:onClick="@{() -> viewModel.clickOnProfilePicture()}"
       android:paddingStart="8dp"
       android:paddingTop="8dp"
+      android:elevation="4dp"
       app:layout_constraintBottom_toBottomOf="@+id/profile_edit_image"
       app:layout_constraintEnd_toEndOf="@+id/profile_edit_image"
       app:srcCompat="@drawable/rounded_white_background_with_shadow" />

diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -464,4 +464,13 @@
   <style name="TextViewCenterHorizontal" parent="TextView.Common1">
     <item name="android:gravity">center_horizontal</item>
   </style>
+
+  <!-- ShapeableImageView -->
+  <!-- The corner size & family type are set up to ensure a circular shape is created for components
+       with equal width & height
+       (per https://material.io/design/shape/about-shape.html#shape-customization-tool). -->
+  <style name="ShapeAppearanceOverlay.RoundedShape">
+    <item name="cornerSize">50%</item>
+    <item name="cornerFamily">rounded</item>
+  </style>
 </resources>