Develop Reference

Insert icon in a tabbed page(Android) on xamarin form

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>

Use Ionic Tabs for Actions

I really like the style of the Tabs in Ionic 3 when you have an icon and a text:
https://ionicframework.com/docs/components/#tabs-icon-text
However in the App I am using I have 4 Actions. For example open the Camera, open Google Maps and so on. And this I want to display on the bottom of the page exactly in this kind of style.
How can I achieve this, since this is not the real purpose of the Tabs and since I haven't found a similar Component.

Just like you can see in the Tab docs:
Sometimes you may want to call a method instead of navigating to a new
page. You can use the (ionSelect) event to call a method on your class
when the tab is selected.
<ion-tabs>
<ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
</ion-tabs>
And then
export class Tabs {
constructor(public modalCtrl: ModalController) {}
chat() {
let modal = this.modalCtrl.create(ChatPage);
modal.present();
}
}

Create an Android-like Popover with Onsen Ui

I am currently creating an Android App with Phonegap + Onsen UI. Now, I have an Android-like more Button (three dots) in my menu, and when somebody clicks on it, I want to open this typical "More-Button Menu". There is an example for an android popover with onsen ui over here, but when you take a look at the components documentation, you can't read something about the android popover anymore.
My problem is, that when I take the popover code from the example, I cant open it with the code from the documentation:
ons.createPopover('more-popover.html').then(function(popover) {
$scope.popover = popover;
});
more-popover.html:
<div class="popover-mask"></div>
<div class="popover popover--up popover" style="top:10px;right:10px;">
<div class="popover__content popover__content--android">
<div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
</div>
</div>
But when I try to use it like from the documentation, the popover opens, but I did not found any possibility to get the android style working.
Is there a way to use the ons.createPopover Function with the above code from "more-popover.html" or any other way?

I solved the problem with using this inside the more-popover.html:
<ons-popover modifier="android more" cancelable>
<ons-list>
<ons-list-item ng-click="share()" modifier="tappable">Teilen</ons-list-item>
<ons-list-item ng-click="quit()" modifier="tappable">Beenden</ons-list-item>
</ons-list>
</ons-popover>
With setting the modifier to android, I've got the Android Style. I also added more as modifier, so that I can remove the arrows, if the popoverarrow is a sub-element of the "more"-popover:
app.css:
.popover--more .popover__right-arrow, .popover__bottom-arrow, .popover__left-arrow, .popover__top-arrow {
display: none;
}

Transitions during page navigation in phonegap android app

I am developing a phonegap android application using jquery Mobile that consists three html pages. I want to include transitions during navigation from one page to another.
For navigation between pages i have used
window.location = "abc.html";
Each page consists some dynamic data that loads on page initialization.
I have tried data-transition="slide". But there isn't any effect.
How can i include slide transition for page navigation in my application ?

$.mobile.changePage('abc.html', { transition : 'slide'});

function change_page(page){
$.mobile.changePage( page, { transition: "slide", changeHash: false });
}
Call this function:change_page('#load_page'); OR change_page('mypage.html');

Is there jQuery Mobile's equivalent to the Android's ViewPager?

I want to create a horizontal swiping effect using jQuery Mobile. After doing a little bit of research, I found out that ViewPager, which is generally found in the app details page of Android Market, does what I want. In the page specified the author describes it along with code in Android, but I wanted to know if there is an equivalent plug-in or feature in jQM.

I like SwipeJS, it's lightweight and I like the one-to-one slide factor it uses (when you slide your finger across the element, it moves at the same rate).
There is also iScroll 4 that works pretty well (it seems to be more difficult to setup than SwipeJS).
You can however utilize the built-in swipe events in jQuery Mobile. You can bind to the swipeleft or swiperight events for the data-role="page" element(s) and navigate the user to the correct page based on the current page:
$(document).delegate('#page-two', 'swipeleft', function () {
//next page
$.mobile.changePage($('#page-three'));
}).delegate('#page-two', 'swiperight', function () {
//prev page
$.mobile.changePage($('#page-one'), { reverse : true });
});
Here is a demo: http://jsfiddle.net/fFGvD/
Notice the { reverse : true } object being passed as the option object to the changePage() function so the animation will play in reverse.