RadBorder RotateTo animation overlaps inside controls

[Kyrylo]

Hi, I need to animate my RadBorder. However, when I rotate border to the left, my controls are overlapped. Code is attached. I did it using Frame as a parent element and it works fine.

<telerikPrimitives:RadBorder x:Name="bnSolo" Grid.Row="0" Grid.Column="0"  BorderColor="Yellow" CornerRadius="25">
    <Grid BackgroundColor="Transparent">
        <Image Source="homesolo" VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand" />
        <Label Text="Solo" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
    </Grid>
    <telerikPrimitives:RadBorder.GestureRecognizers>
        <TapGestureRecognizer Tapped="PlayNowButton_Clicked" />
    </telerikPrimitives:RadBorder.GestureRecognizers>
</telerikPrimitives:RadBorder>

 

await bnSolo.RotateTo(25, 500, Easing.Linear);
await bnSolo.RotateTo(-25, 500, Easing.Linear);

[Yana]

Hi Kyrylo,

Thank you for sending the gifs and the snippets.

Still, I would need some additional details on the concrete setup as I have tried to reproduce the erroneous behavior on my side without much success.  Please find attached my sample app using the provided code,  can you download it and test it? 

If you could modify it, so that the issue to be reproduced and send it back to me, that will be of great help in further researching the case.

Please open a support ticket and attach it there, as in the forums only image attachments are allowed.

Thank you for your cooperation on this.

Regards,
Yana
Progress Telerik

[Kyrylo]

Hi, sorry for the late response.

I found where the bug is. If you set corner radius of the rotated border then content is overlapped. Try the code below. I have 2 identical borders, one of them has corner radius property and content is overlapped when border is rotated.

 

We need to have the solution for our app.

<!--OKAY-->
<!--<telerikPrimitives:RadBorder HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Aquamarine" Rotation="15">
    <Label FontSize="16" Text="This border is okay!" HorizontalOptions="Center" VerticalOptions="Center" />
</telerikPrimitives:RadBorder>-->

<!--HAS CORNER RADIUS => BUG-->
<telerikPrimitives:RadBorder HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Aquamarine" Rotation="15" CornerRadius="3">
    <Label FontSize="16" Text="This border is bad!" HorizontalOptions="Center" VerticalOptions="Center" />
</telerikPrimitives:RadBorder>

[Kyrylo]

This issue only happens on Android 8.0. Try to reproduce it on this OS.

[Yana]

Hello Kyrylo,

Thank you for sending the additional details. 

Still, I have difficulties reproducing the described erroneous behavior, I have attached the updated project with the new snippet.  It seems I am missing something here, could you please take a look? Also can you let me know what emulator/device you're testing this on?

Thanks in advance for your cooperation on this.

Regards,
Yana
Progress Telerik

[Kyrylo]

Hi Yana,

 

I've tried your sample. The issue occurs only on Samsung Galaxy A5 2017 with Android 8.0.

You can see in screenshots the same app running on Samsung Galaxy A5 with Android 8.0 and Pixel 3 XL with Android 9.0. Only Samsung has this problem.

 

Probably, it is connected with Android 8.0. Try it by yourself, please.

 

 

 

 

 

[Kyrylo]

We've tested it on Android 8.0 emulator. And the problem stays.

We can infer that the RadBorder bug happens on Android 8.0.

 

 

[Yana]

Hi Kyrylo,

Thank you for sending the additional details - I reproduced the issue on Android 8 emulator. I logged it as a bug report in our public feedback portal,  as the dev team will have to look at it more thoroughly.

Please follow the feedback item below in order to get notified as soon as there's any progress on it:

Border: [Android] Content is overlapped if the border is rotated and CornerRadius is applied on Android 8.

I've also updated your points as small sign of gratitude for your involvement on this.

Regards,
Yana
Progress Telerik

[Kyrylo]

Thank you!