FrameLayout on different screen sizes

Question

Hello i'm develop "drums app" application and i want the application look like real drums so,on the main screen i have background of the drums-set and on the background i have some Image Buttons with the drum pads i cut it before in photoshop like that:

now, when i trying to place the "ImageButtons" to the correct position it's look good on one device but on another device it's look like that:

here is my code:

<?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" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/drums" />

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:layout_marginLeft="200dp"
            android:layout_marginTop="30dp"
            android:background="@android:color/transparent"
            android:src="@drawable/image2" />

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="32dp"
            android:layout_marginTop="50dp"
            android:background="@android:color/transparent"
            android:src="@drawable/image3" />

        <ImageButton
            android:id="@+id/imageButton4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="93dp"
            android:layout_marginTop="13dp"
            android:background="@android:color/transparent"
            android:src="@drawable/image4" />

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="235dp"
            android:layout_marginTop="95dp"
            android:background="@android:color/transparent"
            android:src="@drawable/image1" />

    </FrameLayout>

</LinearLayout>

How can i handle with that? i think i tried anything! It's the right way to do think like that?

Answer 1

Well, your way is probably not the right way to solve this problem. first of all if you want to position your views relative to other views you should use RelativeLayout - http://developer.android.com/guide/topics/ui/layout/relative.html

secondly You should provide different drum png file for different densities: http://developer.android.com/training/multiscreen/screendensities.html#TaskProvideAltBmp. read the provide different png part.

third you should really read the Designing for Multiple Screens guide: http://developer.android.com/training/multiscreen/index.html

if you have any other questions after that don't hesitate to ask.