So I have an Android application in which sliders are used to set the value for multiple parameters. I am using a "Google Cards" type of layout for each slider box. Each card is its own relative layout contained within a LinearLayout which is placed within a ScrollView. I would like to change the color of the card based on the value the user sets in the card, however, the problem I have is that the color for the background is defined in the XML for the card design.
How can I change the color in the XML for the card design based on the value the user puts in on the slider? Also, is there a way to have a gradient effect when changing colors. For example, 0 could be a strong red, while 10 is a strong green, 5 would be a yellow and then 2.5 would be a mix between red and yellow and 7.5 would be a mix between yellow and green.
XML for layout background:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc"/>
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="@android:color/white"/>
<padding android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp"/>
</shape>
</item>
</layer-list>
Relative Layout XML:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_card"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:id="@+id/infoLayout">
</RelativeLayout>
What a Card looks like:
