I am a hobbiest app developer and I feel I have a good grasp on android basics but the main thing that I struggle at is app design. I understand how to develop for different screen sizes and densities. But the main thing I struggle at is each of the normal and other sizes cover such a range of sizes within their respective categories. I have been searching and searching and not been bale to find a solution.
The main issue I am having is when designing using eclipse, i make a design using nexus one at the design looks perfect for what I want when I swap to a smaller screen like 3.2 HVGA or even the nexus galaxy which are all normal sized images, the location of my images have moved. So what looked perfect for the nexus one looks awful on some other normal screen sizes.
What can be done to ensure if an image is directly next to another that it stays that way on a different screens. I will give an example of the current design I am working on and I hope somebody can explain what im doing wrong/how i can improve.
Nexus One Design:
3.2 HVGA:
the xml generated:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:orientation="vertical" >
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/i1"
android:text="Button" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/i2" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/Button1"
android:layout_alignTop="#+id/Button1"
android:layout_marginLeft="106dp"
android:layout_marginTop="160dp"
android:background="#drawable/i3" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignBottom="#+id/button2"
android:layout_alignRight="#+id/Button1"
android:layout_marginRight="112dp"
android:background="#drawable/i4" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button3"
android:layout_alignLeft="#+id/button3"
android:background="#drawable/i5" />
</RelativeLayout>
Try adding another layout for side buttons to group them together, and then center that layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/i1"
android:text="Button" />
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="false"
android:layout_alignParentTop="true"
android:background="#drawable/i2"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/i3"
android:layout_below="#+id/button1"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/i4"
android:layout_below="#+id/button4"
android:layout_toRightOf="#+id/button2"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/i5"
android:layout_toRightOf="#+id/button2"
android:layout_alignParentTop="true"/>
</RelativeLayout>
</RelativeLayout>
You need to create different images for each of the screen resolutions and put them into the respective drawable folder drawable--hdpi, drawable-mdpi, drawable-xhdpi, etc. Also be sure that you are using dp in your xml file, which it appears you are. Just be sure you always do so.
Designing for the different screens can be tricky because you have to essentially create the same image 4 or 5 times.
Also, make sure you are testing on actual handsets, because the emulator doesn't always give you an accurate layout.
Related
I found a lot of question were asked on supporting different screen size where the screen size are varies from Tablet to phone and etc. I am writing my first android application and when I am looking at the layout in different phone, All of them are not relatively scalable to screen.
I am pasting a small RelativeLayout code here to understand how to make it proper scalable in less changes. I also followed the android official doc and learn two things
drawable images for different screen
use sp for mentioning text size and for rest of them use dp
But it's not helping me
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="#ffd5d6d6">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:background="#ffffffff"
android:elevation="#dimen/abc_action_bar_default_height_material">
<ImageView
android:id="#+id/back"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:src="#drawable/ic_back" />
<TextView
android:id="#+id/profileDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Test"
android:textColor="#ff3c3f41"
android:textSize="15dp" />
<ImageView
android:id="#+id/flag"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_alignWithParentIfMissing="false"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:src="#drawable/temp_ic_share" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="52dp">
<TextView
android:id="#+id/roommate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="false"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:text="Who are you?"
android:textColor="#ff3c3f41"
android:textSize="18dp" />
<Button
android:id="#+id/foodie"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="60dp"
android:layout_height="38dp"
android:layout_alignParentStart="false"
android:layout_marginLeft="56dp"
android:layout_marginTop="80dp"
android:background="#fa6425"
android:text="Foodie"
android:textColor="#fff4f4f4"
android:textSize="12dp" />
<Button
android:id="#+id/button4"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="80dp"
android:layout_height="38dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="80dp"
android:layout_toEndOf="#+id/foodie"
android:background="#fa6425"
android:text="Beach bum"
android:textColor="#fff4f4f4"
android:textSize="12dp" />
<Button
android:id="#+id/button5"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="80dp"
android:layout_height="38dp"
android:layout_alignTop="#+id/button4"
android:layout_marginLeft="15dp"
android:layout_toEndOf="#+id/button4"
android:background="#fa6425"
android:text="Tree hugger"
android:textColor="#fff4f4f4"
android:textSize="12dp" />
</RelativeLayout>
<Button
android:id="#+id/button"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#fa6425"
android:text="Send"
android:textColor="#fff4f4f4" />
</RelativeLayout>
As you can see that I am including two Parallel RelativeLayout in one main RelativeLayout. here the views on three different size:
nexus one
nexus 5
nexus 6
Best alignment is in Nexus 5 screen. Do I need to create different layout folder i.e. hdpi, mdpi and etc? If I am not wrong then I don't need to because my application is going to run only on phone devices (in portrait mode only).
How can I make scalable screen layouts. Any help would be appreciable :)
If you want to force all the views to have the same ration on screen the only way is to give it a size dynamically after you calculated the ratio between the desired pixels and the screen density, which is not really a solution, What you need to understand is when working with various screen sizes, each one suppose to behave differently, a Tablet screen is expected to be bigger and thus having more room for elements to show up on screen, a phone screen is smaller and less elements should be showed on screen, you need to adjust your view to support all of these screens and the proper way is to write a different layout for tablets and phones, or even different layout by screen dpi.
I am pretty new, I am using Android Studio, is that what you are using? First thing first, if you always want you activity to be in portrait mode, use this code in your manifest, you have to add the code to each activity you want to stay in portrait mode. If you don't, and you don't add code to handle the switch in screen orientation, the phone will likely crash.
<activity
android:name=".TitleActivity"
android:label="#string/title_activity"
android:screenOrientation="portrait" >
</activity>
Instead of a relative view, Try the Linear Layout.
You would have your Main Layout, with a few nested Linear Layouts.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/example">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Title Here"
android:id="#+id/Title"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="20dp"
android:gravity="center_horizontal"
android:layout_marginBottom="20dp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="50dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_weight="1"
android:layout_marginLeft="10dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button3"
android:layout_weight="1"
android:layout_marginRight="10dp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal"
android:background="#drawable/test"
android:layout_margin="50dp" />
</LinearLayout>
This layout has A title Above the three buttons, Then three buttons, then an image view below, it scales from 3.7 to 7.0. Larger than 7, I would make another layout.
You need an image named test in your drawable file.
use this Library will help you to set a Responsive scalable Views for all the devices Layouts
https://github.com/intuit/sdp
irs really easy and simpl just replace.
android:layout_width="50dp"
android:layout_height="60dp"
with.
android:layout_width="50sdp"
android:layout_height="60sdp"
and for textView
android:textSize="60ssp"
instead of. sp
I have gone through many relative answers on stockoverflow and link's such as Supporting Different Screens or Screen Compatibility Mode
I have created the following relative layout and I am trying to make it look alike in all android screens.
My images fit perfect for 4.8 inch phones but when I try to use a 2.8 inch display or something like like that, some buttons go on top of others, and they do not shrink.
Does anyone have any suggestion how to improve that?
And preferably without increasing the size of my app.
Thanks in advance!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".MainActivity" >
<ImageButton
android:id="#+id/Switch_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="someMethod"
android:background="#drawable/switch_off"/>
<ImageView
android:id="#+id/warning_shot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/more"
android:onClick="someMethod" />
<ImageView
android:id="#+id/imageViewBatteryState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/Switch_off"
/>
<ImageView
android:id="#+id/sh"
android:layout_width="147dp"
android:layout_height="54dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
android:background="#drawable/me"/>
<ImageView
android:id="#+id/sit"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/textViewBatteryInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold"
android:typeface="monospace"
android:layout_alignBottom="#+id/sit"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
I will suggest you to use LinearLayout instead of Relativelayout specially for the issue :
My images fit perfect for 4.8 inch phones but when I try to use a 2.8
inch display or something like like that, some buttons go on top of
others, and they do not shrink.
Because When you give orientation to Linearlayout then Its child will never get on top of each other for any resolution or screen size.
And If you give them Weight then Views will be in fix position for Each and Every device.
For example Put below Xml in your project and Check this out in Any resolution, It will give the same Result.
XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 3" />
</LinearLayout>
</LinearLayout>
I am testing my layout in eclipse's graphical layout. There are 5.4in FWVGA(480x854,mdpi) and 5.1in WVGA(480x800,mdpi) screens available to view in the graphical layout. If I am correct they both fall into large screen category, therefore I've put the layout xml into layout-large folder. And I've put my images into drawable-large-mdpi folder. But the image buttons are slightly off in 5.1in WVGA as you can see in the screenshots below. First is 5.1in, the second screenshot is 5.4'' and the correct one.
My second question which is similar to the above goes like this. I've done new layout for the Nexus 7 and put it into layout-sw600dp folder, and images to the drawable-tvdpi. Then I viewed this layout in the 7in tablet (1024x600,mdpi). And the image buttons are slightly off than it should look. The same way as in the first question.
I understand that the reason is probably because 5.1in and 5.4in isn't exactly the same even though they fall into the same category and I should have 2 different layouts for them. So how I should go about it? How can I have two different layouts? Or is there better solution, as I don't want to create a layout for each screen size that exist on the market.
Here is xml file:
<?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/wall4_cabinetclosed" android:orientation="vertical">
<RelativeLayout android:id="#+id/frames_layout"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="73dp" android:layout_marginTop="57dp">
<ImageView android:id="#+id/fire_frame"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
android:background="#drawable/small_fire_icon" />
<ImageView android:id="#+id/water_frame"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignTop="#+id/fire_frame" android:layout_marginLeft="75dp"
android:layout_toRightOf="#+id/fire_frame" android:background="#drawable/small_water_icon" />
<ImageView android:id="#+id/earth_frame"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_below="#+id/fire_frame" android:layout_marginTop="71dp"
android:layout_toLeftOf="#+id/water_frame" android:background="#drawable/small_earth_icon" />
<ImageView android:id="#+id/wind_frame"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#+id/water_frame" android:layout_alignTop="#+id/earth_frame"
android:background ="#drawable/small_wind_icon" />
</RelativeLayout>
<ImageView android:id="#+id/zoomed_image"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<Button android:id="#+id/frames" android:layout_width="210dp"
android:layout_height="220dp" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:layout_marginLeft="55dp"
android:layout_marginTop="30dp" android:onClick="zoomFrames"
android:background="#android:color/transparent"/>
<Button android:id="#+id/blue" android:layout_width="115dp"
android:layout_height="70dp" android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" android:layout_marginLeft="220dp"
android:onClick="zoomImage"
android:background="#android:color/transparent"/>
<Button android:id="#+id/white" android:layout_width="85dp"
android:layout_height="50dp" android:layout_alignParentRight="true"
android:layout_alignParentTop="true" android:layout_marginRight="420dp"
android:layout_marginTop="420dp" android:onClick="zoomImage"
android:visibility="invisible"
android:background="#android:color/transparent"/>
<ImageView
android:id="#+id/fireplace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="311dp"
android:layout_marginLeft="67dp"
android:background="#drawable/fire"
/>
<ImageButton
android:id="#+id/water_room"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="310dp"
android:layout_marginLeft="90dp"
android:background="#drawable/view_water_room"
android:onClick="finishFireRoom"
android:visibility="gone"
/>
<ImageView android:id="#+id/frames_zoomed_image"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/frames_zoomed" android:onClick="hideZoomedFrames"
android:visibility="gone"/>
<RelativeLayout android:id="#+id/frameZoomedLayout"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="113dp" android:layout_marginLeft="145dp"
android:visibility="gone"
>
<ImageButton android:id="#+id/fire_icon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/fire_icon" android:onClick="changeIcon" />
<ImageButton android:id="#+id/water_icon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignBottom="#+id/fire_icon" android:layout_toRightOf="#+id/fire_icon"
android:background="#drawable/water_icon" android:layout_marginLeft="147dp" android:onClick="changeIcon"/>
<ImageButton android:id="#+id/earth_icon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_below="#+id/fire_icon" android:layout_marginTop="140dp"
android:layout_toLeftOf="#+id/water_icon" android:background="#drawable/earth_icon" android:onClick="changeIcon"/>
<ImageButton android:id="#+id/wind_icon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#+id/water_icon" android:layout_alignTop="#+id/earth_icon"
android:background="#drawable/wind_icon" android:onClick="changeIcon"/>
</RelativeLayout>
</RelativeLayout>
in 3rd step set all ur device specific like screen, language etc all. and ur done
I have implemented layout folder from layout-small to layout-xlarge.
but for nexus one and nexus s play pause buttons are get arranged automatically and look differently and for galaxy nexus and samsung s3 buttons are get arranged differently But both are using same xml that default normal.. small and large and xlarge are working fine.
anybody knows how can i arrange item so it look same on both device...
I want it to look like this
Here is my code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/play_background"
android:orientation="vertical" >
<ImageView
android:id="#+id/ff"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:scaleType="fitXY"
android:src="#drawable/test_play_image" />
<TextView
android:id="#+id/metadata"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/ff"
android:gravity="center"
android:text="WUMM - D Light "
android:textColor="#android:color/white"
android:textSize="18dp" />
<Button
android:id="#+id/like"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="default Like" />
<Button
android:id="#+id/play"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/metadata"
android:layout_centerHorizontal="true"
android:layout_marginTop="18dp"
android:background="#drawable/ch_play" />
<Button
android:id="#+id/back"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/play"
android:layout_alignBottom="#+id/play"
android:layout_marginRight="30dp"
android:layout_toLeftOf="#+id/play"
android:background="#drawable/back" />
<Button
android:id="#+id/forward"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/play"
android:layout_alignBottom="#+id/play"
android:layout_marginLeft="40dp"
android:layout_toRightOf="#+id/play"
android:background="#drawable/forward" />
</RelativeLayout>
BUT IY LOOKs LIKE THIS on NEXUS ONE and S
Here is nexus one image
and here is galaxy nexus screen shot
First you go through this tutorial, Here, you can learn multiple screen sizes or resoultion support
Screen Support
Screen Size Support
Designing Images, Icon For Multiple Screen
Ok, this problem has been hounding me for about 2 weeks now and with all the research I've done, I still can't figure this out. I have 6 buttons in the form of a pie chart. When I do the layout in the XML, I can make them look fine.
When I change it to a tablet size or another size screen all my buttons move and look horrible.
How do I make these Buttons stationary across any screen size? I know that I will have to have different image sizes in the approriate folders and I plan to do that, but I need to know if there is a way to lock these in a certain position in the XML file or what I need to do to make this work properly. As always any and all help is greatly appreciated and I will answer any questions if I am not clear enough on my question. THANKS
Here is my XML
<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/mainback" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="25dp"
android:background="#drawable/ipadcollegesm" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button1"
android:layout_alignRight="#+id/button1"
android:layout_marginBottom="92dp"
android:background="#drawable/ipadmusicsm" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button2"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/button1"
android:background="#drawable/ipadfamilysm" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button3"
android:layout_alignTop="#+id/button1"
android:background="#drawable/ipadyouthsm" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button4"
android:layout_below="#+id/button3"
android:layout_marginTop="14dp"
android:background="#drawable/ipadlinkssm" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button5"
android:layout_alignBottom="#+id/button5"
android:layout_toLeftOf="#+id/button4"
android:background="#drawable/ipadpodcastsm" />
</RelativeLayout>
You've provided a fixed dp for each button, different devices have different resolutions.
To make this work on multiple devices with the least amount of work, I'd suggest adding another relative layout as the root, and setting the gravity as center. This way, the layout is always in the center of the screen.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:background="#drawable/mainback">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
*** Your buttons would be here ***
</RelativeLayout>
</RelativeLayout>
Another way is having a dimens file for each screen size, but above is probably the easiest way of doing it.