I am currently creating a Xamarin Forms app that features a webview which has to cover my whole device screen.
Unfortunately I can not figure out how to do it, I always have a white bar underneath, is this a bug? I switched off my navbar, as I do not wan to show that.
I used the hybrid webview as explained here
I already tried using grid, stacklayout and absolute layout,
Update
Already tried ti set padding and margin to 0 in the layout and the webview, does not work either..
my current layout looks 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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:EatyAndroidApp.Controls"
mc:Ignorable="d"
x:Class="EatyAndroidApp.CustomWebViewPage"
NavigationPage.HasNavigationBar="False"
NavigationPage.HasBackButton="False"
BackgroundColor="#313131">
<ContentPage.Content>
<StackLayout HorizontalOptions="Fill" VerticalOptions="Center">
<controls:HybridWebView
x:Name="hybridWebView"
BackgroundColor="#313131"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
which produces me this: (I blurred out the content)
Image
Thank you in advance
Ok, I figured it out, somehow, the webview was not aware of its height and width, I had to manually access it via Javascript and set the new Layout:
Inside
public override async void OnPageFinished(Android.Webkit.WebView view, string url)
just execute
view.EvaluateJavascript("document.documentElement.style.height = screen.height + 'px';", null);
Related
I have problem rendering the tabs in tabbedPage.
I have two tabs:
Tab 2:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Provider.Pages.SignInOut.ProjectFix.TestPage2"
Title="Accounted">
<ContentPage.Content>
<StackLayout><Label Text="asdf454545"></Label></StackLayout>
</ContentPage.Content>
Tab 1:
<?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="Provider.Pages.SignInOut.ProjectFix.TestPage"
Title="Unaccounted">
<ContentPage.Content>
<StackLayout>
<Label Text="asdf"></Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
The tabbedPage which hosted those tabs is:
public class TestTabbedPage : TabbedPage
{
public TestTabbedPage()
{
Children.Add(new TestPage());
Children.Add(new TestPage2());
}
}
The problem i have here is it does show two tabs but the last tabs don't have the name included and the text was not on the screen
If I duplicate the page with Tab 1 instead of Tab 2, everything works fine.
What am i doing wrong with the tabs why does tab 2 not showing properly on the screen.
This actually giving me headache because I have actual project which have two tabs but when rendered the tabs was gone. In the same project, I have the other pages which have tabs but they all showing fine.
I have a simple layout which consists of Entry and the Button. The goal is to place Button at the bottom and the Entry in the center of the remaining space. Everything works at start. Here are layout and screenshot.
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.HasNavigationBar="False"
x:Class="ParentAdda.Pages.Test">
<ScrollView x:Name="Qq" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout x:Name="Ww" Orientation="Vertical" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<BoxView VerticalOptions="FillAndExpand" HeightRequest="0" BackgroundColor="Aquamarine" />
<Entry
FontSize="Medium"
Placeholder="+111111111"
HorizontalOptions="FillAndExpand"
Keyboard="Telephone" />
<BoxView VerticalOptions="FillAndExpand" HeightRequest="0" BackgroundColor="Coral" />
<Button Text="Update" Clicked="Button_OnClicked"
HorizontalOptions="Fill"
BorderRadius="20"
BackgroundColor="Lime"
TextColor="White"
FontSize="Large"
FontAttributes="Bold" />
</StackLayout>
</ScrollView>
</ContentPage>
I am also setting WindowSoftInputMode to resize in Android project (in the code, taking into account the bug in Xamarin.Forms when the tag is reset to Pan when set in manifest when using FormsAppCompatActivity)
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
//https://bugzilla.xamarin.com/show_bug.cgi?id=39765
App.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
//https://bugzilla.xamarin.com/show_bug.cgi?id=39765
//Remove the status bar underlay in API 21+
if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
{
Window.DecorView.SystemUiVisibility = 0;
var statusBarHeightInfo = typeof(FormsAppCompatActivity).GetField("_statusBarHeight", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
statusBarHeightInfo?.SetValue(this, 0);
Window.SetStatusBarColor(Android.Graphics.Color.Black);
}
}
When Entry gains focus, the page is not resized (though I can scroll to the very bottom when soft keyboard is visible)
When soft keyboard hides the content is resized incorrectly, and occupies just part of the screen.
It looks like the layout process is performed based on bounds before soft keyboard becomes visible/invisible. However, it seems that all Bounds properties (of the Page, ScrollView and StackLayout) as well as ContentSize property of ScrollView has correct numeric values (i traced them in button clicked handler). I tried to call ForceLayout() on different elements in same button clicked handler without luck.
Does anyone know how to fix this issue?
I do think it's how FillAndExpand of VerticalOptions is designed, it is for
element layout when there is excess space available along the Y axis from the parent layout. If multiple children of a layout are set to expand, the extra space is distributed proportionally.
Since you don't have any fixed size, when the keyboard is disappearing, the layout is resized, I guess FillAndExpand will first measure how many extra space along the axis and then distributes the space for the children.
A very simple workaround to solve your issue is to give a fixed size to your StackLayout, but you said
The goal is to place Button at the bottom and the Entry in the center of the remaining space.
If you want to keep the original size here, you can set the height to StackLayout when it is appearing, means override the OnAppearing() method in code behind, for example:
protected override void OnAppearing()
{
base.OnAppearing();
Ww.HeightRequest = Ww.Height;
}
I want to achieve this kinda transparency on my custom view as displayed by alert view for Android application.
Thanks
#Dlucidone I had this solved by using custom overlay from css.
<GridLayout>
<StackLayout>
// All your page content goes here!
</StackLayout>
<StackLayout class="dimmer" visibility="{{showLoading ? 'visible' : 'collapsed'}}"/>
<GridLayout rows="*" visibility="{{showLoading ? 'visible' : 'collapsed'}}">
<ActivityIndicator busy="true" />
</GridLayout>
</GridLayout>
Set the dimmer class to background transparent css, with width and height to 100%
Information how to use visible and collapsed
https://www.tjvantoll.com/2015/06/05/nativescript-showing-and-hiding-elements/
BTW there is a problem with android on setting isUserInteractionEnabled
https://github.com/NativeScript/NativeScript/issues/3215
If you need this to show an activity indicator as an overlay with a dimmed background, you could use this one: https://github.com/nstudio/nativescript-loading-indicator
import {LoadingIndicator} from '#nstudio/nativescript-loading-indicator'
const loader = new LoadingIndicator()
loader.show({dimBackground: true})
loader.hide()
I have a MasterDetailPage (called RootPage) and ContentPage (called MainPage).ContentPage's Title property is set to 'This is main page' and I am navigating using NavigationService with the following code:
await navigationService.NavigateAsync("RootPage/MainPage");
What I expect to see is ContentPage's Title in the MasterDetail's header, but it says 'MainActivity' everytime.
Is this some kind of a platform behavior? If not, how do I set the MasterDetailPage's header to a specific object?
In our app the title of the pages is set correctly in the 'header' of the MasterDetail. Upon starting we navigate like this:
NavigationService.Navigate("RootPage/DetailsNavigationPage/MainPage")
When navigating modeless further down, the new pages are also loaded in the 'details' of the MasterDetail and their title is displayed:
NavigationService.Navigate("AnotherPage", null, false);
The DetailsNavigation page is a simple page that looks like this:
<?xml version="1.0" encoding="utf-8" ?>
<NavigationPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="SomeNameSpage.Views.DetailsNavigationPage"
BarBackgroundColor="Accent">
</NavigationPage>
And the MasterDetail looks like this:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="SomeNameSpace.Views.RootPage">
<MasterDetailPage.Master>
<ContentPage Title="Default"><!--Must have a Title, otherwise crashes according to https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/master-detail-page/-->
<StackLayout>
<Button Text="Main Page" Command="{Binding NavigateCommand}" CommandParameter="DetailsNavigation/MainPage" />
<Button Text="Some Page" Command="{Binding NavigateCommand}" CommandParameter="DetailsNavigation/SomePage" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
</MasterDetailPage>
I have two pages in Xamarin Forms using a custom renderer to display an Android VideoView on each page. The video on Page1 (nested inside of a RelativeLayout) plays successfully. When I navigate from Page1 to Page2 using Navigation.PushAsync(Page2); the VideoView from Page1 continues to overlap the video on Page2.
Is there a way to force the VideoView to respect the visibility of its parent view container?
Page1.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"
x:Class="MyVideoApp.Page1">
<RelativeLayout>
<MyVideoView x:Name="vidPlayer" Source="http://...."
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}" />
</RelativeLayout>
</ContentPage>
Page2.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"
x:Class="MyVideoApp.Page2">
<MyVideoView x:Name="vidPlayer" Source="http://...." />
</ContentPage>
The VideoView is a SurfaceView and SurfaceViews Z-order are determined before being attached to a window and cannot be changed afterwards. So you cannot have multiple SurfaceViews showing at the same time since the SurfaceView kind of shows through anything and everything.
You may need to try removing the VideoView completely and re-adding it later or, if all else fails, you could try moving the VideoView off of the screen.
Source