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?

Answer 1

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

Answer 2

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:

• How to create an irregular shaped imagebutton where transparent part of image is not clickable?
• Android: Creating shaped button

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.