Develop Reference

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..

Scrolling an image wider than screen

I am trying to create a sort of progress bar for my Android app, however, I would like it to be an image moving from right to left. The image itself needs to preserve its original size.
Basically, what I am looking for is this (don't have enough rep to post image):
http://postimg.org/image/5e7w5vd7h/
The problem is that the image, which is 2000px wide, will not load when run on my device (Sony Xperia S). If I use an image with width <= device width, it works.
I have tried using HorizontalScrollView and ScrollView inside a RelativeLayout, as well as setting scaleType to center, centerCrop, fitXY and all the others, adjustViewBounds true/false etc., basically every combination there is.
First and foremost, I would just like the image to appear on my device - the animation in itself is not prioritized right now, but I am thinking of a solution where I increment the ImageView's paddingRight regularly.
Below is a snippet of my XML thus far:
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/horizontalScrollView"
android:layout_marginLeft="12.5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/rolling_bar"
android:scaleType="center" />
</HorizontalScrollView>
<TextView
android:id="#+id/countdown_time_text"
android:text="01:22:58"
android:textColor="#color/countdown_color"
android:layout_marginTop="3dp"
android:textStyle="bold"
android:textSize="28sp"
android:typeface="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginLeft="10dp" />
I apologize for any syntactical / semantic errors, I am quite new to Android. Thanks in advance!

Making android support all screen sizes

I feel like I'm the only one lost here. Everyone seems to be fine with using DP to make apps work across multiple screen sizes. For me, whenever I load up another screen, the alignment will never be the scale properly.
However, if I use android:weight everything will scale fine across all devices. The problem I have with android weight for everything is that it doesn't always want to resize images well into layouts, not to mention the warnings I'll get for using nested weights.
One solution I see is creating a new screen size for each possible screen sizes out there. Is this what everyone else does? At first I thought we'd have to only create the x-large, small, etc layouts only to find that even these don't cope for various screen sizes (even the nexus 7 doesn't fall well into any of these categories).
Sample code
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:background="#drawable/layout_border"
android:padding="10dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:contentDescription="#string/app_name"
android:src="#drawable/yg" />
<ProgressBar
android:id="#+id/progressBar2"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/imageView1"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:progress="50" />
<TextView
android:id="#+id/textView1"
style="#style/NormalFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/progressBar2"
android:layout_alignLeft="#+id/progressBar2"
android:layout_marginLeft="36dp"
android:text="#string/exercise_percent" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_above="#+id/textView1"
android:layout_toRightOf="#+id/imageView1"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:background="#drawable/start"
android:onClick="meditateTask" />
</RelativeLayout>
For example, here the imagebutton I have will be out of place on every new screen size.

You can create same layout for all screen sizes, small, normal, large and x large.
How can you do that: Make new XML layout file in layout folder, make it so it has same name as the layout you want to modify to fit for all screen sizes. Click next, and there will be some options shown, find Size and insert it. Then you will be able to chose which screen size you want.
And when launched, system will chose best screen size for device.
Repeat for all 4 screen sizes. Hope this helps

How does object scaling through different screens work?

I am new to Android, but I still managed to design an app that runs just fine on my smartphone. I read the tutorial about Android support for different screen sizes and I thought: "Ok, that's great, Android itself will scale the app in order to fit other screen sizes. I just need to have different images for different resolutions so that they will look better."
Well, it seems I didn't understand how it works exactly. By using a Virtual Device within Android SDK, I run my app on a smaller screen size. Unfortunately, there was no automatic "scaling" and half of my app layout is not shown on the screen. An imageButton that on my smartphone was one sixth of the screen, it occupies maybe one third of this new smaller screen.
What did I forget? I read some explanations and other posts but the info I got seemed to indicate an automatic scaling that doesn't happen... Maybe I miss some basic rule?
Thank you
EDIT:
Here below I add a bit of my code as an example. How should I change it in order to make the ImageButtons fill the smartphone screen in the same way, even if the screen sizes change? (if it's possible).
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/greenbackground"
tools:context=".GameFrame" >
<ImageButton
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="30dp"
android:layout_marginTop="27dp"
android:background="#android:color/transparent"
android:clickable="false"
android:contentDescription="#string/app_name"
android:src="#drawable/empty" />
<ImageButton
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image1"
android:layout_alignTop="#+id/image1"
android:layout_marginLeft="16dp"
android:background="#android:color/transparent"
android:clickable="false"
android:contentDescription="#string/app_name"
android:src="#drawable/empty" />
<ImageButton
android:id="#+id/image3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_toRightOf="#+id/image2"
android:layout_alignTop="#+id/image2"
android:background="#android:color/transparent"
android:clickable="false"
android:contentDescription="#string/app_name"
android:src="#drawable/empty" />
</RelativeLayout>

You need to use a ScollView in order to display UI elements which aren't visible on the small screens. Keep in mind that a ScrollView can only have one child:
<ScollView
[...] >
<MyParentLayout
[...] >
<MyUiElements
[...] >
</MyParentLayout>
</ScollView>

Android layout mis-stretched on a small device

I am developing an application for android. My main layout is a RelativeLayout.
When I'm opening the app for debug within a large-screen emulator, everything works fine.
But when I open it on a QVGA device, I see al the layout distorted.
Do I actually need to make a new layout for every screen size? I have seen at some places that android can automatically stretch everything to fit the layout...
Developer.android.com says:
By default, Android resizes your application layout to fit the current device screen.
(http://developer.android.com/guide/practices/screens_support.html)
Could you please help me figure out why a layout would look distorted ion a small device?
As you can see the images do get stretched, but the layout is not displayed well.
Thanks in advance!
Big Screen Image http://www.interload.co.il/upload/6549026.png
Small Screen Image http://www.interload.co.il/upload/9617759.png
Edit: XML code of the problematic page.
All the graphics are in "drawable-hdpi" folder, but again, the problem is not with the images themselves, but with the layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background" xmlns:android1="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/selectionHead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/header" />
<ImageView
android:id="#+id/chooseFormatTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/selectionHead"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:src="#drawable/step1_choose_format" />
<ImageView
android:id="#+id/videoBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="42dp"
android:onClick="VideoClick"
android:src="#drawable/step1_video" />
<ImageView
android:id="#+id/orTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/videoBtn"
android:layout_centerHorizontal="true"
android:layout_marginBottom="19dp"
android:src="#drawable/step1_or" />
<ImageView
android:id="#+id/audioBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/orTxt"
android:layout_alignLeft="#+id/videoBtn"
android:layout_marginBottom="22dp"
android:layout_centerHorizontal="true"
android:onClick="AudioClick"
android:src="#drawable/step1_audio" />
<ImageView
android1:id="#+id/step1Share"
android1:layout_width="wrap_content"
android1:layout_height="wrap_content"
android1:layout_alignBottom="#+id/selectionHead"
android1:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="5dp"
android1:src="#drawable/share" />
</RelativeLayout>

Do I actually need to make a new layout for every screen size?
You need to make a new layout when your existing layouts do not work and you elect to make a new layout instead of solving the problem in other ways.
Could you please help me figure out why a layout would look distorted ion a small device?
Your layout is perfectly fine, insofar as it is doing precisely what you told it to do:
The video button is 42dp above the bottom of the layout
The "or" line is 19dp above the video button
The audio button is 22dp above the "or" line
That is 83dp plus the sizes of the various images, which clearly makes it too tall.
If that is not what you want it to do on a small screen, either:
Come up with a different layout for -small devices, or
Use dimension resources instead of hard-coded values, and use different values for those dimension for -small devices, or
...