Codelab: Crea RROs con componentes car-ui-lib a través del sistema de compilación de Gradle
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Usa la biblioteca car-ui-lib para iniciar infoentretenimiento autocoherente en el vehículo y con coherencia
(IVI). En este codelab, se presenta car-ui-lib y cómo puedes
Usar superposiciones de recursos en tiempo de ejecución (RRO) para personalizar componentes de la biblioteca
Qué aprenderás
Aprenderás a hacer lo siguiente:
Incluye componentes de car-ui-lib en tu app para Android.
Usa Gradle a fin de compilar apps para Android y RRO.
En esta sección, crearás un nuevo proyecto de Android Studio.
En Android Studio, crea una app con un EmptyActivity.
Figura 1: Crea una actividad vacía
Asígnale el nombre CarUiCodelab a la app y, luego, selecciona el lenguaje Java. Puedes
también selecciona una ubicación de archivo si lo deseas. Acepta los valores predeterminados de
parámetros de configuración restantes.
Figura 2: Asígnale un nombre a tu app
Reemplaza activity_main.xml por el siguiente bloque de código:
Este bloque de código muestra la cadena sample_text, que no está definida.
Agrega la cadena de recurso sample_text y establécela en “Hello World!”. en tu
archivo strings.xml. Para abrir este archivo, selecciona aplicación > src > principal > res >
valores > strings.xml
Para compilar tu app, haz clic en el botón verde Play ubicado en la parte superior derecha. Hacerlo
instala automáticamente el apk en tu emulador o dispositivo Android a través de
Gradle
La app nueva debería abrirse automáticamente en el emulador o dispositivo Android. Si
no, abre la app de CarUiCodelab desde el selector de aplicaciones, que ahora está instalado.
Se ve así:
Figura 3: Abre la nueva app de CarUiCodelab
Agrega car-ui-lib a tu app para Android
Duración: 15 minutos
Agrega car-ui-lib a tu app:
Para agregar la dependencia car-ui-lib al archivo build.gradle de tu proyecto, haz lo siguiente:
selecciona Aplicación > build.gradle. Tus dependencias deberían aparecer así:
Cómo usar componentes car-ui-lib en tu app para Android
Ahora que tienes car-ui-lib, agrega una barra de herramientas a tu app.
En tu archivo MainActivity.java, reemplaza el método onCreate:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Get the toolbar controller instance.
ToolbarController toolbar = CarUi.getToolbar(this);
// Set the title on toolbar.
toolbar.setTitle(getTitle());
// Set the logo to be shown with the title.
toolbar.setLogo(R.mipmap.ic_launcher_round);
}
Para usar el tema Theme.CarUi.WithToolbar, selecciona
app > src > principal > AndroidManifest.xml y, luego, actualiza
AndroidManifest.xml se muestre de la siguiente manera:
Para controlar a qué recursos se superpone un paquete RRO, agrega un archivo llamado
overlayable.xml a la carpeta /res de tu app. Este archivo funciona como un permiso
entre tu app (el objetivo) y tu paquete de RRO (la superposición).
Agrega res/values/overlayable.xml a tu app y copia el siguiente contenido
en tu archivo:
En esta sección, crearás un paquete RRO para cambiar la cadena que se muestra arriba.
de "Hello World!" por “Hello World RRO”.
Para crear un proyecto nuevo, selecciona Archivo > Nuevo > Nuevo proyecto. Asegúrate de
selecciona No Activity en lugar de Empty Activity, ya que los paquetes de RRO contienen
solo recursos.
Tus configuraciones tienen un aspecto similar a las que se muestran a continuación. El
la ubicación en la que se guardan puede diferir:
Después de crear el proyecto CarUiRRO nuevo, decláralo como un
Modifica AndroidManifest.xml para la RRO.
Para habilitar la RRO y verificar que esté habilitada, haz lo siguiente:
shell:~$ adb shell cmd overlay enable --user current com.example.caruirro
shell:~$ adb shell cmd overlay list --user current | grep -i com.example
com.example.caruicodelab
[x] com.example.caruirro
Tu app muestra la string “Hello World RRO”.
Figura 4: Hello World RRO!
¡Felicitaciones! Creaste tu primera RRO.
Cuando uses RRO, te recomendamos que uses Android Asset Packaging Tool (AAPT2)
las marcas --no-resource-deduping y --no-resource-removal, descritas en
Opciones de vinculación.
No es necesario agregar las marcas de este codelab, pero te sugerimos que las uses
en tus RRO para evitar la eliminación de recursos (y problemas de depuración). Tú
puedes agregarlas al archivo build.gradle de tu RRO de la siguiente manera:
Modifica los componentes de car-ui-lib usando RRO en tu app para Android
En esta página, se describe cómo puedes usar una superposición de recursos de entorno de ejecución (RRO) para
modificar componentes de la biblioteca car-ui-lib en tu app para Android
Cómo establecer el color de fondo de la barra de herramientas
Duración: 15 minutos
Para cambiar el color de fondo de la barra de herramientas:
Agrega el siguiente valor a tu app de RRO y establece el recurso en Bright
verde (#0F0):
La biblioteca car-ui-lib contiene un recurso llamado
car_ui_toolbar_background Cuando este recurso esté contenido en el
de un RRO, la barra de herramientas no cambia porque el valor
está orientado.
En el AndroidManifest.xml de tu RRO, actualiza targetName para que apunte a
car-ui-lib:
…
android:targetName="car-ui-lib"
…
DEBES crear un paquete RRO nuevo para cada paquete de destino que desees RRO.
Por ejemplo, al crear superposiciones para dos objetivos diferentes, debes
crear dos APK superpuestos.
Compila, verifica, instala y habilita la RRO de la misma manera que antes.
Tu app se ve de la siguiente manera:
Figura 5: Nuevo color de fondo de la barra de herramientas
Diseños y estilos de RRO
Duración: 15 minutos
En este ejercicio, compilarás una app nueva similar a la que creaste anteriormente. Esta
permite superponer el diseño. Sigue los mismos pasos que antes o modifica
tu app existente.
Asegúrate de agregar las siguientes líneas a overlayable.xml:
Compila e instala la app y la RRO de la misma manera que antes (Play verde de color verde).
). Asegúrate de habilitar tu RRO.
La app y la RRO se renderizan de la siguiente manera. El texto de la RRO de Hello World es verde y es
centrado, como se especifica en la RRO de diseño.
Figura 6: RRO de Hello World
Cómo agregar CarUiRecyclerView a tu app
Duración: 15 minutos
La interfaz de CarUiRecyclerView proporciona APIs para acceder a un RecyclerView
que se personaliza a través de los recursos de car-ui-lib. Por ejemplo, CarUiRecyclerView.
Verifica una marca en el tiempo de ejecución para determinar si la barra de desplazamiento debe estar habilitada o no.
y selecciona el diseño correspondiente.
Figura 7: CarUiRecyclerViewContainer
Para agregar un CarUiRecyclerView, agrégalo a tu activity_main.xml y
MainActivity.java. Puedes crear una app nueva desde cero
modificar la app existente. Si modificas la app existente, asegúrate de quitarla
recursos no declarados en overlayable.xml.
Es posible que aparezca el siguiente error, que puedes ignorar:
Cannot resolve class com.android.car.ui.recyclerview.CarUiRecyclerView
Siempre y cuando la clase esté escrita correctamente y hayas agregado car-ui-lib
una dependencia, puedes crear y compilar tu APK. Para quitar el error,
Selecciona Archivo > Invalida cachés y, luego, haz clic en Invalidar y reiniciar.
Agrega lo siguiente a MainActivity.java
package com.example.caruicodelab;
import android.app.Activity;
import android.os.Bundle;
import com.android.car.ui.core.CarUi;
import com.android.car.ui.recyclerview.CarUiContentListItem;
import com.android.car.ui.recyclerview.CarUiListItem;
import com.android.car.ui.recyclerview.CarUiListItemAdapter;
import com.android.car.ui.recyclerview.CarUiRecyclerView;
import com.android.car.ui.toolbar.ToolbarController;
import java.util.ArrayList;
/** Activity with a simple car-ui layout. */
public class MainActivity extends Activity {
private final ArrayList<CarUiListItem> mData = new ArrayList<>();
private CarUiListItemAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ToolbarController toolbar = CarUi.getToolbar(this);
toolbar.setTitle(getTitle());
toolbar.setLogo(R.mipmap.ic_launcher_round);
CarUiRecyclerView recyclerView = findViewById(R.id.list);
mAdapter = new CarUiListItemAdapter(generateSampleData());
recyclerView.setAdapter(mAdapter);
}
private ArrayList<CarUiListItem> generateSampleData() {
for (int i = 0; i < 20; i++) {
CarUiContentListItem item = new CarUiContentListItem(CarUiContentListItem.Action.ICON);
item.setTitle("Title " + i);
item.setPrimaryIconType(CarUiContentListItem.IconType.CONTENT);
item.setIcon(getDrawable(R.drawable.ic_launcher_foreground));
item.setBody("body " + i);
mData.add(item);
}
return mData;
}
Compila e instala tu app como lo hiciste antes.
Ahora ves un CarUiRecyclerView:
Figura 7 : CarUiRecyclerView
Cómo usar un RRO para quitar la barra de desplazamiento
Duración: 10 minutos
En este ejercicio, se muestra cómo usar una RRO para quitar la barra de desplazamiento de
CarUiRecyclerView
En tu RRO, agrega y modifica los siguientes archivos:
El recurso car_ui_scrollbar_enable es un recurso booleano car-ui-lib,
que controla si la barra de desplazamiento optimizó el vehículo con los botones Arriba y Abajo
en CarUiRecyclerView está presente o no. Cuando se establece en false,
CarUiRecyclerView funciona como un RecyclerView de AndroidX.
Para superponer un archivo de diseño, debes agregar todos los IDs y el espacio de nombres
a la overlay.xml de tu RRO. Consulta los archivos que aparecen a continuación.
Se sugiere examinar cómo interactúan estos archivos.
Para simplificar, las dimensiones y los colores están codificados. Sin embargo, una mejor
la práctica es declarar estos valores en dimens.xml y colors.xml, o
designados como archivos de color en la carpeta res/color/. Para obtener más información,
ver
Estilo de código Java del AOSP para colaboradores.
Compila e instala tu app como lo hiciste antes. Compilaste CarUiRecyclerView
con una barra de desplazamiento azul y rieles grises.
¡Felicitaciones! Ambas flechas aparecen en la parte inferior de la barra de desplazamiento,
aplicó correctamente un RRO a un archivo de recursos de diseño car-ui-lib con la compilación de Gradle
del sistema con Android Studio.
Figura 9: CarUiRecyclerView con una barra de desplazamiento azul con rieles grises
Elementos de la lista de RRO
Duración: 15 minutos
Hasta ahora, aplicaste una RRO a los componentes de car-ui-lib usando un framework
(no de AndroidX). Para usar componentes de AndroidX en una RRO, debes agregar
las dependencias de ese componente a la app y a la RRO. build.gradle.
También debes agregar el attrs de ese componente a overlayable.xml en tu app.
como sample_overlay.xml en tu RRO.
Nuestra biblioteca (car-ui-lib) usa ConstraintLayout y otros formatos de AndroidX
por lo que su overlayable.xml podría verse de la siguiente manera:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="carUiListItem"
android:minHeight="@dimen/car_ui_list_item_height">
<!-- The following touch interceptor views are sized to encompass the specific sub-sections of
the list item view to easily control the bounds of a background ripple effects. -->
<com.android.car.ui.SecureView
android:id="@+id/car_ui_list_item_touch_interceptor"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/car_ui_list_item_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- This touch interceptor does not include the action container -->
<com.android.car.ui.SecureView
android:id="@+id/car_ui_list_item_reduced_touch_interceptor"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/car_ui_list_item_background"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/car_ui_list_item_action_container"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/car_ui_list_item_start_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="@dimen/car_ui_list_item_start_inset" />
<FrameLayout
android:id="@+id/car_ui_list_item_icon_container"
android:layout_width="@dimen/car_ui_list_item_icon_container_width"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="@+id/car_ui_list_item_start_guideline"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/car_ui_list_item_icon"
android:layout_width="@dimen/car_ui_list_item_icon_size"
android:layout_height="@dimen/car_ui_list_item_icon_size"
android:layout_gravity="center"
android:visibility="gone"
android:scaleType="fitCenter" />
<ImageView
android:id="@+id/car_ui_list_item_content_icon"
android:layout_width="@dimen/car_ui_list_item_content_icon_width"
android:layout_height="@dimen/car_ui_list_item_content_icon_height"
android:layout_gravity="center"
android:visibility="gone"
android:scaleType="fitCenter" />
<ImageView
android:id="@+id/car_ui_list_item_avatar_icon"
android:background="@drawable/car_ui_list_item_avatar_icon_outline"
android:layout_width="@dimen/car_ui_list_item_avatar_icon_width"
android:layout_height="@dimen/car_ui_list_item_avatar_icon_height"
android:layout_gravity="center"
android:visibility="gone"
android:scaleType="fitCenter" />
</FrameLayout>
<CarUiTextView
android:id="@+id/car_ui_list_item_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/car_ui_list_item_text_start_margin"
android:singleLine="@bool/car_ui_list_item_single_line_title"
android:textAppearance="@style/TextAppearance.CarUi.ListItem"
android:layout_gravity="right"
android:gravity="right"
android:textAlignment="viewEnd"
app:layout_constraintBottom_toTopOf="@+id/car_ui_list_item_body"
app:layout_constraintEnd_toStartOf="@+id/car_ui_list_item_action_container"
app:layout_constraintStart_toEndOf="@+id/car_ui_list_item_icon_container"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_goneMarginStart="@dimen/car_ui_list_item_text_no_icon_start_margin" />
<CarUiTextView
android:id="@+id/car_ui_list_item_body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/car_ui_list_item_text_start_margin"
android:textAppearance="@style/TextAppearance.CarUi.ListItem.Body"
android:layout_gravity="right"
android:gravity="right"
android:textAlignment="viewEnd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/car_ui_list_item_action_container"
app:layout_constraintStart_toEndOf="@+id/car_ui_list_item_icon_container"
app:layout_constraintTop_toBottomOf="@+id/car_ui_list_item_title"
app:layout_goneMarginStart="@dimen/car_ui_list_item_text_no_icon_start_margin" />
<!-- This touch interceptor is sized and positioned to encompass the action container -->
<com.android.car.ui.SecureView
android:id="@+id/car_ui_list_item_action_container_touch_interceptor"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/car_ui_list_item_background"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@id/car_ui_list_item_action_container"
app:layout_constraintEnd_toEndOf="@id/car_ui_list_item_action_container"
app:layout_constraintStart_toStartOf="@id/car_ui_list_item_action_container"
app:layout_constraintTop_toTopOf="@id/car_ui_list_item_action_container" />
<FrameLayout
android:id="@+id/car_ui_list_item_action_container"
android:layout_width="wrap_content"
android:minWidth="@dimen/car_ui_list_item_icon_container_width"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/car_ui_list_item_end_guideline"
app:layout_constraintTop_toTopOf="parent">
<View
android:id="@+id/car_ui_list_item_action_divider"
android:layout_width="@dimen/car_ui_list_item_action_divider_width"
android:layout_height="@dimen/car_ui_list_item_action_divider_height"
android:layout_gravity="start|center_vertical"
android:background="@drawable/car_ui_list_item_divider" />
<Switch
android:id="@+id/car_ui_list_item_switch_widget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="false"
android:focusable="false" />
<CheckBox
android:id="@+id/car_ui_list_item_checkbox_widget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="false"
android:focusable="false" />
<RadioButton
android:id="@+id/car_ui_list_item_radio_button_widget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="false"
android:focusable="false" />
<ImageView
android:id="@+id/car_ui_list_item_supplemental_icon"
android:layout_width="@dimen/car_ui_list_item_supplemental_icon_size"
android:layout_height="@dimen/car_ui_list_item_supplemental_icon_size"
android:layout_gravity="center"
android:scaleType="fitCenter" />
</FrameLayout>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/car_ui_list_item_end_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="@dimen/car_ui_list_item_end_inset" />
</androidx.constraintlayout.widget.ConstraintLayout>
car_ui_list_item.xml hace referencia a varias referencias de varios componentes/
que no se incluyen como dependencias de la app.
Estos son car-ui-lib recursos. Puedes solucionar este problema agregando car-ui-lib como
una dependencia a tu app de RRO en app/build.gradle:
El título y el cuerpo ahora están alineados a la derecha en lugar de a la izquierda.
Figura 10: Título y cuerpo alineados a la derecha
Solo aplicamos un RRO a car-ui-lib con componentes de AndroidX
(ConstraintLayout) cuando sus atributos estaban presentes en el car-ui-lib
llamado overlayable.xml, así como la RRO sample_overlay.xml. Es
hacer algo similar en tu propia aplicación. Simplemente agrega todas las
attrs al overlayable.xml de tu app, de manera similar a car-ui-lib
Sin embargo, no es posible RRO una app que use componentes de AndroidX cuando
la app tiene car-ui-lib como dependencia en su build.gradle (cuando la app usa
car-ui-lib). Dado que las asignaciones de atributos ya se definieron en
el archivo overlayable.xml de la biblioteca de car-ui-lib y los agregarás a tu
overlayable.xml de la app con car-ui-lib como dependencia generaría una
mergeDebugResources error como el siguiente. Esto se debe a que estos atributos
están presentes en varios archivos overlayable.xml:
org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:mergeDebugResources'
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2024-11-21 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2024-11-21 (UTC)"],[],[]]
