Card Details
Download MaterialX 2.8
Get the Full Android Source Code for all the listed Layouts and more.
Buy Now for $25Layout Screenshot

package com.material.components.activity.payment;
import android.os.Bundle;
import com.google.android.material.textfield.TextInputEditText;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.TextView;
import com.material.components.R;
import com.material.components.utils.Tools;
public class PaymentCardDetails extends AppCompatActivity {
private TextView card_number;
private TextView card_expire;
private TextView card_cvv;
private TextView card_name;
private TextInputEditText et_card_number;
private TextInputEditText et_expire;
private TextInputEditText et_cvv;
private TextInputEditText et_name;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_payment_card_details);
card_number = (TextView) findViewById(R.id.card_number);
card_expire = (TextView) findViewById(R.id.card_expire);
card_cvv = (TextView) findViewById(R.id.card_cvv);
card_name = (TextView) findViewById(R.id.card_name);
et_card_number = (TextInputEditText) findViewById(R.id.et_card_number);
et_expire = (TextInputEditText) findViewById(R.id.et_expire);
et_cvv = (TextInputEditText) findViewById(R.id.et_cvv);
et_name = (TextInputEditText) findViewById(R.id.et_name);
et_card_number.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int count) {
if (charSequence.toString().trim().length() == 0) {
card_number.setText("**** **** **** ****");
} else {
String number = Tools.insertPeriodically(charSequence.toString().trim(), " ", 4);
card_number.setText(number);
}
}
@Override
public void afterTextChanged(Editable editable) {
}
});
et_expire.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int count) {
if (charSequence.toString().trim().length() == 0) {
card_expire.setText("MM/YY");
} else {
String exp = Tools.insertPeriodically(charSequence.toString().trim(), "/", 2);
card_expire.setText(exp);
}
}
@Override
public void afterTextChanged(Editable editable) {
}
});
et_cvv.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int count) {
if (charSequence.toString().trim().length() == 0) {
card_cvv.setText("***");
} else {
card_cvv.setText(charSequence.toString().trim());
}
}
@Override
public void afterTextChanged(Editable editable) {
}
});
et_name.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int count) {
if (charSequence.toString().trim().length() == 0) {
card_name.setText("Your Name");
} else {
card_name.setText(charSequence.toString().trim());
}
}
@Override
public void afterTextChanged(Editable editable) {
}
});
initToolbar();
}
private void initToolbar() {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.ic_menu);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Credit Card");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Tools.setSystemBarColor(this, R.color.grey_1000);
}
}