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,

androidedittext

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..!

http://stackoverflow.com/questions/4172242/live-editing-of-users-input/37187857#37187857 — HenryChuang, Dec 01 '16 at 08:13

score 9 · Accepted Answer · answered Feb 13 '15 at 07:11

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..

score 1 · Answer 2 · answered Feb 04 '15 at 05:48

1

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;
...

answered Feb 04 '15 at 05:48

ChrisMcJava

2,145
5
25
33

Thanks for the link, that helps me to make a regex. – Brendon Feb 04 '15 at 06:08

score 0 · Answer 3 · answered Feb 04 '15 at 05:42

0

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.

            }


   });

answered Feb 04 '15 at 05:42

Murtaza Khursheed Hussain

15,176
7
58
83

that depends on your implementation, you can also use `FlipAnimator` to flip views. But if you are solely looking for code that`s bad. Try to using the techniques explained above. – Murtaza Khursheed Hussain Feb 04 '15 at 06:00
Note: You can also define `SlideUp` and `SlideDown` animation to `FlipAnimator` – Murtaza Khursheed Hussain Feb 04 '15 at 06:01
i am not looking for a exact code, but doing animate the whole list is my question. – Brendon Feb 04 '15 at 06:06
well I explained the technique, you can try. – Murtaza Khursheed Hussain Feb 04 '15 at 06:09
@MurtazaKhursheedHussain Please give some detailed answer to answer the question. The question was regarding how to get different card images corresponding to card numbers. Your answer just shows a addTextChangedListener. – debo.stackoverflow Apr 08 '19 at 06:59

Android Edittext with auto detection of credit card type

3 Answers3

Linked