Develop Reference

Which qualifiers should I use for supporting my layouts for different phones screens?

I have some problems with supporting my layouts for different phone/tablet screensizes. My layouts dosn't fit or scale on all screens probably. Some screen sizes give too much space and other dosn't have room for all views.
I have tried to generate different layouts with different qualifiers like: densities, dimensions and sizes in PX and with large/small/x-large qualifiers.
But I can't really figure out what qualiferes I should use to completely fit all screens.
This is a description of how my layouts behave with different screens (tested with genymotion emulator)
480px x 800px 240dpi (S3 Mini): Views dosn't fit in heights.
480px x 800px 120dpi: (Emulator): Views dosn't fit in heights
480px x 800px 320dpi: Too much free space around the views.
600px x 1024px 240dpi: Perfect fit!
600px x 1024px 420dpi: There is almost no space to show anything. maybe 2-3 views at max
1440px x 2560px 560dpi: a little bit of free space
1440px x 2560px 640DPI: Perfect fit!
1440px x 2560px 320DPI: Too much free space around the views
Here is screenshots examples of how the layout Stats scale with different screens:
Samsung S3 MINI: 480px x 800px 240dpi: https://www.dropbox.com/s/kvxggql80ivcmlp/galaxys3mini.png?dl=0
Samsung Galaxy S7: 1440px x 2560px 640DPI: https://www.dropbox.com/s/ivjd6a0zgc81oqy/galaxys7.png?dl=0
Nexus 9 API 23 2048x1536 xhdpi:https://www.dropbox.com/s/r70h4da1xcf2lhi/nexus9.PNG?dl=0
What qualifiers should I use?'
The layouts xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/arion_darkblue">
<TextView
android:id="#+id/stats_title"
style="#style/fragment_titles_style"
android:layout_alignParentTop="true"
android:text="Stats" />
<RelativeLayout
android:id="#+id/statsgroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/stats_title"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp">
<ImageView
android:id="#+id/stats_distance_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#drawable/ic_stats_distance" />
<TextView
android:id="#+id/stats_distance_txt"
style="#style/fragments_textstyles"
android:layout_below="#id/stats_distance_img"
android:text="0,0 Km" />
<ImageView
android:id="#+id/stats_jump_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="35dp"
android:layout_toRightOf="#id/stats_distance_txt"
android:background="#drawable/ic_stats_jump" />
<TextView
android:id="#+id/stats_jump_txt"
style="#style/fragments_textstyles"
android:layout_below="#id/stats_distance_img"
android:layout_marginLeft="35dp"
android:layout_toRightOf="#id/stats_distance_txt"
android:text="00" />
<ImageView
android:id="#+id/stats_transition_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="65dp"
android:layout_toRightOf="#id/stats_jump_txt"
android:background="#drawable/ic_stats_transition" />
<TextView
android:id="#+id/stats_transition_txt"
style="#style/fragments_textstyles"
android:layout_below="#id/stats_distance_img"
android:layout_marginLeft="80dp"
android:layout_toRightOf="#id/stats_jump_txt"
android:text="00" />
<ImageView
android:id="#+id/stats_intensity_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_toRightOf="#id/stats_transition_img"
android:background="#drawable/ic_stats_intensity" />
<TextView
android:id="#+id/stats_intensity_txt"
style="#style/fragments_textstyles"
android:layout_below="#id/stats_distance_img"
android:layout_marginLeft="55dp"
android:layout_toRightOf="#id/stats_transition_txt"
android:text="0000" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/stats_symmetric_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/statsgroup1"
android:layout_marginTop="50dp"
android:paddingLeft="30dp"
android:paddingRight="30dp">
<TextView
android:id="#+id/stats_sym_txt1"
style="#style/fragments_textstyles"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:text="50%" />
<ImageView
android:id="#+id/stats_symmertic_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/stats_sym_txt1"
android:background="#drawable/ic_stats_symmetric" />
<TextView
style="#style/fragments_textstyles"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/stats_symmertic_img"
android:text="50%" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true">
<TextView
android:id="#+id/stats_rotation_txt1"
style="#style/fragments_textstyles"
android:layout_alignParentLeft="true"
android:layout_marginRight="10dp"
android:text="50%" />
<ImageView
android:id="#+id/stats_rotation_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/stats_rotation_txt1"
android:background="#drawable/ic_stats_rotation" />
<TextView
android:id="#+id/stats_rotation_txt2"
style="#style/fragments_textstyles"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/stats_rotation_img"
android:text="50%" />
</RelativeLayout>
</RelativeLayout>

Have you heard about using several dimens.xml file?
Having different dimens but one layout
That way you could have one layout, but could define sizes of elements from different dimens.xml-s which are describing dp sizes separately for each size you'd like to support.
Example from the offical android page:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="textview_height">25dp</dimen>
<dimen name="textview_width">150dp</dimen>
<dimen name="ball_radius">30dp</dimen>
<dimen name="font_size">16sp</dimen>
</resources>
Then you can use these values from the layout:
<TextView
android:layout_height="#dimen/textview_height"
android:layout_width="#dimen/textview_width"
android:textSize="#dimen/font_size"/>
If you have several dimens.xml but only one layout.xml for a page, it's easier to change them consistently.
Design layout for tablet sizes
Also, consider checking the smallestWidth resource using for tablet sizes, you can handle larger screens easily width this, adding dimens.xml and/or layout to folders like layout-sw600dp/ and values-sw600dp/.
More info here

Android app: text getting cropped on smaller devices

We are developing an android app. The text displaying properly on 5" devices. But getting cropped on smaller devices (4", 3.5"). why is it happening? Any help welcome. Please see screenshots below. "Credit" "Debit" and "Net" displayed instead of "Credit Card" "Debit Card" and "Net Banking" in screenshot below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff" >
<include android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/sdk_header"
/>
<RelativeLayout
android:id="#+id/topLogoLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="0dp"
android:layout_marginRight="0dp"
android:layout_marginLeft="0dp"
android:layout_marginBottom="-11dp"
android:background="#e5e5e5"
android:paddingTop="10dp"
android:paddingBottom="20dp">
<TextView
android:id="#+id/youtxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="right"
android:layout_marginTop="5dp"
android:text="You"
android:textSize="40sp"
android:textColor="#727272"
android:layout_marginLeft="10dp" />
<RelativeLayout
android:id="#+id/arrowLayout"
android:layout_toRightOf="#+id/youtxt"
android:layout_toLeftOf="#+id/companyLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_centerHorizontal="true">
<TextView
android:id="#+id/txt_amount"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Rs. 10"
android:textColor="#727272"
android:textSize="18sp" />
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="18dp"
android:src="#drawable/arrow"
android:layout_below="#+id/txt_amount" />
</RelativeLayout>
<ImageView
android:id="#+id/companyLogo"
android:layout_marginTop="5dp"
android:layout_marginRight="30dp"
android:layout_width="70dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:src="#drawable/wallet_logo"
android:scaleType="fitXY" />
</RelativeLayout>
<ImageView
android:id="#+id/orange_line"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/orange_line"
/>
<com.viewpagerindicator.TabPageIndicator
android:layout_marginTop="0dp"
android:id="#+id/indicator" android:layout_height="wrap_content" android:layout_width="fill_parent" />
<android.support.v4.view.ViewPager android:id="#+id/pager" android:layout_width="wrap_content" android:layout_height="wrap_content" >
</android.support.v4.view.ViewPager>
</LinearLayout>

This is a complex topic on which a book could be written (and probably has). I'll focus on the only problem I can see: text size.
It seems that your fonts are too big on the small screen. This affects what appear to be tabs and buttons, although the EditText has the problem too (it just doesn't overflow).
The useful way of measuring screen size is the sw-dp (shortest width device independent pixel). The dp density is adjusted so that it is around 160dpi on all devices. For a 5" tablet that will be around a 3" width and it should be an sw480dp device. The 3"-3.5" screen has around a 2" width and should be an sw320dp device.
To make this work at the simplest level, you need to place some text size settings in your value-sw240dp folder that are about 3/4 of the text size for your default sw480dp device.
For example, this might appear in your dimen file in that folder.
<dimen name="view_field_text_size">14sp</dimen>
I can't give you a cookbook because I have no info about your other use of styles or dimensions. Perhaps in a layout you might have:
<EditText
<android:textSize="#dimen/view_field_text_size"
/>
It's better to put it in a style, but that's outside the scope here.

Different devices may have different pixel density, screen size, Orientation, Resolution and Density-independent pixel (dp).
Solution -
Define different layout files for different screen sizes.
Ensuring your layout can be adequately resized to fit the screen
Providing appropriate UI layout according to screen configuration
Ensuring the correct layout is applied to the correct screen
By default, Android resizes your application layout to fit the current device screen. In most cases, this works fine. In other cases, your UI might not look as good and might need adjustments for different screen sizes. For example, on a larger screen, you might want to adjust the position and size of some elements to take advantage of the additional screen space, or on a smaller screen, you might need to adjust sizes so that everything can fit on the screen.
The configuration qualifiers you can use to provide size-specific resources are small, normal, large, and xlarge. For example, layouts for an extra large screen should go in layout-xlarge/.
Beginning with Android 3.2 (API level 13), the above size groups are deprecated and you should instead use the swdp configuration qualifier to define the smallest available width required by your layout resources. For example, if your multi-pane tablet layout requires at least 600dp of screen width, you should place it in layout-sw600dp/. Using the new techniques for declaring layout resources is discussed further in the section about Declaring Tablet Layouts for Android 3.2.
Look - Multiple Screen Support and Support Screen training docs.

you just need to create different folders related to density or screen size like
Option 1.
values-large
values-small
values-normal
For more explanation check this link...
Multiple Screen Support
Option 2.
mTextView.setTextSize(16 * getResources().getDisplayMetrics().density);
this will give TextSize depending on density..

Widget distance modifyed on different screen device

I've read the android support multiple screen tutorial.
when i try to see how my layout fit on different screen, something gone wrong. In my case i have only one tipe of image (970x174) for test copyed into all drawable folder.
By see my layout on different screen, in most cases, layout is not as i would. I paste code of my layout (that it fits well into nexus 4 screens)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/TEMPORARY"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="128dp"
android:src="#drawable/button" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="64dp"
android:src="#drawable/button" />
<ImageView
android:id="#+id/image3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/button" />
</RelativeLayout>
Maybe i should do a different density image for each screen type?

RelativeLayout doesn't have a orientation tag, so remove it.
Since you put the same image on all the drawable types, the image will have a fixed pixel size, which will decrease the size of the image on the screen as the screen density increases. But you used dp as unit on the layout, so the 128dp will increase in size as the density increases, to make the size on screen appear the same on different devices.
So if you want to have the same layout with the same size on screen regardless of screen density, delete the other copies of the image and leave only one drawable folder, and android will handle scaling for you on different screen density phones.

Android: OS not re-sizing images with the same scale

I am troubled by how the Android OS is handling resizing on an app of mine. Basically I have a background image that is 480x800 (so 480px wide) and an image that goes at the bottom, also 480px wide.
On the Galaxy S (480x800 screen) everything looks fine, as shown below:
On the Galaxy S3 (720x1280), however, the background is getting stretched to 720px wide but the image at the bottom only to 640px wide, as shown below:
I tried to create a xhdpi folder with 640x960 images, but same thing happens (background stretched to 720px, image only to 640px). I also tried to play with "ScaleType", but no luck so far.
Does anyone know why the OS would re-size the two images with a different scale, and how to fix it?
Here's the XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/bg" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/significados"
android:layout_gravity="center"
android:layout_marginTop="216dp"
android:onClick="goToSignificados"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ranking"
android:layout_gravity="center"
android:onClick="goToRanking"
/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/engracados"
android:layout_gravity="center"
android:onClick="goToEngracados"
/>
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="60dp"
android:clickable="true"
android:contentDescription="#string/image"
android:onClick="goToMarket"
android:src="#drawable/googleplay" />
</LinearLayout>

You'll have to post your XMLs to get a more specific answer but basically all "Views" may handle image scaling differently.
In your example,
You can make your button stretch all the way by using width = match-parent.
"Backgrounds" will stretch by default, but can also tile.
"Buttons" will have a min size of the background size but will stretch when needed (button has too much text)
As a side note, you shouldn't depend on the exact pixels of the images. You should look into nine-patch or making tiled backgrounds and make sure you take advantage of things like "match-parent, gravity, etc."

android density independence

I created a layout with the prebased (480x800) density. I have been using this since I started learning android (9 mths) and now it was time to test my app on other phones. I tested it on three phones with 480x800 resolution and was fine, until I tested it on one with 320x480 and 240x320. I have used px-s as width and height, paddingTop etc. everywhere.
I checked the app in the emulator (created different avd-s for different resolutions) and I cannot see the whole layout, as it is bigger than the screen (testing it only in eclipse). It has 4 images with "wrap_content" width and height settings.
So I checked the android documentation. I have not created other layouts or anything else, but replaced the px-s with dp-s. It is the same.
I created smaller buttons (see below) with 190x60px resolution and put them into the ldpi folder, but there was no big advance. Maybe because the textsizes of the textviews are the same and the 2 textviews takes 1/3 of the place of the display in case of the 240x320 resolution (while only 1/6 in case of the 480x800). (So the texts look huge in the small resolution compared to the large resolution)
Please tell me what should I do to make the layout look in this 320x480 resolution like in the 480x800.
Size of gradientbg: this is an .xml file for a shape, so no physical size.
Size of buttons (images): 380x150px hdpi (or 190x60px in ldpi folder)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/gradientbg"
>
<TextView
android:id="#+id/TextView00"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#E30000"
android:textColor="#FFFFFF"
android:gravity="center_horizontal|center_vertical"
android:textSize="26dp"
android:height="40dp"
android:textStyle="bold"
android:text="Main menu"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App"
android:textSize="30dp"
android:textStyle="bold"
android:paddingTop="20dp"
android:layout_gravity="center_horizontal"
android:textColor="#FFB300"
/>
<Button android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainbutton_1"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dip"
/>
<Button android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainbutton_2"
android:layout_gravity="center_horizontal"
android:paddingTop="5dp"
/>
<Button android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainbutton_3"
android:layout_gravity="center_horizontal"
android:paddingTop="5dp"
/>
<Button android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainbutton_4"
android:layout_gravity="center_horizontal"
android:paddingTop="5dp"
/>
</LinearLayout>

When you normally define layouts in dp units, you ensure that the layout stays the same on devices in the same density bucket. But when you try it on a tablet (xlarge) or a small screen, it won't scale right. This tool is made to have your app work with the whole range of devices (small/normal/large/xlarge). It scales your layout xml-files from the baseline density you were originally designing for.
http://onemanmobile.blogspot.com/2012/04/how-to-scale-your-android-layouts-to.html