Create custom styling in Xamarin - xamarin

I'm about to start a new project in Xamarin, since we need to create a mobile app for Android and iOS. But we require that both platforms look exactly the same.
Is it possible to do this using Xamarin or is it only possible using something like Cordova?
Thanks!

require that both platforms look exactly the same
It depends upon what you mean by that statement.
In regards to Xamarin.Forms, "native" widgets are used on each platform so the "same" app's UI, deployed to a different platform, will look different (the difference can be slight or vary greatly based upon the controls used).
Web based / Hybrid apps tend to render fairly the same on each platform. Each platform does have its own HTML/CSS rendering engine so there are differences, and thus the CSS can vary from platform to platform to obtain the desired "sameness".
There are GUI frameworks that render their own controls/widgets and do not use the platform "native" ones. While a lot of these tend to be game related UI frameworks, there are many options available depending upon want you requirements are.
i.e.
OmniGUI : A Xamarin.Forms friendly cross-platform that renders its own controls and thus looks the same on each platform.
Flutter : Google's mobile UI framework that renders its own "widgets". While there are widget collections that have Material Design and Cupertino styles applied, you can use the basic widgets and style them in a "CSS" like analog using Google's Dartlanguage.
Many others...

Related

Porting android app to xamarin or windows native questions

So, I have been developing an android app for some time, and I was requested to try porting this app to windows phone too. In order to reduce the hassle in trying to maintain two separate versions of the same app, I decided to try to port this app into xamarin, because I have heard that its performance is better than hybrid apps. These are my questions with regard to xamarin:-
I want to maintain the same look and feel which I had in my original app into my cross platform app, and at the same time, make it distinct in the windows version. What are the things I can do to achieve this effect?
Is it rather better for me to port this app to windows phone native, because of added problems in trying to create a common app?
Are there any restrictions with regard to Windows store when publishing xamarin apps?
Xamarin doesn't really cover Windows UWP apps, only in the notion that they have the UI Framework Xamarin.Forms running on that platform. Meaning, that what you are making is a native Windows UWP app.
What Xamarin is great at is when you start targeting more than one platform and you have structured your code in a way that it can be reused on the supported platforms. This could for instance be done by putting most of your logic and behavior into a Portable Class Library/NETStandard library and consume it in your apps.
A Typical pattern for making platform agnostic logic and behavior for your apps, is the pattern known as Model-View-ViewModel, where the View is platform specific, while the Model and ViewModel usually are platform agnostic. The ViewModel is where the behavior resides and it is what ties the Model together with the View.
Usually the ViewModel wouldn't directly know the View, but there would be a layer in between (glue), such as XAML or a binding engine from MvvmCross, MvvmLight or ReactiveUI to name some MVVM libraries.
What Xamarin provides is the ability to write C# code for Android and iOS, which greatly enables you to share code between those two platforms, but also all the Windows platforms. Hence, UI, is very much dependent on each of the platforms on their own.
You can, of course, use Xamarin.Forms as a UI abstraction layer, which produces a native UI using the native UI controls to get a similar app on all the targeted platforms.
First of all you need to know there are different styles of Xamarin development, who will share more or less content.
If you use Xamarin Forms you have a Main project non-related to any platform (where you create the views and clases), and specific platform projects who adapt the controls to each native style.
If you develop using Xamarin Classic, you have a Shared project where you only develop data-related classes, and specific platform project with their own views and classes with native-friendly controls and native similar functions, but I think, there is no direct Xamarin Clasic Windows Project.
So if you only want to have two apps who look native both, but with same structure and functionalities Xamarin Forms will be the best option for you, cause you only develop "one single app" who becomes native-style like this:
If what you want is to have different apps, with different functionalities and diferent content, then you need to go for Xamarin Classic. What I recomend you to do then is develop the windows phone in native, but put all of the code you can in a shared library. Then you can create a Xamarin classic Android app and use the shared library. You will still need to mantain two different apps, but you will only need to change the "core" code only one time.
If you use Xamarin Forms to do a UWP windows app I don't think you have any problem to publish it, think Xamarin is from Microsoft.

Fulfilling differing Android / iOS UI conventions from a single React Native codebase?

Is this even possible?
Every overview / analysis of React Native I've found covers the basic reasons for using RN, and is either old (no Android, or "Android just released") or focuses on the fact that it compiles to native elements (ie. not HTML5)
What I'm missing is, how does an app built in React Native fulfill the style guides, conventions, and user expectations of how apps on each platform are supposed to behave? I don't want to make an Android app that looks like an iOS app, or vise versa.
As #jevakallio answered you can customize you UI to platform specific rules from Google or Apple.
Technically it can be done in several ways. If differences are small you can make conditional check with Platform module:
if (Platform.OS === 'ios') {
...
} else {
...
}
If differences are big then use file postfix (android or ios):
MyComponent.ios.js
MyComponent.android.js
https://facebook.github.io/react-native/docs/platform-specific-code.html
You even can make full different UI for each platform or device type (tablet or phone) saves all non-UI logic common.
The seminal resources for platform-specific style and interaction guides are the Material Design system for Android and the Human Interface Guidelines for iOS.
Implementing iOS-feeling UX on React Native is quite simple out of the box. Android apps may benefit from using react-native-material-design package to get native feeling controls.
One of the biggest challenges for web developers coming to mobile development via React Native (I am one) is to know what makes that native feel. This is a very subjective and touchy-feely topic, and cannot be easily solved by reading guides or applying logical engineering mindset to the problem.
I have found that using tons of popular apps and trying to reason about what makes them tick is a invaluable practice for this, as is critically evaluating your own work and putting time and care to details, as sometimes that is what makes all the difference.

Should I choose Xamarin native or Xamarin.Forms for existing Android app?

We have an android application and want to recreate it for cross platform.
What are the facts for or against Xamarin native and forms?
The advantage of native would be, we could reuse all the xml-layouts while we have to recreate the iOS view in either XAML or XIB?
Is there anything what is really a blocker?
I'll comment based on Giorgi's answer with some actual insight and refer to the copied bullet points:
This is a resume of the experience i've gathered in the past 6 months:
Xamarin.Forms is best for:
Apps that require little platform-specific functionality
Wrong. With DI you can use any device functionality you could possibly want. Check out XLabs on GitHub if you doubt this.
Apps where code sharing is more important than custom UI
Kind of nonsense really. You can write your own renderers to represent controls of each platform in the way you want. I've also written more difficult renderers for custom controls such as a SideDrawer. In android i was done in 2 days, iOS about 2 weeks (android renderer was just a wrapper for the native control)
Developers comfortable with XAML
well yeah and anyone who enjoys convenient UI development. Mind you that there is a learning curve with xaml (which i already knew at the time i started from WPF development). But from what i have seen it's not that different from android.
Xamarin.iOS & Xamarin.Android are best for:
Apps with interactions that require native behavior
While hacking your solution up natively is certainly faster you can instead be done rather quick if purchase good controls / know a good native implementation and mirror it in C#, since the API in C# is very similar to the native one.
Apps that use many platform-specific APIs
Not sure why Xamarin is doing anti advertisement against forms. I had little trouble with it so far
Apps where custom UI is more important than
code sharing
Probably true, but it's also harder to keep UI functionality inline and you will need more manpower.
Things to consider about forms:
Forms seems to be stabilizing at the moment and i am sure Microsoft will do their best to turn it into a solid, reliable product (build issues have been a nightmare in the past sometimes, but it has gotten better over time)
The XAML for Xamarin is less developed compared to WPF XAML, though very similar. Recent nuget updates however provide mirrored functionality at an impressive rate. The vast majority of features you expect and love about XAML are present.
List performance is bad if you don't do your research (here). Performance increased loads in that area.
If i had to make the choice again i'd still go for forms. While there are sometimes things which seem flawed / bad you can usually figure out a clean fix somehow, while spending most of your time actually developing the app. (sometimes you will still find things which just make you frown why something isn't implemented, like the Margin property being implemented only just after microsoft purchased xamarin)
If you end up having a requirement of nested lists, make sure to have a look at embeded native controls in order to achieve the maximum performance - this was essential for a product i was working at. See this
According to Xamarin.Forms main page:
Xamarin.Forms is best for:
Apps that require little platform-specific functionality
Apps where code sharing is more important than custom UI
Developers comfortable with XAML
Xamarin.iOS & Xamarin.Android are best for:
Apps with interactions that require native behavior
Apps that use many platform-specific APIs
Apps where custom UI is more important than code sharing
Giorgis answer is the right one, but since you added some more constraints here are my thoughts.
I would analyze the current app. How much code is business logic which can be shared? How customized is the UI, should it look more native or more the same and how will it change in the future? If you plan to change a lot in UI and platforms should look similar, it might be easier to switch to forms.
Also consider if are you planning to develop for Windows Phone? If yes, you might save a lot of time just for this third platform.
After all there is one thing which I would also keep in mind. Developing in Xamarin.Forms does not mean, you cannot develop native. It is just an additional framework. In worst case you can still do everything natively.
Personally I use Xamarin.iOS & Xamarin.Android with MvvmCross, that way I can keep full control of the native UI on each platform while maximizing code reuse.
From Xamarin website (who knows better than them?):
Xamarin.Forms is best for:
Data entry apps
Prototypes and proofs-of-concept
Apps that require little platform-specific functionality
Apps where code sharing is more important than custom UI
[https://developer.xamarin.com/guides/xamarin-forms/]
With Xamarin.Forms at runtime, each page and its controls are mapped to platform-specific native user interface elements.
With Native Xamarin.Android and Xamarin.iOS apps leverage platform-specific hardware acceleration, and are compiled for native performance. This can’t be achieved with solutions that interpret code at runtime.
"Xamarin.iOS - The best way to build native iOS apps."
Ship native app bundles on the App Store. Our Ahead-of-Time (AOT) compiler compiles Xamarin.iOS apps directly to native ARM assembly
code, meaning your app is a native platform binary.
Access any iOS API. We bring 100% of Apple’s iOS SDK to C#, enhancing Objective-C APIs with stronger types and .NET naming
conventions so you feel right at home.
Call existing Objective-C code from C#. Use your existing Objective-C code, frameworks, and custom controls in your Xamarin app
using our automatic binding generator.
Build WatchKit apps. Use Xamarin Studio or Visual Studio to build new Watch Apps, edit Watch user interfaces in the iOS Designer, and
debug Watch apps in the iOS Simulator.
Stay up-to-date with Apple. We released same-day support for iOS 5, iOS 6, iOS 7, and iOS 8 so your apps can take advantage of the
latest iOS features as soon as possible.
[https://www.xamarin.com/platform]
"Xamarin.Android - The best way to build native Android apps."
Ship native Android packages. Xamarin.Android uses just-in-time compilation for sophisticated runtime optimization of your app’s
performance, meaning your app is a native Android APK.
Access any Android API, including new form factors. We bring 100% of Google’s Android APIs to C#, enhancing Java APIs with async support
and .NET naming conventions so you feel right at home.
Call existing Java code from C#. Use your existing Java code, frameworks, and custom controls in your Xamarin app using our
automatic binding generator.
Build Android Wear apps. With access to 100% API support for Android Wear, create full-featured applications capable of running on
Android Wear devices. Stay up-to-date with Android. Xamarin stays
up-to-date with the most current APIs from Google, so you can always
use the latest features in your apps.
[https://www.xamarin.com/platform]

Xamarin - Different views for each platform

I am currently working on Xamarin project and after some research, I am confused about how cross platform UI works.
Let's take the 3 following smartphones:
Samsung Galaxy S5
iPhone 6 Microsoft
Lumia 640 LTE
Three phones with three different types of controls. Samsung has 3 buttons at the bottom, whereas the iPhone has just 1 button. The Microsoft phone has 3 buttons like the Samsung, but those are different. So this is why I am confused.
The cross platform design shown in the tutorials such as this tutorial shows a shared design.
However, my goal isn't to make the same interface for each platform. I saw this article which is similar to what I want to make. We have the same app logic, but the design depends of the platform
In order: Android, iOS and Windows Phone
Now, here is the app architecture proposed by Xamarin
To achieve a different design per platform, I must not create a "Forms Xaml Page" in the shared project, but create 3 different pages (1 per platform). However, I'm not sure how this can be achieved.
At the launch, each app executes the following code line:
LoadApplication(new App());
So, if I make 3 different interfaces, how can I load the one specific to the platform the app is running on?
Also, if we use the MVC pattern (I know about MVVM, I just do not understand it at the moment), make 3 differents views, each one with a controller, but only share models/data/motor. (MVC -> 1M/3V/3C).
A good approach for a cross-platform project with platform-specific UIs is to use MvvmCross or a similar library.
The TipCalc-Project is a sample app which shares business logic via a Portable Class Library (PCL) and makes use of the MVVM-pattern (Model View ViewModel). You have a separated UI-project per platform (Android, iOS, ...) and reuse the functionality from your PCL.
This allows to share a large amount of your business code without using Xamarin.Forms and without any compromises regarding your UI.
You should have a basic understanding of MVVM and Dependency Injection for this approach.
With Xamarin.Forms, you are sharing the app logic and potentially all of the UI code by using the Forms API. This means the app interface will be fairly similar on all platforms.
With the non-Forms approach you share the app logic and then any UI code can go in the platform specific project and use the platform specific API.
Reading your requirements, I would suggest you look towards the non-Forms based approach of sharing code with Xamarin, rather than using Forms.
We have some good guides to get your started with this as well as a sample and case study.

Difference between Xamarin and Telerik's native script

Xamarin
Write the model in C#
Write the views for each OS in their own native way
Xamarin promises that the new functionality in libraries is added the same day
Telerik Native script
Write in javascript and call native script's api that then calls the separate OS javascript apis?
Write the view in html5 and css which is re-usable for all OSs as they now all support html5 and css front ends?
Telerik simply states... and I paraphrase 'it does not have this problem'
If the above is so, how is Telerik any better than Xamarin as it states on its website:
"When using NativeScript the new additions to the native platform are
available immediately. This is not the case in neither Xamarin or
Appcelerator, where there are technical limitations and wrappers needs
to be created when new native platform features are added."
I am confused at how Telerik is being penned as being better than Xamarin when Xamarin comes with strong type language without using TypeScript's slightly loose thing going on. And also that Xamarin does in fact sit in exactly the same boat as Xamarin apart form the view part... which is actually supposed to be a benefit?
Question:
- What's the difference between them apart from the two I have denoted?
- Why would Telerik claim such a thing?
[Disclaimer: I work for Telerik.]
Telerik NativeScript and Xamarin are solving similar problems in different ways. Both frameworks are focused on enabling developers to create cross-platform mobile applications with native UI and shared, common code across all platforms.
For NativeScript, we're focused heavily on the web developer skill set. We want anyone that is comfortable today writing HTML/CSS/JavaScript to feel instantly at home creating native apps using NativeScript.
The only thing that is a little different is that views are defined in an XML-based markup. This markup is parsed by NativeScript and rendered as native UI on all target platforms. (NativeScript modules encapsulate the platform-specific renderings.)
The capability you highlight is also something unique to NativeScript's approach for exposing underlying native platform APIs. NativeScript effectively uses (build-time) reflection to make ANY native API available to the JavaScript proxy. That includes 3rd party native libraries. You do not depend on Telerik (or the open source community) to update NativeScript to take advantage of these new APIs. You simply execute a command and auto-discover the new APIs.
Of course, we don't expect a lot of people to write against the raw native APIs using JavaScript, so that's where modules again help encapsulate the different native APIs and expose a single, clean, cross-platform JavaScript API. Anyone can create NativeScript modules.
There's a great post that explains how all of this works in much more detail on the Telerik Developer Network (TDN):
http://developer.telerik.com/featured/nativescript-works/
NativeScript's public beta will be available this week, and v1 will ship in May.
UPDATE [Feb 2016]
Since this was originally posted, NativeScript has shipped and is now in v1.6. It is also now integrating heavily with Angular 2. You can track the project progress on GitHub: https://github.com/NativeScript/NativeScript
UPDATE [June 2016]
There are now performance metrics comparing NativeScript and Xamarin. Please find them here:
https://github.com/NativeScript/sample-iOS-Profiling/tree/performance-tests
Telerik is a UI component and it has some beautiful control for designing in xamarin forms,MVC. Net and etc, but xamarin forms is a technology that helps deveopers to make mobile application using c#

Resources