Skip to content

Post visual update: Update the omnibar focused style #6578

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

Merged
merged 10 commits into from
Sep 4, 2025
+5 −27
Merged

Post visual update: Update the omnibar focused style #6578

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7b3f59d
Update some dark colors
0nko Aug 13, 2025
ccc2662
Add shade color
0nko Aug 13, 2025
2aacedf
Change the focus state from blue outline to dark shadow
0nko Aug 13, 2025
6d9bc18
Optimize imports
0nko Aug 14, 2025
a4d00ce
Merge branch 'develop' into feature/ondrej/update-dark-colors
0nko Aug 29, 2025
d8aefe9
Merge branch 'feature/ondrej/update-dark-colors' into feature/ondrej/…
0nko Aug 29, 2025
5eff4f7
Resloved merge conflicts
0nko Aug 29, 2025
802d837
Disable focus animation
0nko Aug 29, 2025
ddfb2ee
Optimize imports
0nko Aug 29, 2025
eb07d36
Merge branch 'develop' into feature/ondrej/change-omnibar-focus-style
0nko Sep 3, 2025
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
26 changes: 2 additions & 24 deletions app/src/main/java/com/duckduckgo/app/browser/omnibar/SingleOmnibarLayout.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import android.util.AttributeSet
import android.view.View
import android.view.ViewGroup
import android.view.ViewTreeObserver.OnGlobalLayoutListener
import android.view.animation.DecelerateInterpolator
import android.widget.ImageView
import androidx.core.content.ContextCompat
import androidx.core.view.isGone
Expand All @@ -43,6 +42,7 @@ import com.duckduckgo.di.scopes.FragmentScope
import com.duckduckgo.mobile.android.R as CommonR
import com.duckduckgo.navigation.api.GlobalActivityStarter
import com.google.android.material.card.MaterialCardView
import com.google.android.material.color.MaterialColors.*
import dagger.android.support.AndroidSupportInjection
import javax.inject.Inject

Expand All @@ -55,7 +55,6 @@ class SingleOmnibarLayout @JvmOverloads constructor(
@Inject
lateinit var globalActivityStarter: GlobalActivityStarter

private val omnibarCard: MaterialCardView by lazy { findViewById(R.id.omniBarContainer) }
private val omnibarCardShadow: MaterialCardView by lazy { findViewById(R.id.omniBarContainerShadow) }
private val iconsContainer: View by lazy { findViewById(R.id.iconsContainer) }
private val shieldIconPulseAnimationContainer: View by lazy { findViewById(R.id.shieldIconPulseAnimationContainer) }
Expand Down Expand Up @@ -185,28 +184,7 @@ class SingleOmnibarLayout @JvmOverloads constructor(
}

private fun animateOmnibarFocusedState(focused: Boolean) {
focusAnimator?.cancel()

val startCardStrokeWidth = omnibarCard.strokeWidth
val endCardStrokeWidth: Int = if (focused) {
omnibarOutlineFocusedWidth
} else {
omnibarOutlineWidth
}

val animator = ValueAnimator.ofFloat(0f, 1f)
animator.duration = DEFAULT_ANIMATION_DURATION
animator.interpolator = DecelerateInterpolator()
animator.addUpdateListener { valueAnimator ->
val fraction = valueAnimator.animatedValue as Float

val animatedCardStrokeWidth = (startCardStrokeWidth + (endCardStrokeWidth - startCardStrokeWidth) * fraction).toInt()

omnibarCard.strokeWidth = animatedCardStrokeWidth
}

animator.start()
focusAnimator = animator
// temporarily disable focus animation
}

private fun onFindInPageShown() {
Expand Down
3 changes: 1 addition & 2 deletions app/src/main/res/layout/view_single_omnibar.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,7 @@
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardElevation="0dp"
app:strokeColor="?daxColorAccentBlue"
app:strokeWidth="@dimen/omnibarOutlineWidth">
app:strokeWidth="0dp">

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/omniBarContentContainer"
Expand Down
1 change: 1 addition & 0 deletions common/common-ui/src/main/java/com/duckduckgo/common/ui/view/ViewExtension.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,4 +300,5 @@ fun View.addBottomShadow(

clipToOutline = false
elevation = shadowSize
setAllParentsClip(false)
}
16 changes: 13 additions & 3 deletions common/common-ui/src/main/res/values/design-system-colors.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
<attr name="daxColorSurface" format="color"/>
<attr name="daxColorContainer" format="color"/>
<attr name="daxColorWindow" format="color"/>
<attr name="daxColorCanvas" format="color"/>
<attr name="daxColorPrimaryText" format="color"/>
<attr name="daxColorPrimaryInvertedText" format="color"/>
<attr name="daxColorSecondaryText" format="color"/>
Expand All @@ -58,6 +59,7 @@
<attr name="daxColorIconDisabled" format="color"/>
<attr name="daxColorDestructive" format="color"/>
<attr name="daxColorLines" format="color"/>
<attr name="daxColorShade" format="color"/>
<attr name="daxColorAccentBlue" format="color"/>
<attr name="daxColorAccentYellow" format="color"/>
<attr name="daxColorAccentContentPrimary" format="color"/>
Expand Down Expand Up @@ -263,9 +265,10 @@
<color name="accent_content_primary_dark">@color/blue80</color>

<!-- Backgrounds -->
<color name="background_background_dark">#27282A</color>
<color name="background_surface_dark">#333538</color>
<color name="background_window_dark">#404145</color>
<color name="background_background_dark">#282828</color>
<color name="background_surface_dark">#373737</color>
<color name="background_window_dark">#474747</color>
<color name="background_canvas_dark">#1F1F1F</color>
<color name="background_container_dark">#404145</color>

<!-- Text -->
Expand All @@ -281,6 +284,9 @@
<!-- Lines-->
<color name="lines_dark">#1FF9F9F9</color>

<!-- Tone -->
<color name="shade_dark">#52171718</color>

<!-- Controls -->
<color name="controls_fill_primary_dark">#1FF9F9F9</color>
<color name="controls_fill_secondary_dark">#2EF9F9F9</color>
Expand All @@ -295,6 +301,7 @@
<color name="background_background_light">#F2F2F2</color>
<color name="background_surface_light">#F9F9F9</color>
<color name="background_window_light">#FFFFFF</color>
<color name="background_canvas_light">#FFFFFF</color>
<color name="background_container_light">#FFFFFF</color>

<!-- Text -->
Expand All @@ -310,6 +317,9 @@
<!-- Lines-->
<color name="lines_light">#171F1F1F</color>

<!-- Tone -->
<color name="shade_light">#8E1F1F1F</color>

<!-- Controls -->
<color name="controls_fill_primary_light">#171F1F1F</color>
<color name="controls_fill_secondary_light">#1F1F1F1F</color>
Expand Down
Loading