¿Cómo hacer una lista de lenguajes de programación en Jetpack Compose?

4 min readJan 25, 2022

En este artículo analizaremos como implementar una lista de lenguajes de programación utilizando LazyColumn (sería como el RecyclerView en el formato de vistas) además estaremos utilizando la librería Coil, la cual nos permitirá visualizar el logotipo de cada lenguaje de programación obtenido de Internet y por último implementaremos un acceso que nos direccionara al sitio oficial de cada lenguaje de programación. Estaremos utilizando Jetpack Compose el nuevo toolkit moderno de Android para crear UI nativas, que es el futuro en el desarrollo móvil.

Sin más, comencemos con esta aventura 🚀

1️⃣ Ingresar Dependencias

La dependencia Coil me permitirá hacer la carga de imágenes obtenidas de internet.

implementation "io.coil-kt:coil-compose:1.4.0"

La dependencia Iconos de material me permitirá obtener iconos adicionales.

implementation "androidx.compose.material:material-icons-extended:$compose_version"

Nota: Esta dependencia es permitida en versiones de compose superiores a 1.0.2

2️⃣ Permisos de internet

Insertaremos el permiso de internet en el AndroidManifest.xml para poder visualizar el logotipo de cada lenguaje de programación.

<uses-permission android:name="android.permission.INTERNET"/>

3️⃣ Creación de datos

Crearemos una data class llamada ProgrammingLanguage que contendrá las propiedades del lenguaje de programación. Veamos sus propiedades 👇

data class ProgrammingLanguage(
    val nameLanguage: String,
    val author: String,
    val yearCreation: Int,
    val paradigm: String,
    val website: String,
    val photoLogo: String
)

A continuación implementaremos la lista de los lenguajes de programación, gracias a la data class que implementamos anteriormente.

Nota: Existen muchos lenguajes de programación, pero en este ejemplo implementaremos algunos para poder representar un listado.

object ProgrammingLanguageListProvider {   val programmingLanguageList = listOf(
        ProgrammingLanguage(
            nameLanguage = "Java",
            author = "Sun Microsystems",
            yearCreation = 1995,
            paradigm = "Programación orientada a objetos, imperativo 
            y funcional",
            website = "https://www.java.com/es/",
            photoLogo = "https://ppss.kr/wp-
            content/uploads/2020/03/03-4-768x432.jpg"
        ),
        ProgrammingLanguage(
            nameLanguage = "Swift",
            author = "Apple",
            yearCreation = 2014,
            paradigm = "Multiparadigma (orientado a prototipos, 
            objetos, funcional e imperativo)",
            website = "https://www.swift.org/",
            photoLogo = "https://iphoneros.com/wp-
            content/uploads/2015/12/logodeswift.jpg"
        ),
    ...
}

Nota: Puedes encontrar la lista completa en mi repositorio de GITHUB.

4️⃣ Desarrollo UI

Crearemos una función composable llamada ProgrammingLanguageCard que en su constructor principal contendrá las propiedades del lenguaje de programación como: nameLanguage, author, paradigm, website, photoLogo de tipo String y creation de tipo Int.

@Composable
fun ProgrammingLanguageCard(
    modifier: Modifier = Modifier,
    nameLanguage: String,
    author: String,
    creation: Int,
    paradigm: String,
    website: String,
    photoLogo: String
) { ... }

En la propiedad photoLogo de tipo String pasaremos la Url donde se encuentra la imagen del logotipo de cada lenguaje de programación. Para poder visualizar la imagen haremos uso de la librería Coil la cual me permitirá obtenerlas de internet a través de una Url.

@Composable
fun ProgrammingLanguageCard(
    ....
    photoLogo: String
) {
  ...
    Image(
         painter = rememberImagePainter(
             data = photoLogo,
             builder = {
                 transformations(RoundedCornersTransformation(10f))
             }
         ),
         contentDescription = null,
         modifier = modifier
             .padding(start = 10.dp    
             .size(90.dp)
    )
  ...
}

Para poder direccionarnos al sitio oficial de cada lenguaje de programación, crearemos una propiedad llamada website de tipo String en la que por medio de la clase abstracta Uri podemos pasarle la propiedad website y a través de un startActivity() que contendrá un Intent la cuál llamara a una Acción que se va a iniciar y a una dirección de internet que es el website a la que nos vamos a dirigir.

Nota: Si quieres saber más sobre los Intents consulta aquí.

@Composable
fun ProgrammingLanguageCard(
    ....
    website: String
    ...
) {
    ...
    val context = LocalContext.current
    Surface(
        modifier = modifier.clickable {
            val urlAddress: Uri = Uri.parse(website)
            val intent = Intent(Intent.ACTION_VIEW, urlAddress)
            startActivity(context, intent, Bundle.EMPTY)
        },
        shape = MaterialTheme.shapes.medium,
        elevation = 4.dp
    ) {
       Icon(
           imageVector = Icons.Filled.Public,
           contentDescription = null,
           modifier = modifier.size(40.dp)
       )
    }
     ...
}

En la construcción de la UI utilizaremos funciones composables como Card, Row, Image, Divider, Column, Icon, Spacer, Text y Surface la cual nos permitirá dar forma y posición a la información que vamos a visualizar.

Para poder visualizar el listado total de los lenguajes de programación, utilizaremos la función composable LazyColumn en la que pasaremos un item que contendrá el título en la parte superior de la pantalla y un items que contendrá en su constructor el listados de las propiedades del lenguaje de programación.

@Composable
fun ProgrammingLanguageScreen(
    ....
    programmingLanguageList: List<ProgrammingLanguage>
) {
   LazyColumn(modifier = modifier.fillMaxWidth()) {
       item {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 25.dp),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    "Lenguajes De Programación",
                    style = MaterialTheme.typography.h4,
                    fontWeight = FontWeight.ExtraBold,
                    fontFamily = FontFamily.Cursive
                )
            }
        }        items(programmingLanguageList) { programmingLanguage ->
            ProgrammingLanguageCard(
                nameLanguage = programmingLanguage.nameLanguage,
                author = programmingLanguage.author,
                creation = programmingLanguage.yearCreation,
                paradigm = programmingLanguage.paradigm,
                website = programmingLanguage.website,
                photoLogo = programmingLanguage.photoLogo
            )
        }
   }
}

5️⃣ Resultado

Por medio de la función composable Surface pasando en su constructor el siguiente parámetro MaterialThem.colors.background a través del capo automáticamente se adaptara al tipo de tema que tenga el usuario en su celular, ya sea Light Mode o Dark Mode.
Finalmente visualizaremos el resultado de nuestra aplicación llamando en el MainActivity.kt la función composable ProgrammingLanguageListScreen() que obtendrá el listado de los lenguajes de programación creado anteriormente.

setContent {
    ListProgrammingLanguageComposeTheme {
        Surface(color = MaterialTheme.colors.background) {            val programmingLanguageList = 
            ProgrammingLanguageListProvider.programmingLanguageList
            ProgrammingLanguageListScreen(
                programmingLanguageList = programmingLanguageList
            )
        }
    }
}

Visualicemos el resultado 👀

¡Muchas Gracias por leer! 🤗💙

Puedes consultar el código en mi repositorio de GITHUB.

Regálame un 👏 si te gusto 🤗 y siéntete libre de dejar tus comentarios para analizarlos juntos. Nos vemos en la próxima ✌.