How to make ui for supporting all the screens? - user-interface

I am new to phonegap.
I am implementing html with cordova.
But the problem is the screens are not adjestred properly for android and iPhone.
If any one know ,Please help me

I think you have to use a framework like jQueryMobile or Bootstrap to handle all screen sizes

One solution is using viewport meta tag. For more detail, your refer to the below links:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag#Common_Viewport_Sizes_for_Mobile_and_Tablet_devices
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
Other solution, you can use Javascript library such as monaca.viewport.js (https://github.com/monaca/monaca.js, http://docs.monaca.mobi/en/reference/javascript/monaca_viewport/).

Related

Showing Live Camera Stream inside Xamarin.Forms App

I am working on a Xamarin.Forms App in which I need to display the current camera stream in order to shoot a photo from inside the app. Has anyone an advice on how to implement that? Is that easily possible?
Thanks!
Edit:
I found an awesome sample project from Xamarin doing exactly what I need :)
https://xamarin.com/prebuilt/moments
It depends on how much integration you need. You can start with something simple like: https://github.com/jamesmontemagno/Xamarin.Plugins/tree/master/Media
If that doesn't do what you need, you will need to create a custom renderer on each platform. It isn't too difficult but its more work.

React.js vs Auto-Layout

We are thinking about moving from Auto-Layout to React.js.
How does React.js build for multiple screen sizes: 3.5", 4.7", 5.5", iPad Mini, iPad Air ? and why is it easier in React.js ?
Has anyone made the transition? Please share your experience?
The purpose of the React.js framework is to help you create reusable components for your application. It doesn't enforce any structure of the html content, and it doesn't natively have support for things like auto-layout, since that's the role of CSS.
There is no direct auto-layout support in react, and there's no UI editor like interface builder where you can set the constraints for a particular html element. You can achieve similar results, but you'll need to write CSS rules for that.

Designing Android UI and Implementation Using Fireworks

I want to learn designing android UI and implementation to android apps. I found one video tutorial on the web but It seems only how to design. I don't know how to use it on apps.
Video Tutorial
How can I use custom UI design on my android app ? I'm using fireworks for design. For example, simple design:
How can I use this on my app ? (I know it looks terrible but I just want to learn how to do it.)
Simply creating a UI in fireworks won't be enough. You'll need to split it into multiple components, and the construct it within your app using XML or Java.
The Android developer site has a good set of documentation and guides on doing this.
Searching on Google will also give you lots of tutorials for the different UI elements and how to style them.
Your layout will require a tabbed Activity (or an ActionBar with tabs), a TextView and a Switch, from what I can see.

Basic layout of appcelerator app

I creating my first appcelerator app and looking for some info on whether something is possible, and if so is it easy to implement.
I'm using Titanium SDK 2.0.1.
I'm trying to create a layout similar to the Stream window in the Google+ app for Android:
1: A large header (Can the navbar property of Ti.UI.createWindow be adjusted?)
2: Two tabs under the header (Would like to be able to adjust height of them if possible? Are there alternatives to Ti.UI.createTabGroup if this is not possible?)
The main content I can figure out easily enough I reckon.
Any examples or links on how to achieve this layout would be great.
Thanks
There is no way to do that type of NavBar in Android using the native Ti.UI.Window properties, but you can just create your own NavBar using a view and stick to the top of the window. For the tabs, I'd look at http://www.tomaspersson.com/2012/03/20/titanium-viewpager-module-now-available/ - I'm not sure it will have all the options you need, but it is a good starting point. Good luck!

Phonegap basics - designing ui for iphone and android

I'm developing an application both for Iphone and Andriod using Phonegap.
I came up with all kinds of plugins JQuery, JQTouch and more,
What is the recommended way of doing this?
Meaning-designing a generic UI (tabbars, tables, navigation bars etc') for both Iphone,Android that will "feel" native?
Thanks,
Asaf
If you want your application to look as native as possible I'd try jQuery Mobile.
The documentation is brilliant and all of elements look native to the iPhone. It's also incredibly easy and quick to build up your UI as all of the design and colour scheme has already been done.
I've used this in an Android application that I've made and I've so far received very positive reviews.
You may also want to look out for Kendo UI which is out this month! Again, very similar to what jQuery mobile is about with a few exceptions. It has great support for graphs and data, and promotes native Android look and feel.
Sencha Touch has just released version 2 and it is a good JS toolkit as well.
I feel I have to put my hat in the ring for jQTouch. Although the version downloadable from their site is a bit oldish, if you get it from GitHub it is currently maintained and works well on both iOS and Android. https://github.com/senchalabs/jQTouch
Also, if you want the fixed headers or footers with scrollable elements in-between, DataZombie's fork of jQTouch includes iScroll which does a great job of this. https://github.com/DataZombies/jQTouch
I am also in the process of developing a theme for jQTouch that will allow apps on Android to feel quite a bit more "native" than the other js kits as they all seem to have a very iOS-cenrtic navigation style (e.g.: back buttons on toolbars instead of relying on the hardware back button, etc). Even if you don't want to wait for my theme, making your own is pretty easy on jQTouch. I would not call myself a designer and I managed. ;)
Feel free to choose one of the other answers, but keep jQTouch in mind. I tried and tried other JavaScript frameworks and it was the only one that made it possible to look good on both platforms.
jQuery Mobile works awesomely.. and with the theme roller coming soon it will be pretty good.
Kendo Mobile UI - Pre release rip.. I have a working Eclispe project here.. markup is identical to jQuery mobile.. but this is faster, nice native looking apps. Take a look

Resources