Change background color of child views

Question

I have a parent view and a child view. The child views are inflated programmatically. The child view has a TextView with some background. The TextView has a onclick event on it. What I want is when the user clicks the first TextView its background color should change and when the user selects the second one the background of the first textview should come back to its default background and the second one should change.

I have changed the background color but I am having difficulty in restoring the backgrounds. Here's my code:

My Parent View:

<com.google.android.flexbox.FlexboxLayout
    android:id="@+id/viewCategoriesLinearlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexWrap="wrap"
    app:alignItems="stretch"
    app:alignContent="stretch"
    android:layout_marginTop="@dimen/_10sdp"
    android:layout_marginLeft="@dimen/_5sdp"
    android:layout_marginStart="@dimen/_5sdp" />

My Child View:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">

    <TextView
        android:id="@+id/categoryChip"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:background="@drawable/category_tag_background"
        android:text="TAG"
        android:layout_marginTop="@dimen/_25sdp"
        android:paddingLeft="@dimen/_5sdp"
        android:paddingTop="@dimen/_5sdp"
        android:paddingBottom="@dimen/_5sdp"
        android:paddingRight="@dimen/_5sdp"
        android:layout_marginLeft="@dimen/_5sdp"
        android:layout_marginRight="@dimen/_5sdp"
        android:textColor="@color/textcolorLogin"
        android:textSize="@dimen/_11ssp" />

    <TextView
        android:id="@+id/categorychipid"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="gone"/>


</LinearLayout>

This is how I'm inflating and changing background color:

    FlexboxLayout categoryInformationHeader = view.findViewById(R.id.viewCategoriesLinearlayout);
    final View editChildView = getActivity().getLayoutInflater().inflate(R.layout.tag_layout, null);

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                                                ViewGroup.LayoutParams.WRAP_CONTENT);
    layoutParams.setMargins(10,2,10,2);
    editChildView.setLayoutParams(layoutParams);
    editParentLL.addView(editChildView);
    final TextView editTvChip = editChildView.findViewById(R.id.chip12345);
    final String shelfShareCategoryTitle = crsEditShelfShare.getString(crsEditShelfShare.getColumnIndex("title"));

    editTvChip.setText(shelfShareCategoryTitle);

        editTvChip.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                editTvChip.setBackgroundResource(R.color.colorPrimary);
                            }
                        });

Can you show how you are adding the child view programmatically? Because that is what we are going to call again on the `onClickListener` of the `editTvChip`. — Tenten Ponce, Jan 01 '18 at 12:27
@TentenPonce, editParentLL.addView(editChildView); this is where I'm inflating the child view. — 3iL, Jan 01 '18 at 12:31
@TentenPonce, this isn't a loop. childviews are inflated onclick of a button — 3iL, Jan 01 '18 at 12:37
Wait, according to your question, childviews are being inflated programmatically, when you click on a textview inside a childview, it should change background and the background of the rest shall be reset. Now you are telling me that childview are inflated when the user clicks the button? I don't get it. — Tenten Ponce, Jan 01 '18 at 12:39
Where is the code that adds 2 or more childviews that has a textview with the background to be reset when the other textview is clicked? — Tenten Ponce, Jan 01 '18 at 12:40
This same bit of code is used every time to add a child view to parent view. — 3iL, Jan 01 '18 at 12:45
That's it, where's the code calling this to add ALL of the child views? — Tenten Ponce, Jan 01 '18 at 12:46
I'm adding the one childview at a time. Pretend calling this bit of code in a click of a button than I think you'll get the idea. — 3iL, Jan 01 '18 at 12:50

score 0 · Answer 1 · answered Jan 01 '18 at 12:57

When you you add a childview one at a time, save it on an array variable:

private ArrayList<TextView> childViews = new ArrayList<>(); //add this

@Override 
public void onCreate(Bundle saveInstanceState) {
    ....
}

And upon clicking button, add it also on your arraylist:

childViews.add(editTvChip); //add it to your arraylist, so we can reset it
editTvChip.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
      clearBackgrounds(); //call reset background first
      editTvChip.setBackgroundResource(R.color.colorPrimary);
   }
});

add this method to clear the textView background:

/**
* Reset all the background of each textViews
*
*/
private void clearBackgrounds() {
   for (TextView textView : childViews) {
      textView.setBackgroundResource(R.color.yourDefaultBackground);
   }
}

I tried this but every child gets the same background(colorPrimary) whenever I click any of it — 3iL, Jan 01 '18 at 13:26

Change background color of child views

1 Answers1