I'm working on a project where one requirement is to use the Google's Material design. The other requirement is Angular2. Unfortunately the material design for NG2 isn't fully ready yet. Since in the past I've worked with Ionic2, I've seen that it has a huge library of components already set up with the material design (for android). I was wondering if there's some way to extract those components and re-use them inside another angular2 project...
Is it witchcraft? Thanks for any suggestion.
Is it a web project or a mobile project?
In any case you can't just extract a component, what you can do is use PWA Ionic 2 - PWA forum post, set you application mode to 'md' in you app.modules imports and then edit the remaining css to look more like material design
Related
Context
I am facing a problem with Ionic + Angular + Capacitor + iOS. It's related with the ion-datetime iOS component design and according to my research there is a possible workaround to match it like Android devices.
Problem
The problems starts when the ion-datetime is implemented and apllied to iOS devices. If we want this component iOS design to match the Android design the documentation tell us to pass a mode attibute with the value md. Here's HTML an example:
<ion-datetime mode="md">/ion-datetime>
And another example for both HTML and TS:
pickerOptions: any = {
mode: "md",
};
<ion-datetime [pickerOptions]="pickerOptions"></ion-datetime>
However this documented approach it's not having the desirable outcome. Therefore the iOS component still haves a curved wheel instead of a flat sheet. Let's take a look on a visual explanation.
Visual Explanation
As explained before both iOS and Android devices should now have the exact same design because we have setted the mode attribute to md. As we can see on the example image this is clearly not the case. iOS component design is still acting like some sort of curved wheel. Continuing to be very different from the android device.
(Posted on behalf of the question author, in order to move it to the answer space).
The solution to fix this issue is quite simple. However it will impact all Ionic components design because we are going to set the full Ionic Module to be just and only md (Material Design). So please be aware that everything related to frontend will be overwritten to possess Android design. To make this solution/workaround happen we will have just to manipulate the file "app.module.ts".
#1 App Module TS (Ionic Project)
...
#NgModule({
imports: [
IonicModule.forRoot({
mode: 'md',
}),
]
})
export class AppModule {}
And that's it! The iOS ion-datetime component design will now become exactly like Android component design. Please don't forget that this will cause all ionic components to be overwritten with a material design.
References
https://ionicframework.com/docs/api/datetime
https://ionicframework.com/docs/api/picker#pickeroptions
https://github.com/ionic-team/ionic-framework/issues/16717
I'm new to xamarin forms (but familiar with WPF) and want to create a rather simple material-design app (currently android-only, but want to add IOS support later).
Even after hours of googling I have no idea where to specify the app design.
I basically started with a Xamarin Forms Crossplatform Mobile App Project and used the Master-Detail template in Visual Studio. This provides me with three projects, the "xamarin", android and IOS projects (I will call them like this from now on). Background- and logic code is currently located in the xamarin project, aswell as the basic layout for the views (button definitions, etc.).
So how do I edit the styles of the buttons, content pages, etc. to match the material design (Background colors, shape, etc.)?
There seem to be two options:
1) Define colors, styles and themes in the Android project (Resources/values/colors.xml and styles.xml files).
2) Define colors, styles and themes in the Xamarin projects xaml files (App.xaml, [pages].xaml files).
Which of these options is the way to go? What do you recommend?
I assume to have more styling options available if going for 1), but then I will have to specify every style separately for android aswell as for IOS. If specifying it in the shared xamarin project, I will only have to do it once for all platforms.
Am i right?
What are pro's and con's / is there completely other way of doing this?
Setting your colors, styles, and themes in the App.xaml file of your "Xamarin" project is the recommended way when doing Xamarin.Forms projects and will probably be the best way to go. This will put all of your information in one place to allow easy editing and will allow you to reference the styles easily in your code/XAML.
I don't think it's noted in the docs, but you can also use Xamarin's OnPlatform setters to set different iOS and Android values.
Look here for info about global styles and here for information about OnPlatform.
I have made a website using HTML5.
However, I'm trying to make the app using the CSS, JavaScript and HTML I used for the website. Is that somehow possible?
I must use Android Studio.
Nope, you can't do that.
Android Studio is based on Java (logic) and XML (design).
XML and CSS are a little bit similar. You have paddings and margins too.
However. Prepare yourself to put work into the project.
But why do you need an app when you can also show the same contents in a website that works on way more devices? You can also use a WebView to show your website in the app.
If it must be native and you can't use a WebView, just rebuilt the design, Check out the material design guidelines, stick to them and your app will be easy to use for the users and look awesome.
Links:
https://material.google.com/ (read through the components stuff)
https://design.google.com/icons/ (all icons)
I really like hybrid apps idea but I also really like android's native material design look and feel. I was just wondering if anyone knows any framework to look like Google's Material Design with HTML and Cordova? I just want a template that looks like native android app with Material Design.
Update
Material Components Web is the best one... I changed my answer because it's new and it wasn't there before. I made a wordpress theme for MDC and I may release it soon. Showcase: http://toufic.000webhostapp.com/
Original answer
Angular Material is really the best after doing some research!
I recommend Apache cordova for hybrid apps. Also, you can use Ionic Framework that make beautiful views with beautiful components (most of those component are based on material design) and if you don't like it, you can make your component!
Ionic framework is front-end that works with apache cordova.
Good start!
I was wondering if it was possible to include AngularJS to design certain elements of my Android App and how one could go about doing so. More specifically, how could I apply this angular api: https://material.angularjs.org/#/material.components.radioButton/directive/materialRadioGroup to a radio group in my android app.
Thanks for your help.
It's possible but I wouldn't recommend it for an app yet. If your making a hybrid app I'd recomend taking a look at ionic they basicly intend to fix all the headaches people have with cordova. Their design isn't exactly material but it looks decent and they have plans to switch to material design once angular-material is ready. In fact they are the ones working on angular material.