Android developed the button with background change and countdown after getting the SMS captcha

  • 2020-12-13 19:07:00
  • OfStack

Currently, more and more app in registration or corresponding operation, requirements for message authentication code, after click on the button for message authentication code, is a countdown, countdown to the 120 S, for example, during the period of the countdown, the button background change and the countdown, when after the end of the countdown, if you don't have access to the authentication code, you can click again.

The code is as follows:


VerCodeTimer mVerCodeTimer=(Button) findViewById(R.id.login_get_ver_code);
private class VerCodeTimer extends CountDownTimer {
    private int seconds;
    private int interval;
    //millisInFuture Set the total length of the countdown for you, for example 60 Seconds is set to 60000
    //countDownInterval Set time intervals for you, for example 1 As for the 1 seconds , Customize as needed. 
    public VerCodeTimer(long millisInFuture, long countDownInterval) {
      super(millisInFuture, countDownInterval);
      seconds = (int) (millisInFuture / 1000);
      interval= (int) (countDownInterval/1000);
    }
    // Each operation you perform at a specified time interval 
    @Override
    public void onTick(long millisUntilFinished) {
      getVerCodeButton.setText((seconds-interval) + " Retrieve after seconds ");
    }
    // Operation done at the end of the countdown, ↓ 
    @Override
    public void onFinish() {
      getVerCodeButton.setTextSize(10);
      getVerCodeButton.setText(" Get the captcha again ");
      getVerCodeButton.setClickable(true);
      getVerCodeButton.setBackgroundResource(R.drawable.login_get_ver_code_before_bg);
    }
  }
  
 @Override
  public void onBackPressed() {
    if (mVerCodeTimer != null)
      mVerCodeTimer.cancel();
    super.onBackPressed();
  } 

When used:


getVerCodeButton.setTextSize(11);
 getVerCodeButton.setClickable(false);
 getVerCodeButton.setBackgroundResource(R.drawable.login_get_ver_code_ago_bg);
 mVerCodeTimer = new VerCodeTimer(60000, 1000);
 mVerCodeTimer.start(); 

login_edit_normal_bg. xml:


<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle"
  android:useLevel="false">
  <!--  Background fill color value  -->
  <solid android:color="#6c948b" />
  <!-- radius The higher the value, the more circular it is  -->
  <corners android:radius="10dip" />
  <!--  The fillet image is filled inside 4 The size of the week   , will squeeze the interior layout in this way view -->
  <padding
    android:bottom="10dip"
    android:left="10dip"
    android:right="10dip"
    android:top="10dip" />
</shape> 

login_edit_passed_bg.xml:


<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle"
  android:useLevel="false">
  <!--  Background fill color value  -->
  <solid android:color="#509989" />
  <!-- radius The higher the value, the more circular it is  -->
  <corners android:radius="10dip" />
  <!--  The fillet image is filled inside 4 The size of the week   , will squeeze the interior layout in this way view -->
  <padding
    android:bottom="10dip"
    android:left="10dip"
    android:right="10dip"
    android:top="10dip" />
</shape>

Related articles: