Android. Adding text over image with effect

Question

world! I am a student and I am developing an Android application about my country. I noticed a beautiful layout in an app.

In this picture, textviews placed at the bottom of images with beautiful background(kind of gradient) I was wondering if you could help me to figure out how to do it or showing a direction. All I have for now it this: row.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginBottom="5dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/medeobase"
            android:scaleType="fitXY"
            android:id="@+id/place_image"
            />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:background="#AA000000">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Medeu"
                android:id="@+id/place_id"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="2dp"
                android:textSize="18sp"
                android:textColor="@color/colorWhite"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Almaty region"
                android:textColor="@color/colorPrimary"
                android:layout_marginLeft="20dp"
                android:layout_below="@+id/place_id"
                android:textSize="12sp"
                android:id="@+id/place_id_sub"

                />
        </RelativeLayout>
    </RelativeLayout>

Thanks!

Answer 1

What you could do, is actually use a GradientDrawable for the background for the RelativeLayout holding your TextViews.

The gradient could look something like this:

my_custom_drawable.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:endColor="@android:color/transparent"
        android:startColor="@android:color/black" />
</shape>

Then replace the backgroundcolor of your RelativeLayout with the gradient, like this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:background="@drawable/my_custom_gradient.xml">

This will result in this:

You need to play around with the colors in the GradientDrawable make it fit your needs of course. I can't tell you what colors look right for your need.

You can also add a centerColor - see the documentation for more attributes.

I would probably change the subtitle textcolor to the same color as the title textcolor.