Note
I am using visual studio 2022, if your visual studio not showing the below templates then need to install Mobile development with .net package. I don't have a mac machine that's the reason I am creating this demo only for android (all other shared library projects same for both android & ios) please refer official Microsoft website: https://docs.microsoft.com/en-us/xamarin/get-started/installation/windows
Step 1
Create a new xamarin forms project & Select Mobile App(Xamarin.Forms)
![]()
Step 2
Configure your new project with Project name & Project Location
![]()
Step 3
Select project template, we are going with the Flyout template (tick below both android & iOs option (I plan to develop for))
![]()
Step 4
3 Projects were created in solution (1 for shared library project, 2 android native project & 3rd iOS Native Project)
![]()
Step 5
Now go to Android project & Create Splash screen activity class & also add splash screen image under android & ios Resources Folder
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Android.Widget;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace hybridandroid.Droid
{
[Activity(Theme = "@style/Theme.Splash",
MainLauncher = true,
NoHistory = true)]
public class SplashActivity : Activity
{
// static readonly string TAG = "X:" + typeof(SplashActivity).Name;
public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
{
base.OnCreate(savedInstanceState, persistentState);
// Log.Debug(TAG, "SplashActivity.OnCreate");
}
// Launches the startup task
protected override void OnResume()
{
base.OnResume();
Task startupWork = new Task(() => { SimulateStartup(); });
startupWork.Start();
}
// Simulates background work that happens behind the splash screen
async void SimulateStartup()
{
// Log.Debug(TAG, "Performing some startup work that takes a bit of time.");
await Task.Delay(7000); // Simulate a bit of startup work.
// Log.Debug(TAG, "Startup work is finished - starting MainActivity.");
StartActivity(new Intent(Application.Context, typeof(MainActivity)));
}
//protected override void OnCreate(Bundle savedInstanceState)
//{
//// SplashScreen
// base.OnCreate(savedInstanceState);
// System.Threading.Thread.Sleep(3000);
// StartActivity(typeof(MainActivity));
// // Create your application here
//}
}
}
Step 6
Now go to MainActitivty.cs class (if any dll require then download from nuget package manager)
using Android.App;
using Android.Content;
using Android.Content.PM;
using Android.OS;
using Android.Runtime;
using Android.Security.Keystore;
using Android.Views;
using Android.Widget;
using Card.IO;
using FFImageLoading.Forms.Platform;
using Java.Security;
using Javax.Crypto;
using Plugin.FirebasePushNotification;
using System;
using System.Net;
using Xamarin.Forms;
using Xamd.ImageCarousel.Forms.Plugin.Droid;
namespace hybridandroid.Droid
{
[Activity(Label = "S Bank7", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = false, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Touchscreen)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
// static readonly int ConfirmRequestId = 1;
internal static readonly string CHANNEL_ID = "SBank7";
internal static readonly int NOTIFICATION_ID = 8777;
KeyguardManager keyguardManager;
static readonly int ConfirmRequestId = 1;
void ShowAuthenticationScreen()
{
try
{
var intent = keyguardManager.CreateConfirmDeviceCredentialIntent("Unlock Sbank7 Enter PIN , Password , Pattern , Fingure Print", "S bank7 application will make your life easier 8777 , Email Us: [email protected]");
if (intent != null)
{
StartActivityForResult(intent, ConfirmRequestId);
}
}
catch { }
}
// const string KeyName = "AStauil8777";
App app;
protected override void OnResume()
{
base.OnResume();
// MessagingCenter.Send<Object>(new Object(), "StartLongRunningTaskMessage");
}
public void StartMyRequestService()
{
//var serviceToStart = new Intent(this, typeof(DependentService));
//StartService(serviceToStart);
}
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
ZXing.Net.Mobile.Forms.Android.Platform.Init();
// NotificationCenter.CreateNotificationChannel();
// NotificationCenter.NotifyNotificationTapped(Intent);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
Xam.Forms.VideoPlayer.Android.VideoPlayerRenderer.Init();
// FFImageLoading.Forms.Platform.CachedImageRenderer.Init();
CachedImageRenderer.Init(true);
Plugin.LocalNotifications.LocalNotificationsImplementation.NotificationIconId = Resource.Drawable.icon;
FirebasePushNotificationManager.ProcessIntent(this, Intent);
ImageCarouselRenderer.Init();
FFImageLoading.Forms.Platform.CachedImageRenderer.Init(true);
//...Activity creation
keyguardManager = (KeyguardManager)GetSystemService(Context.KeyguardService);
if (!keyguardManager.IsKeyguardSecure)
{
// Show a message that the user hasn't set up a lock screen.
//LoadApplication(new App());
app = new App();
LoadApplication(app);
// CreateNotificationChannel();
//loadservice();
StartMyRequestService();
}
else
{
//We are free to create our Cyrpto Key
// CreateKey();
}
ShowAuthenticationScreen();
}
void CreateNotificationChannel()
{
if (Build.VERSION.SdkInt < BuildVersionCodes.O)
{
// Notification channels are new in API 26 (and not a part of the
// support library). There is no need to create a notification
// channel on older versions of Android.
return;
}
var channel = new NotificationChannel(CHANNEL_ID, "FCM Notifications", NotificationImportance.Default)
{
Description = "Firebase Cloud Messages appear in this channel",
};
channel.EnableVibration(true);
channel.EnableLights(true);
var notificationManager = (NotificationManager)GetSystemService(NotificationService);
notificationManager.CreateNotificationChannel(channel);
}
private void loadservice()
{
MessagingCenter.Subscribe<Object>(this, "StartLongRunningTaskMessage", (sender) => {
Intent myIntent = new Intent(this, typeof(SqlService));
this.StartService(myIntent);
});
MessagingCenter.Subscribe<Object>(this, "StopLongRunningTaskMessage", (sender) => {
Intent myIntent = new Intent(this, typeof(SqlService));
this.StopService(myIntent);
});
}
protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
{
base.OnActivityResult(requestCode, resultCode, data);
if (data != null)
{
// Be sure to JavaCast to a CreditCard (normal cast won‘t work)
InfoShareHelper.Instance.CardInfo = data.GetParcelableExtra(CardIOActivity.ExtraScanResult).JavaCast<CreditCard>();
}
else
{
Console.WriteLine("Scanning Canceled!");
}
if (requestCode == ConfirmRequestId)
{
// Credentials entered successfully!
if (resultCode == Result.Ok)
{
app = new App();
LoadApplication(app);
}
else
{
ShowAuthenticationScreen();
}
}
}
public override void OnBackPressed()
{
if (app.DoBack)
{
base.OnBackPressed();
}
}
protected override void OnNewIntent(Intent intent)
{
base.OnNewIntent(intent);
FirebasePushNotificationManager.ProcessIntent(this, intent);
}
public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
{
Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
global::ZXing.Net.Mobile.Android.PermissionsHandler.OnRequestPermissionsResult(requestCode, permissions, grantResults);
// PermissionsImplementation.Current.OnRequestPermissionsResult(requestCode, permissions, grantResults);
base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
}
}
}
Step 7
Now run application & check splash screen
![]()
Step 8
Go to hybridAndroid shared project & Open AppShell.xaml Page To configure menu & other color styles settings
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:hybridandroid.Views"
xmlns:vm="clr-namespace:hybridandroid.ViewModels"
Title="hybridandroid"
x:Class="hybridandroid.AppShell" FlyoutBehavior="Flyout"
FlyoutBackgroundColor="AntiqueWhite"
FlyoutBackgroundImageAspect="AspectFill" FlyoutHeaderBehavior="CollapseOnScroll">
<!--FlyoutIcon="splash.png" FlyoutBackgroundImage="bank.png"-->
<!--
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
The overall app visual hierarchy is defined here, along with navigation.
https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
-->
<!--<TabBar IsEnabled="True" IsVisible="True">
<Tab Title="Profile" Icon="icon.png">
<ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</Tab>
</TabBar>-->
<Shell.BindingContext>
<vm:AppShellModel />
</Shell.BindingContext>
<Shell.FlyoutHeaderTemplate FlyoutHeaderBehavior="CollapseOnScroll">
<DataTemplate x:Name="Dtname" >
<Grid BackgroundColor="#393e46" Padding="10,0,10,0"
HeightRequest="200">
<!--<ContentView Padding="0,0,0,0" VerticalOptions="Fill" BackgroundColor="#393e46">
<Image Source="splash.png" VerticalOptions="Fill" HeightRequest="170" WidthRequest="200" />
</ContentView>-->
<Frame Padding="0" CornerRadius="140" HeightRequest="200" BorderColor="White" WidthRequest="150" HorizontalOptions="Center"
IsClippedToBounds="True">
<Image Source="splash.png" x:Name="imguser1" VerticalOptions="Center" HeightRequest="150" BackgroundColor="#393e46" />
</Frame>
</Grid>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="AntiqueWhite" />
<Setter Property="Shell.ForegroundColor" Value="Black" />
<Setter Property="Shell.TitleColor" Value="Black" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="Black" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
<!--
Default Styles for all Flyout Items
https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyoutitem-and-menuitem-style-classes
-->
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="White"></Setter>
</Style>
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{x:OnPlatform UWP=Transparent, iOS=White}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Black" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<!--
Custom Style you can apply to any Flyout Item
-->
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Shell.Resources>
<ShellItem Route="LoginPage" x:Name="loginName" IsVisible="True" FlyoutItemIsVisible="False">
<ShellContent Shell.FlyoutBehavior="Disabled" ContentTemplate="{DataTemplate local:LoginPage}"/>
</ShellItem>
<FlyoutItem Route="main" Title="Home" Icon="BtoB.png" >
<ShellContent x:Name="Mainmenu" ContentTemplate="{DataTemplate local:Home}" />
</FlyoutItem>
<FlyoutItem Title="About You" Icon="icon_about.png" >
<ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>
<FlyoutItem Title="Debit Card" Icon="Debit_Card.png">
<ShellContent Route="virtualcard" ContentTemplate="{DataTemplate local:VirtualCard}"/>
</FlyoutItem>
<!--<FlyoutItem Title="Browse" Icon="icon_feed.png">
<ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>-->
<FlyoutItem Title="? Transfer Money" Icon="Pay.png" >
<ShellContent Route="TransferPay" ContentTemplate="{DataTemplate local:TransferPay}"/>
</FlyoutItem>
<FlyoutItem Title="? Pay To Contact" Icon="MtoM.png" >
<ShellContent Route="ToContactPay" ContentTemplate="{DataTemplate local:ToContactPay}"/>
</FlyoutItem>
<FlyoutItem Title="? Transaction Summary" Icon="bank_1.png">
<ShellContent Route="TransactionSummary" ContentTemplate="{DataTemplate local:TransactionSummary}" />
</FlyoutItem>
<FlyoutItem Title="? Transaction History" Icon="Summary.png">
<ShellContent Route="TransactionHistory" ContentTemplate="{DataTemplate local:TransactionHistory}" />
</FlyoutItem>
<FlyoutItem Title="ChartView Transaction" Icon="Charts.png">
<ShellContent Route="ChartView" ContentTemplate="{DataTemplate local:ChartView}" />
</FlyoutItem>
<FlyoutItem Title="Scan And Pay" Icon="Scan.png">
<ShellContent Route="ScanPay" ContentTemplate="{DataTemplate local:ScanPay}" />
</FlyoutItem>
<FlyoutItem Title="My QR Code" Icon="QR.png">
<ShellContent Route="MyQrCode" ContentTemplate="{DataTemplate local:MyQrCode}" />
</FlyoutItem>
<FlyoutItem Title="Generate QR" Icon="GenQR.png">
<ShellContent Route="GenQRAmt" ContentTemplate="{DataTemplate local:GenQRAmt}" />
</FlyoutItem>
<FlyoutItem Title="Sbank Hospital" Icon="Hos.png">
<ShellContent Route="Hos" ContentTemplate="{DataTemplate local:SbankHos7}" />
</FlyoutItem>
<FlyoutItem Title="Sbank Youtube" Icon="YouTube.png">
<ShellContent Route="YouTube" ContentTemplate="{DataTemplate local:YouTube}" />
</FlyoutItem>
<FlyoutItem Title="My Csharp Corner" Icon="Csharp.png">
<ShellContent Route="Csharp" ContentTemplate="{DataTemplate local:Csharp}" />
</FlyoutItem>
<FlyoutItem Title="My Blog" Icon="MSSQL.png">
<ShellContent Route="blog" ContentTemplate="{DataTemplate local:MyBlog}" />
</FlyoutItem>
<FlyoutItem Title="Send Email" Icon="Mail.png">
<ShellContent Route="SenEmail" ContentTemplate="{DataTemplate local:SenEmail}" />
</FlyoutItem>
<FlyoutItem Title="Make Call" Icon="Contact.png">
<ShellContent Route="MakeCall" ContentTemplate="{DataTemplate local:MakeCall}" />
</FlyoutItem>
<FlyoutItem IsVisible="True" Title="Device Mgmt" Icon="DeviceInfo.png" FlyoutItemIsVisible="True">
<ShellContent Route="DeviceManagerInfo" ContentTemplate="{DataTemplate local:DeviceManagerInfo}" />
</FlyoutItem>
<FlyoutItem Title="Developer Details" Icon="Dev.png">
<ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:DeveloperDetails}" />
</FlyoutItem>
<FlyoutItem IsVisible="False" Title="Developer Details" Icon="Dev.png" FlyoutItemIsVisible="False">
<ShellContent Route="TranS" ContentTemplate="{DataTemplate local:TranS}" />
</FlyoutItem>
<FlyoutItem Title="Learn from Sbank7" Icon="Learn.png" IsVisible="True" IsEnabled="True" FlyoutItemIsVisible="True">
<ShellContent Route="learn" ContentTemplate="{DataTemplate local:Learn}"/>
</FlyoutItem>
<FlyoutItem Title="Come soon" Icon="ComeSoon.png" IsVisible="True" IsEnabled="False" FlyoutItemIsVisible="True">
<ShellContent Route="ScanPayScreen" ContentTemplate="{DataTemplate local:ScanPayScreen}"/>
</FlyoutItem>
<!--<FlyoutItem>
<Tab Title="Check Balance" Icon="TransferPay.png">
<ShellContent Route="learn" ContentTemplate="{DataTemplate local:Learn}"/>
</Tab>
</FlyoutItem>-->
<!--<FlyoutItem IsVisible="False" Title="Developer Details" Icon="Dev.png" FlyoutItemIsVisible="False">
<ShellContent Route="ContactPopup" ContentTemplate="{DataTemplate local:ContactPopup}" />
</FlyoutItem>-->
<MenuItem Text="Logout" IconImageSource="Logout.png" StyleClass="MenuItemLayoutStyle" Clicked="OnMenuItemClicked">
</MenuItem>
<!--<Shell.MenuItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Image Margin="30,10,20,10" Source="{Binding Icon}" WidthRequest="22" HeightRequest="22" HorizontalOptions="Start" VerticalOptions="Center">
</Image>
<Label Text="{Binding Title}" TextColor="#686868" FontSize="16" VerticalTextAlignment="Center"></Label>
</StackLayout>
</DataTemplate>
</Shell.MenuItemTemplate>-->
<Shell.FlyoutFooterTemplate >
<DataTemplate >
<StackLayout HeightRequest="50" BackgroundColor="WhiteSmoke">
<Label Text="|App v:8777| |Copyright : @Sbank 8777|" HorizontalOptions="Center" VerticalOptions="Center" TextColor="Green"></Label>
<Label Text="Copyright : @Sbank 8777" HorizontalOptions="Center" VerticalOptions="Center" TextColor="Orange"></Label>
</StackLayout>
</DataTemplate>
</Shell.FlyoutFooterTemplate>
<!--<Shell.FlyoutContent>
<xct:TabView TabStripPlacement="Bottom" TabContentBackgroundColor="Blue">
<xct:TabViewItem Text="Settings">
<Grid>
<Label HorizontalOptions="Center" VerticalOptions="Center"></Label>
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Shell.FlyoutContent>-->
<!--
TabBar lets you define content that won't show up in a flyout menu. When this content is active
the flyout menu won't be available. This is useful for creating areas of the application where
you don't want users to be able to navigate away from. If you would like to navigate to this
content you can do so by calling
await Shell.Current.GoToAsync("//LoginPage");
--><!--
<TabBar>
<ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
</TabBar>-->
<!-- Optional Templates
// These may be provided inline as below or as separate classes.
// This header appears at the top of the Flyout.
// https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyout-header
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<Grid>ContentHere</Grid>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
// ItemTemplate is for ShellItems as displayed in a Flyout
// https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-flyoutitem-appearance
<Shell.ItemTemplate>
<DataTemplate>
<ContentView>
Bindable Properties: Title, Icon
</ContentView>
</DataTemplate>
</Shell.ItemTemplate>
// MenuItemTemplate is for MenuItems as displayed in a Flyout
// https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-menuitem-appearance
<Shell.MenuItemTemplate>
<DataTemplate>
<ContentView>
Bindable Properties: Text, Icon
</ContentView>
</DataTemplate>
</Shell.MenuItemTemplate>
-->
</Shell>
Now go to AppShell.cs page & write logic,
using hybridandroid.Views;
using MediaManager.Forms;
using Plugin.Connectivity;
using System;
using Xamarin.Forms;
namespace hybridandroid
{
public partial class AppShell : Xamarin.Forms.Shell
{
public AppShell()
{
InitializeComponent();
// Routing.RegisterRoute(nameof(ItemDetailPage), typeof(ItemDetailPage));
// Routing.RegisterRoute(nameof(NewItemPage), typeof(NewItemPage));
Routing.RegisterRoute(nameof(RegistrationPage), typeof(RegistrationPage));
Routing.RegisterRoute(nameof(TranS), typeof(TranS));
Routing.RegisterRoute(nameof(GenQRAmt), typeof(GenQRAmt));
if (!CrossConnectivity.Current.IsConnected)
{
DisplayAlert("Network Error", "Please check internet connection", "Ok", "Abort");
}
BindingContext = this;
}
public void BindMasterDetails()
{
try
{
// Dtname.ToImageSource(App.Image);
}
catch (Exception)
{
throw;
}
}
private async void OnMenuItemClicked(object sender, EventArgs e)
{
App.UserName = "";
await Common.TextTOSpech("Are you sure you want to logout this application..");
var Happen = await DisplayAlert("Warning", "Are you sure you want to logout this application", "Yes", "No");
if (Happen)
{
App.CEmail = string.Empty;
App.PASS = string.Empty;
Application.Current.MainPage = new AppShell();
await Shell.Current.GoToAsync("//LoginPage");
}
// loginName.IsVisible = false;
}
}
}
Step
Right click on View folder and add content page & give name (Login.xaml)
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:ButtonCircle.FormsPlugin.Abstractions;assembly=ButtonCircle.FormsPlugin.Abstractions"
mc:Ignorable="d"
x:Class="hybridandroid.Views.LoginPage" BackgroundColor="AntiqueWhite"
Shell.NavBarIsVisible="False">
<ContentPage.Content>
<AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout VerticalOptions="Center">
<ContentView Padding="0,10,0,10" VerticalOptions="Fill" BackgroundColor="#393e46">
<Image Source="splash.png" VerticalOptions="Center" HeightRequest="190" WidthRequest="200" />
</ContentView>
<Entry x:Name="Txt_UseName" Placeholder="User Email" TextColor="Green" BackgroundColor="AntiqueWhite" FontFamily="Mulish" VerticalTextAlignment="Center" PlaceholderColor="Purple" HorizontalTextAlignment="Center" HeightRequest="58"></Entry>
<Entry x:Name="Txt_Password" IsPassword="True" TextColor="Green" BackgroundColor="AntiqueWhite" Placeholder="Password" PlaceholderColor="Purple" VerticalTextAlignment="Center" HeightRequest="58" HorizontalTextAlignment="Center"></Entry>
<controls:CircleButton Icon="md-vpn-key" FontSize="25" TextColor="White" HorizontalOptions="Center"
HeightRequest="50" WidthRequest="50" BorderRadius="50"
BorderColor="Purple" BorderThickness="7" Text="Login" BackgroundColor="Black" Clicked="Button_Clicked"/>
<Label Text="Get email / Forget password" FontFamily="Mulish"
x:Name="GetEmail"
TextColor="Black"
FontSize="20"
Margin="0"
HorizontalTextAlignment="Center"
TextDecorations="Underline" FontAttributes="Bold">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/>
</Label.GestureRecognizers>
</Label>
<Label Text="Don't have account please Register here" FontFamily="Mulish"
x:Name="RegistrationBtn"
TextColor="Black"
Margin="10"
HorizontalTextAlignment="Center"
FontSize="20"
TextDecorations="Underline" FontAttributes="Bold">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Label.GestureRecognizers>
</Label>
<Label Text=" S bank7 User Manual" FontFamily="Mulish"
x:Name="btnuseapp"
TextColor="White" BackgroundColor="#494f20"
Margin="0" FontSize="18"
HorizontalTextAlignment="Center"
TextDecorations="Underline" FontAttributes="Bold">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_2"/>
</Label.GestureRecognizers>
</Label>
<Label Text=" S bank7 video User Manual" IsVisible="True" FontFamily="Mulish"
x:Name="btnuseappVdoDemo"
TextColor="White" BackgroundColor="#494f20"
Margin="0" FontSize="18"
HorizontalTextAlignment="Center"
TextDecorations="Underline" FontAttributes="Bold">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_3"/>
</Label.GestureRecognizers>
</Label>
<StackLayout Margin="0" Padding="10,80,0,0">
<Label Text="App v: Release 8777" FontFamily="Mulish" HorizontalOptions="Center" VerticalOptions="Center" TextColor="Green" TextDecorations="Underline"></Label>
<Label Text="Copyright : @Sbank 8777" FontFamily="Mulish" HorizontalOptions="Center" VerticalOptions="Center" TextColor="Orange" TextDecorations="Strikethrough"></Label>
<Label TextColor="Black" FontFamily="Mulish" Text="Note : This is Secure login with web please do not share youre User name and password..! This App handle and developed by Sai 8777"></Label>
<Label FontFamily="Mulish" Text="* This App handle and developed by Sai 8777 *" HorizontalOptions="Center" VerticalOptions="Center"></Label>
</StackLayout>
</StackLayout>
<ContentView x:Name="poploadingView" Padding="10,0" IsVisible="False" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout Orientation="Vertical" HeightRequest="150" WidthRequest="200">
<ActivityIndicator x:Name="activityindicator"
Margin="0,190,0,0" VerticalOptions="Center" HorizontalOptions="Center"
Color="Black" IsRunning="True"
WidthRequest="50" HeightRequest="50"></ActivityIndicator>
</StackLayout>
</StackLayout>
</ContentView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
Step
Now add model click on Viewmodel folder & add login model class
using hybridandroid.Views;
using System;
using Xamarin.Forms;
namespace hybridandroid.ViewModels {
public class LoginViewModel: BaseViewModel {
public Command LoginCommand {
get;
}
public LoginViewModel() {
LoginCommand = new Command(OnLoginClicked);
}
private async void OnLoginClicked(object obj) {
// Prefixing with `//` switches to a different navigation stack instead of pushing to the active one
await Shell.Current.GoToAsync($ "//{nameof(AboutPage)}");
}
// exec PROC_Cust
public Int64 CID {
get;
set;
}
public string CName {
get;
set;
}
public string ReciverEmail {
get;
set;
}
public double AC_Balance {
get;
set;
}
public string AC_No {
get;
set;
}
public string AC_ID {
get;
set;
}
public object CDOB {
get;
set;
}
public string CEmail {
get;
set;
}
public string CMObile {
get;
set;
}
public string CGender {
get;
set;
}
public string CPan {
get;
set;
}
public string CAdhaar {
get;
set;
}
public string CNationality {
get;
set;
}
public string CAddress {
get;
set;
}
public string City {
get;
set;
}
public string State {
get;
set;
}
public string Country {
get;
set;
}
public string PinCode {
get;
set;
}
public int Cisdelete {
get;
set;
}
public int CreatedBy {
get;
set;
}
public object CreatedDate {
get;
set;
}
public int ModifiedBy {
get;
set;
}
public object ModifiedDate {
get;
set;
}
public int UID {
get;
set;
}
public string CustImgPath {
get;
set;
}
public string CustAdaarPath {
get;
set;
}
public string CustPanPath {
get;
set;
}
public string Flag {
get;
set;
}
public string OpMsg {
get;
set;
}
public string Pass {
get;
set;
}
}
}
Step
Now go to Login.cs code page & write code for Login
using hybridandroid.ViewModels;
using Newtonsoft.Json;
using Plugin.DeviceInfo;
using Plugin.FirebasePushNotification;
using System;
using System.Net;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace hybridandroid.Views {
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LoginPage: ContentPage {
private string UserName = "", Password = "";
// string Url_Somee = "http://192.168.43.14/api/Member/CustomerLogin";
// string Url_Somee = "http://192.168.225.47/api/Member/CustomerLogin";
private string Url_Somee = Common.Url_ApiSomee + "Member/CustomerLogin";
public LoginPage() {
InitializeComponent();
// DisplayAlert("Information", "Please turn on Or Increase Mobile Voice to Get Talk back from S Bank7 App","Ok");
// Common.TextTOSpech("Login Page Now Open");
Routing.RegisterRoute(nameof(Home), typeof(Home));
Routing.RegisterRoute(nameof(AboutPage), typeof(AboutPage));
Routing.RegisterRoute(nameof(RegistrationPage), typeof(RegistrationPage));
Routing.RegisterRoute(nameof(ForgetPassword), typeof(ForgetPassword));
Routing.RegisterRoute(nameof(PDFView), typeof(PDFView));
Routing.RegisterRoute(nameof(SBank7videomanual), typeof(SBank7videomanual));
Routing.RegisterRoute(nameof(Error), typeof(Error));
this.BindingContext = new LoginViewModel();
}
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e) {
await Common.TextTOSpech("???? ??? ????? ????? Registration Page ???? ????");
// await CrossTextToSpeech.Current.Speak("Please Wait Registration Page is opening");
await Shell.Current.GoToAsync("RegistrationPage");
}
private async void TapGestureRecognizer_Tapped_1(object sender, EventArgs e) {
await Common.TextTOSpech("???? ??? ????? ????? Forget Password Page ???? ????");
await Shell.Current.GoToAsync("ForgetPassword");
}
private async void TapGestureRecognizer_Tapped_2(object sender, EventArgs e) {
await Common.TextTOSpech("???? ??? ????? ????? PDF file ???? ????");
await Shell.Current.GoToAsync("PDFView");
}
private async void TapGestureRecognizer_Tapped_3(object sender, EventArgs e) {
await Common.TextTOSpech("???? ??? ????? ????? SBANK7 Video ???? ????");
await Shell.Current.GoToAsync("SBank7videomanual");
}
public async void Button_Clicked(object sender, EventArgs e) {
// actInd.IsFocused = true;
try {
if (string.IsNullOrEmpty(App.PASS)) {
poploadingView.IsVisible = true;
UserName = Txt_UseName.Text.Trim();
Password = Txt_Password.Text.Trim();
} else {
UserName = App.CEmail;
Password = App.PASS;
}
// AboutPage ap = new AboutPage();
if (!string.IsNullOrEmpty(UserName) && !string.IsNullOrEmpty(Password)) {
LoginViewModel lv = new LoginViewModel {
CEmail = UserName,
Pass = Password + "-" + CrossDeviceInfo.Current.Id,
Flag = "LOG"
};
var client = new HttpClient();
client.Timeout = TimeSpan.FromMinutes(17);
client.BaseAddress = new Uri(Url_Somee);
string serializedModel = await Task.Run(() => JsonConvert.SerializeObject(lv));
var content = new StringContent(serializedModel, Encoding.UTF8, "application/json");
HttpResponseMessage response = await client.PostAsync(Url_Somee, content);
if (response.IsSuccessStatusCode == true) {
var result = await response.Content.ReadAsStringAsync();
lv = JsonConvert.DeserializeObject < LoginViewModel > (result);
if (lv.OpMsg != "Invalid User Name") {
lv.CName = lv.CName;
lv.AC_No = lv.AC_No;
lv.AC_Balance = lv.AC_Balance;
App.UserName = lv.CName;
if (string.IsNullOrEmpty(App.PASS)) {
App.PASS = Password;
}
var link = "http://sbankapi7.somee.com/images" + lv.CustImgPath.Replace("~/", "/");
using(var client1 = new WebClient()) // WebClient does implement (useless) IDisposable
{
try {
var Links = client1.DownloadString(link);
if (!lv.CustImgPath.Contains("img_avatar")) {
if (!link.Contains("Adobe")) {
App.Image = "http://sbankapi7.somee.com/images" + lv.CustImgPath.Replace("~/", "/");
} else {
App.Image = "http://sbankapi7.somee.com/images" + lv.CustImgPath.Replace("~/", "/");
}
} else {
if (lv.CGender == "Male") {
App.Image = "http://sbankapi7.somee.com/images" + "/img_avatar1.png";
} else {
App.Image = "http://sbankapi7.somee.com/images" + "/img_avatar5.png";
}
}
} catch (Exception ex) {
if (ex.ToString().Contains("404")) {
if (lv.CGender == "Male") {
App.Image = "http://sbankapi7.somee.com/images" + "/img_avatar1.png";
} else {
App.Image = "http://sbankapi7.somee.com/images" + "/img_avatar5.png";
}
}
}
}
// var client_ = new HttpClient();
//client_.BaseAddress = new Uri();
//client_.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/text"));
// string serializedModel = await Task.Run(() => JsonConvert.SerializeObject(lv));
// var content_ = new StringContent(serializedModel, Encoding.UTF8, "application/json");
// client_.DefaultRequestHeaders.Accept.
// HttpResponseMessage response_ = await client.GetAsync(Url_Somee);
// if (response_.IsSuccessStatusCode == true)
// {
// CrossFirebasePushNotification.Current.RegisterForPushNotifications();
// }
App.Acno = lv.AC_No;
App.Balance = lv.AC_Balance.ToString();
App.Mobile = lv.CMObile;
App.Ac_ID = lv.AC_ID;
App.CID = lv.CID.ToString();
App.CEmail = lv.CEmail;
await Shell.Current.GoToAsync("//main");
//await App.Current.MainPage.Navigation.PushModalAsync("//main");
// await App.Current.MainPage = new AppShell();
await Common.TextTOSpech("???? ??? ????? ????? Bank Details page ???? ????");
} else {
await Common.TextTOSpech(lv.OpMsg);
await DisplayAlert("Error", lv.OpMsg, "Ok", "Cancel");
Txt_Password.Text = "";
Txt_UseName.Text = "";
}
}
} else {
await Common.TextTOSpech("?????? fileds ???? ?????? ??? , ????? ?????? field ???");
await DisplayAlert("Error", "Please Enter All fields", "Ok", "Cancel");
}
} catch (Exception ex) {
await Common.TextTOSpech("????? ?????? mobile ????? ??????? ?????? ???? ????? ?? check ???");
await DisplayAlert("Error", "Please Check internet connection", "Ok", "Cancel");
await AppShell.Current.GoToAsync(nameof(Error));
//Common.CallError("Login Page", ex);
}
// await Common.TextTOSpech("????? SBank7 Application ???? ????");
poploadingView.IsVisible = false;
// actInd.IsFocused = true;
}
}
}
Now run application & check Login page output
![]()
![]()
Now we are successfully login & redirected to Main Screen Page with menu
![]()
![]()
Note 1: if you require more info about the application please comment below
Thank you for reading this blog.