I have been learning android development and I am still new to this.
I have already designed many apps for iOS.
Is there a better way to have my layouts as easy as iOS?
because in iOS I only have to drag and move it wherever I want . Where in android I have to insert tables and edit XMLs, which I find very confusing and not flexible to deal with.
I have read and watched many tutorial and still find it a bit difficult to deal with
Thanks
There is a layout editor for Android that you can use in Eclipse. Is that what you're looking for?
http://developer.android.com/guide/developing/tools/adt.html#graphical-editor
The short answer is NO. The long answer is that this is how it's done on Android, and it's much more flexible than the iOS method. Just imagine making Android app the iOS way and support screen sizes such as 240x320, 320x480, 480x800, 480x854, 540x960, 600x1024, 720x1280...and so on, and it's easy to realize that it would be an impossible task. This is almost certainly why Apple went with "Retina Display" with exactly 2x the pixel density and exact same screen dimension (3.5") - because doing anything else would mean that all the apps would need to be designed specifically for the new screen instead of just providing images with a #2x postfix.
So, instead of absolute positioning and sizing like the iOS, XML is used in Android where designers are tasked to come up with one or more layouts that can support this diverse range of screen sizes.
You can use Eclipse Layout Editor for Drag and Drop with absolute layout. But using absolute layout is not a good practice because in iOS screen size is fixed for all device but in android there are different screen size device are available and if you design a layout considering a single screen size it will be messed on another screen size device. You must follow the norms to create a layout go through this link for more detail.
http://developer.android.com/guide/topics/ui/layout-objects.html
Related
I have a sophisticated design for an Android app and designed using Photoshop.
The app has many drawings and curves which mean I can't use Android Studio to develop it there.
I know there are many ways to slice in Android, but I can't find the best way yet to finish the job quicker and with a higher quality.
The VERY BEST solution - use Zepline online service: https://zeplin.io/ .
It is, this service authomatically calculates all dimensions in 'dp' (you don't have to calculate everything manually)- just select widget and see margins, space between elements, etc. But, the MOST useful thing, is that it converts your pictures into .png files to drawables for ALL densities. It releive you from pain of scanling up and down all pictures.
Actually I need some suggestion like Designing screens for android mobile as well as tablet. As of now im creating two different folder for xml one is for mobile and another one is for tablet. Im placing images in 4 different images with 4 different resolution like (160 dpi, 240 dpi, etc). so am i going in right way or i need to change the way of designing. Thanks.
When designing for different devices it is important to test whether there is a necessity to create different layout files for the different devices. If you find that you do want that then there is plenty documentation online about it. Read these first:
Designing for different screen sizes
Guide lines
More android screen size documentation
Each of these links explain the new methodology of designing for multiple screen sizes.
A few tips on top of the already answered question that I gained by experience:
Use #dimen everywhere you have to specify a width/height but in general, avoid specifying them if you can. This way, you can override the dimension based on the available DPI and don't have to replicate your layouts.
Use LinearLayout wherever you can and use weights to determine how things should be drawn. Other layouts like relative layout are fine as long as they're used for positioning (isLeftOf for instance) as opposed to making a certain space available.
Use fragments wherever you can. It's much easier to work with self contained fragments. In general, avoid having any UI logic in your activities and let the fragments handle them.
Use the Android Asset Studio (http://romannurik.github.io/AndroidAssetStudio/icons-actionbar.html#source.space.trim=1&source.space.pad=0&name=ic_action_example&theme=light&color=33b5e5%2C60) which will take care of resizing your images for you. It's been very valuable to me. Have a look at these other projects too. They can help you in many aspects when designing your UI: http://romannurik.github.io/AndroidAssetStudio/
Even when you do all this, you may come across a scenario where you really do need to write a different layout for tablet and phone. If this is the case, as long as you've created everything in self contained fragments, it's much easier to switch fragments or even use the same fragment code with different layouts (as long as they contain the same UI elements) depending on the dimension. It would also be advisable to use the trick here (Determine if the device is a smartphone or tablet?) to determine if you're running on a large/small tablet or a large/small phone.
All in all, it's a little bit painful developing and testing your app on all the available device sizes but as long as you follow the above points, you'll have an easier time.
So i was building this UI for an app in Unity to be deployed on Android Platform.
Here is the preview from the Game Window :
But when i build and run the app on my device, it shows this :
The header log is anchored on Top, the title is anchored on Center and the buttons are anchored on Bottom.
Here is the hierarchy of the components :
Im new to Unity and NGUI so i really dont know what's wrong with this. Thank you guys.
Different behavior is probably caused by different resolution/ration on your device in compare to your editor window. To emulate such behavior in the unity editor, you can force resolution/ration in your game window, or you can add your specific device resolution (what I actually recommend for you to do as a good start):
When you experiment with few of them, you will see that your interface is behaving in different ways.
To change that behavior on different screens, you can check your UIRoot options, especially Scaling, see UIRoot documentation.
Another good places to start is NGUI forum's topic concerned in handling different resolutions or official video about NGUI anchors.
Hope that this will guide you to perfect cross-device interface design.
I think your problem is configuring how is going to work NGUI with your sprites. There are 2 things you could do:
Use a pixel perfect resolution: This will maintain the perfect size of the sprite, and will look the same on every platform (this causes some things to look smaller if the resolution is higher)
Use a fixed Size of the UI and recalculate the sized based on the device.
The problem you are having here.. is because of that. The background for example, should be larger if the screen is larger.
To achieve that.. NGUI provides you with a UIRoot where you can configure the Scaling style to PixelPerfect, FixedSize and FixedSizeOnMobiles.
Try setting that up and the images will adapt to the different sizes.
Hope this works for you, I'll attach an image so you can check out what I'm talking about
I was really wondering.. What is the easiest way, in combination with Phonegap/Cordova, to make your app support multiple screen resolutions? Mainly all Android ones, such as 480x800, 720x1280x 1280x720, 800x1200, etc.?
I've already created an app with percentages only (Click) (Which would show great on all 16:9 screens, but it doesn't), but that isn't enough. Only on screens with 720x1280 it shows ok.
Especially the option to deploy both for phone as tablet seems impossible due to the whole different orientation.. and the bigger screen leading to a whole new UI (for best user performance).
The only way I could think of is creating a different stylesheet for EVERY resolution, which could take up a huge amount of time; i guess?
Looking forward to feedback, thanks!
First, code responsive where ever possible. Instead of media queries (which are messed up on android 4), you could try https://github.com/biodiv/cordova-screengod
After deviceready, you call
screengod(['path/to/your.css'],function(){
/* do your stuff */
});
and it automatically adapts your css to look the same across all platforms/screens.
Personally, I use Bootstrap and their Grid system. It takes a minute to figure out how it works and how to get it to fit with what you are trying to do but once you do, it is amazing. Documentation is here.
I wanted to know if it was possible to precisely position widgets on Android using XML files? From my experiments, precise position seems impossible via XML. Programmatically, I'm able to position things perfectly based on the device width and height. However, using XML and dip values, things seem to fall apart. Here's one example of what I mean.
Mark Murphy, on an article, wrote:
Some developers, perhaps those coming from the "drag-and-drop" school
of UI development, think first and foremost about the positions of
widgets. They think that they want certain widgets to be certain fixed
sizes at certain fixed locations. They get frustrated with Android
layout manager (containers) and may gravitate to the deprecated
AbsoluteLayout as a way to design UIs they way they used to.
That rarely works well even on desktops, as can be seen by
applications that do not handle window resizing very well. Similarly,
it will not work on mobile devices, particularly Android, with its
range of screen sizes and resolutions.
Instead of thinking about positions, think about rules. You need to
teach Android the "business rules" about where widgets should be sized
and placed, with Android then interpreting those rules based upon what
the device's screen actually supports in terms of resolution.
source
This leads me to believe that precise positioning is difficult with XML files. This is important for my app because I'm laying out widgets on a background image so that these widgets need to be placed exactly on a particular area so that the overall UI looks good. The aspect ratio needs to be preserved across resolutions. Can I do all this using XML files?
Thanks! Any help is greatly appreciated!
Yes you are able to pixel by pixel position your views using an absolute layout.
Last time I checked, which was a while ago, those drag and drop interfaces actually created one for you. (Actually just checking for the link seems that this class has been deprecated.)
However, I highly advise against using them. The reason is because you are coding for so many different screen sizes that providing pixel by pixel dimensions will certainly cause problems across devices.
What I would recommend is using a RelativeLayout. I actually use this type of layout for everything that I can. It lets you put your items to right of, or above and below other elements. This combined with padding and margin options in DIP (density independent pixels) should let you create anything that you want. And it should look nice on most devices.