Forum› Xamarin.Forms

How to improve the response speed of the button just tapped ?

betcssbetcss Member ✭✭
edited September 2020 in Xamarin.Forms

So I have the standard TapGestureRecognizer nested within an Image view and the point is that after tapping that button it changes its source color. Here is the thing; I'm noticing that the transition is very slow or after that initial tap, at least few seconds pass between the button transition.

Is caching the image solution or what technique could I use to make it an instant occurrence ?

Thanks

Tagged:

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    the point is that after tapping that button it changes its source color.

    Can you share this part of code? I change the Image and ImageView's background color, both of them are changed quickly. Here is running GIF.

    Here is code.

     <StackLayout>
        <ImageButton WidthRequest="200" HeightRequest="200" BackgroundColor="Red"  Clicked="ImageButton_Clicked">

        </ImageButton>

        <Image WidthRequest="200" HeightRequest="200"  BackgroundColor="Aquamarine" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </Image.GestureRecognizers>
        </Image>


    </StackLayout>

background code.

      private void ImageButton_Clicked(object sender, EventArgs e)
        {
            var imageButton=sender as ImageButton;
            imageButton.BackgroundColor = Color.Blue;
        }

        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
            var image = sender as Image;
                image.BackgroundColor = Color.Gray;
        }

    If you set your source from Uri by UriImageSource , UriImageSource have a property called CachingEnabled = false.

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#downloaded-image-caching

  • betcssbetcss Member ✭✭
    edited September 2020

    I'm working with the local png icon images and how can I cache these ?

    XAML:

                    <StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="2" >
                    <Image Source="sharp_favorite_border_black_24.png" x:Name="Image"  Margin="0,-1,0,0">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="ButtonFavouriteToggle_Clicked" NumberOfTapsRequired="1"/>
                        </Image.GestureRecognizers>
                    </Image> 
                </StackLayout>

    Code behind:

     private async void ButtonFavouriteToggle_Clicked(object sender, EventArgs e)
        {
            if (_SelectedLocation != null)
            {
                 SelectedLocation.VM.ToggleFavourite();

                if (SelectedLocation.VM.IsFavourite)
                {               
                    Image.Source = "sharp_favorite_black_24";
                }
                else
                {                
                    Image.Source = "sharp_favorite_border_black_24";
                }
            }           
        }

    This is the speed demonstrated through another app that I'm after

  • igorkr_10igorkr_10 Member ✭✭✭✭
    edited September 2020

    What is that Task.Delay? Did you try without it?

  • betcssbetcss Member ✭✭
    edited September 2020

    Hey, it's nothing, the same had been without these.

    In the gif above the red heart appears almost immediately upon the tap/click whereas my implementation adds 1-2 seconds
    of delay, that is without those Task.Delay statements.

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    I test your code in my demo, it could running normally, here is running gif.

    I notice you used async in ButtonFavouriteToggle_Clicked, do you have some logic code? After the logic code, then you can get SelectedLocation.VM.IsFavourite state?

    If u used a static flag like me, if this issue will disappear.

     bool IsFavourite = false;
        private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
            var image = sender as Image;


            IsFavourite = !IsFavourite;

            if (IsFavourite)
            {
                image.Source = "StarChecked";
            }
            else
            {
                image.Source = "StarUnchecked";
            }
        }
  • betcssbetcss Member ✭✭
    edited September 2020

    I'm toggling the favorite variable from the ViewModel with if (SelectedLocation.VM.IsFavourite)
    that's it, but it's still the same slowness. Can it be that the VM retrieval adds the latency to the responsiveness?

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Can it be that the VM retrieval adds the latency to the responsiveness?

    It seems not, in your GIF, when you click the Image, then screen is grey, show a loading(pink three dots). Can you try to remove this part of code, then make a test.

  • betcssbetcss Member ✭✭
    edited September 2020

    Hey no you got that wrong, that's not my app - it was just a test on another commercial app in how rapidly it can respond to the tap. That's how I would like my app to tap-respond. Thanks anyways for the effort.

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Can you share a demo that could reproduce this issue?

  • betcssbetcss Member ✭✭
    edited September 2020

    I can show you a gif of my issue, however I'll send you a reminder on the pm since I'm away at the moment; thanks again.

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Ok, watting for your update.

Sign In or Register to comment.