[Design/#30] 설정 switch 디자인 적용

Team-Umbba · Jul 10, 2023 · d085d35 · d085d35
1 parent 6cc3960
commit d085d35
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 37 deletions.
diff --git a/app/src/main/res/color/sel_switch_track.xml b/app/src/main/res/color/sel_switch_track.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="@color/primary_400" android:state_checked="true"/>
+    <item android:color="@color/grey_400" android:state_checked="false" />
+</selector>
diff --git a/app/src/main/res/drawable/sel_switch_notification.xml b/app/src/main/res/drawable/sel_switch_notification.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/shape_switch_on" android:state_checked="true"/>
     <item android:drawable="@drawable/shape_switch_off" android:state_checked="false" />
-    <item android:drawable="@drawable/shape_switch_on" android:state_checked="true" />
 </selector>
diff --git a/app/src/main/res/drawable/shape_switch_off.xml b/app/src/main/res/drawable/shape_switch_off.xml
@@ -1,9 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
+    <item
+        android:bottom="12dp"
+        android:top="12dp"/>
+    <solid android:color="@color/grey_400" />
     <corners android:radius="16dp" />
     <size
-        android:width="42dp"
+        android:width="49dp"
         android:height="17dp" />
-    <solid android:color="@color/grey_999999" />
 </shape>
diff --git a/app/src/main/res/drawable/shape_switch_on.xml b/app/src/main/res/drawable/shape_switch_on.xml
@@ -2,8 +2,8 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
     <corners android:radius="16dp" />
+    <solid android:color="@color/primary_500" />
     <size
-        android:width="42dp"
+        android:width="49dp"
         android:height="17dp" />
-    <solid android:color="@color/grey_999999" />
 </shape>
diff --git a/app/src/main/res/drawable/shape_switch_thumb.xml b/app/src/main/res/drawable/shape_switch_thumb.xml
@@ -4,62 +4,62 @@
         <shape android:shape="oval">
             <solid android:color="#10CCCCCC" />
             <padding
-                android:bottom="1dp"
-                android:left="1dp"
-                android:right="1dp"
-                android:top="1dp" />
+                android:bottom="2dp"
+                android:left="2dp"
+                android:right="2dp"
+                android:top="2dp" />
         </shape>
     </item>
 
     <item>
         <shape android:shape="oval">
             <solid android:color="#20CCCCCC" />
             <padding
-                android:bottom="1dp"
-                android:left="1dp"
-                android:right="1dp"
-                android:top="1dp" />
+                android:bottom="2dp"
+                android:left="2dp"
+                android:right="2dp"
+                android:top="2dp" />
         </shape>
     </item>
 
     <item>
         <shape android:shape="oval">
             <solid android:color="#40CCCCCC" />
             <padding
-                android:bottom="1dp"
-                android:left="1dp"
-                android:right="1dp"
-                android:top="1dp" />
+                android:bottom="2dp"
+                android:left="2dp"
+                android:right="2dp"
+                android:top="2dp" />
         </shape>
     </item>
 
     <item>
         <shape android:shape="oval">
             <solid android:color="#50CCCCCC" />
             <padding
-                android:bottom="1dp"
-                android:left="1dp"
-                android:right="1dp"
-                android:top="1dp" />
+                android:bottom="2dp"
+                android:left="2dp"
+                android:right="2dp"
+                android:top="2dp" />
         </shape>
     </item>
 
     <item>
         <shape android:shape="oval">
             <solid android:color="#60CCCCCC" />
             <padding
-                android:bottom="1dp"
-                android:left="1dp"
-                android:right="1dp"
-                android:top="1dp" />
+                android:bottom="2dp"
+                android:left="2dp"
+                android:right="2dp"
+                android:top="2dp" />
         </shape>
     </item>
     <item>
         <shape android:shape="oval">
             <size
-                android:width="33dp"
-                android:height="33dp" />
-            <solid android:color="@color/white" />
+                android:width="35dp"
+                android:height="35dp" />
+            <solid android:color="@color/umbba_white" />
         </shape>
     </item>
 </layer-list>
diff --git a/app/src/main/res/layout/fragment_setting.xml b/app/src/main/res/layout/fragment_setting.xml
@@ -47,22 +47,21 @@
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toTopOf="parent" />
 
-            <Switch
+            <androidx.appcompat.widget.SwitchCompat
                 android:id="@+id/switch_notification"
                 android:layout_width="80dp"
-                android:layout_height="54dp"
+                android:layout_height="wrap_content"
                 android:layout_marginTop="22dp"
                 android:layout_marginEnd="27dp"
                 android:layout_marginBottom="21dp"
-                android:gravity="center"
-                android:showText="true"
-                android:switchTextAppearance="@style/AndroidCaptionRegular10"
+                app:showText="true"
+                app:switchMinWidth="40dp"
+                app:switchTextAppearance="@style/AndroidCaptionRegular10"
                 android:thumb="@drawable/shape_switch_thumb"
+                app:trackTint="@color/sel_switch_track"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintTop_toTopOf="parent"
-                app:track="@drawable/sel_switch_notification"
-                tools:ignore="TouchTargetSizeCheck,UseSwitchCompatOrMaterialXml" />
+                app:layout_constraintTop_toTopOf="parent" />
         </androidx.constraintlayout.widget.ConstraintLayout>
 
         <androidx.constraintlayout.widget.ConstraintLayout

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -91,5 +91,7 @@
     <string name="back_confirm">답변 작성을 취소하시겠습니까?\n 작성 중인 답변은 저장되지 않습니다.</string>
     <string name="cancel">취소</string>
     <string name="confirm">확인</string>
+    <string name="on">On</string>
+    <string name="off">Off</string>
 
 </resources>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -88,4 +88,12 @@
         <item name="cornerSizeBottomLeft">20dp</item>
         <item name="cornerSizeBottomRight">20dp</item>
     </style>
+
+    <style name="SettingSwitchStyle">
+        <item name="android:thumb">@drawable/shape_switch_thumb</item>
+        <item name="android:track">@drawable/sel_switch_notification</item>
+        <item name="android:textColor">"@color/umbba_black"</item>
+        <item name="android:textAppearance">@style/AndroidCaptionRegular10</item>
+        <item name="android:thumbTextPadding">10dp</item>
+    </style>
 </resources>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
@@ -1,6 +1,6 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Base application theme. -->
-    <style name="Base.Theme.Umbbaandroid" parent="Theme.Material3.DayNight.NoActionBar">
+    <style name="Base.Theme.Umbbaandroid" parent="Theme.AppCompat.Light">
         <!-- Primary brand color. -->
         <item name="colorPrimary">@color/primary_400</item>
         <item name="colorPrimaryVariant">@color/primary_500</item>