4

I am trying to lay buttons on top of an image that is used as the background for multiple devices/screen sizes. If I define the button in a relativeLayout for a device with an aspect ratio of 9:16 (e.g. Galaxy Nexus or Nexus 5) so that the button aligns with a specific spot on the image, then it doesn't line up with the same image on a device with an aspect ratio of 3:5 (e.g. Nexus S). In my relative layout, the first button is aligned to the left and bottom of the screen with an offset (e.g. android:layout_marginLeft="32dp" and android:layout_marginBottom="150dp"). All other buttons are aligned to this button.

I have spent days trying to figure this out with experimentation and searching for tutorials, but nothing seems to work.

The following image is for the Nexus 5. As you can see, the buttons line up with the background:

enter image description here

The following image is for the Nexus S. As you can see, the buttons are offset from the background enter image description here

EDIT: I am obviously missing some key concept. I have separate directories for each screen density of hdpi, xhdpi, and xxhdpi. But, based on my two attached images, it seems I need to have a separate layout for screens with dimension 480x800 versus 720x1280 and 1080x1920. It seems that the screen of 720x1280 must require the same layout as the 1080x1920 screen because the Nexus 5 and the Galaxy Nexus have the same result (i.e. as seen in the first image). To create a separate layout, I've tried using layout-small, layout, layout-large, etc. (which is the deprecated approach), as well as layout-sw480dp and layout-sw720dp. Then, the layout_marginLeft and layout_margin_bottom of the first button is adjusted for the appropriate screen size. Neither of these approaches works.

Here is the current content of my layout for the first image:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:paddingLeft="15dp"
    android:paddingBottom="5dp"
    tools:context="com.myCompany.myApp.MainActivity"
    android:background="@drawable/android_home_screen">

<Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="90dp"
    android:layout_height="wrap_content"
    android:text="Channel 1"
    android:id="@+id/channel1"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:textColor="#FFFFFF"
    android:layout_marginBottom="145dp"
    android:layout_marginLeft="17dp"
    android:lines="2" />

<Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="90dp"
    android:layout_height="wrap_content"
    android:text="Channel 3"
    android:id="@+id/channel3"
    android:textColor="#FFFFFF"
    android:layout_marginLeft="0dp"
    android:layout_toRightOf="@+id/channel1"
    android:layout_alignTop="@+id/channel1"
    android:lines="2" />

<Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="90dp"
    android:layout_height="wrap_content"
    android:text="Channel 5"
    android:id="@+id/channel5"
    android:textColor="#FFFFFF"
    android:layout_marginLeft="0dp"
    android:layout_toRightOf="@+id/channel3"
    android:layout_alignTop="@+id/channel3"
    android:lines="2" />

...

</RelativeLayout>

Please help me understand how to place buttons on top of specific spots of an image regardless of the screen size/aspect ratio/density of the screen. Specifically, please provide an example of how to define a button that appears on the same visual spot of a background image for screen sizes of 480x800 and 720x1280.

The following is a full image of the screen background. I am trying to place buttons on top of the areas with a thin gold outline. There is one of these in each of the drawable directories for hdpi, xhdpi, and xxhdpi. The hdpi image is 480x693 pixels, the xhdpi image is 720x1040 pixels, and the xxhdpi image is 1080x1559 pixels with respective resolutions of 213.34 ppi, 320 ppi, and 480 ppi. These resolutions and dimensions enable the images to have the same image size (width and height) in terms of points. enter image description here

Dmitry
  • 6,716
  • 14
  • 37
  • 39
JeffB6688
  • 3,782
  • 5
  • 38
  • 58
  • First of all avoid giving specific align like 32dp or 150dp.Always try with wrap_content or fill_parent.And for all device support read this link hope it may help you http://developer.android.com/guide/practices/screens_support.html and http://stackoverflow.com/questions/8255985/how-to-support-different-screen-size-in-android – Meghna Apr 17 '14 at 17:55
  • @MycareerId - I am using Android Studio and it automatically put these specific alignment numbers in. Without the specific align numbers, I can't get the first button to stay over the specific spot on the image. What method would you recommend to anchor the button to a spot on the image. Thanks for the links. I've already tried experimenting with the different layout directories, but no success. I will pour through the stack overflow link ideas to see if there are any other examples I can try. – JeffB6688 Apr 17 '14 at 18:51
  • @MycareerId - Unfortunately, none of these references help solve my problem either. Based on my two attached images, it seems I need to have a separate layout for screens with dimension 480x800 versus 720x1280. It seems that since the screen of 720x1280 must require the same layout as screens with 1080x1920 because the Nexus 5 and the Galaxy Nexus have the same result. So, I've tried using layout-small, layout, layout-large, etc, as well as layout-sw48dp and layout-sw720dp. Neither of these approaches works. In fact, they crash the emulator. So, I am missing some key piece of information. Help – JeffB6688 Apr 21 '14 at 21:16
  • just put different size of images in different drawable folder(drawablemdpi drawablehdpi...) and make different layout for different screen – Meghna Apr 22 '14 at 08:27
  • @MycareerId - Thanks. I must be doing a poor job of explaining this. I think that what you suggest is exactly what I am doing. But the technique I am using is not working. I have different sized images in different drawable folders. Then I create a different layout for each image. Specifically, I created the following folders with unique xml files in each. The folders were layout, layout-small, layout-large. I also tried folders named: layout-sw480dp and layout-sw720dp. The later crashed emulator, the former only used layout for 9:16 aspect ratio. Did I do this correctly? – JeffB6688 Apr 22 '14 at 15:15
  • ya you are doing as i was saying..Dont know why its not working – Meghna Apr 23 '14 at 04:10

1 Answers1

2

You can manage your layout by using weight property of linear layout it will automatically adjust the screen

   <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ababab" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="10dp"
        android:background="#fff"
        android:orientation="vertical"
        android:padding="10dp" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="3" >

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:orientation="horizontal"
            android:weightSum="1" >

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight=".1" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight=".4" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight=".4" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight=".1" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>
Mohamed Taher Alrefaie
  • 15,698
  • 9
  • 48
  • 66
Santosh Dhoundiyal
  • 588
  • 4
  • 10
  • Thanks, but I need to use a relative layout because the buttons do not all line up on top of the image in neat rows and columns. There are 6 rows all having different size buttons and text views. Most rows start in different horizontal positions with differing vertical positions. – JeffB6688 Apr 22 '14 at 17:07
  • You can create multiple linear layout inside the relative layout and can manage your view according to your need.inside the relative layout you can use layout:below property of relative layout to align linear layout horizontally inside the relative layout – Santosh Dhoundiyal Apr 23 '14 at 06:23
  • Ok, I figured out how to have multiple linear layouts inside of the relative layout. While this seems to help from a horizontal perspective, it still doesn't solve my problem from a vertical perspective. As shown in the images, the buttons do not line up when aspect ratio changes from 3:5 to 9:16. Unless there is another way, the use of linear layouts still requires me to use paddingBottom, paddingRight, and paddingLeft to place the buttons of each row in the proper place over the image. I am specifying units in dp for these (e.g. paddingBottom="80dp"). Any other ideas? – JeffB6688 Apr 23 '14 at 23:04
  • ok can you post your complete layout image so i can make layout for you as per your requirement. – Santosh Dhoundiyal Apr 29 '14 at 04:12
  • I have posted a snapshot of the complete image. Is that what you were requesting? As noted, the images are are proportionally the same, but with different resolutions for each of the drawable directories hdpi, xhdpi, and xxhdpi. – JeffB6688 Apr 29 '14 at 15:57
  • Is there a way to dialog about this offline? Your modification places a grouping of buttons in the middle of the screen (vertically and horizontally). I added android:layout_marginRight="30dp" to both linear layouts to line the buttons up horizontal with the background image. Then I added android:layout_marginTop="220dp" to the first linear layout to align the buttons vertically with the background image. The vertical alignment only works for the Nexus S (hdpi) image. The buttons are off by 15dp vertically and 5dp horizontal for Galaxy Nexus (xhdpi) image. Any other ideas? – JeffB6688 May 02 '14 at 15:46