For #9722: Refactor onboarding buttons with text.

Add title and description to button text, remove extra Textviews.

app/src/main/java/org/mozilla/fenix/ext/SpannableString.kt

@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+package org.mozilla.fenix.ext
+
+import android.content.Context
+import android.text.Spannable
+import android.text.SpannableString
+import android.text.style.AbsoluteSizeSpan
+import android.text.style.ForegroundColorSpan
+import androidx.core.content.ContextCompat
+import mozilla.components.support.ktx.android.util.dpToPx
+
+fun SpannableString.setTextSize(context: Context, textSize: Int) =
+    this.setSpan(
+        AbsoluteSizeSpan(textSize.dpToPx(context.resources.displayMetrics)),
+        0,
+        this.length,
+        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
+    )
+
+fun SpannableString.setTextColor(context: Context, colorResId: Int) =
+    this.setSpan(
+        ForegroundColorSpan(
+            ContextCompat.getColor(
+                context,
+                colorResId
+            )
+        ),
+        0,
+        this.length,
+        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
+    )

app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/onboarding/OnboardingTrackingProtectionViewHolder.kt

@@ -37,17 +37,17 @@ class OnboardingTrackingProtectionViewHolder(view: View) : RecyclerView.ViewHold
             isChecked = view.context.settings().shouldUseTrackingProtection
             setOnCheckedChangeListener { _, isChecked ->
                 updateTrackingProtectionSetting(isChecked)
-                updateRadioGroupState(view, isChecked)
+                updateRadioGroupState(isChecked)
             }
         }
 
-        setupRadioGroup(view, trackingProtectionToggle.isChecked)
+        setupRadioGroup(trackingProtectionToggle.isChecked)
-        updateRadioGroupState(view, trackingProtectionToggle.isChecked)
+        updateRadioGroupState(trackingProtectionToggle.isChecked)
     }
 
-    private fun setupRadioGroup(view: View, isChecked: Boolean) {
+    private fun setupRadioGroup(isChecked: Boolean) {
 
-        updateRadioGroupState(view, isChecked)
+        updateRadioGroupState(isChecked)
 
         addToRadioGroup(standardTrackingProtection, strictTrackingProtection)
 
@@ -58,56 +58,20 @@ class OnboardingTrackingProtectionViewHolder(view: View) : RecyclerView.ViewHold
 
         standardTrackingProtection.onClickListener {
             updateTrackingProtectionPolicy()
-            view.context.components.analytics.metrics
+            itemView.context.components.analytics.metrics
                 .track(Event.OnboardingTrackingProtection(Setting.STANDARD))
         }
 
-        view.clickable_region_standard.apply {
-            setOnClickListener {
-                standardTrackingProtection.performClick()
-                view.context.components.analytics.metrics
-                    .track(Event.OnboardingTrackingProtection(Setting.STANDARD))
-            }
-            val standardTitle = view.context.getString(
-                R.string.onboarding_tracking_protection_standard_button_2
-            )
-            val standardSummary = view.context.getString(
-                R.string.onboarding_tracking_protection_standard_button_description_2
-            )
-            contentDescription = "$standardTitle. $standardSummary"
-        }
-
         strictTrackingProtection.onClickListener {
             updateTrackingProtectionPolicy()
-            view.context.components.analytics.metrics
+            itemView.context.components.analytics.metrics
                 .track(Event.OnboardingTrackingProtection(Setting.STRICT))
         }
-
-        view.clickable_region_strict.apply {
-            setOnClickListener {
-                strictTrackingProtection.performClick()
-                view.context.components.analytics.metrics
-                    .track(Event.OnboardingTrackingProtection(Setting.STRICT))
-            }
-            val strictTitle =
-                view.context.getString(R.string.onboarding_tracking_protection_strict_option)
-            val strictSummary =
-                view.context.getString(R.string.onboarding_tracking_protection_strict_button_description_2)
-            contentDescription = "$strictTitle. $strictSummary"
-        }
     }
 
-    private fun updateRadioGroupState(view: View, isChecked: Boolean) {
+    private fun updateRadioGroupState(isChecked: Boolean) {
         standardTrackingProtection.isEnabled = isChecked
         strictTrackingProtection.isEnabled = isChecked
-
-        view.protection_standard_description.isEnabled = isChecked
-        view.protection_strict_description.isEnabled = isChecked
-        view.clickable_region_standard.isClickable = isChecked
-
-        view.protection_standard_title.isEnabled = isChecked
-        view.protection_strict_title.isEnabled = isChecked
-        view.clickable_region_strict.isClickable = isChecked
     }
 
     private fun updateTrackingProtectionSetting(enabled: Boolean) {

app/src/main/java/org/mozilla/fenix/onboarding/OnboardingRadioButton.kt

@@ -5,12 +5,16 @@
 package org.mozilla.fenix.onboarding
 
 import android.content.Context
+import android.text.SpannableString
+import android.text.SpannableStringBuilder
 import android.util.AttributeSet
 import android.widget.ImageView
 import androidx.appcompat.widget.AppCompatRadioButton
 import androidx.core.content.edit
 import androidx.core.content.withStyledAttributes
 import org.mozilla.fenix.R
+import org.mozilla.fenix.ext.setTextColor
+import org.mozilla.fenix.ext.setTextSize
 import org.mozilla.fenix.ext.settings
 import org.mozilla.fenix.utils.view.GroupableRadioButton
 import org.mozilla.fenix.utils.view.uncheckAll
@@ -23,6 +27,8 @@ class OnboardingRadioButton(
     private var illustration: ImageView? = null
     private var clickListener: (() -> Unit)? = null
     var key: Int = 0
+    var title: Int = 0
+    var description: Int = 0
 
     init {
         context.withStyledAttributes(
@@ -31,6 +37,9 @@ class OnboardingRadioButton(
             0, 0
         ) {
             key = getResourceId(R.styleable.OnboardingRadioButton_onboardingKey, 0)
+            title = getResourceId(R.styleable.OnboardingRadioButton_onboardingKeyTitle, 0)
+            description =
+                getResourceId(R.styleable.OnboardingRadioButton_onboardingKeyDescription, 0)
         }
     }
 
@@ -52,6 +61,28 @@ class OnboardingRadioButton(
             toggleRadioGroups()
             clickListener?.invoke()
         }
+        if (title != 0) {
+            setRadioButtonText(context)
+        }
+    }
+
+    private fun setRadioButtonText(context: Context) {
+        val builder = SpannableStringBuilder()
+
+        val spannableTitle = SpannableString(resources.getString(title))
+        spannableTitle.setTextSize(context, TITLE_TEXT_SIZE)
+        spannableTitle.setTextColor(context, R.color.primary_state_list_text_color)
+
+        builder.append(spannableTitle)
+
+        if (description != 0) {
+            val spannableDescription = SpannableString(resources.getString(description))
+            spannableDescription.setTextSize(context, DESCRIPTION_TEXT_SIZE)
+            spannableDescription.setTextColor(context, R.color.secondary_state_list_text_color)
+            builder.append("\n")
+            builder.append(spannableDescription)
+        }
+        this.text = builder
     }
 
     override fun updateRadioValue(isChecked: Boolean) {
@@ -69,4 +100,9 @@ class OnboardingRadioButton(
             radioGroups.uncheckAll()
         }
     }
+
+    companion object {
+        private const val TITLE_TEXT_SIZE = 16
+        private const val DESCRIPTION_TEXT_SIZE = 14
+    }
 }

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

@@ -4,6 +4,7 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/onboarding_card"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
@@ -140,34 +141,18 @@
         android:layout_marginStart="16dp"
         android:layout_marginTop="16dp"
         android:layout_marginBottom="16dp"
+        android:background="@android:color/transparent"
         android:contentDescription="@string/onboarding_theme_automatic_title"
+        android:foreground="@drawable/rounded_ripple"
         android:paddingStart="0dp"
         android:paddingEnd="8dp"
         android:theme="@style/Checkable.Colored"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/divider"
-        app:onboardingKey="@string/pref_key_follow_device_theme" />
+        app:onboardingKey="@string/pref_key_follow_device_theme"
+        app:onboardingKeyDescription="@string/onboarding_theme_automatic_summary"
+        app:onboardingKeyTitle="@string/onboarding_theme_automatic_title"
+        tools:text="Automatic" />
 
-    <TextView
-        android:id="@+id/automatic_title"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="9dp"
-        android:text="@string/onboarding_theme_automatic_title"
-        android:textColor="?primaryText"
-        android:textSize="16sp"
-        app:layout_constraintStart_toEndOf="@+id/theme_automatic_radio_button"
-        app:layout_constraintTop_toBottomOf="@+id/divider" />
-
-    <TextView
-        android:id="@+id/automatic_theme_summary"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:text="@string/onboarding_theme_automatic_summary"
-        android:textColor="?secondaryText"
-        android:textSize="14sp"
-        app:layout_constraintStart_toEndOf="@+id/theme_automatic_radio_button"
-        app:layout_constraintEnd_toEndOf="@id/clickable_region_automatic"
-        app:layout_constraintTop_toBottomOf="@id/automatic_title" />
 </androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -7,7 +7,9 @@
     android:id="@+id/onboarding_card"
     style="@style/OnboardingCardLightWithPadding"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content">
+    android:layout_height="wrap_content"
+    android:clipChildren="false"
+    android:clipToPadding="false">
 
     <TextView
         android:id="@+id/header_text"
@@ -44,97 +46,48 @@
         app:layout_constraintTop_toBottomOf="@id/header_text"
         tools:text="@string/onboarding_tracking_protection_description_2" />
 
-    <View
-        android:id="@+id/clickable_region_standard"
-        android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:foreground="@drawable/rounded_ripple"
-        app:layout_constraintBottom_toBottomOf="@id/protection_standard_description"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="@id/tracking_protection_standard_option" />
 
     <org.mozilla.fenix.onboarding.OnboardingRadioButton
         android:id="@+id/tracking_protection_standard_option"
-        android:layout_width="wrap_content"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginStart="16dp"
         android:layout_marginTop="16dp"
         android:layout_marginBottom="16dp"
-        android:paddingStart="0dp"
+        android:background="@android:color/transparent"
-        android:paddingEnd="8dp"
         android:checked="true"
+        android:foreground="@drawable/rounded_ripple"
+        android:gravity="top"
+        android:paddingStart="8dp"
+        android:paddingEnd="8dp"
         android:theme="@style/Checkable.Colored"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/description_text"
-        app:onboardingKey="@string/pref_key_tracking_protection_standard_option" />
+        app:onboardingKey="@string/pref_key_tracking_protection_standard_option"
-
+        app:onboardingKeyDescription="@string/onboarding_tracking_protection_standard_button_description_2"
-    <TextView
+        app:onboardingKeyTitle="@string/onboarding_tracking_protection_standard_button_2"
-        android:id="@+id/protection_standard_title"
+        tools:text="Standard" />
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="@string/onboarding_tracking_protection_standard_button_2"
-        android:textColor="@color/primary_state_list_text_color"
-        android:textSize="16sp"
-        app:layout_constraintStart_toEndOf="@+id/tracking_protection_standard_option"
-        app:layout_constraintTop_toTopOf="@+id/tracking_protection_standard_option" />
-
-    <TextView
-        android:id="@+id/protection_standard_description"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:text="@string/onboarding_tracking_protection_standard_button_description_2"
-        android:textColor="@color/secondary_state_list_text_color"
-        android:textSize="14sp"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="@+id/protection_standard_title"
-        app:layout_constraintTop_toBottomOf="@id/protection_standard_title" />
-
-    <View
-        android:id="@+id/clickable_region_strict"
-        android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:foreground="@drawable/rounded_ripple"
-        app:layout_constraintBottom_toBottomOf="@id/protection_strict_description"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="@id/tracking_protection_strict_default" />
 
     <org.mozilla.fenix.onboarding.OnboardingRadioButton
         android:id="@+id/tracking_protection_strict_default"
-        android:layout_width="wrap_content"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginStart="16dp"
         android:layout_marginTop="16dp"
         android:layout_marginBottom="16dp"
+        android:background="@android:color/transparent"
         android:checked="false"
-        android:paddingStart="0dp"
+        android:foreground="@drawable/rounded_ripple"
+        android:gravity="top"
+        android:paddingStart="8dp"
         android:paddingEnd="8dp"
+        android:textColor="@color/primary_state_list_text_color"
         android:theme="@style/Checkable.Colored"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/tracking_protection_standard_option"
-        app:onboardingKey="@string/pref_key_tracking_protection_strict_default" />
+        app:onboardingKey="@string/pref_key_tracking_protection_strict_default"
-
+        app:onboardingKeyDescription="@string/onboarding_tracking_protection_strict_button_description_2"
-    <TextView
+        app:onboardingKeyTitle="@string/onboarding_tracking_protection_strict_option"
-        android:id="@+id/protection_strict_title"
+        tools:text="Strict" />
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="@string/onboarding_tracking_protection_strict_option"
-        android:textColor="@color/primary_state_list_text_color"
-        android:textSize="16sp"
-        app:layout_constraintStart_toEndOf="@+id/tracking_protection_strict_default"
-        app:layout_constraintTop_toTopOf="@+id/tracking_protection_strict_default" />
-
-    <TextView
-        android:id="@+id/protection_strict_description"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:text="@string/onboarding_tracking_protection_strict_button_description_2"
-        android:textColor="@color/secondary_state_list_text_color"
-        android:textSize="14sp"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="@+id/protection_strict_title"
-        app:layout_constraintTop_toBottomOf="@id/protection_strict_title" />
 </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/values/attrs.xml

@@ -84,6 +84,8 @@
 
     <declare-styleable name="OnboardingRadioButton">
         <attr name="onboardingKey" format="reference" />
+        <attr name="onboardingKeyTitle" format="reference" />
+        <attr name="onboardingKeyDescription" format="reference" />
     </declare-styleable>
 
 </resources>