Buttons with fixed sized are showed differently

Question

I'm quiet a fresh starter with android and I'm trying to have a screen filled with 4 buttons below each other, I've made 3 different layout folders layout_normal, layout_large and layout_xlarge. for normal I've set width and height both to 120dp and for xlarge I've set them to 170dp both, resulting in a square shaped buttons. I've tested it on my LG-E975 and it was fine, I've teste on Samsung Galaxy tab 10.0 and it was also fine but then I've created some emulators for other devices to test and it was messed up, the fourth button is not in the screen, emulator only shows 3 buttons.

Emulator info:
    target: Android 4.2.2
    Skin: 320 x 480
    hw.lcd.density: 160

Both my LG and emulator are considered Normal screen size as I checked. I know there are alot of articles about this matter but I'd be thankful if someone explain it to me in an easy way to understand. Should drop using fixed sizes for my buttons?

EDIT: here is my xml for layout-normal

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.kaw.mp2.MainActivity"
android:background="@color/background_all" >

<Button
    android:id="@+id/btn_main_aboutus"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:text="@string/btn_aboutus_text"
    android:layout_centerHorizontal="true"
    android:layout_alignParentRight="true"
    android:layout_marginTop="20dp"
    android:background="@color/background_btn"
    android:textColor="@color/text_color_btn" />

<Button
    android:id="@+id/btn_main_contactus"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:text="@string/btn_contactus_text"
    android:layout_below="@id/btn_main_aboutus"
    android:layout_marginTop="10dp"
    android:layout_alignParentRight="true" 
    android:background="@color/background_btn"
    android:textColor="@color/text_color_btn" />

<Button
    android:id="@+id/btn_main_products"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:text="@string/btn_products_text"
    android:layout_below="@id/btn_main_contactus"
    android:layout_marginTop="10dp"
    android:layout_alignParentRight="true" 
    android:background="@color/background_btn"
    android:textColor="@color/text_color_btn" />

<Button
    android:id="@+id/btn_main_news"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:text="@string/btn_news_text"
    android:layout_below="@id/btn_main_products"
    android:layout_marginTop="10dp"
    android:layout_alignParentRight="true" 
    android:background="@color/background_btn"
    android:textColor="@color/text_color_btn" />

</RelativeLayout>

Answer 1

I assume you want 4 buttons in a vertical row (horizontally centered). If I understood this correctly you should be using a LinearLayout, with which you can specify weight on the different components. Think of it as priority. If the buttons all have the same weight, they will all scale to fit the screen.

Change the RelativeLayout to a LinearLayout and add the property:

android:orientation="vertical"

The buttons should all have the same height, and

android:layout_centerHorizontal="true"

You can remove

android:layout_below="@id/btn_main_aboutus

Then add your margins and preferences as you wish.