Friday, June 10, 2022
HomeWordPress DevelopmentMovement Structure Button in Android Jetpack Compose

Movement Structure Button in Android Jetpack Compose


package deal com.instance.newcanaryproject

  

import android.app.Exercise

import android.content material.Context

import android.content material.Intent

import android.graphics.Typeface

import android.os.Bundle

  

import android.speech.RecognizerIntent

import android.speech.SpeechRecognizer

import android.view.ViewGroup

import android.widget.LinearLayout

import android.widget.Toast

import androidx.exercise.ComponentActivity

import androidx.exercise.compose.setContent

import androidx.annotation.Dimension.DP

import androidx.compose.animation.Crossfade

import androidx.compose.animation.core.animateFloatAsState

import androidx.compose.animation.core.tween

import androidx.compose.basis.Picture

import androidx.compose.basis.structure.*

import androidx.compose.materials.*

import androidx.compose.materials.icons.Icons

import androidx.compose.materials.icons.stuffed.Mic

import androidx.compose.runtime.*

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.Shade

import androidx.compose.ui.graphics.toArgb

import androidx.compose.ui.structure.layoutId

import androidx.compose.ui.platform.LocalContext

import androidx.compose.ui.res.dimensionResource

import androidx.compose.ui.res.painterResource

import androidx.compose.ui.textual content.TextStyle

import androidx.compose.ui.textual content.font.FontFamily

import androidx.compose.ui.textual content.font.FontStyle

import androidx.compose.ui.textual content.model.TextAlign

import androidx.compose.ui.unit.*

import androidx.compose.ui.viewinterop.AndroidView

import androidx.constraintlayout.compose.ConstraintSet

import androidx.constraintlayout.compose.MotionLayout

import com.instance.newcanaryproject.ui.theme.*

import com.github.mikephil.charting.charts.PieChart

import com.github.mikephil.charting.elements.Description

import com.github.mikephil.charting.elements.Legend

import com.github.mikephil.charting.knowledge.PieData

import com.github.mikephil.charting.knowledge.PieDataSet

import com.github.mikephil.charting.knowledge.PieEntry

import org.intellij.lang.annotations.JdkConstants.HorizontalAlignment

import java.util.*

  

class MainActivity : ComponentActivity() {

  

    override enjoyable onCreate(savedInstanceState: Bundle?) {

        tremendous.onCreate(savedInstanceState)

        setContent {

            NewCanaryProjectTheme {

                

                

                Floor(

                    modifier = Modifier.fillMaxSize(),

                    shade = MaterialTheme.colours.background

                ) {

                    

                    Scaffold(

                        

                        topBar = {

                            

                            TopAppBar(backgroundColor = greenColor,

                                

                                title = {

                                    

                                    Textual content(

                                        

                                        

                                        textual content = "MotionLayout Button",

                                          

                                        

                                        

                                        modifier = Modifier.fillMaxWidth(),

                                          

                                        

                                        

                                        textAlign = TextAlign.Heart,

                                          

                                        

                                        

                                        shade = Shade.White

                                    )

                                }

                            )

                        }

                    ) {

                        

                        Field(

                            

                            

                            modifier = Modifier

                                .fillMaxSize(),

                             

                            

                            contentAlignment = Alignment.Heart,

                        ) {

                            

                            

                            MotionLayoutButton()

                        }

                    }

                }

            }

        }

    }

}

  

@OptIn(ExperimentalUnitApi::class)

@Composable

enjoyable MotionLayoutButton() {

    

    var animateButton by bear in mind { mutableStateOf(false) }

    

    val buttonAnimationProgress by animateFloatAsState(

         

        

        targetValue = if (animateButton) 1f else 0f,

          

        

        

        animationSpec = tween(1000)

    )

  

    

    MotionLayout(

        

        

        

        

        ConstraintSet(

            """ {

                

                

                button1: { 

                  width: "unfold",

                  peak: 120,

                  begin: ['parent', 'start', 16],

                  finish: ['parent', 'end', 16],

                  prime: ['parent', 'top', 0]

                },

                

                

                button2: { 

                  width: "unfold",

                  peak: 120,

                  begin: ['parent', 'start', 16],

                  finish: ['parent', 'end', 16],

                  prime: ['button1', 'bottom', 16]

                }

            } """

        ),

  

        

        

        ConstraintSet(

            """ {

                

                

                button1: { 

                  width: 150,

                  peak: 120,

                  begin: ['parent', 'start', 30],

                  finish: ['button2', 'start', 10]

                },

                

                

                button2: { 

                  width: 150,

                  peak: 120,

                  begin: ['button1', 'end', 10],

                  finish: ['parent', 'end', 30]

                }

            } """

        ),

        

        

        progress = buttonAnimationProgress,

        

        

        modifier = Modifier

            .fillMaxWidth()

            .wrapContentHeight()

    ) {

        

        Button(

            

            onClick = {

                

                

                animateButton = !animateButton

            },

            

            

            modifier = Modifier.layoutId("button1")

        ) {

            

            

            Column(

                

                

                modifier = Modifier

                    .padding(3.dp)

                    .fillMaxWidth()

                    .fillMaxHeight(),

                

                

                verticalArrangement = Association.Heart,

                horizontalAlignment = Alignment.CenterHorizontally

            ) {

                

                Picture(

                      

                    

                    

                    painter = painterResource(id = R.drawable.python),

                      

                    

                    

                    contentDescription = "Python",

                      

                    

                    

                    modifier = Modifier

                        .peak(60.dp)

                        .width(60.dp)

                )

                

                Spacer(modifier = Modifier.peak(5.dp))

                  

                

                

                Textual content(

                    textual content = "Python",

                    shade = Shade.White,

                    fontSize = TextUnit(worth = 18F, kind = TextUnitType.Sp)

                )

            }

        }

  

        

        Button(

            onClick = {

                

                

                animateButton = !animateButton

            },

            

            modifier = Modifier.layoutId("button2")

        ) {

            Column(

                

                

                modifier = Modifier

                    .padding(3.dp)

                    .fillMaxWidth()

                    .fillMaxHeight(),

                

                

                verticalArrangement = Association.Heart,

                horizontalAlignment = Alignment.CenterHorizontally

            ) {

                

                Picture(

                    

                    

                    painter = painterResource(id = R.drawable.js),

                      

                    

                    

                    contentDescription = "Javascript",

                      

                    

                    

                    modifier = Modifier

                        .peak(60.dp)

                        .width(60.dp)

                )

                

                Spacer(modifier = Modifier.peak(5.dp))

                  

                

                

                Textual content(

                    textual content = "JavaScript",

                    shade = Shade.White,

                    fontSize = TextUnit(worth = 18F, kind = TextUnitType.Sp)

                )

  

            }

        }

    }

}

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments