Saturday, 5 May 2018

Xamarin forms Lottie Animation [Tutorial 55]

Please watch the tutorial for full implementation.
Step1: Your MainPage.xaml will look Like this
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyNewApp"
xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
x:Class="MyNewApp.MainPage">
<ContentPage.Content>
<StackLayout Padding="30">
<Label Text="Name or Phone Number" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
<Entry Keyboard="Numeric" Placeholder="Enter Authinticated Phone Number Or Name" PlaceholderColor="#CCC" FontSize="20" TextColor="#555" />
<Label Text="Password" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
<Entry Placeholder="Enter correct password" Keyboard="Default" IsPassword="True" FontSize="20" PlaceholderColor="#CCC" TextColor="#555" />
<Button x:Name="BtnLogin" Text="Login" BorderColor="#CB9600" BackgroundColor="#F4B400" />
<forms:AnimationView
x:Name="AnimationView"
Animation="loading.json"
Loop="True"
AutoPlay="True"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
Scale="0.2"/>
</StackLayout>
</ContentPage.Content></ContentPage>
view raw MainPage.xaml hosted with ❤ by GitHub

Step2: Your  MainPage.Xaml.cs will LookLike this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace MyNewApp
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.AnimationView.IsVisible = false;
this.BtnLogin.Clicked += BtnLogin_Clicked;
}
private void BtnLogin_Clicked(object sender, EventArgs e)
{
this.AnimationView.IsVisible = true;
}
}
}
Step3: Android Implementation
AnimationViewRenderer.Init();
Step4: Ios Implementation
AnimationViewRenderer.Init();
Step5:HelpfulLinks
https://www.lottiefiles.com/

No comments:

Post a Comment