Merge pull request #2901 from dimagi/dv/form_progress_bar

Updated UI for progress bar in form delivery page
dimagi · Dec 4, 2024 · 2d91ac3 · 2d91ac3
2 parents a90c404 + 356df2e
commit 2d91ac3
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 27 deletions.
diff --git a/app/res/drawable/icon_chevron_left_white.xml b/app/res/drawable/icon_chevron_left_white.xml
@@ -0,0 +1,4 @@
+<vector android:height="12dp" android:viewportHeight="12.0"
+    android:viewportWidth="8.0" android:width="8dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FFFFFF" android:pathData="M7.70492 1.41L6.29492 0L0.294922 6L6.29492 12L7.70492 10.59L3.12492 6L7.70492 1.41Z"/>
+</vector>
diff --git a/app/res/drawable/icon_chevron_right_white.xml b/app/res/drawable/icon_chevron_right_white.xml
@@ -0,0 +1,4 @@
+<vector android:height="12dp" android:viewportHeight="12.0"
+    android:viewportWidth="8.0" android:width="8dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FFFFFF" android:pathData="M1.70492 0L0.294922 1.41L4.87492 6L0.294922 10.59L1.70492 12L7.70492 6L1.70492 0Z"/>
+</vector>
diff --git a/app/res/drawable/icon_close_white.xml b/app/res/drawable/icon_close_white.xml
@@ -0,0 +1,4 @@
+<vector android:height="14dp" android:viewportHeight="14.0"
+    android:viewportWidth="14.0" android:width="14dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FFFFFF" android:pathData="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"/>
+</vector>
diff --git a/app/res/drawable/progressbar_modern.xml b/app/res/drawable/progressbar_modern.xml
@@ -2,20 +2,22 @@
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:id="@android:id/background">
         <shape>
+            <corners android:radius="4dp" />
             <gradient
-                android:startColor="@color/cc_neutral_bg"
-                android:endColor="@color/cc_neutral_bg"
+                android:startColor="@color/progress_bar_bg"
+                android:endColor="@color/progress_bar_bg"
                 />
         </shape>
     </item>
     <item android:id="@android:id/progress">
-        <clip>
+        <scale android:scaleWidth="100%">
             <shape>
+                <corners android:radius="4dp" />
                 <gradient
-                    android:startColor="@color/cc_brand_color"
-                    android:endColor="@color/cc_brand_color"
+                    android:startColor="@color/white"
+                    android:endColor="@color/white"
                     />
             </shape>
-        </clip>
+        </scale>
     </item>
 </layer-list>
diff --git a/app/res/drawable/progressbar_modern_blue.xml b/app/res/drawable/progressbar_modern_blue.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:id="@android:id/background">
+        <shape>
+            <corners android:radius="4dp" />
+            <gradient
+                android:startColor="@color/progress_bar_bg"
+                android:endColor="@color/progress_bar_bg"
+                />
+        </shape>
+    </item>
+    <item android:id="@android:id/progress">
+        <scale android:scaleWidth="100%">
+            <shape>
+                <corners android:radius="4dp" />
+                <gradient
+                    android:startColor="@color/start_sync_button"
+                    android:endColor="@color/start_sync_button"
+                    />
+            </shape>
+        </scale>
+    </item>
+</layer-list>
diff --git a/app/res/layout-land/update_activity.xml b/app/res/layout-land/update_activity.xml
@@ -62,7 +62,7 @@
             <ProgressBar
                 android:id="@+id/update_progress_bar"
                 style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
-                android:progressDrawable="@drawable/progressbar_modern"
+                android:progressDrawable="@drawable/progressbar_modern_blue"
                 android:layout_width="fill_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginBottom="@dimen/content_min_margin"

diff --git a/app/res/layout/progress_dialog_determinate.xml b/app/res/layout/progress_dialog_determinate.xml
@@ -34,7 +34,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_below="@id/progress_dialog_message"
-            android:progressDrawable="@drawable/progressbar_modern"
+            android:progressDrawable="@drawable/progressbar_modern_blue"
             android:indeterminate="false"
             android:indeterminateOnly="false"/>
 

diff --git a/app/res/layout/screen_form_entry.xml b/app/res/layout/screen_form_entry.xml
@@ -56,7 +56,7 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@id/nav_badge"
-        android:background="@color/cc_core_bg"
+        android:background="@color/start_sync_button"
         android:minHeight="@dimen/new_progressbar_minheight"
         android:paddingLeft="@dimen/content_start"
         android:paddingRight="@dimen/content_start"
@@ -70,53 +70,54 @@
             android:id="@+id/nav_btn_prev"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:layout_centerVertical="true"
             android:layout_alignParentLeft="true"
             android:background="@drawable/selector_button_press"
             android:minHeight="@dimen/new_progressbar_button_minheight"
             android:minWidth="@dimen/new_progressbar_button_minwidth"
             android:paddingLeft="@dimen/content_start"
             android:paddingRight="@dimen/new_progressbar_button_padding"
-            app:srcCompat="@drawable/icon_chevron_left_brand"
+            app:srcCompat="@drawable/icon_chevron_left_white"
             android:paddingStart="@dimen/content_start"
             android:layout_alignParentStart="true"
             android:paddingEnd="@dimen/new_progressbar_button_padding" />
 
         <ProgressBar
-            android:id="@+id/nav_prog_bar"
             style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignBottom="@id/nav_btn_prev"
-            android:layout_alignParentTop="true"
-            android:layout_centerInParent="true"
+            android:id="@+id/nav_prog_bar"
+            android:indeterminate="false"
+            android:indeterminateOnly="false"
+            android:layout_centerVertical="true"
+            android:layout_height="32dp"
+            android:layout_marginEnd="@dimen/content_start"
             android:layout_marginLeft="@dimen/content_start"
             android:layout_marginRight="@dimen/content_start"
+            android:layout_marginStart="@dimen/content_start"
+            android:layout_toEndOf="@id/nav_btn_prev"
             android:layout_toLeftOf="@+id/nav_btn_next"
             android:layout_toRightOf="@id/nav_btn_prev"
-            android:indeterminate="false"
-            android:indeterminateOnly="false"
+            android:layout_toStartOf="@+id/nav_btn_next"
+
+            android:layout_width="wrap_content"
             android:max="100"
             android:paddingBottom="@dimen/content_start"
             android:paddingTop="@dimen/content_start"
             android:progress="0"
-            android:progressDrawable="@drawable/progressbar_modern"
-            android:layout_marginStart="@dimen/content_start"
-            android:layout_marginEnd="@dimen/content_start"
-            android:layout_toStartOf="@+id/nav_btn_next"
-            android:layout_toEndOf="@id/nav_btn_prev" />
+            android:progressDrawable="@drawable/progressbar_modern" />
 
         <ImageButton
             android:rotationY="@integer/locale_mirror_flip"
             android:id="@+id/nav_btn_next"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentRight="true"
+            android:layout_centerVertical="true"
             android:background="@drawable/selector_button_press"
             android:minHeight="@dimen/new_progressbar_button_minheight"
             android:minWidth="@dimen/new_progressbar_button_minwidth"
             android:paddingLeft="@dimen/new_progressbar_button_padding"
             android:paddingRight="@dimen/content_start"
-            app:srcCompat="@drawable/icon_chevron_right_brand"
+            app:srcCompat="@drawable/icon_chevron_right_white"
             android:paddingEnd="@dimen/content_start"
             android:paddingStart="@dimen/new_progressbar_button_padding"
             android:layout_alignParentEnd="true" />

diff --git a/app/res/layout/update_activity.xml b/app/res/layout/update_activity.xml
@@ -62,7 +62,7 @@
             android:layout_marginLeft="@dimen/content_min_margin"
             android:layout_marginRight="@dimen/content_min_margin"
             android:gravity="center"
-            android:progressDrawable="@drawable/progressbar_modern"
+            android:progressDrawable="@drawable/progressbar_modern_blue"
             android:layout_marginStart="@dimen/content_min_margin"
             android:layout_marginEnd="@dimen/content_min_margin" />
 

diff --git a/app/res/values/colors.xml b/app/res/values/colors.xml
@@ -154,5 +154,7 @@
     <color name="start_sync_dark_button">#3b4fb6</color>
     <color name="start_logout_button">#373534</color>
 
+    <!-- Progress bar colors -->
+    <color name="progress_bar_bg">#33000000</color>
 
 </resources>
diff --git a/app/src/org/commcare/activities/components/FormNavigationUI.java b/app/src/org/commcare/activities/components/FormNavigationUI.java
@@ -62,10 +62,10 @@ public static void updateNavigationCues(CommCareActivity activity,
                 findViewById(R.id.nav_btn_finish);
 
         if (!details.relevantBeforeCurrentScreen) {
-            prevButton.setImageResource(R.drawable.icon_close_darkwarm);
+            prevButton.setImageResource(R.drawable.icon_close_white);
             prevButton.setTag(FormEntryConstants.NAV_STATE_QUIT);
         } else {
-            prevButton.setImageResource(R.drawable.icon_chevron_left_brand);
+            prevButton.setImageResource(R.drawable.icon_chevron_left_white);
             prevButton.setTag(FormEntryConstants.NAV_STATE_BACK);
         }