La barra de progreso en Android se usa para mostrar el progreso de una tarea específica. Hay diferentes tipos de barras de progreso que se utilizan dentro de las aplicaciones de Android, como la barra de progreso circular, la barra de progreso horizontal y muchas más. En este artículo, veremos cómo crear una barra de progreso horizontal personalizada en Android usando Jetpack Compose
Implementación paso a paso
Paso 1: crea un nuevo proyecto en Android Studio
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Al elegir la plantilla, seleccione Actividad de composición vacía . Si no encuentra esta plantilla, intente actualizar Android Studio a la última versión. Demostramos la aplicación en Kotlin, así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.
Paso 2: Agregar color en el archivo Color.kt
Vaya a la aplicación > java > el nombre del paquete de su aplicación > ui.theme > archivo Color.kt y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle.
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)
Paso 3: trabajar con el archivo MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
package com.example.newcanaryproject
import android.content.Context
import android.hardware.Sensor
import android.hardware.SensorEvent
import android.hardware.SensorEventListener
import android.hardware.SensorManager
import android.icu.text.DateTimePatternGenerator.DisplayWidth
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.GridCells
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import coil.compose.rememberAsyncImagePainter
import com.example.newcanaryproject.ui.theme.*
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(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
// on below line we are specifying theme as scaffold.
Scaffold(
// in scaffold we are specifying 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 = "Custom Progress Bar",
// 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 custom progress
// bar method to display our progress bar.
customProgressBar()
}
}
}
}
}
}
// on below line we are creating a function for custom progress bar.
@Composable
fun customProgressBar() {
// in this method we are creating a column
Column(
// in this column we are specifying modifier to
// align the contet within the column
// to center of the screen.
modifier = Modifier
.fillMaxSize()
.fillMaxWidth()
.fillMaxHeight(),
// on below line we are specifying horizontal
// and vertical alignment for the content of our column
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
// in this column we are creating a variable
// for the progress of our progress bar.
var progress: Int = 75;
// on the below line we are creating a box.
Box(
// inside this box we are adding a modifier
// to add rounded clip for our box with
// rounded radius at 15
modifier = Modifier
.clip(RoundedCornerShape(15.dp))
// on below line we are specifying
// height for the box
.height(30.dp)
// on below line we are specifying
// background color for box.
.background(Color.Gray)
// on below line we are
// specifying width for the box.
.width(300.dp)
) {
// in this box we are creating one more box.
Box(
// on below line we are adding modifier to this box.
modifier = Modifier
// on below line we are adding clip \
// for the modifier with round radius as 15 dp.
.clip(RoundedCornerShape(15.dp))
// on below line we are
// specifying height as 30 dp
.height(30.dp)
// on below line we are adding background
// color for our box as brush
.background(
// on below line we are adding brush for background color.
Brush.horizontalGradient(
// in this color we are specifying a gradient
// with the list of the colors.
listOf(
// on below line we are adding two colors.
Color(0xFF0F9D58),
Color(0xF055CA4D)
)
)
)
// on below line we are specifying width for the inner box
.width(300.dp * progress / 100)
)
// on below line we are creating a text for our box
Text(
// in text we are displaying a text as progress bar value.
text = "$progress %",
// on below line we are adding
// a modifier to it as center.
modifier = Modifier.align(Alignment.Center),
// on below line we are adding
// font size to it.
fontSize = 15.sp,
// on below line we are adding
// font weight as bold.
fontWeight = FontWeight.Bold,
// on below line we are
// specifying color for our text
color = Color.White
)
}
}
}
Ahora ejecute su aplicación para ver el resultado.
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA