How to use Android controls in Xamarin.Forms - xamarin

I am trying to create Xamarin form which has an Android rating bar and iOS slider.
Below is the XAML file I am using.
I can see the Label but not able to see the rating bar when I try to run in Android device.
Please help.
<?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:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS"
xmlns:android="clr-namespace:Android.Widget;assembly=Mono.Android;targetPlatform=Android"
xmlns:androidForms="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.Platform.Android;targetPlatform=Android"
mc:Ignorable="d"
x:Class="XamrineTest.Page1">
<StackLayout BackgroundColor="Green" >
<Label Text="Welcome to Page1!" BackgroundColor="Gray"/>
<ios:UIDatePicker />
<ios:UISlider MaxValue="10" Value="{Binding SlideValue}" />
<ios:UIStepper />
<ios:UISwitch />
<android:RatingBar BackgroundColor="Lavender" HorizontalOptions="Center"
Scale="0.4"
StarCount="5" Step="0.5" Margin="0" SelectedColor="Orange"
HeightRequest="40" UnSelectedColor="LightGray" Rate="{Binding Rating,Mode=TwoWay}">
</android:RatingBar>
</StackLayout>
</ContentPage>

I think there are several problem in your code:
1.the namespace you used is not right, just change to this:
<androidWidget:RatingBar x:Arguments="{x:Static androidLocal:MainActivity.Instance}" >
</androidWidget:RatingBar>
And using following namespacing:
xmlns:androidWidget="clr-namespace:Android.Widget;assembly=Mono.Android;targetPlatform=Android"
2.we also need the following code to init androidWidget:RatingBar
x:Arguments="{x:Static androidLocal:MainActivity.Instance}"
define the Instance in MainActivity of android code:
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
internal static MainActivity Instance { get; private set; } // define Instance
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(bundle);
Instance = this;// init Instance
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
}
}
For more details, you can check:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/platform/native-views/xaml
And this link also includes some useful samples, you can refer to it.
Update:
Yes, you can also use x:Arguments="{x:Static androidForms:Forms.Context}",
and the following code works properly.
<android:RatingBar x:Arguments="{x:Static androidForms:Forms.Context}" NumStars="5" StepSize="1.0" Rating="{Binding Rating,Mode=TwoWay}" />
Note:
The properties as follows you used in RatingBar does not exist.
BackgroundColor="Lavender" HorizontalOptions="Center"
Scale="0.4"
StarCount="5" Step="0.5" Margin="0" SelectedColor="Orange"
HeightRequest="40" UnSelectedColor="LightGray" Rate="{Binding Rating,Mode=TwoWay}"

Related

Xamarin.Forms.Map is not working for UWP platform. How to make it work?

I'm trying to load street map using Xamarin.Forms.Map plugin in my project for UWP app. For that I have also get the token from MSDN. Here is what I have done:
MapePage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:Map_POC.ViewModels"
xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:local="clr-namespace:Map_POC.CustomControls"
x:Class="Map_POC.Views.MapePage">
<ContentPage.BindingContext>
<vm:MapePageViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<maps:Map
x:Name="MyMap"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
MapType="Street" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
MapePage.xaml.cs
public MapePage()
{
InitializeComponent();
Position position = new Position(-37.8141, 144.9633);
var pin = new Pin
{
Type = PinType.Place,
Position = position,
Label = "I'm a Pin",
};
MyMap.Pins.Add(pin);
MyMap.MoveToRegion(
MapSpan.FromCenterAndRadius(
position, Distance.FromMiles(1)));
}
MainPage.xaml.cs (In UWP Solution)
public sealed partial class MainPage
{
public MainPage()
{
this.InitializeComponent();
Xamarin.FormsMaps.Init(Keys.UWPMapToken);
Windows.Services.Maps.MapService.ServiceToken = Keys.UWPMapToken;
LoadApplication(new Map_POC.App());
}
}
Output: With hybrid map it shows map but not showing pin and locations properly.
Other thing apart from this it not works in offline mode, can we cache map for offline mode?
Can we draw a polygon and coordinates covered inside the polygon can be clicked individually or not?
Any help on this will be highly appreciated.

How to add the ripple effect in Xamarin label or image?

I am looking at implementing a ripple effect on label text or in image.So how to add the ripple effect on any label or in image?
You can use the package TouchView from nuget
Add nuget package to your Xamarin.Forms .netStandard/PCL project and to your platform-specific projects (iOS and Android)
iOS: add TouchViewRenderer.Initialize() line to your AppDelegate
(preserve from linker)
using TouchEffect.iOS;
namespace YourApp.iOS
{
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
TouchViewRenderer.Initialize();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}
}
}
in 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:local="clr-namespace:YourApp"
xmlns:touch="clr-namespace:TouchEffect;assembly=TouchEffect"
x:Class="App11.MainPage">
<StackLayout>
<touch:TouchView
RegularBackgroundColor="LightGray"
PressedBackgroundColor="Gray"
PressedOpacity="1"
PressedAnimationDuration="100"
RegularAnimationDuration="100"
Padding="10, 5"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Completed="Handle_TouchCompleted"
>
<Label Text="Click Me"
TextColor="Black"
FontSize="30"/>
</touch:TouchView>
</StackLayout>
</ContentPage>
in code behind
private void Handle_TouchCompleted(TouchEffect.TouchView sender, TouchEffect.EventArgs.TouchCompletedEventArgs args)
{
// do something you want
}
Use XamarinCommunityToolkit Documentation YouTube Resources
In your xaml
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
Use exactly NativeAnimation
<Frame xct:TouchEffect.NativeAnimation="True"> </Frame>
You can provide ripple and other effects using TouchEffect Library from AndreiMisiukevich.For more info: https://github.com/AndreiMisiukevich/TouchEffect
And another library is also available. https://github.com/mrxten/XamEffects
Both are well documented.

page not scrolled when clicked input and display keyboard in webview xamarin forms

I try to develop android apps using Xamarin Forms.
There is an input in a webview.When clicked the input , keyboard is displayed.But i can not see what i write.Input is not scrolled up.
XAML and WebViewRenderer contents as below.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:deneme"
">
<ContentPage.Content>
<ScrollView>
<Grid>
<Grid.ColumnDefinitions>.ColumnDefinitions>
<Grid.RowDefinitions>.RowDefinitions>
<local:HybridWebView x:Name="webView" Grid.Row="0" Grid.ColumnSpan="2">
</local:HybridWebView>
<Button Text="Button1" Grid.Column="0" Grid.Row="1"/>
<Button Text="Button2"/>
<Label Text="Hidden"/>
</Grid>
</ScrollView>
</ContentPage.Content>
public class HybridWebViewRenderer : ViewRenderer<HybridWebView, Android.Webkit.WebView>
{
Context _context;
public HybridWebViewRenderer(Context context) : base(context)
{
_context = context;
}
protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
{
base.OnElementChanged(e);
if (Control == null)
{
var webView = new Android.Webkit.WebView(_context);
webView.ScrollBarFadeDuration = 0;
webView.Settings.JavaScriptEnabled = true;
webView.SetWebViewClient(new JavascriptWebViewClient($"javascript: {JavascriptFunction}"));
SetNativeControl(webView);
}
}
}
In order to set html input position prior keyboard,what should i do ?
You can use Soft Keyboard Input Mode on Android described in the document.
In xaml:
<Application ...
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:Application.WindowSoftInputModeAdjust="Resize">
...
</Application>
Or in code behind:
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
...
App.Current.On<Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
Refer: keyboard-hides-textarea-inside-a-hybrd-webview-in-xamarin-forms
Take a look here in the Android docs and especially the android:windowSoftInputMode (docs) attribute of activity.
Just add this line to your code
Window.SetSoftInputMode(SoftInput.AdjustPan);

Remove auto generate button in Humberger menu of Xamarin.Forms Shell using Shell.FlyoutHeader

I have started learning Xamarin Forms Shell. I've create my first app using Shell and add sample Home Page. In my AppShell Page I've add and Shell.FlyoutHeader contains only boxview. When I run the application and click the Humberger Menu, there is additional button or Label(I'm not sure) that I didn't include in my FlyoutHeader Page. Please help me to remove that additional button. Thanks!
Shell Code:
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamShell.Views.ListOfProductsPage"
Visual="Material"
xmlns:local="clr-namespace:XamShell.Views"
FlyoutBehavior="Flyout"
xmlns:controls="clr-namespace:XamShell.Controls"
Routing.Route="ProductList">
<Shell.FlyoutHeader>
<controls:FlyoutHeader/>
</Shell.FlyoutHeader>
<local:HomePage />
</Shell>
FlyoutHeader
<Grid BackgroundColor="White">
<BoxView
BackgroundColor="Yellow"
Opacity="0.6" />
<Label Text="Animals"
TextColor="Red"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center" />
</Grid>
enter image description here
Do you want to achieve the result like following GIF.
If so, First of all, Please refer to this screenshot.
Please If you want to remove these button, please make sure your AppShell.xaml AppShell.xaml.cs file did not include the FlyoutItem and <views:XXXPage IconImageSource="XXX.png" /><views:XXX IconImageSource="XXXX.png" /> like this link
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyout-items
But I suggest you to create a new project.
Create a new shell file like following code.
MainPage.xaml
<?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:SearchListDemo"
xmlns:controls="clr-namespace:SearchListDemo.Controls"
Navigating="OnNavigating"
Navigated="OnNavigated"
x:Class="SearchListDemo.MainPage">
<Shell.FlyoutHeader>
<controls:FlyoutHeader/>
</Shell.FlyoutHeader>
<local:HomePage/>
</Shell>
MainPage.xaml.cs
[DesignTimeVisible(true)]
public partial class MainPage : Shell
{
public Dictionary<string, Type> Routes { get { return routes; } }
Dictionary<string, Type> routes = new Dictionary<string, Type>();
public MainPage()
{
InitializeComponent();
RegisterRoutes();
}
void RegisterRoutes()
{
routes.Add("homwpage", typeof(HomePage));
foreach (var item in routes)
{
Routing.RegisterRoute(item.Key, item.Value);
}
}
void OnNavigating(object sender, ShellNavigatingEventArgs e)
{
}
void OnNavigated(object sender, ShellNavigatedEventArgs e)
{
}
}
regist SetFlag before Xamarin.Forms.Forms.Init(e) in the MainActivity.cs
Xamarin.Forms.Forms.SetFlags("Shell_Experimental");

Wrapping an MPVolumeView inside 2 Stack Layouts (Xamarin.IOS)

I am creating a control based on a generic View that works with a custom renderer based on an iOS MPVolumeView, which is the simple control that allows you to select an alternate output route for audio in your app (i.e. Bluetooth Speaker). The code works just fine if I wrap inside a single stack layout, but not if it's inside two stack layouts. My XAML looks like this... very basic:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DABApp.DabTestPage" xmlns:local="clr-namespace:DABApp;assembly=DABApp">
<ContentPage.Content>
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Red">
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
<local:AudioOutputView />
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
And here's the guts of my custom renderer:
[assembly: ExportRenderer(typeof(AudioOutputView), typeof(iosAudioOutputViewRenderer))]
namespace DABApp.iOS
{
public class iosAudioOutputViewRenderer: ViewRenderer<AudioOutputView, UIView>
{
MPVolumeView view;
protected override void OnElementChanged(ElementChangedEventArgs<AudioOutputView> e)
{
base.OnElementChanged(e);
if (Control == null)
{
view = new MPVolumeView()
{
ShowsRouteButton = true,
ShowsVolumeSlider = false,
};
SetNativeControl(view);
}
}
}
}
With this XAML and code, when I push the page onto the nav stack async, the page won't even show. If I remove one of the StackLayouts, it works fine.
I changed my IOS control in the CustomRenderer to a simple UILabel and this works fine... so it looks like it has something to do with putting the MPVolumeView inside 2 StackLayouts. I need to be able to do this because of the layout requirements of my app, and it doesn't make any sense why 1 StackLayout is fine, but 2 isn't, and only for this native control.
Any ideas?

Resources