TopAppBar es similar al widget Action Bar en Android. Este es uno de los componentes más importantes de la interfaz de usuario en Android. La barra de acción se usa para representar el nombre de la aplicación y los elementos de acción en Android. En este artículo, veremos la implementación de TopAppBar en Android usando
Atributos del widget de la barra superior de la aplicación
|
Atributos |
Descripción |
|---|---|
| título | esto se usa para representar el título de nuestra barra de acción. |
| icono de navegación | esto se usa como un ícono principal que se usa para abrir el cajón de navegación. |
| color de fondo | esto se usa para representar el color de fondo de nuestra barra de aplicaciones superior. |
| contenidoColor | este color se utiliza para dar color a nuestro contenido de nuestra barra de acción. |
| elevación | esto se usa para dar elevación a nuestra barra superior de aplicaciones. |
Implementación paso a paso
Paso 1: Crear un nuevo proyecto
Para crear un nuevo proyecto en la versión Canary de Android Studio, consulte Cómo crear un nuevo proyecto en la versión Canary de Android Studio con Jetpack Compose .
Paso 2: trabajar con el archivo MainActivity.kt
Después de agregar esta imagen, navegue a la aplicación> java> MainActivity.kt y agregue el siguiente código.
Kotlin
import android.graphics.drawable.shapes.Shape
import android.media.Image
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.InteractionState
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Info
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Phone
import androidx.compose.runtime.*
import androidx.compose.runtime.savedinstancestate.savedInstanceState
import androidx.compose.ui.Alignment
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.gfgapp.ui.GFGAppTheme
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.platform.ContextAmbient
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.input.*
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
GFGAppTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
// at below line we are calling
// our function for toolbar.
ToolbarWidget();
}
}
}
}
}
// @Preview function is use to see preview
// for our composable function in preview section.
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
GFGAppTheme {
// we are passing our composable
// function to display its preview.
ToolbarWidget();
}
}
@Composable
fun ToolbarWidget() {
// theme for our app.
Scaffold(
// below line we are
// creating a top bar.
topBar = {
TopAppBar(
// in below line we are
// adding title to our top bar.
title = {
// inside title we are
// adding text to our toolbar.
Text(
text = "Geeks for Geeks",
// below line is use
// to give text color.
color = Color.White
)
},
navigationIcon = {
// navigation icon is use
// for drawer icon.
IconButton(onClick = { }) {
// below line is use to
// specify navigation icon.
Icon(Icons.Filled.Menu)
}
},
// below line is use to give background color
backgroundColor = colorResource(id = R.color.purple_200),
// content color is use to give
// color to our content in our toolbar.
contentColor = Color.White,
// below line is use to give
// elevation to our toolbar.
elevation = 12.dp
)
}, bodyContent = {
// bodyContent()
})
}
Ahora ejecute su aplicación y vea el resultado de la aplicación.
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