I have a screen design where the text is above the wave.
This is the original design.
but when I try to do it in different Android screen size, I get this
The text is not part of the background.
Does anyone have any suggestion on how to work around this issue? Should I make the text part of the background?
If this is a rather design-orientated question, then I want to share my thoughts:
Embedding text into images is something that I as a developer would try to avoid. This got several reasons:
Text embedded in images cannot be scaled using the built-in Android text size option. When using a regular TextView, it is recommended to specify the text size using sp standing for scalable pixels, which take the user preference for Android-wide text size into account. See this question for more details.
Text embedded in images cannot be found by the Android Accessibility framework (for example, Text-To-Speech for blind people).
Images that have text embedded are really bad to maintain from a developer perspective. You need to provide several resolutions, several languages, and optionally different images for bright or night mode in Android. This leads to a huge amount of resources that is unhandy.
You need to carefully test and configure images with included text, because there might be devices with unusual resolution leading to distorted images or text.
I'd personally prefer using a regular TextView for the text and let the surrounding layout handle the position of the TextView. ConstraintLayout is really flexible doing that. You could also just use two or three different layouts to separately configure in each layout on how the TextView should be positioned. Depending on your development framework, Android could even automatically pick the right layout, depending on the device size.
Hope this gives you an idea.
Related
I want to get into mobile game development but before I get started I want an idea of what the process is like so I can choose the right tools.
Obviously screen resolution is the most obvious, but what other things have to be changed so it will work on multiple phones?
This is an enormous topic. The most basic design is to have a rectangular play area that can be stretched to fit the screen you are using. Whether you keep your original aspect ratio or "match_parent" for both dimensions is up to you.
You've recognized that that won't take full advantage of screens of different resolutions so many courses and tutorials will walk you through learning to design a relative layout that will arrange and size some elements according to the available space and other elements according to how much space the content needs. You'll also eventually provide images of different resolutions that will be used for different screen densities.
I recommend you jump right into game development before understanding this topic fully. There are many intricacies that you'll come to understand as you work with them.
How is someone supposed to use the drawables located in ...\AppData\Local\Android\android-sdk\platforms\android-22\data\res in Android Studio projects?
For example, if someone would like to change the Floating Action Button icon to a pencil icon, what is the standard practice?
Is there some kind of documentation available that demonstrates what each drawable XML file actually looks like when drawn? Or are you expected to copy and paste these into your project in order to see what they actually draw?
Surely there is some kind of gallery somewhere...
Unlike any other O.S, Android powers billion devices with different screen sizes, ranging from small phones to large TV sets. And it becomes a primary necessity to run apps with perfect User Experience on all sorts of devices! And for that purpose Android uses DIP or DP (Display Independent Pixels).
And coming to the solution to your question, consider reading from here
And, the general procedure is to generate images of different resolutions for different screen sizes, see this
Also, this video explains it simple!
And in order to generate multiple images with different resolutions for the respective screen sizes, I personally use a resizer tool. Final Android resizer, available here.
hope it helps!
is there any method maybe using php (excluding js/jquery as i don't know how to use it) to get the users screensize and use it to make the css work with that
for example if i use percentages instead of pixels to set up my heights and widths it still doesn't respond to the screen size of my phone and the user has to zoom in to see the information clearly, it doesn't make it bigger, and by that i don't only mean text, images and html elements such as divs/spans/w.e....
also i don't want to use bootstrap, i want to understand how it works, using bootstrap is like driving an automatic car without knowing how to drive a manual...
One essential thing in web design for smaller devices is to include this in the header of all pages:
<meta name="viewport" content="width=device-width"; initial-scale="1.0" />
It deactivates the automatic "shrinking"/downzooming of the page content to the current viewport (= screen) size, which is important for smartphones and tablets. A pixel remains a pixel, so if your smartphone screen is only 320px wide, that's what's the width limit in absolute pixels.
If this isn't included, the built-in automatic just interprets the width of a non-responsive page as 100% and compresses it to the width of the device, which will result in tiny fonts and images, which you can see in every non-repsonsive website.
After that, you'll have to become friends with media queries...
There are some frameworks tha will help you get this kind of behavior. One of the easiest ones to use is Twitter Bootstrap. It is very easy to setup and understand. It uses a grid to determine the size of the elements in your page relative to the width of the device. Also, there are many prebuilt items that might help you getting started.
Another useful framework is foundation, the concept is very similar to twitter bootstrap. Altough it is more flexible it requires a bit more time to lear how to use it.
If you are going to do the adaptative functionality by yourself, or if you are interested in learning how this is actually done you should investigate media querys.
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
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.