Text over image with matching relative positioning on different screen sizes

Question

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.

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 1

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"/>

Answer 2

If you just want green color as a background of text then use android:background on textview and remove ImageView. Create a 9Patch image with green line at bottom and give that image as background to your text.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/abc_ab_transparent_light_holo"
    android:text="Dummy text string"
    android:id="@+id/dummy_text" />

Answer 3

I don't know if I understand the question, but I think solution could be putting RelativeLayout in another contener, ie:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        android:padding="@dimen/default_view_padding" >

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

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

</LinearLayout>

Answer 4

set android:gravity="center", android:layout_centerInParent="true" and android:layout_alignParentTop="true" of the textview

Answer 5

Create a custom view like my sample:

layout view_product_image.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rlParent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/background_light_blue"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imgProduct"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dip"
        android:src="@drawable/main0x" />

    <TextView
        android:id="@+id/tvQty"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/imgPoduct"
        android:layout_marginLeft="3dp"
        android:layout_marginTop="2dp"
        android:background="@color/lightBlue3"
        android:text="1111"
        android:textColor="@color/red"
        android:textSize="16dip" />

    <TextView
        android:id="@+id/tvInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/imgProduct"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:lines="2"
        android:maxLines="2"
        android:minLines="2"
        android:singleLine="false"
        android:text="TextView"
        android:textColor="@color/black"
        android:textSize="16dip" />

</RelativeLayout>

Class:

package org.mabna.order.ui;

import org.mabna.order.R;
import org.mabna.order.businessLayer.db.BoPreferences;
import org.mabna.order.utils.Farsi;
import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class ImageView_Product extends LinearLayout implements OnTouchListener {

    private static final float FONT_SIZE_LARGE = 20;
    private static final float FONT_SIZE_NORMAL = 16;
    private static final float FONT_SIZE_SMALL = 12;

    private RelativeLayout rlParent;
    private ImageView imgProduct;
    private TextView tvInfo;
    private TextView tvQty;

    private double qty = 0;
    private float mDensity;

    private Typeface tf;

    public ImageView_Product(Context context) {
        super(context);

        initialize();
    }

    public ImageView_Product(Context context, AttributeSet attrs) {
        super(context, attrs);

        initialize();
    }

    protected void initialize() {

        if (!this.isInEditMode()) {
            tf = Farsi.getFarsiFont(this.getContext());
        }
        mDensity = this.getResources().getDisplayMetrics().density;

        LayoutInflater layoutInflater = (LayoutInflater) getContext()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = layoutInflater
                .inflate(R.layout.view_product_image, this);

        rlParent = (RelativeLayout) view.findViewById(R.id.rlParent);
        imgProduct = (ImageView) view.findViewById(R.id.imgProduct);
        tvInfo = (TextView) view.findViewById(R.id.tvInfo);
        tvQty = (TextView) view.findViewById(R.id.tvQty);

        tvInfo.setTypeface(tf);
        tvInfo.setTextSize(FONT_SIZE_SMALL);

    }

    public TextView getTextView() {
        return tvInfo;
    }

    public ImageView getImageView() {
        return imgProduct;
    }

    public TextView getQtyView() {
        return tvQty;
    }

    public void setInfoText(String text) {
        tvInfo.setText(text);
    }

    public String getInfoText(String text) {
        return tvInfo.getText().toString();
    }

    public void setQty(double value) {
        this.qty = value;

        if (this.qty > 0) {
            tvQty.setText(BoPreferences.getStringValueNoGrouping(this.qty,
                    getContext()));
            setStateHasQty();

        } else {
            tvQty.setText("");
            setStateHasNotQty();
        }
    }

    public double getQty() {
        return Double.valueOf(tvQty.getText().toString());
    }

    public void setStateSelected() {
        imgProduct.setBackgroundResource(R.drawable.border06);
    }

    public void setStateNotSelected() {
        imgProduct.setBackgroundResource(R.drawable.border05);
    }

    private void setStateHasQty() {
        tvQty.setBackgroundResource(R.color.lightBlueTransparent);
        tvQty.setTextSize(FONT_SIZE_LARGE);
        // tvInfo.setBackgroundResource(R.color.darkGreen);
        rlParent.setBackgroundResource(R.drawable.background_light_green);
    }

    private void setStateHasNotQty() {
        tvQty.setBackgroundResource(0);
        tvQty.setTextSize(FONT_SIZE_NORMAL);
        // tvInfo.setBackgroundResource(R.color.lightBlue3);
        rlParent.setBackgroundResource(R.drawable.background_light_blue);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // TODO Auto-generated method stub
        return false;
    }

    public void setImageSize(int width, int height) {

        RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams)
                imgProduct.getLayoutParams();
        lp.width = (int) (width * mDensity);
        lp.height = (int) (height * mDensity);
        imgProduct.setLayoutParams(lp);

        tvInfo.setMaxWidth(lp.width);

    }

}

Answer 6

Use LinearLayout instead of RelativeLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="190dp"
        android:gravity="center"
        android:text="Dummy text string" />

</LinearLayout>

Second Solution is use android:drawablePadding=""and android:drawableBottom="" in TextView.

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawablePadding=""
    android:drawableBottom=""
    android:gravity="center"
    android:text="Dummy text string" >

</TextView>

Answer 7

I think I understand your problem. Here I've aligned the image to the left and right of the text and set the ImageView and TextView layout_width to wrap_content. I have used android:layout_below and given it a top margin.

This appears to work on all screen sizes.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/white"
                android:padding="20dp">

    <TextView
        android:id="@+id/tv_example"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="190dp"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="Dummy text string"/>

    <ImageView
        android:id="@+id/iv_background"
        android:layout_width="wrap_content"
        android:layout_height="4dp"
        android:layout_alignLeft="@+id/tv_example"
        android:layout_alignRight="@id/tv_example"
        android:layout_marginTop="4dp"
        android:layout_below="@+id/tv_example"
        android:adjustViewBounds="true"
        android:layout_centerInParent="true"
        android:src="@drawable/example"/>

</RelativeLayout>

You can change the height and top margin of the ImageView if you wish.