Skip to content

Replace yellow pill images for custom view #7658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nalcalag wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Replace yellow pill images for custom view #7658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cb1e096
Replaces beta and new images with DaxYellowPill in ListItems
nalcalag Jan 29, 2026
7bb731b
Replaces beta and new images with DaxYellowPill in BookmarksListItem …
nalcalag Jan 29, 2026
e596b9c
Update Design System Preview
nalcalag Jan 29, 2026
78be03b
Updated property names
nalcalag Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 2 additions & 29 deletions android-design-system/design-system-internal/src/main/res/layout/component_one_line_item.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,34 +259,7 @@
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/oneLineListItemWithLongTextTruncated"
app:primaryText="Item with New Pill"
app:showNewPill="true" />

<LinearLayout
android:id="@+id/oneLineListItemWithYellowPill"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:gravity="center_vertical"
android:minHeight="@dimen/oneLineItemHeight"
android:orientation="horizontal"
android:paddingHorizontal="@dimen/keyline_4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/oneLineListItemWithNewPill">

<com.duckduckgo.common.ui.view.text.DaxTextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Item with New Custom View YellowPill"
app:typography="body1" />

<com.duckduckgo.common.ui.view.DaxYellowPill
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/keyline_2"
android:text="New" />

</LinearLayout>
app:pillIcon="true"
app:pillText="Beta"/>
Copy link

@cursor cursor bot Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrong pill text "Beta" for "New Pill" item

Medium Severity

The item oneLineListItemWithNewPill with primaryText="Item with New Pill" has app:pillText="Beta" instead of "New". Before this change, the item used app:showNewPill="true" which displayed a "New" pill image. The replacement text should be "New" to maintain the same visual appearance.

Fix in Cursor Fix in Web


</androidx.constraintlayout.widget.ConstraintLayout>
9 changes: 6 additions & 3 deletions android-design-system/design-system-internal/src/main/res/layout/component_settings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@
app:indicatorStatus="on"
app:leadingIcon="@drawable/ic_dax_icon"
app:primaryText="Settings List Item with Beta Pill"
app:pillIcon="betaPill" />
app:pillIcon="true"
app:pillText="Beta" />

<com.duckduckgo.common.ui.view.listitem.SettingsListItem
android:id="@+id/settingsListItemWithBetaTagAndLongText"
Expand All @@ -73,7 +74,8 @@
app:indicatorStatus="on"
app:leadingIcon="@drawable/ic_dax_icon"
app:primaryText="Settings List Item with Beta Pill and a very long piece of text that should hopefully wrap"
app:pillIcon="betaPill" />
app:pillIcon="true"
app:pillText="Beta" />

<com.duckduckgo.common.ui.view.listitem.SettingsListItem
android:id="@+id/settingsListItemWithNewTag"
Expand All @@ -82,6 +84,7 @@
app:indicatorStatus="on"
app:leadingIcon="@drawable/ic_dax_icon"
app:primaryText="Settings List Item with New Pill"
app:pillIcon="newPill" />
app:pillIcon="true"
app:pillText="Beta" />
Copy link

@cursor cursor bot Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrong pill text "Beta" for "New Pill" item

Medium Severity

The item settingsListItemWithNewTag with primaryText="Settings List Item with New Pill" has app:pillText="Beta" instead of "New". Before the change, this used app:pillIcon="newPill", so the replacement text should be "New" to maintain the same visual appearance. This causes incorrect UI labeling in the settings preview.

Fix in Cursor Fix in Web


</LinearLayout>
15 changes: 10 additions & 5 deletions android-design-system/design-system-internal/src/main/res/layout/component_two_line_item.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,8 @@
app:layout_constraintTop_toBottomOf="@id/twoLineSwitchListItemWithImage"
app:primaryText="Two Line Item"
app:secondaryText="With Beta Pill and Switch"
app:showBetaPill="true"
app:pillIcon="true"
app:pillText="Beta"
app:showSwitch="true" />

<com.duckduckgo.common.ui.view.listitem.TwoLineListItem
Expand All @@ -277,7 +278,8 @@
app:primaryText="Two Line Item Two Line Item Two Line Item Two Line Item "
app:primaryTextTruncated="true"
app:secondaryText="In disabled state"
app:showBetaPill="true"
app:pillIcon="true"
app:pillText="Beta"
app:showSwitch="true" />

<com.duckduckgo.common.ui.view.listitem.TwoLineListItem
Expand All @@ -290,7 +292,8 @@
app:leadingIcon="@drawable/ic_globe_16"
app:primaryText="Two Line Item Two Line Item Two Line Item Two Line Item "
app:secondaryText="In disabled state"
app:showBetaPill="true"
app:pillIcon="true"
app:pillText="Beta"
app:showSwitch="true" />

<com.duckduckgo.common.ui.view.listitem.TwoLineListItem
Expand All @@ -303,7 +306,8 @@
app:leadingIcon="@drawable/ic_globe_16"
app:primaryText="Two Line Item Two"
app:secondaryText="Checked in disabled state"
app:showBetaPill="true"
app:pillIcon="true"
app:pillText="Whatever"
Copy link

@cursor cursor bot Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Test placeholder "Whatever" left in pill text

Low Severity

The pillText attribute is set to "Whatever" which appears to be a test or placeholder value. All other similar items in the diff use proper values like "Beta". While this is in a design system preview layout, it creates an inconsistent and unprofessional appearance during testing.

Fix in Cursor Fix in Web

app:showSwitch="true" />

<com.duckduckgo.common.ui.view.listitem.TwoLineListItem
Expand All @@ -316,7 +320,8 @@
app:leadingIcon="@drawable/ic_globe_16"
app:primaryText="Two Line Item Two"
app:secondaryText="Checked with switch in disabled state"
app:showBetaPill="true"
app:pillIcon="true"
app:pillText="Beta"
app:showSwitch="true"
app:switchEnabled="false" />

Expand Down
7 changes: 3 additions & 4 deletions ...m/design-system/src/main/java/com/duckduckgo/common/ui/view/listitem/BookmarksListItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import android.util.AttributeSet
import android.view.View
import android.widget.ImageView
import com.duckduckgo.common.ui.view.DaxSwitch
import com.duckduckgo.common.ui.view.DaxYellowPill
import com.duckduckgo.common.ui.view.gone
import com.duckduckgo.common.ui.view.show
import com.duckduckgo.common.ui.view.text.DaxTextView
Expand Down Expand Up @@ -51,9 +52,7 @@ class BookmarksListItem @JvmOverloads constructor(
get() = binding.trailingIconContainer
override val trailingSwitch: DaxSwitch
get() = binding.trailingSwitch
override val betaPill: ImageView?
get() = null
override val newPill: ImageView?
override val yellowPill: DaxYellowPill?
get() = null

override val itemContainer: View
Expand Down Expand Up @@ -120,7 +119,7 @@ class BookmarksListItem @JvmOverloads constructor(
setPrimaryTextColorStateList(getColorStateList(R.styleable.TwoLineListItem_primaryTextColorOverlay))
}

setFavoriteStarVisible(getBoolean(R.styleable.TwoLineListItem_showBetaPill, false))
setFavoriteStarVisible(getBoolean(R.styleable.TwoLineListItem_pillIcon, false))

val showTrailingIcon = hasValue(R.styleable.TwoLineListItem_trailingIcon)
val showSwitch = getBoolean(R.styleable.TwoLineListItem_showSwitch, false)
Expand Down
13 changes: 2 additions & 11 deletions ...-system/design-system/src/main/java/com/duckduckgo/common/ui/view/listitem/DaxListItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import androidx.annotation.StringRes
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.core.content.ContextCompat
import com.duckduckgo.common.ui.view.DaxSwitch
import com.duckduckgo.common.ui.view.DaxYellowPill
import com.duckduckgo.common.ui.view.gone
import com.duckduckgo.common.ui.view.quietlySetIsChecked
import com.duckduckgo.common.ui.view.recursiveEnable
Expand All @@ -52,8 +53,7 @@ abstract class DaxListItem(
internal abstract val trailingIcon: ImageView
internal abstract val trailingIconContainer: View
internal abstract val trailingSwitch: DaxSwitch
internal abstract val betaPill: ImageView?
internal abstract val newPill: ImageView?
internal abstract val yellowPill: DaxYellowPill?
internal abstract val itemContainer: View
internal abstract val verticalPadding: Int

Expand Down Expand Up @@ -266,15 +266,6 @@ abstract class DaxListItem(
itemContainer.setPadding(0, padding, 0, padding)
}

/** Sets the trailing image content description */
fun setPillVisible(isVisible: Boolean) {
if (isVisible) {
betaPill?.show()
} else {
betaPill?.gone()
}
}

/** Sets the switch value */
fun setIsChecked(isChecked: Boolean) {
trailingSwitch.isChecked = isChecked
Expand Down
16 changes: 7 additions & 9 deletions ...tem/design-system/src/main/java/com/duckduckgo/common/ui/view/listitem/OneLineListItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import android.util.AttributeSet
import android.view.View
import android.widget.ImageView
import com.duckduckgo.common.ui.view.DaxSwitch
import com.duckduckgo.common.ui.view.DaxYellowPill
import com.duckduckgo.common.ui.view.getColorFromAttr
import com.duckduckgo.common.ui.view.gone
import com.duckduckgo.common.ui.view.listitem.DaxListItem.IconSize.Medium
Expand Down Expand Up @@ -53,11 +54,8 @@ class OneLineListItem @JvmOverloads constructor(
override val trailingSwitch: DaxSwitch
get() = binding.trailingSwitch

override val betaPill: ImageView?
get() = null

override val newPill: ImageView
get() = binding.newPill
override val yellowPill: DaxYellowPill
get() = binding.yellowPill

override val itemContainer: View
get() = binding.itemContainer
Expand Down Expand Up @@ -127,11 +125,11 @@ class OneLineListItem @JvmOverloads constructor(
val switchEnabled = getBoolean(R.styleable.OneLineListItem_switchEnabled, true)
setSwitchEnabled(switchEnabled)

if (getBoolean(R.styleable.OneLineListItem_showNewPill, false)) {
newPill.setImageResource(R.drawable.ic_new_pill)
newPill.show()
if (getBoolean(R.styleable.OneLineListItem_pillIcon, false)) {
yellowPill.show()
yellowPill.text = getString(R.styleable.OneLineListItem_pillText)
} else {
newPill.gone()
yellowPill.gone()
}

recycle()
Expand Down
26 changes: 7 additions & 19 deletions ...em/design-system/src/main/java/com/duckduckgo/common/ui/view/listitem/SettingsListItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import android.widget.ImageView
import androidx.annotation.DrawableRes
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.core.content.ContextCompat
import com.duckduckgo.common.ui.view.DaxYellowPill
import com.duckduckgo.common.ui.view.StatusIndicatorView
import com.duckduckgo.common.ui.view.StatusIndicatorView.Status
import com.duckduckgo.common.ui.view.defaultSelectableItemBackground
Expand All @@ -44,8 +45,8 @@ class SettingsListItem @JvmOverloads constructor(
get() = binding.primaryText
private val leadingIcon: ImageView
get() = binding.leadingIcon
private val betaPill: ImageView
get() = binding.betaPill
private val yellowPill: DaxYellowPill
get() = binding.yellowPill
private val statusIndicator: StatusIndicatorView
get() = binding.statusIndicator

Expand All @@ -67,16 +68,11 @@ class SettingsListItem @JvmOverloads constructor(
leadingIcon.gone()
}

val pillIcon = getInt(R.styleable.SettingsListItem_pillIcon, 0)
if (pillIcon != 0) {
getPillResource(pillIcon)?.let { resId ->
betaPill.setImageResource(resId)
betaPill.show()
} ?: run {
betaPill.gone()
}
if (getBoolean(R.styleable.SettingsListItem_pillIcon, false)) {
yellowPill.show()
yellowPill.text = getString(R.styleable.SettingsListItem_pillText)
} else {
betaPill.gone()
yellowPill.gone()
}

val indicatorStatus = Status.from(getInt(R.styleable.SettingsListItem_indicatorStatus, 2))
Expand All @@ -86,14 +82,6 @@ class SettingsListItem @JvmOverloads constructor(
}
}

private fun getPillResource(enumValue: Int): Int? {
return when (enumValue) {
1 -> R.drawable.ic_beta_pill
2 -> R.drawable.ic_new_pill
else -> null
}
}

/** Sets the item click listener */
fun setClickListener(onClick: (() -> Unit)?) {
with(binding) {
Expand Down
17 changes: 12 additions & 5 deletions ...tem/design-system/src/main/java/com/duckduckgo/common/ui/view/listitem/TwoLineListItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ import android.util.AttributeSet
import android.view.View
import android.widget.ImageView
import com.duckduckgo.common.ui.view.DaxSwitch
import com.duckduckgo.common.ui.view.DaxYellowPill
import com.duckduckgo.common.ui.view.gone
import com.duckduckgo.common.ui.view.listitem.DaxListItem.IconSize.Medium
import com.duckduckgo.common.ui.view.show
import com.duckduckgo.common.ui.view.text.DaxTextView
import com.duckduckgo.common.ui.viewbinding.viewBinding
import com.duckduckgo.mobile.android.R
Expand Down Expand Up @@ -52,10 +55,9 @@ class TwoLineListItem @JvmOverloads constructor(
get() = binding.trailingIconContainer
override val trailingSwitch: DaxSwitch
get() = binding.trailingSwitch
override val betaPill: ImageView
get() = binding.betaPill
override val newPill: ImageView?
get() = null

override val yellowPill: DaxYellowPill
get() = binding.yellowPill

override val itemContainer: View
get() = binding.itemContainer
Expand Down Expand Up @@ -113,7 +115,12 @@ class TwoLineListItem @JvmOverloads constructor(
setPrimaryTextColorStateList(getColorStateList(R.styleable.TwoLineListItem_primaryTextColorOverlay))
}

setPillVisible(getBoolean(R.styleable.TwoLineListItem_showBetaPill, false))
if (getBoolean(R.styleable.TwoLineListItem_pillIcon, false)) {
yellowPill.show()
yellowPill.text = getString(R.styleable.TwoLineListItem_pillText)
} else {
yellowPill.gone()
}

val showTrailingIcon = hasValue(R.styleable.TwoLineListItem_trailingIcon)

Expand Down
6 changes: 3 additions & 3 deletions android-design-system/design-system/src/main/res/layout/view_one_line_list_item.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,13 @@
tools:ignore="InvalidColorAttribute"
tools:text="Title" />

<ImageView
android:id="@+id/newPill"
<com.duckduckgo.common.ui.view.DaxYellowPill
android:id="@+id/yellowPill"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/keyline_2"
android:src="@drawable/ic_new_pill"
android:visibility="gone"
tools:text="Beta"
tools:visibility="visible" />

</LinearLayout>
Expand Down
10 changes: 5 additions & 5 deletions android-design-system/design-system/src/main/res/layout/view_settings_list_item.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,29 +41,29 @@
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/keyline_4"
android:breakStrategy="balanced"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/betaPill"
app:layout_constraintEnd_toStartOf="@id/yellowPill"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="@+id/leadingIcon"
app:layout_constraintTop_toTopOf="parent"
app:layout_constrainedWidth="true"
app:typography="body1"
tools:text="Primary Text" />

<ImageView
android:id="@+id/betaPill"
<com.duckduckgo.common.ui.view.DaxYellowPill
android:id="@+id/yellowPill"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/keyline_2"
android:layout_marginEnd="@dimen/keyline_1"
android:src="@drawable/ic_beta_pill"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@id/primaryText"
app:layout_constraintEnd_toStartOf="@id/statusIndicator"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="@id/primaryText"
app:layout_constraintTop_toTopOf="@id/primaryText"
tools:text="Beta"
tools:visibility="visible" />

<com.duckduckgo.common.ui.view.StatusIndicatorView
Expand Down
Loading
Loading