Android Edittext with auto detection of credit card type

Question

I am dealing with payment option in android, By give an option to make a payment with credit card, some of the users may mistakenly choosing different credit card type for some other credit card number, so i decided to take a look for this issue to auto detect the card type based on number entered,

I found Flipkart have this already in their android application, here i attach that functionality,

how to do this like a animation happening while changing the card type?

I know to make a text watcher and based on the input to change the card type with a drawableRight image for EditText.

But need to do some animation over drawableRight.

Helps appreciated..!

Answer 1

From the help of above answers and suggestion i have achieved the result,

Here is the solution:

Create a function for regex making

public static ArrayList<String> listOfPattern()
{
    ArrayList<String> listOfPattern=new ArrayList<String>();

    String ptVisa = "^4[0-9]$";

    listOfPattern.add(ptVisa);

    String ptMasterCard = "^5[1-5]$";

    listOfPattern.add(ptMasterCard);

    String ptDiscover = "^6(?:011|5[0-9]{2})$";

    listOfPattern.add(ptDiscover);

    String ptAmeExp = "^3[47]$";

    listOfPattern.add(ptAmeExp);

    return listOfPattern;
}

Integer[] imageArray = { R.drawable.visa, R.drawable.master, R.drawable.disnet, R.drawable.ae };

use this below code in addTextChangedListener

creditcardnumberedittext.addTextChangedListener(new TextWatcher()
    {

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count)
        {
            String ccNum = s.toString();

            if(ccNum.length()>=2)
            {
                for (int i = 0; i < listOfPattern.size(); i++)
                {
                    if (ccNum.substring(0, 2).matches(listOfPattern.get(i)))
                    {
                        creditcardnumberedittext.setCompoundDrawablesWithIntrinsicBounds(0, 0, imageArray[i], 0);

                        cardtype = String.valueOf(i);
                    }
                }
            }

        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after)
        {
            // TODO Auto-generated method stub

        }

        @Override
        public void afterTextChanged(Editable s)
        {               

            if (!creditcardnumberedittext.getText().toString().equalsIgnoreCase(""))
            {
                for (int i = 0; i < listOfPattern.size(); i++)
                {
                    if (creditcardnumberedittext.getText().toString().matches(listOfPattern.get(i)))
                    {
                        creditcardnumberedittext.setCompoundDrawablesWithIntrinsicBounds(0, 0, imageArray[i], 0);

                        cardtype = String.valueOf(i);
                    }
                }
            }
            else
            {
                creditcardnumberedittext.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.allcards, 0);
            }
        }
    });

Thanks..

Answer 2

You would be watching the text as it is input, checking the first few digits to match the codes found here:

http://www.stevemorse.org/ssn/List_of_Bank_Identification_Numbers.html

This can be done with the TextWatcher listener Murtaza Hussain has pointed out.

check the text via:

switch (s.charAt(0)){
case '4':
    // show visa symbol
    break;
case '5':
    // show mastercard symbol
    break;
...

Answer 3

There is no native functionality for that. You have to set TextWatcher class on EditText. What it does is set a listener on your field and as you type it gives you method to check the input.

yourEditText.addTextChangedListener(new TextWatcher() {
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

                // TODO Auto-generated method stub
            }

            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

                // TODO Auto-generated method stub
            }

            @Override
            public void afterTextChanged(Editable s) {

                //Check your Credit Card Number here.

            }


   });