LinearLayout Background color using mvvmcross

Question

i have a linearlayout as circle and wanted to change it color using value converter.

below is how my linear layout looks

<LinearLayout
   android:orientation="vertical"
   android:id="@+id/linearLayoutDaysLeft"
   android:background="@drawable/RedBackground"
   local:MvxBind="BackgroundColor DateColor(EndDate)"/>

note i have set the background as @drawable/RedBackground

below is how my @drawable/RedBackground.xml file looks like

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
  <corners android:radius="10dip"/>
  <solid android:color="#D00E0D"/>
</shape>

Below is my DateColorValueConverter code

protected override Cirrious.CrossCore.UI.MvxColor Convert(object value, object parameter, System.Globalization.CultureInfo culture)
        {
            var date = (DateTime)value;
            int dayLeft;
            TimeSpan difference = date - DateTime.Today;
            dayLeft = (int)Math.Ceiling(difference.TotalDays);


            if (dayLeft < 0)
                return (new Cirrious.CrossCore.UI.MvxColor(208, 14, 13, 150));
            if (dayLeft >= 0 && dayLeft <= 1)
                return (new Cirrious.CrossCore.UI.MvxColor(255, 210, 0, 150));
            if (dayLeft > 1)
                return (new Cirrious.CrossCore.UI.MvxColor(93, 210, 85, 150));

            return (new Cirrious.CrossCore.UI.MvxColor(93, 210, 85, 150));
        }

Note my DateColor works as required but when it return the color it remove the cicular shape

Please help me

Thanks

Aaman

score 4 · Answer 1 · answered Jul 03 '14 at 05:38

First of all thanks to Stuart for guiding the right direction

I have successfully achieved the required drawable background change

I would like share this with other also if any one requires

Below is my custom Binding for LinearLayout

public class ShapeBackgroundBinding : MvxAndroidTargetBinding
    {        
        private readonly LinearLayout _linearLayout;
        public ShapeBackgroundBinding(LinearLayout view) : base(view)
        {
            this._linearLayout = view;
        }
        protected override void SetValueImpl(object target, object value)
        {
            // to do logic
        }

        public override void SetValue(object value)
        {
            var date = (DateTime)value;
            int dayLeft;
            TimeSpan difference = date - DateTime.Today;
            dayLeft = (int)Math.Ceiling(difference.TotalDays);


            if (dayLeft < 0)
                _linearLayout.SetBackgroundResource(Resource.Drawable.RedBackground);
            else if (dayLeft >= 0 && dayLeft <= 1)
                _linearLayout.SetBackgroundResource(Resource.Drawable.YellowBackground);
            else if (dayLeft > 1)
                _linearLayout.SetBackgroundResource(Resource.Drawable.GreenBackground); 
            else
                _linearLayout.SetBackgroundResource(Resource.Drawable.GreenBackground);
        }
        public override Type TargetType
        {
            get { return typeof(DateTime); }
        }
        public override MvxBindingMode DefaultMode
        {
            get { return MvxBindingMode.OneTime; }
        }        
    }

Below is how i have registered the custom binding in set up file

 protected override void FillTargetFactories(IMvxTargetBindingFactoryRegistry registry)
        {
            base.FillTargetFactories(registry);
            registry.RegisterFactory(new MvxCustomBindingFactory<LinearLayout>("ShapeBackground", (view) => new ShapeBackgroundBinding(view)));
        }

Once the above steps are done, simple we just need to bind on linear layout control like below snippet

<LinearLayout
    android:orientation="vertical"
    android:id="@+id/linearLayoutTest"                    
    local:MvxBind="ShapeBackground EndDate">

Thats it...

Thanks Aaman, I was able to modify your solution to provide some drawable binding to suit my projects needs — JDibble, Mar 02 '16 at 12:20

score 1 · Answer 2 · edited May 23 '17 at 12:02

The default BackgroundColor binding uses SetBackgroundColor on the target View - see https://github.com/MvvmCross/MvvmCross/blob/v3.1/Plugins/Cirrious/Color/Cirrious.MvvmCross.Plugins.Color.Droid/BindingTargets/MvxViewBackgroundColorBinding.cs

If you want to achieve some custom effect on just a Solid within your Drawable, then you'll need to write a custom binding for this shape and use techniques like those in: - Android: Change Shape Color in runtime - How to change colors of a Drawable in Android? - Change shape solid color at runtime inside Drawable xml used as background

Suspect you can write something like:

public class ShapeBackgroundColorBinding
    : MvxViewColorBinding
{
    public ShapeBackgroundColorBinding(View view)
        : base(view)
    {
    }

    protected override void SetValueImpl(object target, object value)
    {
        var view = (View)target;
        if (view == null)
            return;
        var background = view.Background;
        background.SetColor((Android.Graphics.Color) value);
    }
}

which you can register as a binding for ShapeBackgroundColor during Setup - although that pseudo-code may take a little tweaking to get working!

Thanks @Stuart i have created three different colorcode xml file, only thing i need to change is the drawableName....similarly like we do for ImageView with binding name set as DrawableName — aamankhaan, Jul 02 '14 at 12:17

LinearLayout Background color using mvvmcross

2 Answers2