Android: Images button layout vertically that will fit all screen sizes

Question

I'm having problems with my layout I want to arrange the image buttons vertically and I want it to have the same look for different screen sizes here is a print screen http://flic.kr/p/fwEZn1

    <?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/chalk"
android:gravity="center|fill_vertical"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="1000dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="104dp" >

    <ImageButton
        android:id="@+id/m"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="62dp"
        android:layout_weight="1.30"
        android:background="@android:color/transparent"
        android:contentDescription="exam schedule button"
        android:onClick="ex"
        android:src="@drawable/exam" />

    <ImageButton
        android:id="@+id/cl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="60dp"
        android:background="@android:color/transparent"
        android:contentDescription="classes button"
        android:onClick="cl"
        android:src="@drawable/list1" />

    <ImageButton
        android:id="@+id/lec"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.24"
        android:background="@android:color/transparent"
        android:contentDescription="lecture section button"
        android:onClick="lc"
        android:src="@drawable/sylla" />

    <ImageButton
        android:id="@+id/gr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_weight="3.36"
        android:background="@android:color/transparent"
        android:contentDescription="group button"
        android:onClick="gr"
        android:src="@drawable/group" />
      </LinearLayout>

    <LinearLayout
  android:id="@+id/linearLayout2"
  android:layout_width="1000dp"
  android:layout_height="wrap_content"
  android:layout_alignParentLeft="true"
  android:layout_below="@+id/linearLayout1"
  android:layout_marginTop="123dp" >

  <ImageButton
      android:id="@+id/kl"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginRight="74dp"
      android:layout_weight="0.69"
      android:background="@android:color/transparent"
      android:contentDescription="calendar button"
      android:onClick="kl"
      android:src="@drawable/calendar" />

     <ImageButton
      android:id="@+id/d"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:layout_alignTop="@+id/pd"
      android:layout_marginRight="84dp"
      android:layout_weight="0.38"
      android:background="@android:color/transparent"
      android:contentDescription="Schedule button"
      android:onClick="sk"
      android:src="@drawable/sked" />

     <ImageButton
      android:id="@+id/pd"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignLeft="@+id/button1"
      android:layout_alignTop="@+id/an"
      android:layout_weight="0.16"
      android:background="@android:color/transparent"
      android:contentDescription="podcast button"
      android:onClick="pd"
      android:src="@drawable/podcast" />

  <ImageButton
      android:id="@+id/an"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignTop="@+id/kl"
      android:layout_marginLeft="60dp"
      android:layout_toRightOf="@+id/kl"
      android:layout_weight=".92"
      android:background="@android:color/transparent"
      android:contentDescription="announcement button"
      android:onClick="an"
      android:src="@drawable/announce" />
  </LinearLayout>
  <ImageButton
  android:id="@+id/button1"
  android:layout_width="53dp"
  android:layout_height="40dp"
  android:layout_alignParentBottom="true"
  android:layout_alignParentLeft="true"
  android:layout_marginBottom="106dp"
  android:layout_marginLeft="342dp"
  android:layout_weight="0.38"
  android:background="@android:color/transparent"
  android:contentDescription="logout button"
  android:onClick="logout"
  android:src="@drawable/logout"
  android:text="Logout" />
 </RelativeLayout>

So basically I want to fix the arrangement of the images button. How can I do this? Do I need to resize images per drawable folder?

Answer 1

Did You mean the same Size for all screen sizes when You say "look"? A possible way to do this, would be to set to ImageButton in Your xml:

    scaleType="centerInside"

and set all weights from Your image buttons to 1

    layout_weight="1"

And if You want to set every button vertical, declare in Your LinearLayout

    android:orientation="vertical"

And by the way, it is allways a good practise to set different images for every drawable to fit in multiple screens.

Answer 2

There is a simple solution. I see you want the layout to look the same in all screen sizes, but you are using hard coded values for layout_height,margin,padding etc. For this purpose use the dimens.xml in the values folder. Specify the values for all screens, create these folders in your resource folder:

   values-small
   values-normal(The default values folder is values-normal)       
   values-large
   values-xlarge(You can use values-sw600 for tablets after Android 3.2)

In all of these folders create dimens.xml where you specify the margin,height,width,padding etc in dp, you can even specify the font size. Hope this helps!