Develop Reference

Trying to understand Android layouts, image sizes and relations

I'm developing apps for android since over a year now with success, but one thing is still a problem for me:
How to design a layout with a combination of TextViews, ImageViews and Buttons while retaining the relation between each elements on different screen sizes.
I want to build a layout like this:
It's for a listview, so many of these layouts are used. The app has a different layout for smartphones and tablets.
So the orange button on the right should always have 3 lines of text but should still have a maximum width, the image on the left should have the same height as the button on the right. The 3 lines of text in the middle should take up as many space as they can. The star image should have the same hight as the text on their right.
I've managed to build a similar test layout with a TableLayout, here are the previews from AndroidStudio:
Nexus S
Nexus 6
On the Nexus S screen size, the layout is OK but on bigger screens it's ugly. The button is too small, the image on the left is also too small.
Here is the code for my test layout:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
>
<TableRow android:orientation="horizontal"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/iv1"
android:layout_width="80dp"
android:layout_height="match_parent"
android:contentDescription="#string/dummy"
android:padding="#dimen/raster4dp"
android:scaleType="fitXY"
android:src="#drawable/avatar_1" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:layout_alignParentLeft="true"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv1"
android:src="#drawable/ic_male_user_bw"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv2"
android:layout_alignBottom="#id/iv2"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/iv2"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_male_user_bw"
/>
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv3"
android:layout_alignBottom="#id/iv3"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
</RelativeLayout>
<Button
android:id="#+id/btn1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:background="#drawable/button_dropshadow_black_xml"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</TableRow>
</TableLayout>
So hopefully my question is not too silly, but i have some problems understanding how to fix this. Currently I'm using a width of fixed 80dp on the button and the image to the left. I think this is not realy the way it works on Android.
What sizes do i need to use here, what kind of layouts?
The sections about sreensizes etc. on the developer site is known by me (https://developer.android.com/guide/practices/screens_support.html) but it wasn't that helpful to me.
Thanks for help! :)

Each terminal has different dimensions. If you put a button that has a size of 80dp, when other terminal screen is larger, that button is going to be smaller compared to the terminal screen you were doing the tests.
You should play with WEIGHT.
| | | |
|_____________|_________________________|____________|
0.3 0.5 0.2 0.3 + 0.5 + 0.2 = 1 <-Weight.
Read this, will help.
Also there's a question similar to yours, check it too.

DP is for setting a fixed amount of pixels, if you don't want to consider the pixel density of your device's screen. This lets you that a button would be shown with the same size in a Nexus 4,5 or in a Samsung Galaxy Mini.
The same "absolute" size. This means that if your image is too big, it could fit in Nexus, but no in the other because of its smaller screen. This is due to the fact that it does not depend on the screen size, neither the pixel density.
What I hardly recommend you is the use of LinearLayouts (with their attribute weight) and RelativeLayouts as direct children (in case you need them). This could be "the same" (not exactly) than the use of "%" in CSS.
Here, you can see an example of weight attribute (The second answer gives you more tips).
Linear Layout and weight in Android
I hope this helps!!

check this .... increase parent layout height if needed:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="dummy"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:orientation="vertical" >
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/iv24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:background="#565657"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</LinearLayout>

How to implement correct UI for several screens in android

Here i am trying to handle different screens ,These are several screens i am trying to handle ,Here if i adjust for one screen remaining screens getting error ,not getting what is problem
here is
Here is my code
<?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/transactionpagebg" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="160dp"
android:gravity="center"
android:paddingLeft="50dp"
android:text="Current Meter Reading"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/editText1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:inputType="number" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="150dp"
android:layout_height="50dp" />
</LinearLayout>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/saveButton"
android:layout_width="113px"
android:layout_height="wrap_content"
android:layout_x="61dp"
android:layout_y="330dp"
android:background="#drawable/savebutton" />
<Button
android:id="#+id/settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="208dp"
android:layout_y="330dp"
android:background="#drawable/settingbutton" />
</AbsoluteLayout>
</RelativeLayout>

to do as it need to be, you need to have support for different screen sizes you need to have different layouts, and also some changes in your manifest file...
check this question How to support different screen size in android
and this link http://developer.android.com/guide/practices/screens_support.html

There are many ways to make each view look right on various screens. However, I have found two methods are working best for me (at the moment):
To get the views to dynamically set their screen positions, wrap the widgets in a LinearLayout (LL), and put those LLs in a single LL. Set the weight of the inner LL to 1, and they will space themselves equally within the parent LL. This works for horizontal and vertical layouts. The distance between the widgets gets adjusted automatically by the OS.
create different dimens.xml folders/files for the different screen sizes (small, medium, large) and further differentiate them by density of needed (mdpi, hdpi, xhdpi, etc.). This way you can set margins, paddings, font sizes, for each size/density to get what you want.
EDIT: I see you put "TRANSACTION" in the background drawable? You can't do that! You need to create an image with just the text, and put it in an ImageView at the top of the layout. That way, you can set its position and size as needed for different screens, and make the other widgets adjust their positions relative to that image.
Even better would be to find a free font (ttf file) you can use that matches what you want, and put it in a TextView.
Here is a quick example of your layout with the ideas I mentioned. You would put the margins and font sizes in a dimens.xml file, so that you can adjust them.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000ee"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/hh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="36dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="36dp"
android:text="TRANSACTION"
android:textColor="#ffffff"
android:textSize="28sp" />
<TextView
android:id="#+id/test_textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Current Meter Reading"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/test_linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/test_editText1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_marginRight="24dp"
android:background="#ffffff"
android:inputType="number" />
<Spinner
android:id="#+id/test_spinner1"
android:layout_width="150dp"
android:layout_height="50dp"
android:background="#999999" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/test_saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="24dp"
android:text="Save" />
<Button
android:id="#+id/test_settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>

Android- The background is longer in hdpi screen

I have a trouble issue with the attribute background in android. I want to design a layout which runs find on mdpi and hdpi screen density. I have 2 background image as below:
the background for mdpi at 800x480 resolution:
The background for hdpi at 800x480 resolution:
I use draw9patch to define the content padding as below:
![enter image description here][3]
When I set these images at background of my layout, they worked find on mdpi screen but didn't on hdpi. The background on hdpi longer than what it was designed. Here are the screenshots:
It's fine on mdpi screen:
It's longer (stretch) on hdpi screen:
Here are my code:
<?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" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ui_win_background"
android:orientation="vertical" >
<TextView
android:id="#+id/activity_win_textview_congratulationText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/activity_horizontal_marginXExtraWide"
android:gravity="center"
android:text="CONGRATULATION!\nYOU WON!!!"
android:textColor="#FFF"
android:textSize="#dimen/textSize_XLarge" />
<TextView
android:id="#+id/activity_win_textview_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/activity_horizontal_marginExtraWide"
android:gravity="center"
android:text="50%"
android:textColor="#BD1142"
android:textSize="72sp"
android:textStyle="bold" />
<TextView
android:id="#+id/activity_win_textview_prizeName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="Combo Starbucks"
android:textColor="#color/black"
android:textSize="#dimen/textSize_XLarge"
android:textStyle="bold" />
<TextView
android:id="#+id/activity_win_textview_prizeCode"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_margin="#dimen/activity_vertical_margin"
android:background="#drawable/statelist_textview_white_roundborder"
android:gravity="center"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="#fsdjflsejp34230sfmwr3"
android:textSize="#dimen/textSize_large"
android:textStyle="italic" />
<TextView
android:id="#+id/activity_win_textview_prizeName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/activity_vertical_marginWide"
android:gravity="center"
android:text="This screen closes in"
android:textColor="#color/black"
android:textSize="#dimen/textSize_large" />
<TextView
android:id="#+id/activity_win_textview_countDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:gravity="center"
android:text="00:20:40"
android:textColor="#BD1142"
android:textSize="#dimen/textSize_large"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
Please take a look and help me to resolve this issue.
Thanks.

Don't use backgrounds.
Use ImageView (with RelativeLayout) and set the ScaleType property of the image view as you like.
You can set a scale type that will keep the aspect ratio of your image.
Also, please note, in cases where you don't want the image to scale, 9patch is useless. The all purpose of 9patch is to let you control how the system scales your image (mostly used for buttons and backgrounds of ui controls).
Your layout (removed some of the elements):
<?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" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scale_type="centerInside" //Do whatever scale type you like
android:src="background image goes here"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/activity_win_textview_congratulationText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/activity_horizontal_marginXExtraWide"
android:gravity="center"
android:text="CONGRATULATION!\nYOU WON!!!"
android:textColor="#FFF"
android:textSize="#dimen/textSize_XLarge" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>

Create a multiple screen android application

I'm developing an Android 2.3.3 application that will work on every android phone or tablet device and it will only support portrait.
Reading Supporting Multiple Screens I see a table with a lot of screen sizes and densities.
How many layouts do I need? One for every screen size and density?
I think I only need four: one for small, normal, large and x-large.

you basically need four. But if you you want you application to behave different according to different screen sizes AND different orientations, you should use:
/layout-port > for medium layout portrait
/layout-land > for medium layout landscape
/layout-xlarge-port > for xlarge layout portrait
/layout-xlarge-land > for xlarge layout landscape
etc.

From the link you provided:
By default, Android resizes your application layout to fit the current device screen.
In most cases, this works fine.
Therefore the general rule is to use Density Independent Pixels (dips) for size definitions in your layout xmls leaving the rest to be handled by the operating system. Doing so you just have the only layout for all range of devices.
Making separate layouts is not really common practice. Only when you have images that can't be stretched is that really the recommended way. In that case, splitting the graphics based on the size and density of the screen can solve your problem anyway.

One layout is enough for device up to large density , if you also want to implement layout for x-large screen size then you need to make another layout,
just get the images as per ldpi , mpdi and hdpi , place them the relative folders ,
create layout using appropriate layout weights give full size to backgrounds like fill parent and exact size of buttons
like
<?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:background="#drawable/bg"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/bar"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".55"
android:gravity="left|center"
android:orientation="vertical" >
<Button
android:id="#+id/goBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="#drawable/back_btn" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".25"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forget Paaword"
android:textColor="#ffffff"
android:textSize="18dp"
android:textStyle="italic" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".55"
android:gravity="right|center"
android:orientation="vertical" >
<Button
android:id="#+id/hombutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="#drawable/home1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".2"
android:gravity="right|center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:gravity="right|center"
android:orientation="horizontal" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:text="User Name"
android:textColor="#ffffff" />
<EditText
android:id="#+id/usernametext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".5" android:imeOptions="actionDone">
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:gravity="right|center"
android:orientation="horizontal" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:text="Email Id"
android:textColor="#ffffff" />
<EditText
android:id="#+id/emailtextfp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:inputType="textEmailSubject" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/loginbuttonfp"
android:layout_width="75dp"
android:layout_height="28dp"
android:layout_margin="5dp"
android:background="#drawable/btn" android:text="Ok" android:textColor="#ffffff"/>
<Button
android:id="#+id/cancelbutton"
android:layout_width="75dp"
android:layout_height="28dp"
android:layout_margin="5dp"
android:background="#drawable/btn" android:text="Cancel" android:textColor="#ffffff"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

I created a tool that allows you to scale/adjust your layouts for tablets and small screen devices and made a blog post about it here: http://onemanmobile.blogspot.com/2012/04/how-to-scale-your-android-layouts-to.html
Basically, defining your layouts in dp units for one size is not enough if you want your app to fit on all devices and tablets, since there's four different "density-buckets".
This tool will allow your layouts to be converted into fitting these density buckets from a default baseline.
Hope it helps.

Resizing an Imageview

I'm searching for few days and I can't find the answer. I'm trying to resize an Image View through XML.
<TableRow android:layout_height="wrap_content" android:id="#+id/header" android:layout_width="match_parent">
<TableLayout android:layout_height="wrap_content" android:id="#+id/logo" android:layout_width="wrap_content" android:layout_weight="1">
<ImageView android:src="#drawable/iconwide" android:id="#+id/imageView1" android:layout_width="match_parent" android:layout_height="match_parent"></ImageView>
</TableLayout>
<TableLayout android:layout_height="wrap_content" android:id="#+id/user" android:layout_width="wrap_content" android:layout_weight="1">
<TextView android:layout_width="wrap_content" android:text="#string/user" android:layout_height="wrap_content" android:id="#+id/suser" android:layout_weight="1"></TextView>
</TableLayout>
</TableRow>
Any idea how to resize it ? It looks like this: http://i55.tinypic.com/2h3u4hh.png

If you would like a specific size, you can specify that size via XML by using density independent pixels. On a mdpi screen, 1 dp = 1 pixel, on all screens 100dp is roughly equal to 1 inch.
<ImageView
android:src="#drawable/iconwide"
android:id="#+id/imageView1"
android:layout_width="200dp"
android:layout_height="50dp"/>