How can I make Android View position and size be shown always with the same proportion on any screen size?

Question

I've tried position the button with this layout parameters:

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Butt1"
    android:id="@+id/b1"
    android:rotation="-9"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="205dp"

My idea is to make the button transparent later and keep the visual hint of the background image to let the user know there is a button there.

I've already made it work on my device by manually positioning and sizing the button, on my device using margin top 205dp I get this:

On another device the buttons are not aligned / sized as the background image:

Any idea on how I can match position and size of the button on any device?

I suggest you improve your question by showing all the layout, an image of what you want to achieve and another showing the wrong result. -- as a side note, I can see from your question your Android knowledge is newbie and I probably can also guess what the problem is. But the fact is that the effort to reply a question that is not well written is more then what I'm willing to spend in helping a random stranger ;) — Daniele Segato, Mar 10 '16 at 13:27
Even if we are both Italian this website is not :) so please stick to English — Daniele Segato, Mar 10 '16 at 14:52
@DanieleSegato ok no problem...i edited my own post with the screenshot of my device where i create the buttons and an other screenshot in an other device with different resolution...i want that the buttons will be autoresized and positioned correctly — Mattia, Mar 10 '16 at 14:56
I'm looking at your edited version, are you trying to put full screen background and "transparent" buttons on the area the background image has buttons? — Daniele Segato, Mar 10 '16 at 14:57
@DanieleSegato yes it is my plan but for first i have to find a system to "auto-edit" the button resize and position for beacause only in my device will work correctly (if you see on the second screen you can see that the buttons are positioned down the image and have more widthed....how can i resolve? — Mattia, Mar 10 '16 at 15:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105919/discussion-between-daniele-segato-and-mattia-romagnoli). — Daniele Segato, Mar 10 '16 at 15:18
You should get the ratio position of shape on the Image like 0%, 30%,.Then you can caclulate the position of it on any device.Because you know size of mobile , position of shape,you can get the posistion of it. — tiny sunlight, Mar 10 '16 at 15:27
Edited question to match our chat (in italian) and provided an answer — Daniele Segato, Mar 10 '16 at 15:55

Dario · Answer 1 · 2016-03-10T15:39:42.563

Use a <RelativeLayout> and instead of android:layout_marginTop="205dp" use the property android:layout_below so you can specify the Button after who it is!

Example

<?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:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/reminder" />
    <Spinner
        android:id="@+id/dates"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times" />
    <Spinner
        android:id="@id/times"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"
        android:text="@string/done" />
</RelativeLayout>

The Spinner is after the EdiText and the Button is after the second Spinner ALWAYS

If you want always your button in the left-center of your screen try with this code.

<?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:paddingLeft="16dp"
        android:paddingRight="16dp" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true">

            <Button
                android:id="@+id/play"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
            <Button
                android:id="@+id/score"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_below="@id/play"
                android:layout_alignParentLeft="true"
                android:layout_toLeftOf="@+id/times" />
            <Button
                android:id="@id/times"
                android:layout_width="96dp"
                android:layout_height="wrap_content"
                android:layout_below="@id/score"
                android:layout_alignParentRight="true" />
            <Button
                android:id="@+id/players"
                android:layout_width="96dp"
                android:layout_height="wrap_content"
                android:layout_below="@id/times"
                android:layout_alignParentRight="true"
                android:text="@string/done" />

        </LinearLayout>

    </RelativeLayout>

Use a LinearLayout like a container and with the property of the RelativeLayout put it at the left(or right) and center-vertical so all the Buttons inside the LinearLayout change position from all screens dimension.

Read the documents that i post and see the RelativeLayout paramenter so you can find the solution that it's better for you.

Italian: Credo tu sia italiano, se usi la proprietà android:layout_below dici praticamente che l'elemento con questa proprietà si deve posizionare subito sotto un determinato elemento specificato per ID Poi se vuoi li spazi l'uno dall'altro con un marginTop. Per mantenere il tutto centrato usa un LinearLayout, consideralo un container che ha come proprietà del RelativeLayout quelle di stare a sinistra e al centro della schermata, così si adatta ad ogni schermo.

Some Relative Layout guide And parameters

Forse meglio se parlaimo inglese anche se siamo italiani (anche se il mio inglese lascia molto a desiderare.... so it can be helpful but if you see the screenshots, i can use this way for the margin from the 2nd to the 1st but how can i do with the margin top? If the resolution change the 1st pos change automatically if i gain the dp margin. And for the size of them? — Mattia, Mar 10 '16 at 15:20
I write with all two languages, i don't think it's a problem for the site! And if you want the `Buttons` set all always at the center-right of the screen put them inside a `LinearLayout` with the paramenters `android:layout_centerVertical="true"` if you need the code i can write a little example — Dario, Mar 10 '16 at 15:26
@MattiaRomagnoli post edited with some code for explain better what i say. If you get some problem post all xml that you have so i can see and understand better your layout.xml — Dario, Mar 10 '16 at 15:34

score 1 · Accepted Answer · edited May 23 '17 at 12:15

Check out this library: it define version of the RelativeLayout with percent positioning / sizing ability.

I want to point out that using a transparent background and letting the button be hinted by the background image of your window is the "easy" way but is a bad practice. That way you give no visual feedback to the user touching your UI, you are forced to upload a big image with your App that will be stretched with inevitable artifacts and doesn't really well adapt to different screen aspect ratio.

You should try to build an UI where the button is an actual button, positioned in your screen.

In your case this isn't an easy task because you want irregular shaped buttons that overlap with each other (if you consider them rectangular). Thus you need to handle touch in a special /custom way.

If you decide to go with this other route check out this other questions and answers:

Another way can be to map the image with coordinates like you would do in HTML map tag. This Android Library seems to implement that exact behavior in an Android Image Widget.

I think that the main problem is not that. I think that he want a dynamic positioning of Buttons. Example (Always at the center-Left of the screen). But the problem is the background, he use it like an html page, but with phones it's different. The best-easy way can be like my post? (i ask because you have a rep better than mine) But he must use a ImageButton that have with background his own style of buttons. — Dario, Mar 10 '16 at 15:57
he use an image as background, the image is stretched to match full screen, meaning if you work with percent over the screen size you'll always position the button at the right place. -- still a bad idea for other reasons :) — Daniele Segato, Mar 10 '16 at 15:59

How can I make Android View position and size be shown always with the same proportion on any screen size?

2 Answers2