Improve onboarding typography and theme selection

Author: MihaiCristianCondrea

app/src/main/java/com/d4rk/androidtutorials/java/ui/screens/onboarding/ThemeFragment.java

@@ -10,6 +10,7 @@
 import androidx.core.content.ContextCompat;
 import androidx.fragment.app.Fragment;
 import androidx.lifecycle.ViewModelProvider;
+import androidx.appcompat.app.AppCompatDelegate;
 
 import com.d4rk.androidtutorials.java.R;
 import com.d4rk.androidtutorials.java.databinding.FragmentOnboardingSelectionBinding;
@@ -26,13 +27,13 @@ public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup c
 
         binding.setTitle(getString(R.string.choose_your_style));
         binding.setDescription(getString(R.string.select_how_you_d_like_the_app_to_look));
-        binding.setFirstIcon(ContextCompat.getDrawable(requireContext(), R.drawable.ic_theme));
+        binding.setFirstIcon(ContextCompat.getDrawable(requireContext(), R.drawable.ic_light_mode));
         binding.setFirstTitle(getString(R.string.light_mode));
         binding.setFirstDescription(getString(R.string.light_mode_description));
-        binding.setSecondIcon(ContextCompat.getDrawable(requireContext(), R.drawable.ic_about));
+        binding.setSecondIcon(ContextCompat.getDrawable(requireContext(), R.drawable.ic_dark_mode));
         binding.setSecondTitle(getString(R.string.dark_mode));
         binding.setSecondDescription(getString(R.string.dark_mode_description));
-        binding.setThirdIcon(ContextCompat.getDrawable(requireContext(), R.drawable.ic_android));
+        binding.setThirdIcon(ContextCompat.getDrawable(requireContext(), R.drawable.ic_system_mode));
         binding.setThirdTitle(getString(R.string.follow_system));
         binding.setThirdDescription(getString(R.string.follow_system_mode_description));
 
@@ -63,15 +64,27 @@ private void selectOption(int index) {
         binding.optionFirst.radioButton.setChecked(index == 0);
         binding.optionSecond.radioButton.setChecked(index == 1);
         binding.optionThird.radioButton.setChecked(index == 2);
+
+        int mode;
+        if (index == 0) {
+            mode = AppCompatDelegate.MODE_NIGHT_NO;
+        } else if (index == 1) {
+            mode = AppCompatDelegate.MODE_NIGHT_YES;
+        } else {
+            mode = AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM;
+        }
+        AppCompatDelegate.setDefaultNightMode(mode);
     }
 
     public void saveSelection() {
         String[] values = getResources().getStringArray(R.array.preference_theme_values);
-        String value = values[0];
+        String value;
         if (binding.optionFirst.radioButton.isChecked()) {
             value = values[1];
         } else if (binding.optionSecond.radioButton.isChecked()) {
             value = values[2];
+        } else {
+            value = values[0];
         }
         viewModel.setTheme(value);
     }

app/src/main/res/drawable-anydpi/ic_dark_mode.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
+    <path android:fillColor="#FF000000" android:pathData="M9.37 5.51A7 7 0 0 0 12 19a7 7 0 0 0 6.49-4.5 6.5 6.5 0 0 1 -9.12-9z"/>
+</vector>

app/src/main/res/drawable-anydpi/ic_light_mode.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
+    <path android:fillColor="#FF000000" android:pathData="M6.76,4.84l-1.8,-1.79 -1.41,1.41 1.79,1.8 1.42,-1.42zM1,11h3v2H1v-2zm10,-9h2v3h-2V2zm7.66,3.05l1.79,-1.8 -1.41,-1.41 -1.8,1.79 1.42,1.42zM17,11h3v2h-3v-2zm-5,5a4,4 0 1,1 0,-8 4,4 0 0,1 0,8zm5.24,1.16l1.8,1.79 1.41,-1.41 -1.79,-1.8 -1.42,1.42zM13,22h-2v-3h2v3zm-7.66,-3.05l-1.79,1.8 1.41,1.41 1.8,-1.79 -1.42,-1.42z"/>
+</vector>

app/src/main/res/drawable-anydpi/ic_system_mode.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
+    <path android:fillColor="#FF000000" android:pathData="M17,1H7C5.9,1 5,1.9 5,3v18c0,1.1 0.9,2 2,2h10c1.1,0 2-0.9 2-2V3c0-1.1-0.9-2-2-2zm0,18H7V5h10v14z"/>
+</vector>

app/src/main/res/layout/activity_onboarding.xml

@@ -24,7 +24,7 @@
         app:layout_constraintBottom_toTopOf="@+id/bottomBar"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toBottomOf="@id/buttonSkip" />
 
     <LinearLayout
         android:id="@+id/bottomBar"

app/src/main/res/layout/fragment_onboarding_selection.xml

@@ -56,23 +56,25 @@
 
         <com.google.android.material.textview.MaterialTextView
             android:id="@+id/title"
-            android:layout_width="wrap_content"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginTop="32dp"
             android:text="@{title}"
             android:textAppearance="?attr/textAppearanceHeadlineMedium"
+            android:textAlignment="center"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
         <com.google.android.material.textview.MaterialTextView
             android:id="@+id/description"
-            android:layout_width="wrap_content"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginTop="8dp"
             android:text="@{description}"
             android:textAppearance="?attr/textAppearanceBodyMedium"
             android:textColor="?attr/colorOnSurfaceVariant"
+            android:textAlignment="center"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/title" />