I am trying to add a fade-in and fade-out effect on a LinearLayout backgroundColor property based on state_selected. For background I have set a drawable (in android:background) and for animation I have added animation (in android:stateListAnimator).
The animation is working fine when I select and unselect the View, but after adding this stateListAnimator, my background drawable is gone or maybe overwritten by animator.
Here is my code for the View:
<LinearLayout
android:id="@+id/long_term_plan"
android:layout_width="157dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="12dp"
android:background="@drawable/premium_page_plan_button_background"
android:stateListAnimator="@animator/premium_button_animation" >
<TextView
android:id="@+id/long_term_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:textSize="14sp"
android:fontFamily="@font/work_sans_bold"
android:text="@string/long_term_title" />
<TextView
android:id="@+id/long_term_discount_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/premium_savings_text"
android:textSize="12sp"
android:textStyle="bold"
android:paddingTop="6dp"
android:fontFamily="@font/work_sans_light"
android:text="@string/long_term_discount_text"/>
<TextView
android:id="@+id/long_term_original_price"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="12dp"
android:fontFamily="@font/work_sans_bold"
android:text="@string/long_term_original_price"
android:textColor="@color/original_price_color"
android:textSize="20sp"
android:textStyle="bold"/>
</LinearLayout>
@drawable/premium_page_plan_button_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape android:shape="rectangle">
<solid android:color="@color/light_gray"/>
<corners android:radius="8dp"/>
<stroke android:width="1dp"
android:color="@color/gray_border"/>
</shape>
</item>
<item android:state_selected="false">
<shape android:shape="rectangle">
<solid android:color="@color/light_black"/>
<corners android:radius="8dp"/>
<stroke android:width="1dp"
android:color="@color/gray_border"/>
</shape>
</item>
</selector>
@animator/premium_button_animation.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<set>
<objectAnimator android:propertyName="backgroundColor"
android:valueFrom="@color/light_black"
android:valueTo="@color/light_gray"
android:duration="200" />
</set>
</item>
<item android:state_selected="false">
<set>
<objectAnimator android:propertyName="backgroundColor"
android:valueFrom="@color/light_gray"
android:valueTo="@color/light_black"
android:duration="200" />
</set>
</item>
</selector>
My drawable effect before adding animator: before animator
My drawable effect after adding animator: after animator
How can I achieve use both drawable and animator together, or am I doing something wrong here??
Any help would be appreciated!!
PS: I am handling all this animation in xml itself. For triggering the state_selected, I am using the onCLickListener in java activity.