Beloo Beloo - 15 days ago 8
Android Question

Text over image with matching relative positioning on different screen sizes

I'm stuck.
The problem is how to place text on a static image and keep position depends on it between different screen dimensions.
To achieve this I've tried the layout above:

<?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:padding="@dimen/default_view_padding">

<ImageView
android:id="@+id/iv_background"
android:layout_width="500dp"
android:adjustViewBounds="true"
android:layout_height="900dp"
android:layout_centerInParent="true"
android:src="@drawable/example"/>

<TextView
android:layout_alignLeft="@id/iv_background"
android:layout_alignStart="@id/iv_background"
android:layout_alignEnd="@id/iv_background"
android:layout_alignRight="@id/iv_background"
android:layout_alignTop="@id/iv_background"
android:layout_width="wrap_content"
android:layout_marginTop="190dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Dummy text string"/>

</RelativeLayout>


But on different screens it looks differently.
So, by example, screenshots. The static image background (in example white image with green line), the view with text on nexus5, on nexus7.
As you can see, a text placed on different places over image.
I doesn't know why is it happend, because I'm using dp and relative layout.


background nexus 5
nexus 7


I tried wrap_content/match_parent on image sizes, without ajust view bounds etc. And it haven't help.

Ty for answers.

EDIT: I want the text to always be above the green line on the same distance in different screen dimensions. (the same as in the second image)

EDIT2: Someone misunderstood me, sorry if the question isn't clear. As a background in example i'm tried to use imageview instead of background tag of relative layout, because it is'nt help whatever, i tried that before

The line, which I used in example, is only for that. It just needs to explain the issue of the text positioning

Answer

use dimens.xml to Support different size of screens.

in your res folder create some value folders Like :

values-xlarge
values-large
values-small
values-sw800dp
...

in these folders youy should have dimens.xml and define your dimensions. for example this may be your dimensions for normal screens :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="ImageViewWidth">500dp</dimen>
    <dimen name="ImageViewHeight">900dp</dimen>
    <dimen name="TextViewMarginTop">190dp</dimen>
</resources>

Definitely your dimensions for large or xlarge screens are different!

to use these, simply put them in XML instead of hard-coding dimens

<TextView
    android:layout_alignLeft="@id/iv_background"
    android:layout_alignStart="@id/iv_background"
    android:layout_alignEnd="@id/iv_background"
    android:layout_alignRight="@id/iv_background"
    android:layout_alignTop="@id/iv_background"
    android:layout_width="wrap_content"
    android:layout_marginTop="@dimens/TextViewMarginTop"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:text="Dummy text string"/>