As android device screen is bigger, buttons are upper

Question

I put 2 buttons, with wrap_content size, but as device is bigger, buttons are upper, I cannot figure how to fix them, so on all devices to have the same position. Is there a solution not to cover the head of this guy, as example.

enter image description here

Layout.xml

<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:background="@drawable/background"
    tools:context=".BasicScreenActivity" >

     <Button
         android:id="@+id/button1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentLeft="true"
         android:layout_alignParentTop="true"
         android:layout_marginTop="102dp"
         android:background="@drawable/custom_button1" />

     <Button
         android:id="@+id/button2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentLeft="true"
         android:layout_below="@+id/button1"
         android:background="@drawable/custom_button2" />

</RelativeLayout>

this may be helpfull http://stackoverflow.com/a/16518557/1939564 — Muhammad Babar, Sep 03 '13 at 14:22

score 0 · Answer 1 · answered Sep 02 '13 at 19:26

//try like this below one

#remove the margin top 102dp
#don't use button background image use color with white stroke
#make your button width as match parent and minheight= 100dp as ur need.
#add android:gravity="center" to your parent layout



<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:background="@drawable/background"
    android:gravity="center" 
    tools:context=".BasicScreenActivity" >

     <Button
         android:id="@+id/button1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentLeft="true"
         android:layout_alignParentTop="true"
         android:background="@android:color/holo_green_dark" />

     <Button
         android:id="@+id/button2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentLeft="true"
         android:layout_below="@+id/button1"
         android:background="@android:color/holo_green_dark" />

</RelativeLayout>

Dmitry · Answer 2 · 2013-09-03T06:28:13.447

Android is running on multiple devices with different screen resolutions, here is how to support them all: Supporting Multiple Screens

Basically we have following screens resolution:

xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp

enter image description here

to support them all, in Res folder we have to create folders depending what screens we want to support.

layout-xlarge
layout-large
layout-normal
layout-small

after, copy the your final layout_file.xml to all of them, open it in Graphical mode, and rearrange the buttons to look good on the screen. Depending on the resolution screen android will choose layout which is closer to device resolution . Just test it on different devices, or virtual devices to make sure it looks good.

score 0 · Answer 3 · answered Sep 03 '13 at 08:18

If you want all of your views to cover the whole screen of the device when the app is launched, you need LinearLayout's weight

<LinearLayout 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:background="@drawable/background"
    android:orientation="vertical"
    tools:context=".BasicScreenActivity">

     <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="0 dip" //this is important!
        android:layout_weight="5" //<-- add this
        android:layout_marginTop="102dp"
        android:background="@drawable/custom_button1" />

     <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="0 dip" //this is important!
        android:layout_weight="5" //<-- add this
        android:background="@drawable/custom_button2" />

</LinearLayout>

I usually have the weight total equal to 10 so its easier to compute and visualize the UI

As android device screen is bigger, buttons are upper

3 Answers3