Skip to content

[Android] Gradient background with ImageButton#26297

Merged
jfversluis merged 2 commits intodotnet:inflight/currentfrom
kubaflo:fix-23119
Aug 12, 2025
Merged

[Android] Gradient background with ImageButton#26297
jfversluis merged 2 commits intodotnet:inflight/currentfrom
kubaflo:fix-23119

Conversation

@kubaflo
Copy link
Contributor

@kubaflo kubaflo commented Dec 1, 2024

Issues Fixed

Fixes #23119

<ImageButton
        AutomationId="imageButton"
        WidthRequest="100"
        HeightRequest="100"
        HorizontalOptions="Center">
        <ImageButton.Background>
                <RadialGradientBrush
                        Center="0.5,0.5"
                        Radius="0.5">
                        <GradientStop
                                Color="green"
                                Offset="0.0"/>
                        <GradientStop
                                Color="red"
                                Offset="1.0"/>
                </RadialGradientBrush>
        </ImageButton.Background>
</ImageButton>
Before After

@kubaflo kubaflo requested a review from a team as a code owner December 1, 2024 18:40
@kubaflo kubaflo requested review from Eilon and rmarinho December 1, 2024 18:40
@dotnet-policy-service dotnet-policy-service bot added the community ✨ Community Contribution label Dec 1, 2024
@dotnet-policy-service
Copy link
Contributor

Hey there @kubaflo! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

@jsuarezruiz
Copy link
Contributor

/rebase

@jsuarezruiz
Copy link
Contributor

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@kubaflo kubaflo self-assigned this Mar 23, 2025
@jfversluis
Copy link
Member

jfversluis commented Aug 7, 2025

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@jfversluis jfversluis added this to the .NET 9 SR11 milestone Aug 7, 2025
@mattleibow mattleibow requested a review from jsuarezruiz August 8, 2025 14:52
@mattleibow mattleibow dismissed jsuarezruiz’s stale review August 8, 2025 14:52

Image was updated

Copy link
Member

@jfversluis jfversluis left a comment

Choose a reason for hiding this comment

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

Still see a relevant test failure

VisualTestUtils.VisualTestFailedException :
Snapshot different than baseline: GradientBackgroundShouldWorkWithImageButton.png (size differs - baseline is 1920x1080 pixels, actual is 789x563 pixels)
If the correct baseline has changed (this isn't a a bug), then update the baseline image.
See test attachment or download the build artifacts to get the new snapshot file.

Copilot AI review requested due to automatic review settings August 11, 2025 17:54
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR fixes an issue where ImageButton controls on Android were not properly displaying gradient backgrounds, showing solid colors instead of the expected gradients. The fix involves updating the background when the ImageButton's layout changes.

  • Adds a layout change event handler to the Android ImageButton handler to trigger background updates
  • Includes comprehensive UI tests to verify gradient background functionality
  • Tests both RadialGradientBrush and LinearGradientBrush with ImageButton and Button controls

Reviewed Changes

Copilot reviewed 4 out of 8 changed files in this pull request and generated no comments.

File Description
src/Core/src/Handlers/ImageButton/ImageButtonHandler.Android.cs Adds layout change event handling to properly update gradient backgrounds on Android
src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue23119.cs Implements automated UI test to verify gradient background rendering
src/Controls/tests/TestCases.HostApp/Issues/Issue23119.xaml.cs Creates test page code-behind for the gradient background issue reproduction
src/Controls/tests/TestCases.HostApp/Issues/Issue23119.xaml Defines XAML test page with various gradient background scenarios for validation

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@jfversluis jfversluis changed the base branch from main to inflight/current August 12, 2025 09:27
@jfversluis jfversluis merged commit 0cc57d8 into dotnet:inflight/current Aug 12, 2025
126 of 129 checks passed
github-actions bot pushed a commit that referenced this pull request Aug 15, 2025
* Gradient background with ImageButton

* Update GradientBackgroundShouldWorkWithImageButton.png
github-actions bot pushed a commit that referenced this pull request Aug 15, 2025
* Gradient background with ImageButton

* Update GradientBackgroundShouldWorkWithImageButton.png
github-actions bot pushed a commit that referenced this pull request Aug 19, 2025
* Gradient background with ImageButton

* Update GradientBackgroundShouldWorkWithImageButton.png
github-actions bot pushed a commit that referenced this pull request Aug 22, 2025
* Gradient background with ImageButton

* Update GradientBackgroundShouldWorkWithImageButton.png
@github-actions github-actions bot locked and limited conversation to collaborators Sep 12, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area-controls-button Button, ImageButton community ✨ Community Contribution platform/android

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Assigning a Brush of type RadialGradientBrush to the Background property of an ImageButton causes the BG to show a solid color

3 participants