Плавающая кнопка действия в Android с помощью Jetpack Compose

Опубликовано: 9 Января, 2023

Плавающая кнопка действия добавлена в приложение для Android, чтобы выполнять некоторые важные действия в приложении для Android. Они реализованы в пользовательском интерфейсе приложения Android для некоторых основных действий в приложении. Существуют различные типы плавающих кнопок действий, такие как простые, квадратные и расширенные плавающие кнопки действий. В этой статье мы рассмотрим, как реализовать все различные типы плавающих кнопок действий в Android с помощью Jetpack Compose . Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.

Пошаговая реализация

Шаг 1. Создайте новый проект в Android Studio.

Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать/запустить новый проект в Android Studio». При выборе шаблона выберите «Пустая активность создания» . Если вы не нашли этот шаблон, попробуйте обновить Android Studio до последней версии. Мы продемонстрировали приложение на Kotlin, поэтому убедитесь, что вы выбрали Kotlin в качестве основного языка при создании нового проекта.

Шаг 2: Работа с файлом Color.kt

Перейдите к файлу app>java>имя пакета вашего приложения>ui.theme>Color.kt и добавьте в него приведенный ниже код. В код добавлены комментарии для более подробного ознакомления.

Kotlin




package com.example.newcanaryproject.ui.theme
  
import androidx.compose.ui.graphics.Color
  
val Purple200 = Color(0xFF0F9D58)
val Purple500 = Color(0xFF0F9D58)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
  
// on below line we are adding different colors.
val greenColor = Color(0xFF0F9D58)

Шаг 3: Работа с файлом MainActivity.kt
Перейдите к файлу MainActivity.kt и обратитесь к следующему коду. Ниже приведен код файла MainActivity.kt . Комментарии добавляются внутри кода, чтобы понять код более подробно.
Kotlin



package com.example.newcanaryproject
  
import android.app.Activity
import android.content.Context
import android.os.Bundle
import android.widget.Chronometer
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.*
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import com.example.newcanaryproject.ui.theme.*
import dev.shreyaspatil.easyupipayment.EasyUpiPayment
import dev.shreyaspatil.easyupipayment.listener.PaymentStatusListener
import dev.shreyaspatil.easyupipayment.model.PaymentApp
import dev.shreyaspatil.easyupipayment.model.TransactionDetails
import java.text.SimpleDateFormat
import java.util.*
  
class MainActivity : ComponentActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NewCanaryProjectTheme {
                // on below line we are specifying background color for our application
                Surface(
                    // on below line we are specifying modifier and color for our app
                    modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background
                ) {
  
                    // on the below line we are specifying the theme as the scaffold.
                    Scaffold(
  
                        // in scaffold we are specifying the top bar.
                        topBar = {
  
                            // inside top bar we are specifying background color.
                            TopAppBar(backgroundColor = greenColor,
  
                                // along with that we are specifying title for our top bar.
                                title = {
  
                                    // in the top bar we are specifying tile as a text
                                    Text(
  
                                        // on below line we are specifying
                                        // text to display in top app bar.
                                        text = "Floating Action Buttons in Android",
  
                                        // on below line we are specifying
                                        // modifier to fill max width.
                                        modifier = Modifier.fillMaxWidth(),
  
                                        // on below line we are specifying
                                        // text alignment.
                                        textAlign = TextAlign.Center,
  
                                        // on below line we are specifying
                                        // color for our text.
                                        color = Color.White
                                    )
                                })
                        }) {
                        // on below line we are 
                        // calling floating action buttons 
                        // to display our fabs.
                        floatingActionButtons()
                    }
                }
            }
        }
    }
}
  
@Composable
fun floatingActionButtons() {
  
    val ctx = LocalContext.current
  
    // on the below line we are creating a column.
    Column(
        // on below line we are adding a modifier to it
        // and setting max size, max height and max width
        modifier = Modifier
            .fillMaxSize()
            .fillMaxHeight()
            .fillMaxWidth(),
  
        // on below line we are adding vertical
        // arrangement and horizontal alignment.
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
  
        // on below line we are creating a text
        Text(
            // on below line we are specifying text as
            // Session Management in Android.
            text = "Floating Action Buttons in Android
Jetpack Compose",
  
            // on below line we are specifying text color.
            color = greenColor,
  
            // on below line we are specifying font family
            fontFamily = FontFamily.Default,
  
            // on below line we are adding font weight
            // and alignment for our text
            fontWeight = FontWeight.Bold, textAlign = TextAlign.Center
        )
        // on below line adding a spacer
        Spacer(modifier = Modifier.height(20.dp))
  
        // on below line we are creating 
        // a simple floating action button
        FloatingActionButton(
            // on below line we are adding on click for our fab
            onClick = {
                Toast.makeText(ctx, "Simple Floating Action Button", Toast.LENGTH_SHORT).show()
            },
            // on below line we are adding 
            // background color for our button
            backgroundColor = greenColor,
            // on below line we are adding 
            // color for our content of fab.
            contentColor = Color.White
        ) {
            // on below line we are
            // adding icon for button.
            Icon(Icons.Filled.Add, "")
        }
  
        // on below line adding a spacer
        Spacer(modifier = Modifier.height(20.dp))
  
        // on below line we are creating
        // a square floating action button
        FloatingActionButton(
            // on below line we are
            // adding on click for our fab
            onClick = {
                Toast.makeText(ctx, "Square Floating Action Button", Toast.LENGTH_SHORT).show()
            },
            // on below line we are 
            // specifying shape for our button
            shape = RectangleShape,
            // on below line we are
            // adding background color.
            backgroundColor = greenColor,
            // on below line we are
            // adding content color.
            contentColor = Color.White
        ) {
            // on below line we are 
            // adding icon for fab.
            Icon(Icons.Filled.Add, "")
        }
  
        // on below line adding a spacer
        Spacer(modifier = Modifier.height(20.dp))
  
        // on below line we are creating
        // an extended floating action button.
        ExtendedFloatingActionButton(
            // on below line we are setting text for our fab
            text = { Text(text = "Extended FAB") },
            // on below line we are adding click listener.
            onClick = {
                Toast.makeText(ctx, "Extended Floating Action Button", Toast.LENGTH_SHORT).show()
            },
            // on below line adding 
            // a background color.
            backgroundColor = greenColor,
            // on below line we are 
            // adding a content color.
            contentColor = Color.White,
            // on below line we are 
            // adding icon for our fab
            icon = { Icon(Icons.Filled.Add, "") }
        )
    }
}
Теперь запустите ваше приложение, чтобы увидеть результат.
Выход:

            

                            

                    
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ