(MVC) Implement TextWatcher on Compound view

Question

I am new to MVC and I am trying to create a Color picker Android app for school. The purpose is to create multiple compound views to display the same data (the red, green and blue values). My question is how should I use TextWatcher to determine when the EditText field has been changed and then update all views based on the value of the field. Here is my code so far:

ColorModel.java

public class ColorModel extends Observable {
    private int red, green, blue;

    public void updatedColorModel() {
        this.setChanged();
        this.notifyObservers();
    }

    /**
     * Change the value of the RED color
     * @param value
     */
    public void setRed(int value) {
        this.red = value;
        updatedColorModel();
    }

    /**
     * Change the value of the GREEN color
     * @param value
     */
    public void setGreen(int value) {
        this.green = value;
        updatedColorModel();
    }

    /**
     * Change the value of the BLUE color
     * @param value
     */
    public void setBlue(int value) {
        this.blue = value;
        updatedColorModel();
    }

    public int getRed() {
        return this.red;
    }

    public int getGreen() {
        return this.green;
    }

    public int getBlue() {
        return this.blue;
    }
}

ETColorsCOMP.java (a Compound of 3 EditTexts)

public class ETColorsCOMP extends ConstraintLayout implements Observer {
    private EditText etRed, etGreen, etBlue;
    private ColorModel model;

    public ETColorsCOMP(Context context) {
        super(context);
        init();
    }

    public ETColorsCOMP(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ETColorsCOMP(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public void init() {
        LayoutInflater inflater = (LayoutInflater) this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.edittext_compound, this);

        etRed = findViewById(R.id.editTextRed);
        etGreen= findViewById(R.id.editTextGreen);
        etBlue = findViewById(R.id.editTextBlue);
    }

    public void setColorModel(ColorModel model) {
        this.model = model;
        this.model.addObserver(this);
    }

    @Override
    public void update(Observable observable, Object o) {
        etRed.setText(model.getRed());
        etGreen.setText(model.getGreen());
        etBlue.setText(model.getBlue());
    }
}

VColorsCOMP.java (a Compound of 3 View Components)

public class VColorCOMP extends ConstraintLayout implements Observer {
    private ColorModel model;
    private View vRed, vGreen, vBlue;

    public VColorCOMP(Context context) {
        super(context);
        init();
    }

    public VColorCOMP(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public VColorCOMP(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public void init() {
        LayoutInflater inflater = (LayoutInflater) this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.colorview_compound, this);

        vRed = findViewById(R.id.ViewRed);
        vGreen = findViewById(R.id.ViewGreen);
        vBlue = findViewById(R.id.ViewBlue);
    }

    public void setColorModel(ColorModel model) {
        this.model = model;
        this.model.addObserver(this);
    }

    @Override
    public void update(Observable observable, Object o) {
        vRed.setBackgroundColor(Color.rgb(model.getRed(), 0, 0));
        vGreen.setBackgroundColor(Color.rgb(0, model.getGreen(), 0));
        vBlue.setBackgroundColor(Color.rgb(0, 0, model.getBlue()));
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ETColorsCOMP etColors;
    private VColorCOMP vColor;

    private ColorModel colorModel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        etColors = findViewById(R.id.editTextView);
        vColor = findViewById(R.id.colorView);

        colorModel = new ColorModel();
        etColors.setColorModel(colorModel);
        vColor.setColorModel(colorModel);
    }
}

I will be very grateful if somebody helps me to make this work.

Answer 1

You can write your code on afterTextChanged method of TextWatcher for this.

editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void afterTextChanged(Editable editable) {
                // Update UI
            }
        });