Develop Reference

Design layout display is not the same

How to edit xml file layout. All display screen is the same.
screen size 4.7", 5.0" display accuracy. But screen other than this. Display Distortion. Except screen tablet.
Help me fix it.
screen_main.xml
<FrameLayout 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"
tools:context="jp.vertice.test.MainScreenFragment">
<!-- TODO: Update blank fragment layout -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#51c8fc">
<ImageView
android:layout_width="200dp"
android:layout_height="195dp"
android:id="#+id/imageView2"
android:src="#mipmap/ic_launcher"
android:background="#fc0c0c"
android:layout_marginLeft="18dp"
android:layout_marginStart="18dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn1"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/btn3"
android:layout_alignStart="#+id/btn3" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn2"
android:layout_below="#+id/btn1"
android:layout_alignLeft="#+id/btn1"
android:layout_alignStart="#+id/btn1" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn5"
android:layout_below="#+id/btn2"
android:layout_alignLeft="#+id/imageView2"
android:layout_alignStart="#+id/imageView2"
android:layout_marginTop="5dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn4"
android:layout_alignTop="#+id/btn5"
android:layout_toRightOf="#+id/btn5"
android:layout_toEndOf="#+id/btn5"
android:layout_marginLeft="9dp"
android:layout_marginStart="9dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn3"
android:layout_alignTop="#+id/btn4"
android:layout_toRightOf="#+id/btn4"
android:layout_toEndOf="#+id/btn4"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="205dp"
android:background="#F4F4F4"
android:layout_gravity="bottom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="YYYY.MM.DD"
android:id="#+id/txt1"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="22dp"
android:layout_marginStart="22dp"
android:layout_marginBottom="173dp" />
<TextView
android:layout_width="230dp"
android:layout_height="50dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
android:id="#+id/text2"
android:layout_alignTop="#+id/txt1"
android:layout_alignLeft="#+id/txt1"
android:layout_alignStart="#+id/txt1"
android:layout_marginTop="25dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON"
android:id="#+id/btn6"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"
android:layout_alignTop="#+id/text2"
android:layout_toRightOf="#+id/text2"
android:layout_toEndOf="#+id/text2" />
<TextView
android:layout_width="fill_parent"
android:layout_height="20dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="FOOTER"
android:id="#+id/textView2"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="10sp"
android:textStyle="bold"
android:textAlignment="center"
android:gravity="center_vertical"
android:background="#FFFFFF" />
</RelativeLayout>
</FrameLayout>

Don't use Frame Layout here because Frame Layout used to show single view.

I see you are using fixed dp values for layout_width and layout_height.
dp means density independent pixel. It is not a size independent pixel.
The dp makes sure your layout looks the same on devices with the same size, but different pixel density. It will not look the same on bigger devices.
If you want it to scale to larger devices you will have to use match_parent and wrap_content.
Use the power of the relative layout to place items on the right side of the screen also.
You can also make separate layout files for differently sized devices. So you can customise it depending on the size.
You do this by making a new layout folder named for example layout-sw600dp/ (or any number you want) which will only be used on devices that have at least the width you specified (so 600dp in this example).
Make sure your layout file has the same name in this folder as in the normal folder.
You can find very useful information about this in the documentation:
here and here.

You can try using a GridLayout. This way, the image columns will fill the whole screen.

you can't work with dp and expect the same result on different
if you want same display for all the devices you can work with weightSum and weight here is a little example
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>

android layout boxes overflow

I have this code
<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/shape"
android:gravity="top" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#null"
android:onClick="btnCat1"
android:src="#drawable/ic_launcher" >
</ImageButton>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton1"
android:layout_centerInParent="true"
android:clickable="false"
android:text="#string/hello_world" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#null"
android:onClick="btnCat1"
android:src="#drawable/ic_launcher" >
</ImageButton>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton1"
android:layout_centerInParent="true"
android:clickable="false"
android:text="#string/hello_world" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#null"
android:onClick="btnCat1"
android:src="#drawable/ic_launcher" >
</ImageButton>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton1"
android:layout_centerInParent="true"
android:clickable="false"
android:text="#string/hello_world" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#null"
android:onClick="btnCat1"
android:src="#drawable/ic_launcher" >
</ImageButton>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton1"
android:layout_centerInParent="true"
android:clickable="false"
android:text="#string/hello_world" />
</RelativeLayout>
</LinearLayout>
There are 4 groups of an image and text, but if I open it on small resolution I can see only 3 boxes. How can I set them to show on next line?
edit: it should looks like this example

It looks like you may be trying to replicate the behavior of a GridView. You could accomplish switching from 2 to 4 columns based on the size of the view using a GridView.
Another alternative that may work for you, depending on your targeted versions, is to specify a different layout file to be used when less screen space is available (check table 2 "smallestWidth" row): Providing Alternative Resources. You would use this approach by specifying a folder such as "res/layout-sw600dp/" and putting an identically named layout file in that folder. In each of the layout files then explicitly layout your files with the number of columns desired.
If you are targeting devices that don't recognize the "sw" resource modifier, you could simulate this manually in your code by specifying a layout file to inflate by name, and simply pick a larger or smaller one based on the screen size (which is of course available to you when the app is running).
Let me know if you would like elaboration on a specific approach.

You've set a constant width (100dp) for each element. It won't fit on the screen which has width lower then 400dp. One way to fix this is to use a horizontal scroll view.
Replace top RelativeLayout with the following.
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
If you wish to have different layout on different screens, like on your attached drawing, simply use two different layout xmls as described here.

Android screen not scaling correctly even though I used dp as units?

I have done a lot of reading on SO and googling all over the place but still cannot get my answer...I have this code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/welcomeRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/graph_paper" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/first"
android:layout_width="40dp"
android:layout_height="90dp"
android:layout_marginTop="70dp"
android:background="#color/Blue" />
<TextView
android:id="#+id/second"
android:layout_width="40dp"
android:layout_height="90dp"
android:layout_marginTop="70dp"
android:background="#color/Cyan" />
<TextView
android:id="#+id/third"
android:layout_width="40dp"
android:layout_height="90dp"
android:layout_marginTop="70dp"
android:background="#color/Brown" />
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="203dp"
android:background="#color/Black"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/Yellow" >
<ImageView
android:id="#+id/welcomeWImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="16dp"
android:src="#drawable/w" />
<ImageView
android:id="#+id/WelcomeOImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/o" />
<ImageView
android:id="#+id/welcomeRImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/r" />
<ImageView
android:id="#+id/welcomeDImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/d" />
</LinearLayout>
<TextView
android:id="#+id/welcomeTextView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/lime" />
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/Pink" >
<ImageView
android:id="#+id/ImageView03"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="16dp"
android:src="#drawable/w" />
<ImageView
android:id="#+id/ImageView04"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/o" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/r" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/d" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
As stated in the answers from different threads I have used dp as a scaling unit but I still get these images as a result when moving from different screen size and resolution.
here are the different images I get on different screen sizes and resolutions:
why arent the textboxes growing proportionally to the screen size and resolution? As they are textviews without graphics and dp is used for the unit.
Thank you guys ahead of time.

I cant really tell you the exact xml code to fix this, but as an idea, you need to make use of following properties to equally distribute the screen area among your views:
android:weightSum //for your LinearLayout
android:layout_weight //for your child views
and depending on the orientation of your LinearLayout, you need to set either of the following to your child views.
android:layout_height="0dp"
android:layout_width="0dp"
For examples, read this and this.

you have to create three different layouts for your application .
1- layout folder ( basically its for small screens)
2- layout-large ( basically its for large screens such as 5.0)
3- layout-xlarge ( its used for Large screens "Tablets" )
in order for your application to fit in every screen perfectly you have to create these folders. below steps shows how to work with it
1- create new two foldesr in res folder layout-large and layout-xlarge.
2- copy your layout.xml from the layout folder and paste it on each folders u created now.
3- open them and you'll see how they look on bigger screens , then simply you'll have to change a bit on your layout.xml on each folder.
hope that what you seek for. its that simple . two extra folders

Android AppWidget, Massive layout discrepancy

I'm creating an App Widget, and I'm having a strange issue. In the Eclipse graphical layout editor, my widget's layout looks like this:
However, when I install it on an emulator/my phone, it looks like this:
And here is the layout code in question:
<?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:layout_gravity="center_horizontal" android:gravity="center_horizontal">
<RelativeLayout android:background="#drawable/blackbg"
android:layout_width="290dp" android:layout_height="145dp">
<ImageView android:layout_width="wrap_content" android:src="#drawable/clock_colon"
android:layout_height="107dp" android:layout_marginRight="10dp"
android:layout_marginLeft="10dp" android:layout_marginTop="5dp"
android:layout_centerInParent="true" android:id="#+id/colon" />
<ImageView android:layout_width="wrap_content" android:src="#drawable/num_0"
android:layout_height="107dp" android:layout_marginRight="5dp"
android:layout_marginLeft="5dp" android:id="#+id/hour2"
android:layout_toLeftOf="#id/colon" android:layout_centerVertical="true" />
<ImageView android:layout_width="wrap_content" android:src="#drawable/num_1"
android:layout_height="107dp" android:layout_marginRight="5dp"
android:layout_marginLeft="5dp" android:id="#+id/hour1"
android:layout_marginTop="5dp" android:layout_toLeftOf="#id/hour2"
android:layout_centerVertical="true" />
<ImageView android:layout_width="wrap_content" android:src="#drawable/num_3"
android:layout_height="107dp" android:layout_marginRight="5dp"
android:layout_marginLeft="5dp" android:id="#+id/minute1"
android:layout_marginTop="5dp" android:layout_toRightOf="#id/colon"
android:layout_centerVertical="true" />
<ImageView android:layout_width="wrap_content" android:src="#drawable/num_2"
android:layout_height="107dp" android:layout_marginRight="5dp"
android:layout_marginLeft="5dp" android:id="#+id/minute2"
android:layout_marginTop="5dp" android:layout_toRightOf="#id/minute1"
android:layout_centerVertical="true" />
<ImageView android:layout_width="wrap_content" android:src="#drawable/clock_pm"
android:layout_height="wrap_content" android:id="#+id/clock_ampm"
android:layout_below="#id/minute2" android:layout_alignParentRight="true"
android:layout_marginRight="15dp" android:layout_marginBottom="5dp" />
</RelativeLayout>
</LinearLayout>
So what do you think? How come the numbers are getting cut off and spaced strangely like this. Thanks!

You are setting manually the height of your RelativeLayout and the height of your ImageViews to 107dp and your images may not fit properly inside your ImageView. So you should consider the following:
Supporting Multiple Screens Resources
Setting the scale of your ImageView to android:scaleType:centerInside
You should also consider using wrap_content for your layout height and width instead of manually setting the dimensions in dp
You can also try the attribute android:adjustViewBounds="true" for your ImageViews if they still don't get displayed correctly

The problem ended up being that I had set the size for the container RelativeLayout. Apparently you can't do that.

Adjusting the size of an ImageButton in Android

Is there any way to do this? I have tried padding the image and setting the width/height of the view, but neither seems to work. Here is an example:
<ImageButton
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/search_small"
android:paddingTop="4sp"
android:paddingBottom="4sp"
android:paddingLeft="6sp"
android:paddingRight="6sp"
android:layout_marginRight="10sp"
android:layout_marginTop="6sp"
android:layout_marginBottom="6sp"
android:layout_alignParentRight="true"
/>
I want the button to be wider than it is tall, but it is coming out the other way round.

Just had a play to try and understand your problem.
Seems ImageButton is a composite view which has a few pre-set values. Such as some sort of margin which you cannot override with the XML. If you cannot change your image to match what you want to happen then you are better to create your own composite view.
Here is my example of a composite view you can make yourself:
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:id="#+id/saveSearchButton"
android:layout_width="50dp"
android:layout_height="50dp" />
<ImageView android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="fitXY"
android:src="#drawable/ic_menu_save"
android:layout_gravity="center"/>
</FrameLayout>
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:id="#+id/clearSearchButton"
android:layout_width="50dp"
android:layout_height="50dp" />
<ImageView android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="fitXY"
android:src="#drawable/ic_menu_close_clear_cancel"
android:layout_gravity="center"/>
</FrameLayout>
And the original buttons:
<ImageButton android:id="#+id/imageButton1"
android:src="#drawable/ic_menu_save"
android:layout_height="45dp" android:layout_width="45dp"/>
<ImageButton android:id="#+id/imageButton2"
android:src="#drawable/ic_menu_close_clear_cancel"
android:layout_height="45dp"
android:layout_width="45dp"/>
Here we can see custom image/button composite followed by the build in ImageButton as part of the SDK:

Set android:background instead of android:src to set the image on the button. This will adjust the image to your button's size. Then adjust the padding after.

You shouldn't use sp as a size dimension - dp should be used as it will help your view scale directly with different screen density and resolutions. See Here for dimensions.
padding will push other elements away from your view boundary. margin will push the contents of your view inward from the your boundary (ie would squash the available space for your picture) . The boundary is specified by height and width. Without more information I would guess you are being confused by your margins - delete them and experiment.
Also useful to you: android:scaleType="fitXY" makes the image stretch to match both the X and Y dimensions that are available to it. It helps you to see the canvas available to your image. Once you feel the area is large enough for a correctly scaled image change the scale type to centerInside. See Here for all scale types.

I use minWidth and minHeight attributes, combined with a fitXY scale type and wrapping its content to modulate the shape of my button.
<ImageButton
android:id="#+id/fooButton"
android:background="#drawable/play_button"
android:backgroundTint="#00000000"
android:minWidth="200"
android:minHeight="100"
android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="playStuff"
/>

Can you explain your question more widely so that we can more understood.
As per my understanding You want to set your ImageButton Height/Width. But it doesn't work is it? I want to ask you that, if you write any specific height/width then also it doesn't work?
I copied your code in my files and I changed the height/width manually then it will work.
Please explain your question.
Thanks.

I finished the layout following Graeme's answer. Four "imageButton" fix the bottom, same width, changeable image size. thanks!
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#color/#000"
android:weightSum="100" >
<FrameLayout
android:id="#+id/flBottom1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_home_48_48"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
/>
<TextView
android:id="#+id/tvBottom1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_home"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
<FrameLayout
android:id="#+id/flBottom2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_compose_48_48"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/tvBottom2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_comment"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
<FrameLayout
android:id="#+id/flBottom3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_search_48_48"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/tvBottom3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_search"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
<FrameLayout
android:id="#+id/flBottom4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_barcode_48_48"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/tvBottom4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_scan_again"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
</LinearLayout>