{"id":16848203,"url":"https://github.com/vinaygaba/creditcardview","last_synced_at":"2025-05-16T06:05:13.993Z","repository":{"id":31164313,"uuid":"34724460","full_name":"vinaygaba/CreditCardView","owner":"vinaygaba","description":"💳 CreditCardView is an Android library that allows developers to create the UI which replicates an actual Credit Card.","archived":false,"fork":false,"pushed_at":"2024-08-01T18:30:18.000Z","size":6260,"stargazers_count":805,"open_issues_count":10,"forks_count":145,"subscribers_count":35,"default_branch":"master","last_synced_at":"2025-04-21T10:54:03.453Z","etag":null,"topics":["android-library","credit-card","creditcard","custom-view","java","view"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vinaygaba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-04-28T10:35:11.000Z","updated_at":"2025-04-13T15:27:33.000Z","dependencies_parsed_at":"2024-10-13T13:10:34.598Z","dependency_job_id":"ea0e663a-b0fb-4590-b9ba-b553bff96d94","html_url":"https://github.com/vinaygaba/CreditCardView","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinaygaba%2FCreditCardView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinaygaba%2FCreditCardView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinaygaba%2FCreditCardView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinaygaba%2FCreditCardView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinaygaba","download_url":"https://codeload.github.com/vinaygaba/CreditCardView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478187,"owners_count":22077676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android-library","credit-card","creditcard","custom-view","java","view"],"created_at":"2024-10-13T13:10:27.186Z","updated_at":"2025-05-16T06:05:13.976Z","avatar_url":"https://github.com/vinaygaba.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"CreditCard View ![Build](https://travis-ci.org/vinaygaba/CreditCardView.svg?branch=master) [![Maven Central](https://maven-badges.herokuapp.com/maven-central/com.vinaygaba/creditcardview/badge.svg)](https://maven-badges.herokuapp.com/maven-central/com.vinaygaba/creditcardview) [![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-CreditCardView-brightgreen.svg?style=flat)](http://android-arsenal.com/details/1/2005)\n==================\n\n![Feature Image](images/Feature%20Image.png)\n\nCreditCardView is an Android library that allows developers to create the UI which replicates an actual Credit Card.\n\nDisplaying and entering the credit card details inside the app has become a very common use case seen in a lot of different apps, but it is often represented in a not so intuitive manner. With Android Pay being announced at the recent Google I/O 2015, more apps would require users to input their credit card details. I created this library with the aim of making the process of displaying and entering the credit card details more visually appealing to the users of your app.\n\nScreenshots\n------------\n![Screenshots](images/screenshots.png)\n\nFeatures\n---------\n\n* Pre-built card backgrounds to help you get started quickly\n* Fully Customizable\n* Auto selection of drawables based on the credit card number pattern i.e. Visa, Mastercard,American Express \u0026 Discover. Will be adding more soon based on the requests I get\n* Auto selection of logo drawable based on the credit card type i.e. Visa, Mastercard and American Express\n* Editable and non-editable mode\n* 4 different card number formats \n\n\n\nSetup\n------\nThe library is pushed to Maven Central as an AAR, so you just need to add the following to your build.gradle file:\n```java\ndependencies {\n    compile ‘com.vinaygaba:creditcardview:1.0.4’\n}\n```\n\nUsage\n------\nUsing CreditCardView is extremely easy, this is how you would declare it in the layout xml:\n```java\n\u003c!-- Use \u003ccom.example.vinay.library.CreditCardView/\u003e if you are using v1.0.1 of the library--\u003e\n\n\u003ccom.vinaygaba.creditcardview.CreditCardView\n        android:id=\"@+id/card1\"\n        android:layout_width=\"fill_parent\"\n        android:layout_height=\"225dp\"\n        android:background=\"@drawable/cardbackground_world\"\n        android:layout_marginBottom=\"16dp\"\n        android:layout_marginTop=\"16dp\"\n        app:cardNumber=\"5500005555555559\"\n        app:cardName=\"Vinay Gaba\"\n        app:cardNumberTextColor=\"#cccccc\"\n        app:cardNumberFormat=\"masked_all_but_last_four\"\n        app:cardNameTextColor=\"#cccccc\"\n        app:type=\"auto\"\n        app:brandLogo=\"@drawable/brandlogo\"\n        app:putChip=\"true\"\n        app:expiryDate = \"02/22\"\n        app:expiryDateTextColor=\"#cccccc\"\n        app:isEditable=\"true\"\n        app:validTillTextColor=\"#cccccc\"\n        app:hintTextColor = \"#cccccc\"\n        /\u003e\n```\nRemember to put this for custom attribute usage:\n\n```java\n\nxmlns:app=\"http://schemas.android.com/apk/res-auto\"\n\n```\nAnd this is how you would be adding it programatically in java:\n\n```java\nCreditCardView creditCardView= new CreditCardView(this);\n```\nOR\n\n```java\nCreditCardView creditCardView= (CreditCardView)findViewById(R.id.ID_OF_CARD);\n```\n\nAttribute Usage \u0026 Documentation\n-----------------\n\n![Attribute Description](images/attributeDescription.png)\n\n##### I) `android:background`\n\nUse this attribute to set the background of the card. This library includes 3 background by default which you can use, but **feel free to put any drawable and use it as the card background as you please**. If you do not want to use your own drawable and want to use the drawables available in the screenshots, do the following:\n\n1)Sky Background\n\n![Sky](images/cardbackground_sky.png)\n\nTo use this background,simply use the line:\n```\nandroid:background = \"@drawable/cardbackground_sky\"\n```\n\n2)World Background\n\n![World](images/cardbackground_world.png)\n\nTo use this background,simply use the following line:\n```\nandroid:background = \"@drawable/cardbackground_world\"\n```\n3) Plain Background\n\n![Plain](images/cardbackground_plain.png)\n\nThis is a customizable plain background where you can change the background color, radius and border color of the card. To use this, add the folowing line:\n```\nandroid:background = \"@drawable/cardbackground_plain\"\n```\n\nTo customize the corner radius of the card, add the following attribute to your dimen.xml file with the attribute name \"card_corner_radius\":\n```\n\u003cdimen name=\"card_corner_radius\"\u003esize_in_dip\u003c/dimen\u003e      //Default value is 10dip\n```\n\nTo customize the background color and the border color of this card, add the following attributes to your color.xml file:\n```\n\u003ccolor name=\"card_background\"\u003ecolor_value\u003c/color\u003e        //Default value is #e5e5e5\n\u003ccolor name=\"card_border\"\u003ecolor_value\u003c/color\u003e            //Default value is #ffffff\n```\nThe important thing to note is that the name of these items should remain the same.\n\n4)Custom Background\n\nYou can essentaially set any background you want as the card background.\nYou can set the value in xml using:\n```\nandroid:background=\"@drawable/drawable_name\"\n```\n\nYou can set the value of this attribute programmatically using:\n```java\n//Set Card Background\ncreditCardView.setBackgroundResource(R.drawable.drawable_name);\n```\n\n##### II) `app:isEditable`\n\nUse this attribute if you want to make the card number, card name and the expiry date field editable to the user.\n\n![Editable Gif](images/editableCardView.gif)\n\nYou can set the value in xml using:\n```\napp:isEditable=\"true/false\"\n```\n\nYou can set the value of this attribute programmatically using:\n```java\n//Set Is Editable Value\ncreditCardView.setIsEditable(true/false);\n\n//Get Is Editable Value \nboolean isEditable= crediCardView.getIsEditable();\n```\nIf you are using **v1.0.3 and above**, there are additional attributes that give you a more granular control over fields. They are: `app:isCardNumberEditable` , `app:isCardNameEditable` \u0026 `app:isExpiryDateEditable`\n\nThey have precedence over the isEditable attribute i.e. If these attributes are present, the respective fields will take their value over the value present in isEditable attribute\n\n*Note: The card type auto detection and space after every 4 letters is added as soon as the focus is shifted from the edit field*\n\n\n##### III) `app:cardNumber`\n\nUse this attribute to set the card number of the card. \n\nYou can set the value in xml using:\n```\napp:cardNumber=\"1234567890123456\"\n```\n\nYou can set and get the value of this attribute programmatically using:\n```java\n//Set Card Number\ncrediCardView.setCardNumber(\"1234567890123456\");\n\n//Get Card Number\nString cardNumber = crediCardView.getCardNumber();\n```\n\n##### IV)  `app:cardNumberTextColor`\n\nUse this attribute to set the text color of card number attribute. \n\nYou can set the value in xml using:\n```\napp:cardNumberTextColor=\"#ffffff\"\n```\n\nYou can set and get the value of this attribute programmatically using:\n```java\n//Set Card Number Text Color\ncreditCardView.setCardNumberTextColor(Color.WHITE);\n\n//Get Card Number Text Color\nint color = crediCardView.getCardNumberTextColor();\n```\n\n##### V) `app:cardNumberFormat`\n\nUse this attribute to set the card number format of card number. There are four different formats supported by the library:\n\n![Card number Format Image](images/cardNumberFormat_Example.png)\n\n1. all_digits - This will display all the numbers of the card number. \n2. masked_all_but_last_four - This will mask all the digits except the last four of the card number. \n3. only_last_four - This will display only the last four digits of the card number.\n4. masked_all - This will mask all the digits of the card number. \n\nYou can set the value in xml using:\n```\napp:cardNumberFormat=\"all_digits/masked_all_but_last_four/only_last_four/masked_all\"    //Use any one format type\n```\n\nYou can set and get the value of this attribute programmatically using:\n```java\n//Set Card Number Format. Chooose any one format\ncreditCardView.setCardNumberFormat(CardNumberFormat.ALL_DIGITS/CardNumberFormat.MASKED_ALL_BUT_LAST_FOUR/CardNumberFormat.ONLY_LAST_FOUR/CardNumberFormat.MASKED_ALL);\n\n//Get Card Number Format\nint cardFormat = crediCardView.getCardNumberFormat();\n```\n*Note: Default value is all_digits*\n\n##### VI) `app:cardName`\n\nUse this attribute to set the card name of the card. \n\nYou can set the value in xml using:\n```\napp:cardName=\"John Doe\"\n```\n\nYou can set and get the value of this attribute programmatically using:\n```java\n//Set Card Name\ncrediCardView.setCardName(\"John Doe\");\n\n//Get Card Name\nString cardName = crediCardView.getCardName();\n```\n\n##### VII) `app:cardNameTextColor`\n\nUse this attribute to set the text color of card name attribute. \n\nYou can set the value in xml using:\n```\napp:cardNameTextColor=\"#ffffff\"\n```\n\nYou can set and get the value of this attribute programmatically using:\n```java\n//Set Card Name Text Color\ncreditCardView.setCardNameTextColor(Color.WHITE);\n\n//Get Card Name Text Color\nint color = crediCardView.getCardNamerTextColor();\n```\n\n##### VIII) `app:expiryDate`\n\nUse this attribute to set the expiry date of the card in MM/YY or MM/YYYY format. \n\nYou can set the value in xml using:\n```\napp:expiryDate=\"01/15\"\n```\n\nYou can set and get the value of this attribute programmatically using:\n```java\n//Set Expiry Date\ncrediCardView.setExpiryDate(\"01/15\");\n\n//Get Card Number\nString expiryDate = crediCardView.ExpiryDate();\n```\n##### IX) `app:expiryDateTextColor`\n\nUse this attribute to set the text color of expiry date attribute. \n\nYou can set the value in xml using:\n```\napp:expiryDateTextColor=\"#ffffff\"\n```\n\nYou can set and get the value of this attribute programmatically using:\n```java\n//Set Expiry Date Text Color\ncreditCardView.setExpiryDateTextColor(Color.WHITE);\n\n//Get Expiry Date Text Color\nint color = crediCardView.getExpiryDateTextColor();\n```\n\n##### X) `app:putChip`\n\nUse this attribute if you want the card to display the chip on the card. \n\n![Put Chip](images/putChip.png)\n\nYou can set the value in xml using:\n```\napp:putChip=\"true/false\"\n```\n\nYou can set the value of this attribute programmatically using:\n```java\n//Set Put Chip Value\ncreditCardView.putChip(true/false);\n```\n\n##### XI) `app:type`\n\nUse this attribute to set the type of the credit card. The library automatically places the corresponding drawable in the bottom right corner based on the type you have selected. Currectly there are 5 different types supported:\n\n1. visa  \u003cimg src =\"images/visa.png\" height =20 width = 40 /\u003e\n2. mastercard   \u003cimg src =\"images/mastercard.png\" height =20 width = 40 /\u003e\n3. american_express   \u003cimg src =\"images/amex.png\" height =20 width = 40 /\u003e\n4. discover   \u003cimg src =\"images/discover.png\" height =20 width = 40 /\u003e\n5. auto - Use auto if u want the library to automatically choose the card type based on the card number you have entered. To know more about the patterns for identifying the card type from the card number, see this [link](http://www.regular-expressions.info/creditcard.html)\n\nYou can set the value in xml using:\n```\napp:type=\"visa/mastercard/american_express/discover/auto\"\n```\n\nYou can set the value of this attribute programmatically using:\n```java\n//Set Card Type.Choose any one card type from the following\ncreditCardView.setType(CardType.VISA/CardType.MASTERCARD/CardType.AMERICAN_EXPRESS/CardType.DISCOVER/CardType.AUTO);\n\n//Get Card Type. \nint type = crediCardView.getType();\n```\n\n##### XII) `app:brandLogo`\n\nUse this attribute to set the brand logo drawable that you see in the upper right corner. \n\nYou can set the value in xml using:\n```\napp:brandLogo=\"@drawable/drawable_name\"\n```\n\nYou can set and get the value of this attribute programmatically using:\n```java\n//Set Brand Logo\ncrediCardView.setBrandLogo(R.drawable.drawable_name);\n```\n\nIf you wish to modify the default dimensions of the brand logo, add the following attribute to your dimen.xml file:\n```\n\u003cdimen name=\"brand_logo_width\"\u003esize_in_dp\u003c/dimen\u003e    //Default value is 120dp\n\u003cdimen name=\"brand_logo_height\"\u003esize_in_dp\u003c/dimen\u003e   //Default value is 40dp\n```\nThe important thing to note is that the name of these items should remain the same.\n\n##### XIII) `app:hintTextColor`\n\nUse this attribute to set the hint text color that is visible when card name, card number and expiry date fields are editable and blank \n\nYou can set the value in xml using:\n```\napp:hintTextColor=\"color_value\"    //Default is White\n```\n\nYou can set and get the value of this attribute programmatically using:\n```java\n//Set Hint Text Color\ncrediCardView.setHintTextColor(color_value);\n\n//Get Hint Text Color\nint color = crediCardView.geHintTextColor();\n```\n\nAdditional Customizations\n-----------------\n\nMy aim with this library was to cover as many use cases as possible and so I have tried to make it extremely customizable. There are some additional customizations possible like:\n\n##### I) Modify String Resources\n\nYou can modify the hints which are displayed when the fields are empty and the card is editable. You can modify those by adding these attributes in the strings.xml file:\n\n```\n\u003cstring name=\"card_number_hint\"\u003ehint\u003c/string\u003e        //Default value: \"ENTER CARD NUMBER\"\n\u003cstring name=\"expiry_date_hint\"\u003ehint\u003c/string\u003e        //Default value:\"MM/YY\"\n\u003cstring name=\"card_name_hint\"\u003ehint\u003c/string\u003e          //Default value: \"ENTER CARD NAME\"\n```\nYou can also modify some other additional string resources like:\n\n```\n\u003cstring name=\"valid_till\"\u003estring\u003c/string\u003e           //Default value: \"VALID TILL\"\n```\nThe important thing to note is that the name of these items should remain the same. \n**Please make sure the string resources are in caps to be displayed correctly as the font does not support lower case**\n\n##### II) Modify Dimensions\n\nYou can modify the dimensions of some of the attributes by adding these attributes to your dimens.xml file:\n\n```\n\u003cdimen name=\"card_number_text_size\"\u003esize\u003c/dimen\u003e        //Default value:16sp\n\u003cdimen name=\"card_name_text_size\"\u003esize\u003c/dimen\u003e          //Default value:14sp\n\u003cdimen name=\"expiry_date_text_size\"\u003esize\u003c/dimen\u003e        //Default value:14sp\n\u003cdimen name=\"valid_till_text_size\"\u003esize\u003c/dimen\u003e         //Default value:10sp\n\u003cdimen name=\"brand_logo_width\"\u003esize\u003c/dimen\u003e             //Default value:120dp\n\u003cdimen name=\"brand_logo_height\"\u003esize\u003c/dimen\u003e            //Default value:40dp\n```\nThe important thing to note is that the name of these items should remain the same.\n\nContributing\n-----------------\nPlease use the issue tracker to report any bugs or file feature requests. There are a few features that I plan to work on based on the response the library gets, some of them being:\n\n* Tablet Optimization. The current version is not optimized for tablets\n* Landscape Optimization. The current version is not optimized for landscape mode\n* Credit Card back view to display the CVV number\n* Animations and touch callbacks\n* Stack View to display multiple cards\n\nI would love to get more people involved in the development of this library. A lot of times people are not sure about how they should be contributing to open source. If you are one of them, this is a great opportunity for you to get involved. You can also reach out to me for any queries that you might have about this library.\n\nCredits\n-----------------\nAuthor: Vinay Gaba (vinaygaba@gmail.com)\n\n\u003ca href=\"https://plus.google.com/+Vinaygaba\"\u003e\n  \u003cimg alt=\"Follow me on Google+\"\n       src=\"https://github.com/gabrielemariotti/cardslib/raw/master/demo/images/g+64.png\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://twitter.com/vinaygaba\"\u003e\n  \u003cimg alt=\"Follow me on Twitter\"\n       src=\"https://github.com/gabrielemariotti/cardslib/raw/master/demo/images/twitter64.png\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/in/vinaygaba\"\u003e\n  \u003cimg alt=\"Follow me on LinkedIn\"\n       src=\"https://github.com/gabrielemariotti/cardslib/raw/master/demo/images/linkedin.png\" /\u003e\n\u003c/a\u003e\n\n\nLicense\n-------\n\n    Copyright 2015 Vinay Gaba\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinaygaba%2Fcreditcardview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinaygaba%2Fcreditcardview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinaygaba%2Fcreditcardview/lists"}