├── app ├── .gitignore ├── src │ ├── main │ │ ├── res │ │ │ ├── font │ │ │ │ ├── asem.otf │ │ │ │ ├── montserrat_light.ttf │ │ │ │ ├── roboto_regular.ttf │ │ │ │ ├── montserrat_medium.ttf │ │ │ │ ├── montserrat_regular.ttf │ │ │ │ └── montserrat_semibold.ttf │ │ │ ├── drawable │ │ │ │ ├── emv_img.png │ │ │ │ ├── hologram.png │ │ │ │ ├── stripe_background.jpg │ │ │ │ ├── green_circle.xml │ │ │ │ ├── avd_done.xml │ │ │ │ ├── ic_visa_logo.xml │ │ │ │ ├── ic_master_card_logo.xml │ │ │ │ └── ic_launcher_background.xml │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── values │ │ │ │ ├── integers.xml │ │ │ │ ├── colors.xml │ │ │ │ ├── strings.xml │ │ │ │ └── themes.xml │ │ │ ├── mipmap-anydpi-v26 │ │ │ │ ├── ic_launcher.xml │ │ │ │ └── ic_launcher_round.xml │ │ │ ├── animator │ │ │ │ ├── card_flip_left_out.xml │ │ │ │ ├── card_flip_right_out.xml │ │ │ │ ├── back_animator.xml │ │ │ │ ├── card_flip_left_in.xml │ │ │ │ └── card_flip_right_in.xml │ │ │ ├── values-night │ │ │ │ └── themes.xml │ │ │ ├── drawable-v24 │ │ │ │ └── ic_launcher_foreground.xml │ │ │ └── layout │ │ │ │ ├── card_back.xml │ │ │ │ ├── card_front.xml │ │ │ │ └── activity_main.xml │ │ ├── java │ │ │ └── com │ │ │ │ └── aiman │ │ │ │ └── creditcardscreen │ │ │ │ ├── utils │ │ │ │ ├── CardType.kt │ │ │ │ ├── CreditCardExpiryInputFilter.kt │ │ │ │ └── CreditCardFormatTextWatcher.kt │ │ │ │ ├── ui │ │ │ │ ├── MainViewModel.kt │ │ │ │ └── MainActivity.kt │ │ │ │ ├── extensions │ │ │ │ └── Extensions.kt │ │ │ │ └── binding │ │ │ │ └── Bindings.kt │ │ └── AndroidManifest.xml │ ├── test │ │ └── java │ │ │ └── com │ │ │ └── aiman │ │ │ └── creditcardscreen │ │ │ └── ExampleUnitTest.kt │ └── androidTest │ │ └── java │ │ └── com │ │ └── aiman │ │ └── creditcardscreen │ │ └── ExampleInstrumentedTest.kt ├── proguard-rules.pro └── build.gradle ├── .idea ├── .name ├── .gitignore ├── codeStyles │ ├── codeStyleConfig.xml │ └── Project.xml ├── compiler.xml ├── vcs.xml ├── misc.xml ├── gradle.xml └── jarRepositories.xml ├── settings.gradle ├── demo.gif ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── .gitignore ├── README.md ├── gradle.properties ├── gradlew.bat └── gradlew /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /.idea/.name: -------------------------------------------------------------------------------- 1 | Credit Card Screen -------------------------------------------------------------------------------- /settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | rootProject.name = "Credit Card Screen" -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/demo.gif -------------------------------------------------------------------------------- /app/src/main/res/font/asem.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/font/asem.otf -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /app/src/main/res/drawable/emv_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/drawable/emv_img.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/hologram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/drawable/hologram.png -------------------------------------------------------------------------------- /app/src/main/res/font/montserrat_light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/font/montserrat_light.ttf -------------------------------------------------------------------------------- /app/src/main/res/font/roboto_regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/font/roboto_regular.ttf -------------------------------------------------------------------------------- /app/src/main/res/font/montserrat_medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/font/montserrat_medium.ttf -------------------------------------------------------------------------------- /app/src/main/res/font/montserrat_regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/font/montserrat_regular.ttf -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/stripe_background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/drawable/stripe_background.jpg -------------------------------------------------------------------------------- /app/src/main/res/font/montserrat_semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/font/montserrat_semibold.ttf -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aimanmuzaffar95/Add-Credit-Card-Screen/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /.idea/codeStyles/codeStyleConfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /app/src/main/java/com/aiman/creditcardscreen/utils/CardType.kt: -------------------------------------------------------------------------------- 1 | package com.aiman.creditcardscreen.utils 2 | 3 | enum class CardType { 4 | NO_TYPE, 5 | VISA_CARD, 6 | MASTER_CARD 7 | } -------------------------------------------------------------------------------- /.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/src/main/res/values/integers.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 600 4 | 300 5 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/green_circle.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Fri Mar 26 22:06:31 PKT 2021 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-bin.zip 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/caches 5 | /.idea/libraries 6 | /.idea/modules.xml 7 | /.idea/workspace.xml 8 | /.idea/navEditor.xml 9 | /.idea/assetWizardSettings.xml 10 | .DS_Store 11 | /build 12 | /captures 13 | .externalNativeBuild 14 | .cxx 15 | local.properties 16 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | -------------------------------------------------------------------------------- /app/src/test/java/com/aiman/creditcardscreen/ExampleUnitTest.kt: -------------------------------------------------------------------------------- 1 | package com.aiman.creditcardscreen 2 | 3 | import org.junit.Test 4 | 5 | import org.junit.Assert.* 6 | 7 | /** 8 | * Example local unit test, which will execute on the development machine (host). 9 | * 10 | * See [testing documentation](http://d.android.com/tools/testing). 11 | */ 12 | class ExampleUnitTest { 13 | @Test 14 | fun addition_isCorrect() { 15 | assertEquals(4, 2 + 2) 16 | } 17 | } -------------------------------------------------------------------------------- /app/src/main/java/com/aiman/creditcardscreen/ui/MainViewModel.kt: -------------------------------------------------------------------------------- 1 | package com.aiman.creditcardscreen.ui 2 | 3 | import androidx.lifecycle.MutableLiveData 4 | import androidx.lifecycle.ViewModel 5 | import com.aiman.creditcardscreen.utils.CardType 6 | 7 | class MainViewModel : ViewModel() { 8 | 9 | val cardHolderName = MutableLiveData("") 10 | val cardNumber = MutableLiveData("") 11 | val cardNumberPlaceholder = MutableLiveData("**** **** **** ****") 12 | val cardExpiry = MutableLiveData("") 13 | val cardCVV = MutableLiveData("") 14 | val cardType = MutableLiveData(CardType.NO_TYPE) 15 | val cardSaved = MutableLiveData(false) 16 | } 17 | -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFBB86FC 4 | #FF6200EE 5 | #FF3700B3 6 | #FF03DAC5 7 | #FF018786 8 | #FF000000 9 | #FFFFFFFF 10 | #ffb300 11 | #78909c 12 | #03A9F4 13 | #ffc400 14 | #2979ff 15 | -------------------------------------------------------------------------------- /app/src/main/java/com/aiman/creditcardscreen/extensions/Extensions.kt: -------------------------------------------------------------------------------- 1 | package com.aiman.creditcardscreen.extensions 2 | 3 | import com.aiman.creditcardscreen.utils.CreditCardExpiryInputFilter 4 | import com.aiman.creditcardscreen.utils.CreditCardFormatTextWatcher 5 | import com.google.android.material.textfield.TextInputEditText 6 | 7 | object Extensions { 8 | 9 | fun TextInputEditText.setCreditCardTextWatcher() { 10 | val tv = 11 | CreditCardFormatTextWatcher(this) 12 | this.addTextChangedListener(tv) 13 | } 14 | 15 | fun TextInputEditText.setExpiryDateFilter() { 16 | this.filters = arrayOf(CreditCardExpiryInputFilter()) 17 | } 18 | 19 | } -------------------------------------------------------------------------------- /app/src/main/res/animator/card_flip_left_out.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | 11 | 17 | -------------------------------------------------------------------------------- /app/src/main/res/animator/card_flip_right_out.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | 11 | 17 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Credit Card Screen 3 | **** **** **** **** 4 | CARD HOLDER 5 | Expiry 6 | Card holder name 7 | Card number 8 | Expiry date 9 | CVV 10 | This card is expired 11 | Format exception 12 | Save card 13 | Card Saved 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Add-Credit-Card-Screen 2 | A simple UI with animation in Android Kotlin to input and validate credit card. 3 | 4 | ![Image](demo.gif) 5 | 6 | 7 | # 📃 License 8 | 9 | Copyright 2021 Aiman Muzafar 10 | 11 | Licensed under the Apache License, Version 2.0 (the "License"); 12 | you may not use this file except in compliance with the License. 13 | You may obtain a copy of the License at 14 | 15 | http://www.apache.org/licenses/LICENSE-2.0 16 | 17 | Unless required by applicable law or agreed to in writing, software 18 | distributed under the License is distributed on an "AS IS" BASIS, 19 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 20 | See the License for the specific language governing permissions and 21 | limitations under the License. 22 | 23 | -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /app/src/androidTest/java/com/aiman/creditcardscreen/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.aiman.creditcardscreen 2 | 3 | import androidx.test.platform.app.InstrumentationRegistry 4 | import androidx.test.ext.junit.runners.AndroidJUnit4 5 | 6 | import org.junit.Test 7 | import org.junit.runner.RunWith 8 | 9 | import org.junit.Assert.* 10 | 11 | /** 12 | * Instrumented test, which will execute on an Android device. 13 | * 14 | * See [testing documentation](http://d.android.com/tools/testing). 15 | */ 16 | @RunWith(AndroidJUnit4::class) 17 | class ExampleInstrumentedTest { 18 | @Test 19 | fun useAppContext() { 20 | // Context of the app under test. 21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext 22 | assertEquals("com.aiman.creditcardscreen", appContext.packageName) 23 | } 24 | } -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /app/src/main/res/values/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | -------------------------------------------------------------------------------- /app/src/main/res/values-night/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | -------------------------------------------------------------------------------- /app/src/main/res/animator/back_animator.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 15 | 16 | 22 | 23 | 28 | -------------------------------------------------------------------------------- /app/src/main/res/animator/card_flip_left_in.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 16 | 17 | 18 | 24 | -------------------------------------------------------------------------------- /app/src/main/res/animator/card_flip_right_in.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 16 | 17 | 18 | 24 | 25 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 22 | 23 | -------------------------------------------------------------------------------- /gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | # IDE (e.g. Android Studio) users: 3 | # Gradle settings configured through the IDE *will override* 4 | # any settings specified in this file. 5 | # For more details on how to configure your build environment visit 6 | # http://www.gradle.org/docs/current/userguide/build_environment.html 7 | # Specifies the JVM arguments used for the daemon process. 8 | # The setting is particularly useful for tweaking memory settings. 9 | org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8 10 | # When configured, Gradle will run in incubating parallel mode. 11 | # This option should only be used with decoupled projects. More details, visit 12 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 13 | # org.gradle.parallel=true 14 | # AndroidX package structure to make it clearer which packages are bundled with the 15 | # Android operating system, and which are packaged with your app"s APK 16 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 17 | android.useAndroidX=true 18 | # Automatically convert third-party libraries to use AndroidX 19 | android.enableJetifier=true 20 | # Kotlin code style for this project: "official" or "obsolete": 21 | kotlin.code.style=official -------------------------------------------------------------------------------- /app/src/main/res/drawable/avd_done.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 12 | 18 | 19 | 20 | 21 | 22 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /.idea/jarRepositories.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 14 | 15 | 19 | 20 | 24 | 25 | 29 | 30 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_visa_logo.xml: -------------------------------------------------------------------------------- 1 | 6 | 9 | 12 | 15 | 18 | 21 | 22 | -------------------------------------------------------------------------------- /app/src/main/res/drawable-v24/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 15 | 18 | 21 | 22 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /app/src/main/java/com/aiman/creditcardscreen/binding/Bindings.kt: -------------------------------------------------------------------------------- 1 | package com.aiman.creditcardscreen.binding 2 | 3 | import android.view.View 4 | import android.widget.ImageView 5 | import androidx.databinding.BindingAdapter 6 | import com.aiman.creditcardscreen.R 7 | import com.aiman.creditcardscreen.utils.CardType 8 | import com.bumptech.glide.Glide 9 | 10 | object Bindings { 11 | @JvmStatic 12 | @BindingAdapter("cardType") 13 | fun changeBackGround(view: View, cardType: CardType) { 14 | when (cardType) { 15 | CardType.NO_TYPE -> { 16 | view.setBackgroundColor(view.context.getColor(R.color.blank_card)) 17 | } 18 | CardType.VISA_CARD -> { 19 | view.setBackgroundColor(view.context.getColor(R.color.visa_card)) 20 | } 21 | CardType.MASTER_CARD -> { 22 | view.setBackgroundColor(view.context.getColor(R.color.master_card)) 23 | } 24 | } 25 | } 26 | 27 | @JvmStatic 28 | @BindingAdapter("cardType") 29 | fun setImage(imageView: ImageView, cardType: CardType) { 30 | when (cardType) { 31 | CardType.NO_TYPE -> { 32 | imageView.visibility = View.GONE 33 | } 34 | CardType.VISA_CARD -> { 35 | imageView.visibility = View.VISIBLE 36 | Glide.with(imageView.context).load(R.drawable.ic_visa_logo).centerInside() 37 | .into(imageView) 38 | } 39 | CardType.MASTER_CARD -> { 40 | imageView.visibility = View.VISIBLE 41 | Glide.with(imageView.context).load(R.drawable.ic_master_card_logo).centerInside() 42 | .into(imageView) 43 | } 44 | } 45 | } 46 | 47 | @JvmStatic 48 | @BindingAdapter("visible") 49 | fun setVisibility(view: View, isVisible: Boolean) { 50 | view.visibility = if (isVisible) View.VISIBLE else View.GONE 51 | } 52 | } -------------------------------------------------------------------------------- /app/src/main/java/com/aiman/creditcardscreen/utils/CreditCardExpiryInputFilter.kt: -------------------------------------------------------------------------------- 1 | package com.aiman.creditcardscreen.utils 2 | 3 | import android.text.InputFilter 4 | import android.text.Spanned 5 | import java.text.SimpleDateFormat 6 | import java.util.* 7 | 8 | class CreditCardExpiryInputFilter : InputFilter { 9 | 10 | private var currentYearLastTwoDigits: String = SimpleDateFormat("yy", Locale.US).format(Date()) 11 | 12 | override fun filter( 13 | source: CharSequence, 14 | start: Int, 15 | end: Int, 16 | dest: Spanned, 17 | dstart: Int, 18 | dend: Int 19 | ): CharSequence { 20 | 21 | //do not insert if length is already 5 22 | if (dest.toString().length == 5) return "" 23 | 24 | //do not insert more than 1 character at a time 25 | if (source.length > 1) return "" 26 | 27 | //only allow character to be inserted at the end of the current text 28 | if (dest.isNotEmpty() && dstart != dest.length) return "" 29 | 30 | //if backspace, skip 31 | if (source.isEmpty()) { 32 | return source 33 | } 34 | 35 | //At this point, `source` is a single character being inserted at `dstart`. 36 | //`dstart` is at the end of the current text. 37 | 38 | val inputChar = source[0] 39 | 40 | if (dstart == 0) { 41 | //first month digit 42 | if (inputChar > '1') return "" 43 | } 44 | 45 | if (dstart == 1) { 46 | //second month digit 47 | val firstMonthChar = dest[0] 48 | if (firstMonthChar == '0' && inputChar == '0') return "" 49 | if (firstMonthChar == '1' && inputChar > '2') return "" 50 | } 51 | 52 | if (dstart == 2) { 53 | val currYearFirstChar = currentYearLastTwoDigits[0] 54 | return if (inputChar < currYearFirstChar) "" else "/$source" 55 | } 56 | 57 | if (dstart == 4) { 58 | val inputYear = "" + dest[dest.length - 1] + source.toString() 59 | if (inputYear.compareTo(currentYearLastTwoDigits) < 0) return "" 60 | } 61 | 62 | return source 63 | } 64 | 65 | } -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id 'com.android.application' 3 | id 'kotlin-android' 4 | id 'kotlin-kapt' 5 | } 6 | 7 | android { 8 | compileSdkVersion 30 9 | buildToolsVersion "30.0.2" 10 | 11 | defaultConfig { 12 | applicationId "com.aiman.creditcardscreen" 13 | minSdkVersion 23 14 | targetSdkVersion 30 15 | versionCode 1 16 | versionName "1.0" 17 | 18 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 19 | } 20 | 21 | buildTypes { 22 | release { 23 | minifyEnabled false 24 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' 25 | } 26 | } 27 | compileOptions { 28 | sourceCompatibility JavaVersion.VERSION_1_8 29 | targetCompatibility JavaVersion.VERSION_1_8 30 | } 31 | kotlinOptions { 32 | jvmTarget = '1.8' 33 | } 34 | buildFeatures { 35 | dataBinding true 36 | } 37 | 38 | } 39 | 40 | dependencies { 41 | 42 | // Core android and kotlin 43 | implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version" 44 | implementation 'androidx.core:core-ktx:1.3.2' 45 | implementation 'androidx.appcompat:appcompat:1.2.0' 46 | 47 | // Design 48 | implementation 'com.google.android.material:material:1.3.0' 49 | implementation 'androidx.constraintlayout:constraintlayout:2.0.4' 50 | 51 | // Testing 52 | testImplementation 'junit:junit:4.+' 53 | androidTestImplementation 'androidx.test.ext:junit:1.1.2' 54 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0' 55 | 56 | // Fragment ktx for View model 57 | implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.1" 58 | implementation 'androidx.fragment:fragment-ktx:1.3.2' 59 | 60 | // Live Data 61 | implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.3.1" 62 | 63 | // Glide for Image Loading 64 | implementation 'com.github.bumptech.glide:glide:4.12.0' 65 | annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0' 66 | 67 | // Coroutines 68 | implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.4.3' 69 | 70 | // Animation Library 71 | implementation 'com.github.gayanvoice:android-animations:1.0.2' 72 | 73 | } -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | set DIRNAME=%~dp0 12 | if "%DIRNAME%" == "" set DIRNAME=. 13 | set APP_BASE_NAME=%~n0 14 | set APP_HOME=%DIRNAME% 15 | 16 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 17 | set DEFAULT_JVM_OPTS= 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windows variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | 53 | :win9xME_args 54 | @rem Slurp the command line arguments. 55 | set CMD_LINE_ARGS= 56 | set _SKIP=2 57 | 58 | :win9xME_args_slurp 59 | if "x%~1" == "x" goto execute 60 | 61 | set CMD_LINE_ARGS=%* 62 | 63 | :execute 64 | @rem Setup the command line 65 | 66 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 67 | 68 | @rem Execute Gradle 69 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 70 | 71 | :end 72 | @rem End local scope for the variables with windows NT shell 73 | if "%ERRORLEVEL%"=="0" goto mainEnd 74 | 75 | :fail 76 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 77 | rem the _cmd.exe /c_ return code! 78 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 79 | exit /b 1 80 | 81 | :mainEnd 82 | if "%OS%"=="Windows_NT" endlocal 83 | 84 | :omega 85 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_master_card_logo.xml: -------------------------------------------------------------------------------- 1 | 6 | 9 | 12 | 15 | 18 | 21 | 22 | -------------------------------------------------------------------------------- /app/src/main/res/layout/card_back.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 27 | 28 | 32 | 33 | 40 | 41 | 53 | 54 | 68 | 69 | 85 | 86 | 94 | 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /.idea/codeStyles/Project.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 20 | 22 | 23 | 135 | 136 | 138 | 139 | -------------------------------------------------------------------------------- /app/src/main/res/layout/card_front.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 25 | 26 | 31 | 32 | 39 | 40 | 50 | 51 | 64 | 65 | 75 | 76 | 88 | 89 | 98 | 99 | 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Attempt to set APP_HOME 10 | # Resolve links: $0 may be a link 11 | PRG="$0" 12 | # Need this for relative symlinks. 13 | while [ -h "$PRG" ] ; do 14 | ls=`ls -ld "$PRG"` 15 | link=`expr "$ls" : '.*-> \(.*\)$'` 16 | if expr "$link" : '/.*' > /dev/null; then 17 | PRG="$link" 18 | else 19 | PRG=`dirname "$PRG"`"/$link" 20 | fi 21 | done 22 | SAVED="`pwd`" 23 | cd "`dirname \"$PRG\"`/" >/dev/null 24 | APP_HOME="`pwd -P`" 25 | cd "$SAVED" >/dev/null 26 | 27 | APP_NAME="Gradle" 28 | APP_BASE_NAME=`basename "$0"` 29 | 30 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 31 | DEFAULT_JVM_OPTS="" 32 | 33 | # Use the maximum available, or set MAX_FD != -1 to use that value. 34 | MAX_FD="maximum" 35 | 36 | warn () { 37 | echo "$*" 38 | } 39 | 40 | die () { 41 | echo 42 | echo "$*" 43 | echo 44 | exit 1 45 | } 46 | 47 | # OS specific support (must be 'true' or 'false'). 48 | cygwin=false 49 | msys=false 50 | darwin=false 51 | nonstop=false 52 | case "`uname`" in 53 | CYGWIN* ) 54 | cygwin=true 55 | ;; 56 | Darwin* ) 57 | darwin=true 58 | ;; 59 | MINGW* ) 60 | msys=true 61 | ;; 62 | NONSTOP* ) 63 | nonstop=true 64 | ;; 65 | esac 66 | 67 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 68 | 69 | # Determine the Java command to use to start the JVM. 70 | if [ -n "$JAVA_HOME" ] ; then 71 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 72 | # IBM's JDK on AIX uses strange locations for the executables 73 | JAVACMD="$JAVA_HOME/jre/sh/java" 74 | else 75 | JAVACMD="$JAVA_HOME/bin/java" 76 | fi 77 | if [ ! -x "$JAVACMD" ] ; then 78 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 79 | 80 | Please set the JAVA_HOME variable in your environment to match the 81 | location of your Java installation." 82 | fi 83 | else 84 | JAVACMD="java" 85 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 86 | 87 | Please set the JAVA_HOME variable in your environment to match the 88 | location of your Java installation." 89 | fi 90 | 91 | # Increase the maximum file descriptors if we can. 92 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 93 | MAX_FD_LIMIT=`ulimit -H -n` 94 | if [ $? -eq 0 ] ; then 95 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 96 | MAX_FD="$MAX_FD_LIMIT" 97 | fi 98 | ulimit -n $MAX_FD 99 | if [ $? -ne 0 ] ; then 100 | warn "Could not set maximum file descriptor limit: $MAX_FD" 101 | fi 102 | else 103 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 104 | fi 105 | fi 106 | 107 | # For Darwin, add options to specify how the application appears in the dock 108 | if $darwin; then 109 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 110 | fi 111 | 112 | # For Cygwin, switch paths to Windows format before running java 113 | if $cygwin ; then 114 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 115 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 116 | JAVACMD=`cygpath --unix "$JAVACMD"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Escape application args 158 | save () { 159 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 160 | echo " " 161 | } 162 | APP_ARGS=$(save "$@") 163 | 164 | # Collect all arguments for the java command, following the shell quoting and substitution rules 165 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 166 | 167 | # by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong 168 | if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then 169 | cd "$(dirname "$0")" 170 | fi 171 | 172 | exec "$JAVACMD" "$@" 173 | -------------------------------------------------------------------------------- /app/src/main/java/com/aiman/creditcardscreen/ui/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.aiman.creditcardscreen.ui 2 | 3 | import android.animation.AnimatorInflater 4 | import android.animation.AnimatorSet 5 | import android.graphics.drawable.AnimatedVectorDrawable 6 | import android.os.Bundle 7 | import android.view.View 8 | import androidx.activity.viewModels 9 | import androidx.appcompat.app.AppCompatActivity 10 | import androidx.databinding.DataBindingUtil 11 | import com.aiman.creditcardscreen.R 12 | import com.aiman.creditcardscreen.databinding.ActivityMainBinding 13 | import com.aiman.creditcardscreen.extensions.Extensions.setCreditCardTextWatcher 14 | import com.aiman.creditcardscreen.extensions.Extensions.setExpiryDateFilter 15 | import com.aiman.creditcardscreen.utils.CardType 16 | import kotlinx.coroutines.MainScope 17 | import kotlinx.coroutines.delay 18 | import kotlinx.coroutines.launch 19 | import render.animations.* 20 | 21 | class MainActivity : AppCompatActivity() { 22 | 23 | private lateinit var binding: ActivityMainBinding 24 | private val viewModel by viewModels() 25 | 26 | lateinit var flipLeftIn: AnimatorSet 27 | lateinit var flipLeftOut: AnimatorSet 28 | lateinit var flipRightOut: AnimatorSet 29 | lateinit var flipRightIn: AnimatorSet 30 | 31 | lateinit var animatedVectorDrawable: AnimatedVectorDrawable 32 | 33 | private var isFront = true 34 | 35 | override fun onCreate(savedInstanceState: Bundle?) { 36 | super.onCreate(savedInstanceState) 37 | 38 | binding = DataBindingUtil.setContentView(this, R.layout.activity_main) 39 | binding.apply { 40 | lifecycleOwner = this@MainActivity 41 | viewModel = this@MainActivity.viewModel 42 | frontSide.viewModel = this@MainActivity.viewModel 43 | frontSide.lifecycleOwner = this@MainActivity 44 | backSide.viewModel = this@MainActivity.viewModel 45 | backSide.lifecycleOwner = this@MainActivity 46 | } 47 | 48 | setupAnimation() 49 | setupViews() 50 | 51 | } 52 | 53 | private fun setupAnimation() { 54 | val scale = applicationContext.resources.displayMetrics.density 55 | binding.frontSide.frontSide.cameraDistance = 16000 * scale 56 | binding.backSide.backSide.cameraDistance = 16000 * scale 57 | 58 | flipLeftIn = 59 | AnimatorInflater.loadAnimator(this, R.animator.card_flip_left_in) as AnimatorSet 60 | flipLeftOut = 61 | AnimatorInflater.loadAnimator(this, R.animator.card_flip_left_out) as AnimatorSet 62 | flipRightIn = 63 | AnimatorInflater.loadAnimator(this, R.animator.card_flip_right_in) as AnimatorSet 64 | flipRightOut = 65 | AnimatorInflater.loadAnimator(this, R.animator.card_flip_right_out) as AnimatorSet 66 | } 67 | 68 | private fun flipCard() { 69 | if (isFront) { 70 | flipRightIn.setTarget(binding.backSide.backSide) 71 | flipRightOut.setTarget(binding.frontSide.frontSide) 72 | flipRightIn.start() 73 | flipRightOut.start() 74 | } else { 75 | flipLeftIn.setTarget(binding.frontSide.frontSide) 76 | flipLeftOut.setTarget(binding.backSide.backSide) 77 | flipLeftIn.start() 78 | flipLeftOut.start() 79 | } 80 | isFront = !isFront 81 | } 82 | 83 | private fun setupViews() { 84 | binding.etCardNumber.setCreditCardTextWatcher() 85 | binding.etExpiryDate.setExpiryDateFilter() 86 | 87 | viewModel.cardNumber.observe(this, 88 | { value -> 89 | replacePlaceholder(value) 90 | checkCardType(value) 91 | } 92 | ) 93 | 94 | binding.etCardCvv.setOnFocusChangeListener { view, b -> 95 | if (b) { 96 | flipCard() 97 | } else { 98 | MainScope().launch { 99 | delay(400) 100 | flipCard() 101 | } 102 | } 103 | } 104 | } 105 | 106 | private fun replacePlaceholder(value: String) { 107 | var placeholderString = "**** **** **** ****" 108 | 109 | value.forEach { 110 | val sb = StringBuilder(placeholderString) 111 | val firstIndex = placeholderString.indexOf("*") 112 | sb.setCharAt(firstIndex, it) 113 | placeholderString = sb.toString() 114 | } 115 | viewModel.cardNumberPlaceholder.postValue(placeholderString) 116 | } 117 | 118 | private fun checkCardType(value: String) { 119 | if (value.length < 4) { 120 | viewModel.cardType.value = CardType.NO_TYPE 121 | return 122 | } 123 | 124 | if (value.startsWith("4")) { 125 | viewModel.cardType.value = CardType.VISA_CARD 126 | } else { 127 | viewModel.cardType.value = CardType.MASTER_CARD 128 | } 129 | } 130 | 131 | private fun saveCard() { 132 | viewModel.cardSaved.value = true 133 | var render = Render(this).also { it.setAnimation(Slide.InUp(binding.tempImg)) } 134 | render.start() 135 | 136 | MainScope().launch { 137 | delay(1000) 138 | binding.tvCardSaved.visibility = View.VISIBLE 139 | var textRender = 140 | Render(this@MainActivity).also { it.setAnimation(Fade.InUp(binding.tvCardSaved)) } 141 | textRender.start() 142 | delay(3000) 143 | // render = Render(this@MainActivity).also { it.setAnimation(Fade.Out(binding.tempImg)) } 144 | render = Render(this@MainActivity).also { it.setAnimation(Flip.OutX(binding.tempImg)) } 145 | textRender = 146 | Render(this@MainActivity).also { it.setAnimation(Fade.Out(binding.tvCardSaved)) } 147 | render.start() 148 | textRender.start() 149 | } 150 | 151 | MainScope().launch { 152 | delay(1000) 153 | val drawable = binding.done.drawable 154 | animatedVectorDrawable = drawable as AnimatedVectorDrawable 155 | animatedVectorDrawable.start() 156 | } 157 | 158 | } 159 | 160 | fun onClick(view: View) { 161 | when (view.id) { 162 | R.id.save_btn -> saveCard() 163 | R.id.btn -> flipCard() 164 | } 165 | } 166 | } -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/java/com/aiman/creditcardscreen/utils/CreditCardFormatTextWatcher.kt: -------------------------------------------------------------------------------- 1 | package com.aiman.creditcardscreen.utils 2 | 3 | import android.content.Context 4 | import android.graphics.Canvas 5 | import android.graphics.Paint 6 | import android.graphics.Paint.FontMetricsInt 7 | import android.text.Editable 8 | import android.text.Spannable 9 | import android.text.TextWatcher 10 | import android.text.style.ReplacementSpan 11 | import android.util.TypedValue 12 | import android.widget.TextView 13 | 14 | class CreditCardFormatTextWatcher : TextWatcher { 15 | 16 | private val NO_MAX_LENGTH = -1 17 | private var maxLength = NO_MAX_LENGTH 18 | private var paddingPx = 0 19 | private var internalStopFormatFlag = false 20 | 21 | /** 22 | * Create a credit card formatter with no max length and a padding specified in pixels 23 | * 24 | * @param paddingPx padding in pixels unit 25 | */ 26 | 27 | constructor(paddingPx: Int) { 28 | setPaddingPx(paddingPx) 29 | } 30 | 31 | /** 32 | * Create a credit card formatter with no max length and a padding of 1 em (depends on text size). 33 | *

34 | * The padding is not automatically updated if the text size or typeface are changed in the textview). 35 | * 36 | * @param textView the widget you want to format 37 | */ 38 | 39 | constructor(textView: TextView) { 40 | setPaddingEm(textView, 1f) 41 | } 42 | 43 | /** 44 | * Create a credit card formatter with no max length and a padding specified in em (depends on text size). 45 | *

46 | * The padding is not automatically updated if the text size or typeface are changed in the textview). 47 | * 48 | * @param textView the widget you want to format 49 | * @param paddingEm padding in em unit (character size unit) 50 | */ 51 | 52 | constructor(textView: TextView, paddingEm: Float) { 53 | setPaddingEm(textView, paddingEm) 54 | } 55 | 56 | /** 57 | * Create a credit card formatter with no max length and a padding specified in SP Unit (depends on the scale applied to text). 58 | * 59 | * @param context any Context 60 | * @param paddingSp the padding in SP unit 61 | */ 62 | constructor(context: Context, paddingSp: Float) { 63 | setPaddingSp(context, paddingSp) 64 | } 65 | 66 | /** 67 | * Change the padding, do not take effect until next text change 68 | * 69 | * @param paddingPx padding in pixels unit 70 | */ 71 | fun setPaddingPx(paddingPx: Int) { 72 | this.paddingPx = paddingPx 73 | } 74 | 75 | /** 76 | * Change the padding, do not take effect until next text change 77 | * 78 | * @param textView the widget you want to format 79 | * @param em padding in em unit (character size unit) 80 | */ 81 | fun setPaddingEm(textView: TextView, em: Float) { 82 | val emSize = textView.paint.measureText("x") 83 | setPaddingPx((em * emSize).toInt()) 84 | } 85 | 86 | /** 87 | * Change the padding, do not take effect until next text change 88 | * 89 | * @param context any Context 90 | * @param paddingSp the padding in SP unit 91 | */ 92 | fun setPaddingSp(context: Context, paddingSp: Float) { 93 | setPaddingPx( 94 | TypedValue.applyDimension( 95 | TypedValue.COMPLEX_UNIT_SP, 96 | paddingSp, 97 | context.resources.displayMetrics 98 | ) 99 | .toInt() 100 | ) 101 | } 102 | 103 | /** 104 | * Change maxLength of the credit card number, does not take effect until next text change 105 | * 106 | * @param maxLength new max length 107 | */ 108 | fun setMaxLength(maxLength: Int) { 109 | this.maxLength = maxLength 110 | } 111 | 112 | override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {} 113 | 114 | override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {} 115 | 116 | override fun afterTextChanged(s: Editable?) { 117 | if (internalStopFormatFlag) { 118 | return 119 | } 120 | internalStopFormatFlag = true 121 | CreditCardFormatTextWatcher.formatCardNumber(s!!, paddingPx, maxLength) 122 | internalStopFormatFlag = false 123 | } 124 | 125 | /** 126 | * Format the provided widget card number (useful if you want to reformat it after changing padding) 127 | * 128 | * @param textView the widget containing the credit card number 129 | */ 130 | fun formatCardNumber(textView: TextView) { 131 | afterTextChanged(textView.editableText) 132 | } 133 | 134 | 135 | companion object { 136 | 137 | private const val NO_MAX_LENGTH = -1 138 | 139 | fun formatCardNumber(ccNumber: Editable, paddingPx: Int) { 140 | CreditCardFormatTextWatcher.formatCardNumber( 141 | ccNumber, 142 | paddingPx, 143 | CreditCardFormatTextWatcher.NO_MAX_LENGTH 144 | ) 145 | } 146 | 147 | fun formatCardNumber(ccNumber: Editable, paddingPx: Int, maxLength: Int) { 148 | val textLength = ccNumber.length 149 | // first remove any previous span 150 | val spans: Array = ccNumber.getSpans( 151 | 0, ccNumber.length, 152 | CreditCardFormatTextWatcher.PaddingRightSpan::class.java 153 | ) 154 | for (i in spans.indices) { 155 | ccNumber.removeSpan(spans[i]) 156 | } 157 | // then truncate to max length 158 | if (maxLength > 0 && textLength > maxLength - 1) { 159 | ccNumber.replace(maxLength, textLength, "") 160 | } 161 | // finally add margin spans 162 | for (i in 1..(textLength - 1) / 4) { 163 | val end = i * 4 164 | val start = end - 1 165 | val marginSPan = CreditCardFormatTextWatcher.PaddingRightSpan(paddingPx) 166 | ccNumber.setSpan(marginSPan, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE) 167 | } 168 | } 169 | } 170 | 171 | class PaddingRightSpan(private val mPadding: Int) : ReplacementSpan() { 172 | override fun getSize( 173 | paint: Paint, 174 | text: CharSequence, 175 | start: Int, 176 | end: Int, 177 | fm: FontMetricsInt? 178 | ): Int { 179 | val widths = FloatArray(end - start) 180 | paint.getTextWidths(text, start, end, widths) 181 | var sum = mPadding 182 | for (i in widths.indices) { 183 | sum += widths[i].toInt() 184 | } 185 | return sum 186 | } 187 | 188 | override fun draw( 189 | canvas: Canvas, 190 | text: CharSequence, 191 | start: Int, 192 | end: Int, 193 | x: Float, 194 | top: Int, 195 | y: Int, 196 | bottom: Int, 197 | paint: Paint 198 | ) { 199 | canvas.drawText(text, start, end, x, y.toFloat(), paint) 200 | } 201 | } 202 | } -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 20 | 21 | 24 | 25 | 28 | 29 | 38 | 39 | 44 | 45 | 46 | 47 | 57 | 58 | 65 | 66 | 67 | 68 | 74 | 75 | 87 | 88 | 94 | 95 | 96 | 97 | 109 | 110 | 117 | 118 | 119 | 120 | 130 | 131 | 140 | 141 | 157 | 158 |