resize image in xamarin without wrapping it in stacklayout

Question

I have a lottie animation that is disabled after it is clicked again.

This is what my lottie animation looks like:

Paused:

Played:

As we can see the actual "Image" size is bigger. My row definition size is "Auto", and HeightRequest="180", WidthRequest="180" for the lottie animation.

What I want to happen here is if the lottie animation is disabled, my image that is overlapped with the animation will be (IsVisible) true.

But even if my HeightRequest="10" and WidthRequest="10" the image looks like this:

How can I achieve it to look like the size of the first image without wrapping it with stacklayout? I dont want to wrap it with stacklayout because I want my UI to be responsive.

If I use this code:

               <StackLayout Grid.Row="2"
                             Grid.ColumnSpan="2"
                             Padding="0,55,0,0">
                    <Image Source="red_record"
                           HeightRequest="85"
                           WidthRequest="85"
                           x:Name="red_record_lottie"                       
                           IsVisible="True"
                           />
                </StackLayout>

It will look like the desired output (for the UI):

But we know that the code will not make it responsive. How can I make it responsive?

Answer 1

try using a frame since the image is circular u can have a frame and change the corner radius to make a circle.

https://montemagno.com/xamarin-forms-how-to-clip-images-with-rounded-corners/

this might help u and further explain my point of view

Answer 2

According to your description, you just want to get the desire image size, I suggest you can use Grid and Frame to get it.The CornerRadius property of the Frame control can be used to create a circle image.

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Frame
            Margin="10"
            BorderColor="Black"
            CornerRadius="50"
            HorizontalOptions="Center"
            IsClippedToBounds="True"
            VerticalOptions="Center">
            <Image
                Margin="-20"
                Aspect="AspectFill"
                HeightRequest="100"
                Source="a11.jpg"
                WidthRequest="100" />
        </Frame>
    </Grid>

You can also just use Frame to circle image, to set Frame's HeightRequest and WidthRequest

 <Frame
        Margin="10"
        BorderColor="Black"
        CornerRadius="50"
        HeightRequest="60"
        HorizontalOptions="Center"
        IsClippedToBounds="True"
        VerticalOptions="Center"
        WidthRequest="60">
        <Image
            Margin="-20"
            Aspect="AspectFill"
            HeightRequest="100"
            Source="a11.jpg"
            WidthRequest="100" />
    </Frame>

Answer 3

Well... as ironic as it may sound, I have found a solution just now... and I wrapped it with stacklayout 😅😅

This is the code that worked for me:

                <StackLayout Grid.Row="2"
                             Grid.ColumnSpan="2"
                             Padding="0,0,0,0">

                <forms:AnimationView x:Name="blue_record_lottie"                                                 
                                     Animation="blue_record.json" 
                                     Loop="True" 
                                     AutoPlay="False" 
                                     HeightRequest="180"
                                     WidthRequest="180"
                                     Margin="0,10,0,10"                                     
                                     OnClick="blue_record_lottie_OnClick"/>


                    <Image Source="dark_red_rec"
                           HeightRequest="85"
                           WidthRequest="85"
                           Margin="0,55,0,60"
                           x:Name="red_record_lottie"                       
                           IsVisible="False"/>
                </StackLayout>

I am also surprised and I have proven this by testing on my emulator (Pixel Pie 2: 1080x1920), and my physical device (samsung galaxy core: 480 x 800).

On my Pixel Pie:

On my Samsung Galaxy Core: