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.
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>
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
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:
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With