android how to position elements to support in all devices

Question

I have a problem with positioning elements.

What I want to have is this image in all devices no matter screen size is.

what I have is this in two different sizes

I want my textViews and editTexts maintain their positions in the activity view. (The image 'Green-Blue-Red-Yellow square containing image' in an imageView)

and this is my layout.xml

        <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical">
                <TextView
                        android:layout_height="30dp"
                        android:layout_width="150dp"
                        android:layout_marginTop="60dp"
                        android:layout_marginLeft="100dp"
                        android:textSize="19dp"
                        android:textStyle="bold"
                        android:gravity="center"
                        android:text="@string/login_app_name">
                </TextView>
                <RelativeLayout
                        android:layout_width="fill_parent"
                        android:layout_height="20dp"
                        android:layout_marginTop="128dp"
                        android:gravity="center_vertical">
                            <TextView
                                    android:layout_height="20dp"
                                    android:layout_width="100dp"
                                    android:layout_marginLeft="35dp"
                                    android:textStyle="bold"
                                    android:gravity="right|center_vertical"
                                    android:text="@string/login_username">
                            </TextView>
                            <EditText
                                    android:layout_height="20dp"
                                    android:layout_width="140dp"
                                    android:layout_alignParentRight="true"
                                    android:layout_marginRight="10dp"
                                    android:background="@drawable/login_edit_text">
                            </EditText>
                </RelativeLayout>
                <RelativeLayout
                        android:layout_width="fill_parent"
                        android:layout_height="20dp"
                        android:layout_marginTop="2dp">
                            <TextView
                                    android:layout_height="20dp"
                                    android:layout_width="100dp"
                                    android:layout_marginLeft="35dp"
                                    android:textStyle="bold"
                                    android:gravity="right|center_vertical"
                                    android:text="@string/login_password">
                            </TextView>
                            <EditText
                                    android:layout_height="20dp"
                                    android:layout_width="140dp"
                                    android:layout_alignParentRight="true"
                                    android:layout_marginRight="10dp"
                                    android:background="@drawable/login_edit_text">
                            </EditText>
                </RelativeLayout>

        </LinearLayout>
    </RelativeLayout>

I suspect the problem is related to tha paddings and margins that I used to position elements. But I couldn't find any other way around.

Is there a way that you can suggest for my elements to maintain their positions in all screen sizes?

Answer 1

Make separate xml files for the different devices and position the images separately for the two xml's, so as to suit the different standard resolutions. link two separate classes for the two XML files, and now based on the screen resolution call either of the two classes. You can get screen res with this code:

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);

final int height = dm.heightPixels;
final int width = dm.widthPixels;

Use an if-else condition and choose the class to intent to