简体   繁体   中英

Same position for UI elements (buttons, image buttons) on all android devices

My application uses buttons and image buttons constructed via XML and drawable folder.
On some devices applications UI elements (buttons and image buttons) losses its position and overlaps on each other and on some devices last button in bottom of screen disappears.
Same is happening when orientation is changed.

I want all my elements to be on same position on all devices.
How can I make this using XML.
Is there any easy and simple way to do so?
Here is my XML.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/main_btn_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="55dp"
        android:layout_marginTop="71dp"
        android:background="#ffffff"
        />

    <ImageButton
        android:id="@+id/main_btn_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/main_btn_1"
        android:layout_marginRight="56dp"
        android:background="#000000"
        />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/main_btn_1"
        android:layout_below="@+id/main_btn_1"
        android:textColor="#00aeed"
        android:textStyle="normal" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView1"
        android:layout_alignBottom="@+id/textView1"
        android:layout_alignLeft="@+id/main_btn_2"
        android:textColor="#ea1d24"
        android:textStyle="normal" />

    <ImageButton
        android:id="@+id/main_btn_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="42dp"
        android:background="#000000"
        />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/main_btn_3"
        android:layout_below="@+id/main_btn_3"
        android:textColor="#f7941d"
        android:textStyle="normal" />

    <ImageButton
        android:id="@+id/main_btn_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_alignTop="@+id/main_btn_3"
        android:background="#000000"
         />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/main_btn_4"
        android:layout_below="@+id/main_btn_4"
        android:textColor="#f7941d"
        android:textStyle="normal" />

    <ImageButton
        android:id="@+id/main_btn_5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView4"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="12dp"
        android:background="#000000"
        />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/main_btn_5"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:textColor="#0065b3"
        android:textStyle="normal" />

</RelativeLayout>

Because there are many devices with so many different screen sizes, resolutions, etc., probably the main thing you have to avoid is using absolute positions when placing layout elements. The Android SDK has some powerful structures to avoid absolute positioning (ie LinearLayout, RelativeLayout), so try working with them and instead of defining positions like "12dp", use the correct combination of layout_width, layout_height (wrap_content or match_parent) and layout_weight, which can help you to place layout elements without specifying absolute positions.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM