Android Layout transparent layout background with underline

Question

I am trying to have a layout background drawable, which will be only gradient underline with 1-2 dp height and rest is transparent, so the upper part will have the parent's background.

Here is what I have.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android>

<!-- underline color -->
<item>
    <shape>
        <gradient
            android:startColor="@color/colorPrimaryDark"
            android:endColor="#FFFFFFFF"
            android:centerY="0.5"
            android:angle="0"/>


    </shape>
</item>


<!-- main color -->
<item android:bottom="2.5dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/white" />
        <padding
            android:top="4dp"
            android:bottom="4dp" />
    </shape>
</item>

If I change the solid color in "main color" to transparent, whole background will be using "underline color" settings.

Answer 1

The technique you use to create a line on the bottom of the view works if the color of the layer overlaying the gradient layer is opaque. What you are trying to do is to apply a transparent layer that replaces (erases) the underlying gradient. That is not how it works: A transparent overlay leaves the underlying color, here a gradient, untouched.

Here is an alternate layer-list drawable that you can use for API 23+:

underline_drawable.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="bottom">
        <shape>
            <size android:height="2dp" />
            <gradient
                android:angle="0"
                android:centerY="0.5"
                android:endColor="#FFFFFFFF"
                android:startColor="@color/colorPrimaryDark" />
        </shape>
    </item>
</layer-list>

Here is what it looks like:

Prior to API 23, you can use the following custom drawable, but it must be set in code.

GradientUnderline.java

public class GradientUnderline extends Drawable {
    private Shader mShader;
    private final Paint mPaint;
    private int mHeight = -1;
    private int mStartColor = Color.BLACK;
    private int mEndColor = Color.WHITE;
    private int mLastWidth;

    public GradientUnderline() {
        mPaint = new Paint();
    }

    public GradientUnderline(int lineHeight, int startColor, int endColor) {
        mPaint = new Paint();
        mHeight = lineHeight;
        mStartColor = startColor;
        mEndColor = endColor;
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        if (mShader == null || getBounds().width() != mLastWidth) {
            mLastWidth = getBounds().width();
            mShader = new LinearGradient(0, 0, getBounds().width(), mHeight, mStartColor,
                                         mEndColor, Shader.TileMode.CLAMP);
            mPaint.setShader(mShader);
        }
        canvas.drawRect(0, getBounds().height() - mHeight, getBounds().width(),
                        getBounds().height(), mPaint);
    }

    @Override
    public void setAlpha(int alpha) {

    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return PixelFormat.OPAQUE;
    }
}

I missed the availability of android:gravity initially because it is not mentioned on the "Drawable Resources" page. It is mentioned, however, in the LayerDrawable documentation.

Answer 2

Why problem occurs: Shape at first item will draw the gradient in entire region. After setting colour to second item will hide the top item region except ay 2.5dp at bottom. So whenever you set transparent colour to second item it automatically show the top level item that is gradient region..

Here i suggest the way to use but you can set to fixed height in view.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="47dp">
<shape>
<gradient
    android:startColor="@color/colorPrimaryDark"
    android:endColor="#FFFFFFFF"
    android:centerY="0.5"
    android:angle="0"/>

</shape>
</item>

</layer-list>

View.xml

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/bottom_line">

</RelativeLayout>

Change size according to your needs..!

OUTPUT