Apply/remove partial mask on a texview

Question

I am trying to partial hide a number in a textview and when taping on an icon, it should display the full number. I receive a string of a specific lenght and need only show the last 4 digits.

so by default if I receive 123456789abc -> I should display *******89abc and when taping on an icon it shows 123456789abc.

I used a 2 textview to do it one which contain the full text i.e. 123456789abc and another textview with *******89abc

then I use the code below:

_binding?.viewIcon?.setOnClickListener {
            if(strHidden) {
                _binding?.viewIcon?.setImageDrawable(AppCompatResources.getDrawable(requireContext(), R.drawable.ic_hide))
                _binding?.strPartial?.visibility = View.INVISIBLE
                _binding?.strNumber?.visibility = View.VISIBLE
                strHidden = false
            } else {
                _binding?.viewIcon?.setImageDrawable(AppCompatResources.getDrawable(requireContext(), R.drawable.ic_view))
                _binding?.strPartial?.visibility = View.VISIBLE
                _binding?.strNumber?.visibility = View.INVISIBLE
                strHidden = true
            }
        }

I used the function below to create the string with hidden char.

private fun createHiddenStr(value: String) =
        "*".repeat(value.length-4) + value.takeLast(4)

I was wondering if there is a way to use only one view and play with a mask instead which will be nicer that using 2 textview

Any idea?

Try this https://stackoverflow.com/questions/33722508/how-can-i-create-effect-hide-numbers-the-credit-card-except-the-last-3-numbers/33723126#33723126 — Umesh P, May 11 '23 at 05:41

score 0 · Answer 1 · answered May 11 '23 at 06:03

I don't have any experience with Kotlin, (yet). But in Java this is what I would do. I would use a boolean to check the state of the clicked text.

boolean clickedText = false since at the beginning the text isn't clicked.

Define String originalText; as a global variable.

`TextView textView = findViewById(R.id.textView);

I used a click listener on the textView but you can use it on your icon

 `textView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if(!clickedText){
                    originalText = textView.getText().toString();
    
                    int hideLength = originalText.length() - 4; // hide all but last 4 characters
                    String hiddenText = new String(new char[hideLength]).replace("\0", "*"); // create a string of asterisks of the same length as the text to hide
                    String displayedText = hiddenText + originalText.substring(hideLength); // concatenate the asterisks and the visible text
                    textView.setText(displayedText);
                        clickedText = true;}
                    else{
                        textView.setText(originalText);
                        clickedText=false;
                    }
                }
            });`

Apply/remove partial mask on a texview

1 Answers1