Android ImageButton in different screens

Question

In the UI for my application I have 5 ImageButton all is ok on the 3.7" screen but if I have a screen of 2.7", 3.0" or other my UI will not scale and it looks bad. It looks like this:

3,7"

2,7"

How do I make all have a nice look on all screens, just like on the screen 3.7"?

Code: main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Background"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/two"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/LL"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"
        android:orientation="vertical"
        android:scaleType="fitXY" >

        <ImageButton
            android:id="@+id/ibTest1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="@drawable/one" />

        <ImageButton
            android:id="@+id/ibTest2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="@drawable/one" />

        <ImageButton
            android:id="@+id/ibTest3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="@drawable/one" />

        <ImageButton
            android:id="@+id/ibTest4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="@drawable/one" />

        <ImageButton
            android:id="@+id/ibTest5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="@drawable/one" />
    </LinearLayout>

</RelativeLayout>

Answer 1

Use a RelativeLayout , and then place a LinearLayout with height wrap_content and put the buttons inside that LinearLayout. Also use dp instead of px for sizes.

PS If you post the code of your layout, we can help you better.

EDITED: Now that I can see your code I can show you want I meant with my answer:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Background"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/two"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/LL"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_centerInParent="true" >

        <ImageButton
            android:id="@+id/ibTest1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/one" />

        <ImageButton
            android:id="@+id/ibTest2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/one" />

        <ImageButton
            android:id="@+id/ibTest3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/one" />

        <ImageButton
            android:id="@+id/ibTest4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/one" />

        <ImageButton
            android:id="@+id/ibTest5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/one" />
    </LinearLayout>

</RelativeLayout>

Answer 2

Can you provide some code? Maybe try add to in xml

android:scaleType="fitXY"

Answer 3

First make image for all

mdpi,hdpi,ldpi

as per their size.

take Lineatlayout in center for Buttons only.

then set property gravity="Center" ;

Answer 4

确保您使用的是dp不是使用'px'这是一个常见原因。

Answer 5

try this add in each imageview in xml

  android:adjustViewBounds="true"
  android:scaleType="centerCrop"