Improve widget design

Signed-off-by: starry-shivam <[email protected]>
Pool-Of-Tears · Mar 30, 2024 · 44e87b2 · 44e87b2
1 parent f795bf5
commit 44e87b2
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 20 deletions.
diff --git a/app/src/main/java/com/starry/greenstash/widget/configuration/WidgetConfigActivity.kt b/app/src/main/java/com/starry/greenstash/widget/configuration/WidgetConfigActivity.kt
@@ -93,6 +93,7 @@ import com.starry.greenstash.R
 import com.starry.greenstash.ui.screens.settings.viewmodels.SettingsViewModel
 import com.starry.greenstash.ui.screens.settings.viewmodels.ThemeMode
 import com.starry.greenstash.ui.theme.GreenStashTheme
+import com.starry.greenstash.ui.theme.greenstashFont
 import com.starry.greenstash.widget.GoalWidget
 import dagger.hilt.android.AndroidEntryPoint
 import kotlinx.coroutines.ExperimentalCoroutinesApi
@@ -109,7 +110,6 @@ class WidgetConfigActivity : AppCompatActivity() {
 
     private val viewModel: WidgetConfigViewModel by viewModels()
     private lateinit var settingsViewModel: SettingsViewModel
-
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
@@ -162,6 +162,7 @@ class WidgetConfigActivity : AppCompatActivity() {
                         text = stringResource(id = R.string.widget_config_screen_header),
                         maxLines = 1,
                         overflow = TextOverflow.Ellipsis,
+                        fontFamily = greenstashFont
                     )
                 }, navigationIcon = {
                     IconButton(onClick = {
@@ -222,6 +223,7 @@ class WidgetConfigActivity : AppCompatActivity() {
                                 text = stringResource(id = R.string.no_goal_set),
                                 fontWeight = FontWeight.Medium,
                                 fontSize = 18.sp,
+                                fontFamily = greenstashFont,
                                 modifier = Modifier.padding(start = 12.dp, end = 12.dp)
                             )
 
@@ -320,10 +322,10 @@ class WidgetConfigActivity : AppCompatActivity() {
                 Column(modifier = Modifier.padding(8.dp)) {
                     Text(
                         text = title,
-                        fontStyle = MaterialTheme.typography.headlineMedium.fontStyle,
                         fontSize = 20.sp,
                         fontWeight = FontWeight.SemiBold,
                         maxLines = 1,
+                        fontFamily = greenstashFont,
                         overflow = TextOverflow.Ellipsis,
                         color = MaterialTheme.colorScheme.onSurface,
                     )
@@ -332,9 +334,9 @@ class WidgetConfigActivity : AppCompatActivity() {
                         text = description,
                         color = MaterialTheme.colorScheme.onSurface,
                         maxLines = 1,
-                        fontStyle = MaterialTheme.typography.bodySmall.fontStyle,
+                        fontFamily = greenstashFont,
                         fontWeight = FontWeight.Medium,
-                        fontSize = 16.sp,
+                        fontSize = 14.sp,
                     )
 
                     Spacer(modifier = Modifier.height(8.dp))

diff --git a/app/src/main/res/drawable/progress_bar_rounded_corners.xml b/app/src/main/res/drawable/progress_bar_rounded_corners.xml
@@ -16,7 +16,7 @@
         <scale android:scaleWidth="100%">
             <shape>
                 <corners android:radius="8dp" />
-                <solid android:color="?android:attr/colorAccent" />
+                <solid android:color="?android:attr/colorPrimary" />
             </shape>
         </scale>
     </item>

diff --git a/app/src/main/res/drawable/textview_border.xml b/app/src/main/res/drawable/textview_border.xml
@@ -1,13 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
-    <solid android:color="@android:color/transparent" />
-    <stroke
-        android:width="2dp"
-        android:color="?android:attr/colorPrimary" />
-    <corners android:radius="8dp" />
+    <solid android:color="?attr/colorPrimaryContainer" /> <!-- Use the colorPrimaryContainer tonal color -->
+    <corners android:radius="8dp" /> <!-- Keep the rounded corners -->
     <padding
         android:bottom="5dp"
         android:left="5dp"
         android:right="5dp"
-        android:top="5dp" />
+        android:top="5dp" /> <!-- Keep the padding -->
 </shape>
diff --git a/app/src/main/res/drawable/widget_preview.png b/app/src/main/res/drawable/widget_preview.png
diff --git a/app/src/main/res/drawable/widget_rounded_corners.xml b/app/src/main/res/drawable/widget_rounded_corners.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="?android:attr/colorBackground" /> <!-- Use the same background color as your RelativeLayout -->
+    <corners android:radius="16dp" /> <!-- Set the corner radius to 16dp or your desired value -->
+</shape>
diff --git a/app/src/main/res/layout/goal_widget.xml b/app/src/main/res/layout/goal_widget.xml
@@ -1,10 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
+
+
+<!-- This layout is used to display the goal widget on the home screen. -->
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="?android:attr/colorBackground"
+    android:background="@drawable/widget_rounded_corners"
     android:orientation="vertical"
     android:theme="@style/Theme.Material3.DynamicColors.DayNight">
 
@@ -25,11 +28,11 @@
                 android:orientation="vertical">
 
                 <TextView
-
                     android:id="@+id/widgetTitle"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:ellipsize="end"
+                    android:fontFamily="@font/poppins_medium"
                     android:maxLines="1"
                     android:textAppearance="@style/TextAppearance.AppCompat.Title"
                     android:textColor="?android:attr/textColorPrimary"
@@ -40,6 +43,7 @@
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:ellipsize="end"
+                    android:fontFamily="@font/poppins_regular"
                     android:maxLines="1"
                     android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                     android:textColor="?android:attr/textColorPrimary"
@@ -90,7 +94,7 @@
             android:layout_width="match_parent"
             android:layout_height="8dp"
             android:layout_marginTop="6dp"
-            android:layout_marginBottom="8dp"
+            android:layout_marginBottom="10dp"
             android:progressDrawable="@drawable/progress_bar_rounded_corners"
             android:scaleY="0.8"
             app:indicatorColor="?android:attr/colorAccent"
@@ -108,7 +112,8 @@
                 android:layout_height="wrap_content"
                 android:layout_marginEnd="3dp"
                 android:background="@drawable/textview_border"
-                android:textColor="?android:attr/textColorPrimary"
+                android:fontFamily="@font/poppins_light"
+                android:textColor="?attr/colorOnPrimaryContainer"
                 android:visibility="gone"
                 tools:text="$153.45/day"
                 tools:visibility="visible" />
@@ -119,7 +124,8 @@
                 android:layout_height="wrap_content"
                 android:layout_marginStart="3dp"
                 android:background="@drawable/textview_border"
-                android:textColor="?android:attr/textColorPrimary"
+                android:fontFamily="@font/poppins_light"
+                android:textColor="?attr/colorOnPrimaryContainer"
                 android:visibility="gone"
                 tools:text="$253.45/week"
                 tools:visibility="visible" />
@@ -130,6 +136,7 @@
             android:id="@+id/widgetGoalAchieved"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:fontFamily="@font/poppins_regular"
             android:text="@string/info_card_goal_achieved"
             android:textAppearance="@style/TextAppearance.AppCompat.Body1"
             android:textColor="?android:attr/textColorPrimary"

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -4,7 +4,7 @@
     <!-- Other Strings -->
     <string name="confirm">Confirm</string>
     <string name="cancel">Cancel</string>
-    <string name="ok" >OK</string>
+    <string name="ok">OK</string>
     <string name="unknown_error">Oops! something went wrong.</string>
 
     <!-- Navigation Drawer -->
@@ -45,7 +45,7 @@
 
     <!-- Congratulations Screen -->
     <string name="goal_achieved_heading">Congratulations 🥳</string>
-    <string name="goal_achieved_subtext">You\'ve reached your saving goal! Your hard work and commitment have led to this well-deserved accomplishment. Celebrate your success!</string>
+    <string name="goal_achieved_subtext">You\'ve reached your saving goal! Your hard work and commitment have led to this well-deserved accomplishment. Celebrate your success! 🎉</string>
     <string name="goal_achieved_button">Go back to home</string>
 
     <!-- Strings used for dashboard saving goals cards -->

diff --git a/app/src/main/res/xml/goal_widget_info.xml b/app/src/main/res/xml/goal_widget_info.xml
@@ -3,12 +3,12 @@
     android:configure="com.starry.greenstash.widget.configuration.WidgetConfigActivity"
     android:description="@string/app_name"
     android:initialKeyguardLayout="@layout/goal_widget"
-    android:minWidth="110dp"
+    android:minWidth="160dp"
     android:minHeight="40dp"
     android:minResizeWidth="40dp"
     android:previewImage="@drawable/widget_preview"
     android:resizeMode="vertical|horizontal"
-    android:targetCellWidth="3"
+    android:targetCellWidth="4"
     android:targetCellHeight="2"
     android:updatePeriodMillis="3600000"
     android:widgetCategory="home_screen" />