Skip to content

[Android] Fixed the CarouselView Items overlap issue with PeekAreaInsets - #27499

Merged
PureWeen merged 7 commits into
dotnet:mainfrom
Ahamed-Ali:fix-27418
Feb 6, 2025
Merged

PureWeen merged 7 commits into
dotnet:mainfrom
Ahamed-Ali:fix-27418

Conversation

@Ahamed-Ali

@Ahamed-Ali Ahamed-Ali commented Jan 31, 2025

Copy link
Copy Markdown
Contributor

Issue

  • When CarouselView is placed inside a VerticalStackLayout with PeekAreaInsets, the items overlap each other. This issue occurs regardless of whether Loop is set to true or false.

Root Cause of the issue

When VerticalStackLayout is used, the OnMeasure method of MauiCarouselRecyclerView is called.

  • In this method, heightMeasureSpec is 0, while widthMeasureSpec has a value.

  • Since the measurement falls into the "Unspecified" condition, both widthMeasureSpec and heightMeasureSpec are recalculated.

  • During this process, when viewHolder.ItemView.Measure is called, SizedItemContentView.OnMeasure is triggered.

  • Inside this method, targetWidth is retrieved from the GetItemWidth method in CarouselViewHandler.Android, which subtracts PeekAreaInsets and ItemSpacing.

  • Due to subsequent calls to OnMeasure in MauiRecyclerView, the MeasuredWidth keeps changing because of incorrect calculations in the "Unspecified" condition.

  • As a result, the recalculated MeasuredWidth in GetItemWidth becomes too small, causing UI overlap.

Description of Change

  • I fixed this by checking if WidthMeasureSpec and HeightMeasureSpec are 0. If they are, then calculated the new measurements using MeasuredWidth and MeasuredHeight. Otherwise, use the already calculated WidthMeasureSpec and HeightMeasureSpec, ensuring proper measurement calculations.

Regressed PR

#25924

Issues Fixed

Fixes #27418

Tested the behaviour in the following platforms

  • Android
  • Windows
  • iOS
  • Mac

Screenshot

Before Issue Fix After Issue Fix
CarouselItemIssue.mov
CarouselViewItemsFix.mov

@dotnet-policy-service dotnet-policy-service Bot added the community ✨ Community Contribution label Jan 31, 2025
@vishnumenon2684 vishnumenon2684 added the partner/syncfusion Issues / PR's with Syncfusion collaboration label Jan 31, 2025
@Ahamed-Ali
Ahamed-Ali marked this pull request as ready for review January 31, 2025 14:33
Copilot AI review requested due to automatic review settings January 31, 2025 14:33
@Ahamed-Ali
Ahamed-Ali requested a review from a team as a code owner January 31, 2025 14:33
@Ahamed-Ali Ahamed-Ali changed the title [Android] Fixed the CarouselView Items OverLap issue with PeekAreaInsets [Android] Fixed the CarouselView Items overlap issue with PeekAreaInsets Jan 31, 2025

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 comments.

Files not reviewed (1)
  • src/Controls/tests/TestCases.HostApp/Issues/Issue27418.xaml: Language not supported

@PureWeen PureWeen added this to the .NET 9 SR4 milestone Jan 31, 2025
@PureWeen PureWeen added the p/0 Current heighest priority issues that we are targeting for a release. label Jan 31, 2025
@PureWeen

PureWeen commented Feb 1, 2025

Copy link
Copy Markdown
Member

/azp run

@azure-pipelines

Copy link
Copy Markdown
Azure Pipelines successfully started running 3 pipeline(s).

@jsuarezruiz

Copy link
Copy Markdown
Contributor

/azp run

@azure-pipelines

Copy link
Copy Markdown
Azure Pipelines successfully started running 3 pipeline(s).

@rmarinho

rmarinho commented Feb 3, 2025

Copy link
Copy Markdown
Member

/rebase

@rmarinho

rmarinho commented Feb 3, 2025

Copy link
Copy Markdown
Member

/azp run

@azure-pipelines

Copy link
Copy Markdown
Azure Pipelines successfully started running 3 pipeline(s).

@dotnet dotnet deleted a comment from Copilot AI Feb 4, 2025
@dotnet dotnet deleted a comment from Copilot AI Feb 4, 2025
Comment thread src/Controls/src/Core/Handlers/Items/Android/MauiCarouselRecyclerView.cs Outdated
@rmarinho rmarinho self-assigned this Feb 4, 2025
@PureWeen

PureWeen commented Feb 5, 2025

Copy link
Copy Markdown
Member

/azp run

@azure-pipelines

Copy link
Copy Markdown
Azure Pipelines successfully started running 3 pipeline(s).

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot reviewed 6 out of 7 changed files in this pull request and generated 1 comment.

Files not reviewed (1)
  • src/Controls/tests/TestCases.HostApp/Issues/Issue27418.xaml: Language not supported
Comments suppressed due to low confidence (1)

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue27418.cs:1

  • Ensure that the test case CarouselItemsShouldRenderProperly is executed on all relevant platforms, and the issue with Catalyst is properly documented and tracked.
#if TEST_FAILS_ON_CATALYST

@PureWeen

PureWeen commented Feb 6, 2025

Copy link
Copy Markdown
Member
  • failing tests are unrelated

@PureWeen
PureWeen merged commit eb71e73 into dotnet:main Feb 6, 2025
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 9, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

community ✨ Community Contribution p/0 Current heighest priority issues that we are targeting for a release. partner/syncfusion Issues / PR's with Syncfusion collaboration

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

CarouselView Rendering Issue with PeekAreaInsets on Android Starting from .NET MAUI 9.0.21

6 participants