I am adding iOS support for my already existing Xamarin Forms android app.
The toolbar items, navigational back arrow and the hamburger menu do not show on iOS:
While they work perfectly on Android:
The Application.MainPage is set to a Shell:
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="app.MainPage"
FlyoutBackgroundColor="{StaticResource cBackgroundColorDark}"
Shell.TabBarTitleColor="{StaticResource cBackgroundColor}"
Shell.BackgroundColor="{StaticResource cBackgroundColor}">
<Shell.Resources>
<ResourceDictionary>
<vm:FlyoutVM x:Key="vm" x:Name="vm"/>
</ResourceDictionary>
</Shell.Resources>
<Shell.FlyoutHeader>
</Shell.FlyoutHeader>
<ShellContent Title="page1"
IsTabStop="True"
ContentTemplate="{DataTemplate views:Page1Page}"/>
...
<Shell.FlyoutContent>
</Shell.FlyoutContent>
<Shell.FlyoutFooter>
</Shell.FlyoutFooter>
</Shell>
The page with the toolbar items is simply:
<ContentPage>
<ContentPage.ToolbarItems>
<ToolbarItem Text="Example"
IconImageSource="Example.png"
Clicked="ExampleToolbarItem_Clicked"
/>
</ContentPage.ToolbarItems>
</ContentPage>
All navigation (hamburger menu, back button ect) and toolbar items can be tapped on iOS and work as intended - they just are not visible.
I do not understand why this does not work on iOS, any suggestions why this might be the case?
(I cannot find any styling that might be making it act differently. I have also tried displaying a toolbar with just text (no icons) and the problem persists)
I can provide more code if needed.
EDIT
I ended up creating a new Xamarin shell template project and moving everything over. That fixed the issue...
Most likely the image size for ios is incorrect. I use this https://appicon.co/#image-sets to create image set for ios.
Related
I want to build a small chat as we all know from WhatsApp.
Currently I am able to display messages within a ListView.
<template>
<Page>
<ListView separatorColor="transparent" for="item in messages">
<v-template>
<GridLayout>
<TextView
height="auto"
editable="false"
:text="item.message"
/>
</GridLayout>
</v-template>
</ListView>
</Page>
</template>
My next step is to add a TextView with a Button at the end of the page. But here are coming my problems:
Which Layout component should I choose to position a TextView at the bottom of the page.
If I tab into my editable TextView the virtual keyboard overlaps my current page. Instead it should resize the whole page. How can I do this?
This is my current playground project: https://play.nativescript.org/?template=play-vue&id=F8lXkO
EDIT:
I found a way which works on Android using DockLayout:
https://play.nativescript.org/?template=play-vue&id=F8lXkO&v=3
Unfortunately this works only in the playground. Using the latest nativescript version on android is not working. If I tab on the TextView the layout breaks => https://github.com/sowinski/nativescript-vue-chat
Use GridLayout for the entire view. You can use this as a guide - https://github.com/Especializa/nativescript-whatsapp-template
Use this to better understand Nativescript layouts - https://www.nslayouts.com/
I'm developing an app using Xamarin with .netstandard 2.1 and can't find a way to change the action bar of the android app.
The blue bar isn't the color I want, and following all the docs and tutorials over internet, I found even a way to change the status bar (where the clock and battery and notifications are), but can't change this blue to Orange.
Can someone tell me what should I'm doing wrong, please?
Thanks
Set the attached property BackgroundColor="Red" either globally at <Shell> level:
<Shell
...
BackgroundColor="Red">
Or at ContentPage level using:
<ContentPage
...
Shell.BackgroundColor="Red">
note that this will affect navigation bar (the one you described) and also upper tabs (TabBar).
Inside your shell app xaml file, at the top use Shell.BackgroundColor="Red".
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App1.Views"
Title="App1"
x:Class="App1.AppShell"
Shell.BackgroundColor="Red"
>
The code below when entered in AppShell for Xamarin Forms only works in Android. In iOS the Switch is rendered but can't be toggled (as if it is disabled). Are there any tricks to making this work in iOS as well or is this a bug?
I tried placing the the Switch in a completely different ContentView and loading it in the Shell with local: and also tried including the Switch in the DataTemplate directly. All of them work in Android, just not iOS.
Thanks for your help
<MenuItem>
<Shell.MenuItemTemplate>
<DataTemplate>
<ContentView>
<Switch IsToggled="True" />
</ContentView>
</DataTemplate>
</Shell.MenuItemTemplate>
</MenuItem>
I am developing a Xamarin Forms application for Android and iOS. Is it possible to use the new FlowDirection property introduced in Xamarin.Forms 3.0 to make the master details view from right to left including the menu which is presented from left as opposed to be from right in RTL languages?
I tried setting the MasterDetail page property but still the menu is presented from left in Android and the menubar is still from left to right.
Any ideas?
New property link
https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Core/FlowDirection.cs
It seems to work out-of-the-box as expected on iOS but not on Android (extra actions required) with the next example:
<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RTL.MasterDetailPage"
Padding="25"
FlowDirection="RightToLeft">
<MasterDetailPage.Master>
<ContentPage Title=" ">
<StackLayout>
<Button Text="Menu item" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage>
<Label Text="My page"/>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Here is the outcome:
As you see on Android the menu appear on the left and on iOS on the right. Should check if there an existing bug report, if not should create a new one to the Xamarin.Forms team.
Update:
According to this document we have to add android:supportsRtl="true" to the application node in the manifest and ensure to set minSdk to 17+, without it won't work.So here is the final outcome:
In my Xamarin forms application I need to add a bottom navigation bar in every pages. Bottom navigation bar should have 7 buttons and tapping on each buttons should navigate to corresponding pages. Is there any way to implement this in Xamarin forms?
Yes I have implemented this using this plugin Bottom Bar Plugin it is a very useful plugin which renders tab bars at the bottom of the screen for android and IOS. Even though all the documentation you will need is available via the link I mention, the stackoverflow bots will swarm me unless I add that you can navigate to the site in question by searching google for
BottomNavigationBarXF
other than cutting and pasting their documentation for the benefit of this site (so that anyone referrring to this answer in the event of a thermo nuclear war, after which stackoverflow is the only surviving site, can still contextualise this answer), I would urge you to consult their documentation which is well put together.
You can use Tab page itself. For iOS, by default tab pages button are at bottom. For Android, there is a way to move the tabs to bottom. You need to update Xamarin or Visual Studio. After updating, add the below page directives to the Tab page Xaml code.
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"
For example:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"
android:TabbedPage.BarItemColor="#a39d9f"
android:TabbedPage.BarSelectedItemColor="#007aff"
android:TabbedPage.IsSwipePagingEnabled="false"
x:Class="TabbedPageWithNavigationPage.MainPage">
<local:TodayPage />
<NavigationPage Title="Schedule" Icon="schedule.png">
<x:Arguments>
<local:SchedulePage />
</x:Arguments>
</NavigationPage>