I am running the latest Xamarin Forms on VS 2019 community edition.
I just started the basic Xamarin Forms project and added a Flyout page template to it.
When running this on the Android emulator it works fine, but the menu won't close after selecting a page.
The code has not changed apart from adding another page to the menu items.
The code isPresented = false is still there but has no effect whatsover.
Is it simply not possible to have the menu collapse in landscape mode? Then what are my alternatives?
You just have to add in the MenuPage (the main file, the first one that is generated) the following property:
FlyoutLayoutBehavior = "Popover"
public MasterMenuItem ()
{
InitializeComponent ();
MasterBehavior = MasterBehavior.Popover; // This solve my problem
}
Related
Working on a Project and stuck in an Issue:
Hardware Back Button Reloading Application (I am using Angular Router in this application).
My Code to Exit Application:
ionViewDidEnter(){
this.subscription = this.platform.backButton.subscribe(()=>{
navigator['app'].exitApp();
});
}
ionViewWillLeave(){
this.subscription.unsubscribe();
}
While same logic Working in other applications. but in this application its reloading the application not exiting it.
P.S: i have also tried it to put in platform.ready() but no luck.
With IONIC 4, there is new method subscribeWithPriority developed to handle race between soft & hard back button. Try modifying your code like below:
this.platform.backButton.subscribeWithPriority(1, () => {
navigator['app'].exitApp();
});
subscribeWithPriority() stops the propagation of the event after its execution and if we subscribe with high priority and execute our prefered navigation instead of default one then it is going to work as you want.
More reference docs for details:
https://github.com/ionic-team/ionic/commit/6a5aec8b5d76280ced5e8bb8fd9ea6fe75fe6795
https://medium.com/#aleksandarmitrev/ionic-hardware-back-button-nightmare-9f4af35cbfb0
UPDATES:
Try using this new version of exitApp cordova plugin. I haven't
tried myself but looks promising from popularity.
Also try to empty the page stack from Navcontroller or go to your home screen, seems like that's causing the reload for app with sidemenu's & tab pages... this.navCtrl.pop() / this._navCtrl.navigateBack('HomeScreen'), and then call exitApp.
NOTE: Tabs & SideMenu as those have its own routing module does create lot of complexity with app navigation.
Solved:
As Mention by #rtpHarry template of SideMenu / Tabs have History which leads application to Reload it self on root page. i was able to solve this by clearing History.
ionViewDidEnter(){
navigator['app'].clearHistory();
}
on Your Root Page just Clear your history and your Hardware Back Button will close the Application instead of Reloading it.
Do you have a sidemenu in your app? I'm just curious because this seems to be when I get this problem as well.
If you look in your inspector, you will see that window.history has a length of 1.
I don't see it in some of my apps, but the app that I have a side menu setup acts this way - on the homepage if you press back the screen goes white then it reloads the app.
Like I say, looking in the inspector shows that there is a history to step back to, which it is trying to do, and whatever that history step is, it just pushes it forward back to the homepage, which made me wonder if it was the sidemenu setting up its own control of the navigation system.
I've probably said some poorly worded terminology but as I haven't solved this myself I thought I would just let you know what I had found... hopefully it helps you move forward.
In my scenario, I wasn't even trying to do the exit on back code - I just noticed that the app would appear to "reboot" if I kept pressing back.
This explain the solution on Ionic 5 (and 4.6+ too I think).
private backButtonSub: Subscription;
ionViewDidEnter() {
this.backButtonSub = this.platform.backButton.subscribeWithPriority(
10000,
() => {
// do your stuff
}
);
}
ionViewWillLeave() {
this.backButtonSub.unsubscribe();
}
also keep
IonicModule.forRoot({
hardwareBackButton: true
}),
to true (default) in your app.module.ts
Sources:
https://www.damirscorner.com/blog/posts/20191122-CustomizingAndroidBackButtonInIonic4.html
The Doc
I'm having issue of missing signout button from the header toolbar in android devices. In simulator and apple device I do see the signout button but not on android tablet/phone. This wasn't the case before 3-4 days. Is there any change in the android build server that causing this issue. This is happening when more than one control in the toolbar. if the toolbar has one control to the right then it displays without any issue. Please let me know if anyone else have same issue.
Android Simulator Screenshot
Android Tablet Screenshot
public static void addSignout(Form f) {
f.getToolbar().addMaterialCommandToRightBar("", FontImage.MATERIAL_LOCK, 6.5f, e -> {
Server.instance.logout();
new LoginForm().show();
});
}
I'm new to StackOverflow community!
I need help with one problem with android in Xamarin Forms. To be precise... I tried with some friends to build our first app. We choose(with the help of our University professor) Xamarin for the cross-platform development of Android and iOS for both systems using the Xamarin Forms. I created the interface part of the app and now I am stuck in a fort with big walls. When I try to add a Tabbed Page the icon for the functional bar, the app crashes(Android) but in iOS, the problem doesn't appear...
I'd try with some solution... like :
-Render in the NameApp.Droid adds different renderer only for the android part but no result...
-Try another way to insert the icon in the .xaml file directly but no result...
-Try to follow another way to modify the .axam file for the "Theme" part
but no result...
I want to integrate all the stuff on time only in the "Main Project". I don't want for now touch the "nameProject.Droid" or "nameProject.iOS" part, But try to make in one shoot both(Andriod & iOS). I've found a different bug in Android (è.é) but for this, I am going crazy...
But I need to modify the ".Droid" no problem I accept the challenge!
This is the result I aspire to create.
"https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsbHJuWi04N0ZIc0E/components-tabs-usage-mobile7.png"
This is the way I add the Icon in the Tabbed Page. An assumption I add all the stuff in the "Resource" in ".Droid" and ".iOS :
var MainPageTabbed = new MPageTabbed();
var Profile = new Profile();
var ListChat = new ListChat();
if (Device.RuntimePlatform == Device.Android)
{
MainPageTabbed.Icon = "ldpi.png";
Profile.Icon = "ldpi2.png";
Chat.Icon = "ldpi1.png";
}
if (Device.RuntimePlatform == Device.iOS)
{
MainPageTabbed.Icon = "ldpi.png";
Profile.Icon = "ldpi2.png";
ListChat.Icon = "ldpi1.png";
}
NavigationPage.SetHasNavigationBar(this, false);
Children.Add(MainPageTabbed);
Children.Add(Profile);
Children.Add(ListChat);
Someone can help me please to find a solution?
Here you have an example of how to use the TabbedPage in xamarin forms:
https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/tabbed-page/
... Xamarin.forms renders Android tabbed-pages as something called a viewpager combined with a TabPagerStrib, and it looks like the example in the link above.
You might read about BottomNavigationBar for Android instead, or look at this link for a TabPagerStrip with an image:
https://forums.xamarin.com/discussion/39937/adding-icons-to-a-pagertabstrip-instead-of-text
If anyone is interested in a FontAwesome custom icon implementation I followed this tutorial to begin with: FontAwesome with Xamarin Forms
Unfortunately he doesn't give an example of integrating with tabbed pages but after some experimenting I finally figured out a simplified Xaml way to render it without a custom tabbed renderer:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:IBMobile.Views"
xmlns:local2="clr-namespace:FontAwesome"
x:Class="IBMobile.Views.HomePage"
Visual="Material">
<ContentPage.IconImageSource>
<FontImageSource FontFamily="{StaticResource FontAwesomeSolid}" Glyph="{x:Static local2:IconFont.Home}" />
</ContentPage.IconImageSource>
I´m experiencing a weird problem with SlidingMenu Library and ViewPager when they are running on devices with Android 3.2 (Honeycomb).
The problem appears when we "toggle" the SlidingMenu to show the Menu that is hidden on the left of the app. When we do this, both ContentView and BehingContentView stops responding to touch events.
Thinking that this was a problem related to my application, I downloaded the last version of ABS and SlidingMenu library and configured a new project using the built-in example that comes with the SlidingMenu and, for my surprise, the same behavior occurred with the ViewPager example.
These are the steps that I did:
Configure an Emulator using API Level 13 and 7" WSVGA (Tablet);
Download ABS and SlidingMenu from GIT;
Setup a new Project, using the compatibility library android-support-v41 (Also tested with android-support-v4);
Solved the problem 'getSupportActionBar() is undefined' as described here: https://github.com/jfeinstein10/SlidingMenu/issues/145;
Run the 'Example Application' and choose 'ViewPager' example;
Swipe pages to the right and to the left, without opening the menu;
Open the menu. See that the lists don´t scroll as expected;
Close the menu. See that the viewpager doesn´t responds to touch events anymore;
Notice that this behavior was reported only on Android 3.2 devices. We have the same application running on 2.x and on 4.x devices, without this problem.
Also, noticed that the Example Application that was downloaded from Google Play doesn´t have this problem.
Does anybody have any advice? Thanks a lot!
Edit 1
Tested on a real device, and confirmed the Behavior. Does anybody have an advice?
I had the same problem and fixed it by using the following work-around.
Replace these lines in SlidingMenu.java:
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
public void manageLayers(float percentOpen) {
if (Build.VERSION.SDK_INT < 11) return;
with:
#TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
public void manageLayers(float percentOpen) {
if (Build.VERSION.SDK_INT < 14) return;
I am using titanium appecelerator to build an app in both ios and android.
I use the following code to create a tab group and add a tab to it.
var localTabGroup = Ti.UI.createTabGroup();
var planTab = Ti.UI.createTab({
title : NYC.Common.StringConstant.TAB_TITLE_PLAN,
icon : NYC.Common.ResourcePathConstant.IMG_TAB_PLAN,
window : planTabWin
});
localTabGroup.open();
And call the following function to create a window and add it to the tab
addWindowToTabGroup : function(window) {
tabGroup.activeTab.open(window, {
animated : true
});
},
Now, I often have to remove window from the stack of the tab ( eg: on android back button or ios navigation bar back)
Till now, I use window.close() to remove the window from the stack . But, it always shows warnings like.
[ERROR][TiBaseActivity( 378)] (main) [3320,4640528] Layout cleanup.
[WARN][InputManagerService( 62)] Window already focused, ignoring focus gain of: com.android.internal.view.IInputMethodClient$Stub$Proxy#406e4258
I was just wondering if I am following the correct approach? Or is there a better way to remove a window from the tab?
Thanks.
Tabs behave a lot differently on iOS and Android, On Android, the tab does not maintain a stack of windows. Calling open opens a new, heavyweight window, which by default covers the tab group entirely.This is very different from iOS, but it is for Android applications. Users always use the Back button to close the window and return to the tab group.
This may be happening because you are trying to remove the window even though natively Android already removes it. Check out the Android Implementation Notes of the docs here
To completely eliminate this problem, I would just open up a modal window without using the TabGroup, this would be more cross platform:
addWindowToTabGroup : function(window) {
window.open({
modal : true,
animated : true
});
}
This will open a modal window which behaves the same on both platforms, and can be handled easily by the native back button functionality.