Issue
I created an Android gradient drawable where the top and bottom are black and the center is transparent:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:startColor="@android:color/black"
android:centerColor="@android:color/transparent"
android:endColor="@android:color/black"
android:angle="90"/>
</shape>
The rendered gradient looks like this:
As you can see, the black parts spread to most of the screen. I want the black to show only on a small portion of the top and bottom. Is there a way I can make the transparent center larger, or make the top and bottom black stripes smaller?
I tried playing around with some of the other XML attributes mentioned in the linked GradientDrawable
documentation, yet none of them seem to make and difference.
Solution
For an XML only solution, you can create a layer-list
with two separate gradient
objects.
The following code creates two overlapping gradient
objects and uses centerY
with centerColor
to offset the black section. Here, the centerY
attributes are set to 0.9
and 0.1
, so the black color is restricted to the top and bottom 10% of the view height.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="90"
android:centerColor="@android:color/transparent"
android:centerY="0.9"
android:endColor="@android:color/black"
android:startColor="@android:color/transparent" />
</shape>
</item>
<item>
<shape>
<gradient
android:angle="90"
android:centerColor="@android:color/transparent"
android:centerY="0.1"
android:endColor="@android:color/transparent"
android:startColor="@android:color/black" />
</shape>
</item>
</layer-list>
For API level 23 or higher, the following solution will also work, using android:height
. This solution can work even if you don't know the total height of your view, as long as you know how large you want the gradient to be.
This code creates two separate gradients, each with a height of 60sp
, and then uses android:gravity
to float the gradients to the top and bottom of the view.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="60sp"
android:gravity="top">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="@android:color/black"
android:startColor="@android:color/transparent" />
</shape>
</item>
<item
android:height="65sp"
android:gravity="bottom">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="@android:color/transparent"
android:startColor="@android:color/black" />
</shape>
</item>
</layer-list>
Thank you @Luksprog for the code help, and @thenaoh for the start of the idea.
The above solutions work and it is nice that they are pure XML. If your gradient is showing with stripes, you may want to try a programmatic solution, like shown in @lelloman's answer, to create a smoother gradient.
Answered By - Tot Zam
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.