How to reset the ViewGroup’s background color at runtime in Xamarin Android ?

Dinesh4693Dinesh4693 INMember ✭✭
edited September 2018 in Xamarin.Android

Hi All,

Question : How to reset the ViewGroup’s background color and define some background color to its child element at runtime in Xamarin Android?

We are facing some hurdles in the following requirement while changing the background color for ViewGroup to transparent and defining some color to its child element at runtime,

Design Pattern:
We have derived a class say (ParentView) from the ViewGroup, and it holds two child elements say ChildView 1 derived from Android.Views.View, holds a imageview and ChildView 2 derived from ViewGroup, which holds an textview.

We have set a BackgroundResource (which holds rectangle shape with none color) to both ParentView and ChildView 2 ‘s background in their respective constructor.

Additionally in the Application, we have two buttons say button 1(setting the ParentView color) and button 2 (setting the** ChildView 2 color**),

Button 1 action:
Changes the ParentView’s rectangle shape color to red (for example) and sets the ChildView 2’s rectangle shape color as Transparent.

Button 2 action:
Changes the ParentView’s rectangle shape color to Transparent and sets the ChildView 2’s rectangle shape color as Red (for example).

Child arrangements
1. MainView -> LinearLayout -> Button 1, Button 2 and ParentView (Width say 100 and Height say 100).
2. ParentView -> ChildView 1 (Width say 40 and Height say 100) and ChildView 2 (Width say 60 and Height say 100). Note : It arranges its child elements in Horizontally.

Replication Procedure
1. Click the button 1, now it sets the red background color to ParentView entirely and transparent color to ChildView 2 (Working as expected because we have set the color to ParentView.)
2. Click the button 2, now it have to set the red background color to ChildView 2 (x position range from 31 to 100) and transparent color to its ParentView (other portions of the ParentView) which is not applied (Issue), its sets Transparent color to the ChildView 2 too (but not the Red color).

Code Example:

border_layout.xml

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:id="@+id/BorderView" >
    <shape android:shape="rectangle" />
  </item>
</layer-list>`

Initializing the ParentView

public class ParentView : ViewGroup
{
  public ParentView(Context context) : base(context)
  {
    this.SetBackgroundResource(Resource.Layout.border_layout);
  }
}

Initializing the ChildView2

public class ChildView2 : ViewGroup
{
  public ChildView2(Context context) : base(context)
  {
     this.SetBackgroundResource(Resource.Layout.border_layout);
  }
}

Defining the background Color in the button event

public void Button1()
{
   var childview2drawable = (ParentView.GetChildAt(1) as ViewGroup).Background as LayerDrawable;
   var parentviewdrawable = ParentView.Background as LayerDrawable;

   (parentviewdrawable.FindDrawableByLayerId(Resource.Id.BorderView) as GradientDrawable).SetColor(Color.Red);
   (childview2drawable.FindDrawableByLayerId(Resource.Id.BorderView) as GradientDrawable).SetColor(Color.Transparent);
}

public void Button2()
{
   var childview2drawable = (ParentView.GetChildAt(1) as ViewGroup).Background as LayerDrawable;
   var parentviewdrawable = ParentView.Background as LayerDrawable;

   (childview2drawable.FindDrawableByLayerId(Resource.Id.BorderView) as GradientDrawable).SetColor(Color.Red);
   (parentviewdrawable.FindDrawableByLayerId(Resource.Id.BorderView) as  GradientDrawable).SetColor(Color.Transparent);
}

Can anyone please help us to achieve our requirement? Please let us know if you require further assistance.

Regards,
Dinesh Babu Yadav

Answers

  • BillyLiuBillyLiu Member, Xamarin Team Xamurai

    @Dinesh4693

    1. Click the button 2, now it have to set the red background color to ChildView 2 (x position range from 31 to 100) and transparent color to its ParentView (other portions of the ParentView) which is not applied (Issue), its sets Transparent color to the ChildView 2 too (but not the Red color).

    Do you mean the other portions of the ParentView's background color are not changed when you click the button2?
    If so, I can't reproduce your issue, could you post your project?
    Here is my test code:
    Layout:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    android:orientation="vertical">
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/Button1"
             android:text="Button1"/>
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/Button2"
        android:text="Button2"/>
    <resettheViewGroupbackground.ParentView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/parentview"
        >
        <resettheViewGroupbackground.ChildView1
            android:layout_width="40dp"
            android:layout_height="100dp"
            android:id="@+id/childView1"
         >
        </resettheViewGroupbackground.ChildView1>
        <resettheViewGroupbackground.ChildView2
            android:layout_width="60dp"
            android:layout_height="100dp"
            android:id="@+id/childView2">
            <TextView 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/textView2"
            android:text="TextText"/>
    
        </resettheViewGroupbackground.ChildView2>
    </resettheViewGroupbackground.ParentView>
    </LinearLayout>
    

    And MainActivity:

    public class MainActivity : AppCompatActivity
    {
        ParentView ParentView;
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);
            ParentView = FindViewById<ParentView>(Resource.Id.parentview);
            FindViewById<Button>(Resource.Id.Button1).Click += MainActivity_Click;
            FindViewById<Button>(Resource.Id.Button2).Click += MainActivity_Click1;
        }
        private void MainActivity_Click(object sender, System.EventArgs e)
        {
            Button1();
        }
    
        private void MainActivity_Click1(object sender, System.EventArgs e)
        {
            Button2();
        }       
    
        public void Button1()
        {
            var childview2drawable = (ParentView.GetChildAt(1) as ViewGroup).Background as LayerDrawable;
            var parentviewdrawable = ParentView.Background as LayerDrawable;
    
            (parentviewdrawable.FindDrawableByLayerId(Resource.Id.BorderView) as GradientDrawable).SetColor(Color.Red);
            (childview2drawable.FindDrawableByLayerId(Resource.Id.BorderView) as GradientDrawable).SetColor(Color.Transparent);
        }
    
        public void Button2()
        {
            var childview2drawable = (ParentView.GetChildAt(1) as ViewGroup).Background as LayerDrawable;
            var parentviewdrawable = ParentView.Background as LayerDrawable;
    
            (childview2drawable.FindDrawableByLayerId(Resource.Id.BorderView) as GradientDrawable).SetColor(Color.Red);
            (parentviewdrawable.FindDrawableByLayerId(Resource.Id.BorderView) as GradientDrawable).SetColor(Color.Transparent);
        }
    }
    

    And the result:

Sign In or Register to comment.