Muchas aplicaciones muestran páginas web dentro de sus aplicaciones de Android para navegar a diferentes sitios web dentro de las aplicaciones. Existen diferentes métodos con la ayuda de los cuales podemos abrir páginas web como WebView, redirigir al navegador Chrome y pestañas de Chrome personalizadas. La pestaña Chrome personalizada es la versión más ligera para cargar las páginas web dentro de las aplicaciones de Android. En este artículo, veremos cómo implementar pestañas de Chrome personalizadas en aplicaciones de 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 un nuevo color en el archivo Color.kt
Vaya a aplicación>java>nombre del paquete de su aplicación>ui.theme>archivo Color.kt y agregue el código a continuación. 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: Agregar dependencia en el archivo build.gradle.
Navegue a Gradle Scripts> archivo build.gradle y agregue la dependencia a continuación en la sección de dependencias.
implementation 'androidx.browser:browser:1.2.0'
Después de agregar esta dependencia, simplemente sincronice su proyecto.
Paso 4: 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.app.Activity
import android.content.Context
import android.content.Intent
import android.content.SharedPreferences
import android.content.pm.PackageManager
import android.net.Uri
import android.os.Bundle
import android.util.Log
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.browser.customtabs.CustomTabColorSchemeParams
import androidx.browser.customtabs.CustomTabsIntent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Password
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.colorResource
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.PasswordVisualTransformation
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import androidx.core.content.ContextCompat
import com.example.newcanaryproject.ui.theme.*
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 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 Chrome Tabs",
// 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 session management
// method and passing shared preferences to it.
customChromeTab()
}
}
}
}
}
}
// on below line we are creating a
// function as custom Chrome Tabs.
@Composable
fun customChromeTab() {
// on below line we are creating a
// variable for getting context.
val ctx = LocalContext.current
// on below line we are creating a column
Column(
// inside this column we are specifying modifier
// to column as max size, max height and ,max width.
modifier = Modifier
.fillMaxSize()
.fillMaxWidth()
.fillMaxHeight(),
// on below line we are adding vertical
// arrangement and horizontal alignment.
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
// on the below line we are creating a button.
Button(
// on below line we are adding modifier to our button
// for adding max width and adding padding to button
// from all sides.
modifier = Modifier
.fillMaxWidth()
.padding(18.dp),
// on below line we are adding color for our button.
colors = ButtonDefaults.buttonColors(backgroundColor = greenColor),
// on below line we are adding on click for our button.
onClick = {
// on below line we are creating an open tab method
// to open our custom chrome tabs.
openTab(ctx)
})
// on the below line we are creating
// a text for our button
// and adding padding to our text.
{
Text(text = "Open custom chrome tab", modifier = Modifier.padding(8.dp))
}
}
}
// on below line we are creating a function to open custom chrome tabs.
fun openTab(context: Context) {
// on below line we are creating a variable for
// package name and specifying package name as
// package of chrome application.
val package_name = "com.android.chrome"
// on below line we are creating a variable for
// our URL which we have to open in chrome tabs
val URL = "https://www.geeksforgeeks.org"
// on below line we are creating a variable
// for the activity and initializing it.
val activity = (context as? Activity)
// on below line we are creating a variable for
// our builder and initializing it with
// custom tabs intent
val builder = CustomTabsIntent.Builder()
// on below line we are setting show title
// to true to display the title for
// our chrome tabs.
builder.setShowTitle(true)
// on below line we are enabling instant
// app to open if it is available.
builder.setInstantAppsEnabled(true)
// on below line we are setting tool bar color for our custom chrome tabs.
builder.setToolbarColor(ContextCompat.getColor(context, R.color.purple_200))
// on below line we are creating a
// variable to build our builder.
val customBuilder = builder.build()
// on below line we are checking if the package name is null or not.
if (package_name != null) {
// on below line if package name is not null
// we are setting package name for our intent.
customBuilder.intent.setPackage(package_name)
// on below line we are calling launch url method
// and passing url to it on below line.
customBuilder.launchUrl(context, Uri.parse(URL))
} else {
// this method will be called if the
// chrome is not present in user device.
// in this case we are simply passing URL
// within intent to open it.
val i = Intent(Intent.ACTION_VIEW, Uri.parse(URL))
// on below line we are calling start
// activity to start the activity.
activity?.startActivity(i)
}
}
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