Splash screen Like Swiggy App

 

Splash screen like swiggy app

Please, support my blog by clicking on our sponsors ad!

Create splashscreen

Code explain in this video

LandingPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SwiggyAppDesign.Views.LandingPage"
             BackgroundColor="white">
    <ContentPage.Content>
        <Grid RowDefinitions="*"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="20">
            <Grid x:Name="grid" Grid.Row="0"  RowSpacing="20" RowDefinitions="Auto,Auto,Auto,Auto" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
                <Image Grid.Row="0" x:Name="imgLocation" Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhki-Vp62cfVDKUCqkC-rva8E_GenM0blA-g" Aspect="AspectFit"></Image>
                <Label x:Name="lblDeliver" Text="DELIVERING TO" Grid.Row="1" HorizontalOptions="Center" TextColor="Gray"></Label>
                <StackLayout x:Name="sl" HorizontalOptions="Center" Grid.Row="2" Orientation="Horizontal">
                    <Image WidthRequest="20"  HeightRequest="20" Source="https://png.monster/wp-content/uploads/2021/06/png.monster-10-252x370.png" Aspect="AspectFit"></Image>
                    <Label Text="Other" TextColor="Black" FontSize="20" FontAttributes="Bold"></Label>
                </StackLayout>
                <Label x:Name="lblAddress" Grid.Row="3" Text="Agarwal Complex, S-524, First Floor, behind TVS Showroom, Laxmi Nagar, New Delhi, Delhi 110092" 
                       TextColor="Black"></Label>
            </Grid>
            <Image x:Name="img" Grid.Row="0" Source="splashscreen.png" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Aspect="AspectFill"></Image>
        </Grid>
    </ContentPage.Content>
</ContentPage>

LandingPage.xaml.cs

    public partial class LandingPage : ContentPage
    {
        public LandingPage()
        {
            InitializeComponent();
            AnimationLogo();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();


        }

        public async void AnimationLogo()
        {
            double _scale = 0;
            _scale = imgLocation.Scale;
            await imgLocation.ScaleTo(0, 0);

            await lblDeliver.TranslateTo(0, 400, 0);
            await sl.TranslateTo(0, 400, 0);
            await lblAddress.TranslateTo(0, 400, 0);


            await img.ScaleTo(0.5, 200);
            await img.TranslateTo(img.X, -200, 300, Easing.Linear);
            await img.TranslateTo(0, -80, 300, Easing.Linear);


            //img.IsVisible = false;
            // grid.IsVisible = true;
            uint speed = 400;
            var path1Anim = new Animation(_ => img.ScaleTo(0, speed));
            var path2Anim = new Animation(_ => imgLocation.ScaleTo(_scale, speed));
            var path3Anim = new Animation(_ => lblDeliver.TranslateTo(0, 0, speed));
            var path4Anim = new Animation(_ => lblAddress.TranslateTo(0, 0, speed));
            var path5Anim = new Animation(_ => sl.TranslateTo(0, 0, speed));
            var masterAnimation = new Animation
            {
                { 0, 1, path1Anim },
                { 0, 1, path2Anim },
                { 0, 1, path3Anim },
                { 0, 1, path4Anim },
                { 0, 1, path5Anim },
            };
            masterAnimation.Commit(this, "MyAnim");

            //  await imgLocation.ScaleTo(_scale, 300);



        }
    }

Code explain in this video

Please share your feedback in comment section.