Alerting hotdog menu icon

MainActivity.kt

/*
 * Copyright 2021 Google LLC
 *
 * 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
 *
 *     https://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.android.updatedots

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.*
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.lerp
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.android.updatedots.ui.theme.UpdateDotsTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            UpdateDotsTheme {
                Surface(color = Color.White) {
                    Dots()
                }
            }
        }
    }
}

@Composable
fun Dots() {
    val infiniteTransition = rememberInfiniteTransition()
    val bottomMultiplier by infiniteTransition.animateMultiplier(0, 200, 800, 1000)
    val middleMultiplier by infiniteTransition.animateMultiplier(150, 350, 950, 1150)
    val topMultiplier by infiniteTransition.animateMultiplier(300, 500, 1100, 1300)
    Canvas(modifier = Modifier.size(200.dp)) {
        drawExpandingDot(multiplier = topMultiplier, yOffset = 30.dp)
        drawExpandingDot(multiplier = middleMultiplier, yOffset = 80.dp)
        drawExpandingDot(multiplier = bottomMultiplier, yOffset = 130.dp)
    }
}

@Composable
private fun InfiniteTransition.animateMultiplier(
    startExpand: Int,
    stopExpand: Int,
    startContract: Int,
    stopContract: Int
) = animateFloat(
    initialValue = 0f,
    targetValue = 0f,
    animationSpec = infiniteRepeatable(
        animation = keyframes {
            durationMillis = 4000
            0f at startExpand
            1f at stopExpand
            1f at startContract
            0f at stopContract
        },
        repeatMode = RepeatMode.Restart
    )
)

fun DrawScope.drawExpandingDot(multiplier: Float, yOffset: Dp) {
    val topWidth = 40 + multiplier * 60
    val color = lerp(Color.DarkGray, Color(0xffb53333), multiplier)
    drawRoundRect(
        color,
        size = Size(topWidth.dp.toPx(), 40.dp.toPx()),
        topLeft = Offset((100 - topWidth / 2).dp.toPx(), yOffset.toPx()),
        cornerRadius = CornerRadius(20.dp.toPx())
    )
}