Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android transparent shadow white line at the end of gradient

I need help with android drawable linear gradient, using custom gradient as shadow from toolbar but I can`t get rig of white line at the end of my gradient.

enter image description here XML layout, last RelativeLayout child element View is dropping shadow.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
    <android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:titleTextColor="@android:color/white"
        android:weightSum="1">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:tabIndicatorColor="@color/tabIndicator"
            app:tabIndicatorHeight="3dp"
            app:tabMode="fixed"
            app:tabPaddingEnd="12dp"
            app:tabTextAppearance="@style/customTabLayout"
            android:layout_weight="0.90"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true">

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </android.support.design.widget.TabLayout>


    </android.support.v7.widget.Toolbar>

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager_main"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_alignParentBottom="true"
    android:layout_below="@+id/toolbar" />

<View
    android:layout_width="match_parent"
    android:layout_height="14dp"
    android:background="@drawable/drop_shadow"
    android:layout_below="@+id/toolbar"/>
</RelativeLayout>

Drawable with gradient

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:type="linear"
    android:angle="270"
    android:endColor="#00000000"
    android:startColor="#5a000000" />
</shape>
like image 598
Borys Shobat Avatar asked Feb 21 '17 23:02

Borys Shobat


1 Answers

In fact, there is no line

It is an optical effect that appears because the gradient is linear. The color goes from black to transparent smoothly, but the "speed" at which the color becomes transparent changes sharply at the very end. You can read more here

Gradients example

To fix this problem you need to make the gradient ease-out. Since Android does not support different curvature of the gradient, there are several solutions:

  1. Nine-patch (recommended)
    Create desired gradient in vector graphic editor and based on it create Nine-patch drawable. Read more about 9-patch: https://developer.android.com/guide/topics/graphics/drawables#nine-patch

  2. Multiple linear gradients
    Create a set of linear gradients with selected color values, so that the curvature in the approximation corresponds to a ease-out one

like image 163
vadiole Avatar answered Nov 07 '22 07:11

vadiole