How to make a view transparent as a function of length in android

Question

I have a frame layout (semi transparent black), on which I have written "Swiss Chalet - score a free side" and "Missisauga, ON". It is the same color/transparency from top to bottom, I want it to be more opaque towards the bottom and transparent towards the top, so that just above "Swiss Chalet" line it feels the the frame layout is merging with the background image. How do I implement that?

Right now my code is,

<FrameLayout
        android:id="@+id/frameLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/frameLayout2"
        android:layout_alignParentLeft="true"
        android:background="#5A000000">

    <TextView
            android:id="@+id/campaignNameLabel"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:maxLines="2"
            android:ellipsize="end"
            android:text="Loading..."
            android:layout_marginLeft="10dp"
            android:textColor="#ffffff"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold" />

</FrameLayout>

Answer 1

You can use a GradientDrawable in your FrameLayout background to achieve what you want.

You can define a gradient in a xml file like this:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient 
       android:angle="270" 
       android:startColor="#5A000000" 
       android:endColor="#FF000000" />
</shape>

Or in your java code:

int[] colors = {0x5A000000, 0xFF000000};
GradientDrawable drawable = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, colors);

Answer 2

You can do something like that using a gradient background for the FrameLayout as follows:

Step 1) Create a gradent_background_selector.xml as follows:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                    android:angle="270"
                    android:startColor="#00000000"
                    android:centerColor="#44000000"
                    android:endColor="#5A000000"
                    android:type="linear" />
        </shape>
    </item>
</selector>

Step 2) Apply it to you FrameLayout as follows:

<FrameLayout
        android:id="@+id/frameLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/frameLayout2"
        android:layout_alignParentLeft="true"
        android:background="@drawable/gradent_background_selector">

    <TextView
            android:id="@+id/campaignNameLabel"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:maxLines="2"
            android:ellipsize="end"
            android:text="Loading..."
            android:layout_marginLeft="10dp"
            android:textColor="#ffffff"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold" />

</FrameLayout>

Step 3) Play around with the values of startColor , centerColor and endColor to get the desired output.

Note: I used three color gradient because you mention "just above "Swiss Chalet" line it feels the the frame layout is merging with the background image". To get more precise results, you may want to read about multi-gradient shapes

Answer 3

Create your gradient selector in res/darawable like:

gradient_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <gradient
                android:angle="90"
                android:startColor="#5A000000"
                android:endColor="#00000000"
                android:type="linear" />
    </shape>
</item>
</selector>

And use it as background of your layout:

<FrameLayout
        android:id="@+id/frameLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/frameLayout2"
        android:layout_alignParentLeft="true"
        android:background="@drawable/gradient_selector">
</FrameLayout>