第二篇 根据识别的结果 我们可以访问一些网络 先写一个水波纹UI

<com.example.admin.tim.UI.FingerWaveView

    android:id="@+id/view_custom"
    android:layout_width="140dp"
    android:layout_height="140dp"
    android:layout_centerInParent="true" />

<ImageView
    android:id="@+id/iv"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_centerInParent="true"
    android:src="@mipmap/ic_finger_status" />


<TextView
    android:layout_centerHorizontal="true"
    android:layout_marginTop="20dp"
    android:id="@+id/tv_finger_status"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/iv"
    android:text="我是个可爱的麦克风"
    android:textColor="#fd7a72"
    android:textSize="12sp" />

当然ImageView的图片可以自定义

public class FingerWaveView extends View {

    private ImageView image;
    private TextView textView;
    private View view;
    private int start;
    private Paint mPaint;

    // 中心点x 坐标, 和 Y 坐标
    private int mCenterX;
    private int mCenterY;

    // 开始绘制的圆的半径 : 默认 183dp
    private int mStartRadius;

    // 结束绘制的圆的半径
    private int mEndRadius;

    // 动画执行的时间
    private final long mDuration = 1000;


    // 变化时的圆的半径,  这个是变值...
    private int mCurrentRadius;

    // 圆环的半径, =  最大圆的半径  -  最小圆的半径(开始是的半径)
    private int mDurationWidth;

    private final int mStartAlpha = 100;

    private ValueAnimator mValueAnimator;
    public viewChangeListener viewChangeListener=new viewChangeListener() {
        @Override
        public void viewStart() {
            mStartRadius=start;
            view.setVisibility(VISIBLE);
            start();
        }
        @Override
        public void viewEnd() {
            stop();
            view.setVisibility(GONE);
        }
    };


    public FingerWaveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.FingerCaveImageView);
         mStartRadius = (int)(ta.getDimension(R.styleable.FingerCaveImageView_cave_radius,-1f)+0.5f);
          start=mStartRadius;
        init();
    }
    // 初始化操作...
    private void init() {
        mPaint = new Paint();
        mPaint.setColor(ContextCompat.getColor(getContext(), R.color.wave_color));
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));
        // 设置锯齿
        mPaint.setAntiAlias(true);

        // 创建一个属性动画,  从0 过度到 1
        mValueAnimator = ValueAnimator.ofFloat(0, 1.0f);
        // 设置时长
        mValueAnimator.setDuration(mDuration);
        // 重复次数为无限...
        mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);

        // 线性插值器
        mValueAnimator.setInterpolator(new LinearInterpolator());

        //初始化
        image=(ImageView)findViewById(R.id.iv);
        textView=(TextView)findViewById(R.id.tv_finger_status);

        // 监听过程, 在过程中处理参数变化
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) valueAnimator.getAnimatedValue();
                mCurrentRadius = (int) (mStartRadius + mDurationWidth * value + 0.5);
                // 开始重新绘制
                postInvalidate();
            }
        });
        view=(View)findViewById(R.id.view_custom);
        view.setVisibility(GONE);
        ((MainActivity)getContext()).getListener(viewChangeListener);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mCenterX = getMeasuredWidth() / 2;
        mCenterY = getMeasuredHeight() / 2;

        // 结束 绘制圆的半径为控件总宽度 高度, 的一般
        mEndRadius = Math.min(getMeasuredWidth(), getMeasuredHeight()) / 2;

        mDurationWidth = mEndRadius - mStartRadius;
    }

    @Override
    protected void onDraw(Canvas canvas) {

        // 绘制第一个圆
        int secondRadius = mCurrentRadius + (int) (mDurationWidth / 2.0f + 0.5f);
        if (secondRadius > mEndRadius) {
            secondRadius = mStartRadius + secondRadius - mEndRadius;
        }
        int secondAlpha = (int) (mStartAlpha * (1 - (secondRadius - mStartRadius) * 1.0f / mDurationWidth) + 0.5);
        mPaint.setAlpha(secondAlpha);
        canvas.drawCircle(mCenterX, mCenterY, secondRadius, mPaint);


        // 绘制第三个圆
        int thirdRadius = mCurrentRadius + (int) (mDurationWidth / 2.0f * 2 + 0.5f);
        if (thirdRadius > mEndRadius) {
            thirdRadius = mStartRadius + thirdRadius - mEndRadius;
        }
        int thirdAlpha = (int) (mStartAlpha * (1 - (thirdRadius - mStartRadius) * 1.0f / mDurationWidth) + 0.5);
        mPaint.setAlpha(thirdAlpha);
        canvas.drawCircle(mCenterX, mCenterY, thirdRadius, mPaint);
    }

    public void stop() {
        mValueAnimator.end();
    }

    public void start() {
        mValueAnimator.start();
    }
}
关于Listener
在MainActivity中
private com.example.admin.tim.interfacee.viewChangeListener viewChangeListener;
public void getListener(viewChangeListener viewChangeListener){
    this.viewChangeListener=viewChangeListener;
}
((MainActivity)getContext()).getListener(viewChangeListener);