CODEWITHSUNDEEP
android
Devesh Agrawal
Devesh Agrawal

Reputation: 9212

Writing text over image in Android

This is my layout, where I am trying to write text over image. 

<?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="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="?android:attr/selectableItemBackground"
    android:padding="@dimen/tile_padding">

    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tile_height"
        android:scaleType="fitXY"
        />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:alpha="0.30"
        android:background="@color/dark_grey"
        />

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tile_height"
        android:layout_gravity="center"
        android:gravity="bottom|end"
        android:textColor="@color/white"
        android:textSize="22sp"
        />


</RelativeLayout>

To make the text visible on image I am drawing on more image on original image with alpha = 0.30.

I want to draw other image not fully on original image but only the portion where text is drawn.

Upvotes: 1

Views: 1111

Answers (4)

sai
sai

Reputation: 3

Why you are going to overlap textview on image view its very complex.If your requirement to show any text on image take button and set atttributes 1.background as your required image and text as what ever you want

Upvotes: 0

LKHO
LKHO

Reputation: 106

You don't need an extra ImageView if you just need to darken the text area. TextView also has android:background.

If you really want an ImageView behind the TextView, align the ImageView to the TextView.

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:alpha="0.30"
    android:background="@color/dark_grey"
    android:layout_alignBottom="@+id/title"
    android:layout_alignTop="@+id/title"
    />

Upvotes: 0

kenzo
kenzo

Reputation: 211

You need to something like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?android:attr/selectableItemBackground"
            android:padding="10dp">

<ImageView
    android:id="@+id/thumbnail"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="@android:color/black"
    android:scaleType="fitXY"
    />

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/thumbnail"
    android:layout_alignLeft="@id/thumbnail"
    android:layout_alignTop="@id/thumbnail"
    android:layout_gravity="center"
    android:gravity="bottom|end"
    android:text="Sample"
    android:textColor="@color/white"
    android:textSize="22sp"
    />

<ImageView
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:layout_alignBottom="@id/title"
    android:layout_alignLeft="@id/title"
    android:layout_alignRight="@id/title"
    android:layout_alignTop="@id/title"
    android:alpha="0.40"
    android:background="@android:color/holo_blue_bright"
    />

 </RelativeLayout>

Mainly you work on layout_alignX - for 'x' left, right, top, bottom.

Upvotes: 0

Nikhil
Nikhil

Reputation: 3711

Try with following layout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/selectableItemBackground"
    android:padding="@dimen/tile_padding">

    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tile_height"
        android:scaleType="fitXY" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:alpha="0.30"
        android:background="@color/dark_grey"
        android:gravity="bottom|end">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="@dimen/tile_height"
            android:layout_gravity="center"
            android:textColor="@color/white"
            android:textSize="22sp" />
    </LinearLayout>
</FrameLayout>

Upvotes: 1

Related Questions