I want to give gradient to this view like around 10% of imageview at top , transparent center with 70% and 30% gradient at the bottom. How i can achieve this
I want to give gradient to this view like around 10% of imageview at top , transparent center with 70% and 30% gradient at the bottom. How i can achieve this
Instead of just using a shape with a gradient use a layer-list with 2 gradients with specified height for each
API 21
The android:bottom , android:top attributes represent the padding for the layer list, change these to change the percentage of the gradient to show
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="690dp"
android:gravity="top">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:type="linear"
android:endColor="@android:color/transparent"
android:startColor="#000000" />
</shape>
</item>
<item
android:top="610dp"
android:gravity="bottom">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:type="linear"
android:endColor="#000000"
android:startColor="@android:color/transparent" />
</shape>
</item>
If your minSDK is 23+ then it's more easier to specify the height for each layer type
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="40dp"
android:gravity="top">
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="@android:color/transparent"
android:startColor="#000000"
android:type="linear" />
</shape>
</item>
<item
android:height="70dp"
android:gravity="bottom">
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#000000"
android:startColor="@android:color/transparent"
android:type="linear" />
</shape>
</item>
Then just apply this as the background of your ViewPager
Try this out, hope this solves your issue
top_gradient:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270"
android:centerColor="@android:color/transparent"
android:centerY="0.1"
android:startColor="#000000" />
</shape>
bottom_gradient:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:centerColor="@android:color/transparent"
android:centerY="0.3"
android:startColor="#000000" />
</shape>
background:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg" />
<item android:drawable="@drawable/bg2" />
</layer-list>
gradient.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#00000000"
android:centerColor="#00000000"
android:endColor="@color/primaryTextColor"
android:angle="270"
android:centerY="0.7"
android:dither="true"
android:type="linear"
/>
</shape>
layout.xml:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/bottomConstraint"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:background="@drawable/gradient">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/tvTitle"
style="@style/TextStyleNormal.Large.Bold.White"
android:paddingHorizontal="@dimen/padding_large"
android:paddingTop="@dimen/padding_medium"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="@+id/bottomConstraint"
app:layout_constraintTop_toTopOf="@+id/bottomConstraint"
tools:text="System Solution to Online Education:
Look To Northeast communal." />
</androidx.constraintlayout.widget.ConstraintLayout>
This will have transparent view but in bottom the gradient would be dark .
You can achieve it like this
gradient_top.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#2B3135"
android:centerColor="#2B3135"
android:endColor="@android:color/transparent"
android:angle="270"
android:centerY="0.1"
/>
</shape>
gradient_bottom.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#2B3135"
android:centerColor="#2B3135"
android:endColor="@android:color/transparent"
android:angle="90"
android:centerY="0.3"
/>
</shape>
layout.xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/ib"/>
<View
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_alignParentTop="true"
android:background="@drawable/gradient_top"/>
<View
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:background="@drawable/gradient_bottom"/>
</RelativeLayout>