A prototype of an animation I helped out on, see: https://twitter.com/crafty/status/1073612862139064332

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<!--
  Copyright (c) 2018 Google Inc.
  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
  in compliance with the License. You may obtain a copy of the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software distributed under the License
  is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  or implied. See the License for the specific language governing permissions and limitations under
  the License.
  -->

<resources>

    <attr name="showbizViewStyle" format="reference" />

    <declare-styleable name="ShowbizView">
        <attr name="circleStroke" format="dimension" />
        <attr name="circleColor" format="color" />
        <attr name="waveStroke" format="dimension" />
        <attr name="waveColor" format="color" />
        <attr name="waveGap" format="dimension" />
        <attr name="highlightColor" format="color" />
        <attr name="android:text" />
        <attr name="android:textSize" />
        <attr name="android:textColor" />
    </declare-styleable>

</resources>

ShowbizView.kt

/*
 *  Copyright 2018 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the
 * License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */
 
package com.example.nikeshowbiz

import android.animation.ValueAnimator
import android.animation.ValueAnimator.INFINITE
import android.animation.ValueAnimator.RESTART
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.CornerPathEffect
import android.graphics.Matrix
import android.graphics.Paint
import android.graphics.Paint.ANTI_ALIAS_FLAG
import android.graphics.Paint.Style.STROKE
import android.graphics.Path
import android.graphics.PointF
import android.graphics.PorterDuff.Mode.CLEAR
import android.graphics.PorterDuff.Mode.SRC_IN
import android.graphics.PorterDuffXfermode
import android.graphics.RadialGradient
import android.graphics.Shader.TileMode.CLAMP
import android.text.TextPaint
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import android.view.animation.LinearInterpolator
import androidx.core.content.res.getColorOrThrow
import androidx.core.content.res.getDimensionOrThrow
import kotlin.LazyThreadSafetyMode.NONE

class ShowbizView @JvmOverloads constructor(
        context: Context,
        attrs: AttributeSet? = null,
        defStyleAttr: Int = R.attr.showbizViewStyle
) : View(context, attrs, defStyleAttr) {

    private val textPaint: TextPaint

    private val circlePaint: Paint

    private val wavePaint: Paint

    private val waveGap: Float

    private val wavePath = Path()

    private val text: CharSequence?

    private val highlightPaint = Paint(ANTI_ALIAS_FLAG).apply {
        // This mode means that the highlight only applies to areas already touched
        // on the canvas i.e. only on the waves
        xfermode = PorterDuffXfermode(SRC_IN)
    }

    private val highlightMatrix = Matrix()

    private val highlightColor: Int

    private val clearPaint = Paint(ANTI_ALIAS_FLAG).apply {
        // Used to 'punch out' waves from the center circle
        xfermode = PorterDuffXfermode(CLEAR)
    }

    private var maxRadius = 0f

    private var center = PointF(0f, 0f)

    private var circleRadius = 0f

    private var waveRadiusOffset = 0f
        set(value) {
            field = value
            postInvalidateOnAnimation()
        }

    init {
        val a = context.obtainStyledAttributes(attrs, R.styleable.ShowbizView, defStyleAttr, 0)
        circlePaint = Paint(ANTI_ALIAS_FLAG).apply {
            color = a.getColorOrThrow(R.styleable.ShowbizView_circleColor)
            strokeWidth = a.getDimensionOrThrow(R.styleable.ShowbizView_circleStroke)
            style = STROKE
        }
        wavePaint = Paint(ANTI_ALIAS_FLAG).apply {
            color = a.getColorOrThrow(R.styleable.ShowbizView_waveColor)
            strokeWidth = a.getDimensionOrThrow(R.styleable.ShowbizView_waveStroke)
            style = STROKE
        }
        text = a.getText(R.styleable.ShowbizView_android_text)
        textPaint = TextPaint(ANTI_ALIAS_FLAG).apply {
            textSize = a.getDimensionOrThrow(R.styleable.ShowbizView_android_textSize)
            color = a.getColorOrThrow(R.styleable.ShowbizView_android_textColor)
        }
        waveGap = a.getDimensionOrThrow(R.styleable.ShowbizView_waveGap)
        highlightColor = a.getColorOrThrow(R.styleable.ShowbizView_highlightColor)
        a.recycle()
    }

    private val waveAnimator by lazy(NONE) {
        ValueAnimator.ofFloat(0f, waveGap).apply {
            addUpdateListener {
                waveRadiusOffset = it.animatedValue as Float
            }
            duration = 1500L
            repeatMode = RESTART
            repeatCount = INFINITE
            interpolator = LinearInterpolator()
        }
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        center.set(w / 2f, h / 2f)

        // `* 1.2` because the rounding path effect 'shrinks' the path, so need a larger radius
        maxRadius = Math.hypot(center.x.toDouble(), center.y.toDouble()).toFloat() * 1.2f
        circleRadius = w / 4f

        // (Fake) cubic gradient on the highlight
        val stops = 5
        val colorStops = IntArray(stops)
        for (i in 0 until stops) {
            val x = i * 1f / (stops - 1)
            val opacity = Math.pow(x.toDouble(), 3.0).toFloat().coerceIn(0.3f, 1f)
            colorStops[stops - 1 - i] =
                    modifyAlpha(highlightColor, opacity * (Color.alpha(highlightColor) / 255f))
        }
        highlightPaint.shader = RadialGradient(
                center.x, center.y, maxRadius, colorStops, null, CLAMP
        )
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        waveAnimator.start()
    }

    override fun onDetachedFromWindow() {
        waveAnimator.cancel()
        super.onDetachedFromWindow()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        // Waves
        var radius = circleRadius + waveRadiusOffset
        while (radius < maxRadius) {

            // How far 'out' this wave it
            val offset = radius / maxRadius

            // How wiggly should it be
            // This value should be capped at 1 but we use a larger max so that it forms a circle
            // before reaching the extremities
            val pointDelta = lerp(0.75f, 1.05f, offset)

            // Fade the alpha based on distance
            // This will be composed with the highlight
            val alpha = lerp(1f, 0.4f, offset)

            // Tend toward a circle further out
            val rounding = lerp(radius / 2f, radius * 10f, offset)

            val path = createStarPath(14, radius, pointDelta, wavePath)

            // Unfortunately path effects are immutable, so have to re-create each time.
            // Should probably cache these but ART should save us here.
            wavePaint.pathEffect = CornerPathEffect(rounding)
            wavePaint.color = modifyAlpha(wavePaint.color, alpha)
            canvas.drawPath(path, wavePaint)
            radius += waveGap
        }

        // Now clear the inner circle, this is more performant than using a non-rectangular clip
        // BUT it prevents us using a background on the view, have to move it to a parent/sibling.
        canvas.drawCircle(center.x, center.y, circleRadius, clearPaint)

        // Highlight
        canvas.drawPaint(highlightPaint)

        // Outer circle
        canvas.drawCircle(center.x, center.y, circleRadius, circlePaint)

        // Inner circle
        canvas.drawCircle(
                center.x, center.y,
                circleRadius - textPaint.textSize * 2f,
                circlePaint
        )

        // Circular text
        text?.let { t ->
            val checkpoint = canvas.save()
            val angle = 360f / t.length
            val textHalfWidth = textPaint.measureText(text, 0, 1) / 2f

            // Start text from 9 o'clock
            canvas.rotate(-90f, center.x, center.y)
            val textX = center.x - textHalfWidth
            val textY = center.y - circleRadius + textPaint.textSize * 1.45f
            (0 until t.length).forEach { i ->
                if (i > 0) canvas.rotate(angle, center.x, center.y)
                canvas.drawText(t, i, i + 1, textX, textY, textPaint)
            }
            canvas.restoreToCount(checkpoint)
        }
    }

    // Didn't hook up the accelerometer so test the highlight using touch
    override fun onTouchEvent(event: MotionEvent): Boolean {
        val handled = super.onTouchEvent(event)
        when (event.action) {
            MotionEvent.ACTION_DOWN,
            MotionEvent.ACTION_MOVE,
            MotionEvent.ACTION_UP,
            MotionEvent.ACTION_CANCEL -> {
                updateHighlight(event.x, event.y)
                return true
            }
        }
        return handled
    }

    /**
     * Creates a star shaped path.
     *
     * [pointDelta] Radius difference between inner and outer star points.
     */
    private fun createStarPath(
            points: Int,
            radius: Float,
            pointDelta: Float,
            path: Path = Path()
    ): Path {
        path.reset()
        val angle = 2.0 * Math.PI / points
        val startAngle = Math.PI / 2.0 + Math.toRadians(360.0 / (2 * points))
        path.moveTo(
                center.x + (radius * Math.cos(startAngle)).toFloat(),
                center.y + (radius * Math.sin(startAngle)).toFloat()
        )
        for (i in 1 until points) {
            val r = if (i % 2 == 1) {
                pointDelta.coerceIn(0f, 1f) * radius
            } else {
                radius
            }
            path.lineTo(
                    center.x + (r * Math.cos(startAngle - angle * i)).toFloat(),
                    center.y + (r * Math.sin(startAngle - angle * i)).toFloat()
            )
        }
        path.close()
        return path
    }

    private fun updateHighlight(x: Float, y: Float) {
        highlightMatrix.setTranslate(x - center.x, y - center.y)
        highlightPaint.shader.setLocalMatrix(highlightMatrix)
        postInvalidateOnAnimation()
    }

    private fun lerp(a: Float, b: Float, t: Float): Float {
        return a + (b - a) * t
    }

    private fun modifyAlpha(color: Int, alpha: Float): Int {
        return color and 0x00ffffff or ((alpha * 255).toInt() shl 24)
    }
}

styles.xml

<?xml version="1.0" encoding="utf-8"?>
<!--
  Copyright (c) 2018 Google Inc.
  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
  in compliance with the License. You may obtain a copy of the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software distributed under the License
  is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  or implied. See the License for the specific language governing permissions and limitations under
  the License.
  -->

<resources>
    <style name="Widget.NikeShowbiz.ShowbizView" parent="@android:style/Widget">
        <item name="circleStroke">2dp</item>
        <item name="circleColor">#fff</item>
        <item name="waveStroke">2dp</item>
        <item name="waveColor">#fff</item>
        <item name="waveGap">32dp</item>
        <item name="highlightColor">@color/highlight</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#fff</item>
    </style>

</resources>