Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Halaman ini diterjemahkan oleh Cloud Translation API.

Codelab: Membuat RRO dengan komponen car-ui-lib menggunakan sistem build Gradle

Gunakan perpustakaan car-ui-lib untuk meluncurkan sistem infotainment (IVI) yang konsisten di dalam kendaraan. Codelab ini memperkenalkan Anda pada car-ui-lib dan cara menggunakan runtime resource overlay (RRO) untuk menyesuaikan komponen di library.

Apa yang akan Anda pelajari

Bagaimana caranya:

Sertakan komponen car-ui-lib di aplikasi Android Anda.
Gunakan Gradle untuk membuat aplikasi dan RRO Android.
Gunakan RRO dengan car-ui-lib .

Codelab ini tidak merinci cara kerja RRO. Lihat Mengubah nilai sumber daya aplikasi saat runtime dan Memecahkan masalah overlay sumber daya runtime untuk mempelajari lebih lanjut.

Sebelum kamu memulai

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

Komputer dengan baris perintah (mesin Linux, Mac, atau mesin Windows dengan Subsistem Windows untuk Linux).
Android Studio .
Perangkat Android atau emulator yang terhubung ke mesin Anda. Lihat Mengunduh sumber Android dan Membangun Android .
Pengetahuan dasar tentang RRO.

Buat aplikasi Android baru

Durasi: 15 menit

Di bagian ini, Anda membuat proyek Android Studio baru.

Di Android Studio buat aplikasi EmptyActivity .
Gambar 1. Membuat Aktivitas Kosong
Beri nama aplikasi CarUiCodelab lalu pilih bahasa Java. Anda juga dapat memilih lokasi file jika diinginkan. Terima nilai default untuk pengaturan lainnya.
Gambar 2. Beri nama aplikasi Anda

Ganti activity_main.xml dengan blok kode berikut:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/sample_text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Blok kode ini menampilkan string sample_text , yang tidak ditentukan.

Tambahkan string sumber daya sample_text dan setel ke "Hello World!" di file strings.xml Anda. Untuk membuka file ini, pilih app > src > main > res > value > strings.xml .

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">CarUiCodelab</string>
    <string name="sample_text">Hello World!</string>
</resources>

Untuk membuat aplikasi Anda, klik tombol Putar berwarna hijau di kanan atas. Melakukannya secara otomatis akan menginstal apk ke emulator atau perangkat Android Anda melalui Gradle.

Aplikasi baru akan terbuka secara otomatis di emulator atau perangkat Android Anda. Jika tidak, buka aplikasi CarUiCodelab dari peluncur aplikasi, yang sekarang sudah terpasang. Tampilannya seperti ini:

**Gambar 3.** Buka aplikasi CarUiCodelab baru

Tambahkan car-ui-lib ke aplikasi Android Anda

Durasi: 15 menit

Tambahkan car-ui-lib ke aplikasi Anda:

Untuk menambahkan ketergantungan car-ui-lib ke file build.gradle proyek Anda, pilih app > build.gradle . Dependensi Anda akan muncul seperti ini:

dependencies {
    implementation 'com.android.car.ui:car-ui-lib:2.0.0'
    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
}

Gunakan komponen car-ui-lib di aplikasi Android Anda

Sekarang Anda memiliki car-ui-lib , tambahkan toolbar ke aplikasi Anda.

Di file MainActivity.java Anda, timpa metode 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);
}

Pastikan untuk mengimpor ToolbarController :

import com.android.car.ui.core.CarUi;
import com.android.car.ui.toolbar.ToolbarController;

Untuk menggunakan tema Theme.CarUi.WithToolbar , pilih app > src > main > AndroidManifest.xml lalu perbarui AndroidManifest.xml hingga muncul seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.caruicodelab">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.CarUi.WithToolbar"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Untuk membangun aplikasi, tekan tombol Putar berwarna hijau seperti sebelumnya.

Tambahkan RRO ke aplikasi Anda

Durasi: 30 menit

Jika Anda sudah familiar dengan RRO, lanjutkan ke bagian berikutnya, Tambahkan pengontrol izin ke aplikasi Anda . Jika tidak, untuk mempelajari dasar-dasar RRO, lihat Mengubah nilai sumber daya aplikasi saat runtime .

Tambahkan pengontrol izin ke aplikasi Anda

Untuk mengontrol sumber daya mana yang dihamparkan paket RRO, tambahkan file bernama overlayable.xml ke folder /res aplikasi Anda. File ini berfungsi sebagai pengontrol izin antara aplikasi Anda ( target ) dan paket RRO Anda ( overlay ).

Tambahkan res/values/overlayable.xml ke aplikasi Anda dan salin konten berikut ke file Anda:
```
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <overlayable name="CarUiCodelab">
        <policy type="public">
            <item type="string" name="sample_text"/>
        </policy>
    </overlayable>
</resources>
```
Karena string sample_text harus dapat dihamparkan oleh RRO, sertakan nama sumber daya di overlayable.xml aplikasi.
File overlayable.xml Anda HARUS berada di res/values/ . Jika tidak, OverlayManagerService tidak dapat menemukannya.
Untuk mempelajari lebih lanjut tentang sumber daya yang dapat dihamparkan dan cara mengonfigurasinya, lihat Membatasi sumber daya yang dapat dihamparkan .

Buat paket RRO

Di bagian ini, Anda membuat paket RRO untuk mengubah string yang ditampilkan di atas dari "Hello World!" menjadi "Halo Dunia RRO".

Untuk membuat proyek baru, pilih File > Baru > Proyek Baru . Pastikan untuk memilih Tidak Ada Aktivitas, bukan Aktivitas Kosong, karena paket RRO hanya berisi sumber daya.
Konfigurasi Anda tampak serupa dengan yang diilustrasikan di bawah. Lokasi penyimpanannya mungkin berbeda:

Setelah Anda membuat proyek CarUiRRO baru, deklarasikan proyek tersebut sebagai RRO dengan memodifikasi AndroidManifest.xml .

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.caruirro">

    <application android:hasCode="false" />

    <uses-sdk
        android:minSdkVersion="29"
        android:targetSdkVersion="29"/>

    <overlay
        android:targetPackage="com.example.caruicodelab"
        android:targetName="CarUiCodelab"
        android:isStatic="false"
        android:resourcesMap="@xml/sample_overlay"
        />
</manifest>

Melakukan hal ini akan menimbulkan kesalahan pada @xml/sample_overlay . File resourcesMap memetakan nama sumber daya dari paket target ke paket RRO.

Salin blok kode berikut ke …/res/xml/sample_overlay.xml :

<?xml version="1.0" encoding="utf-8"?>
<overlay>
    <item target="string/sample_text" value="@string/sample_text"/>
</overlay>

Tambahkan sample_text ke …/res/values/strings.xml :
```
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">CarUiRRO</string>
    <string name="sample_text">Hello World RRO</string>
</resources>
```
Catatan: ( Opsional ) Jika Anda membuat RRO, Android Studio akan mencoba memulai aktivitas default. Karena ini paket RRO, maka tidak ada aktivitas yang menyebabkan error. Untuk mengatasi kesalahan, klik tarik-turun aplikasi dan edit opsi peluncuran konfigurasi menjadi Tidak Ada.
Untuk membangun target RRO Anda, tekan tombol Putar berwarna hijau untuk membuat build Gradle RRO Anda di emulator atau perangkat Android Anda.
Untuk memverifikasi RRO Anda terinstal dengan benar, jalankan:
```
shell:~$ adb shell cmd overlay list --user current | grep -i com.example
com.example.caruicodelab
[ ] com.example.caruirro
```
Perintah ini menampilkan informasi berguna tentang status paket RRO pada sistem.
- [ ] menandakan bahwa RRO telah terinstal dan siap diaktifkan.
- --- menunjukkan bahwa RRO diinstal tetapi mengandung kesalahan.
- [X] berarti RRO telah diinstal dan diaktifkan.
Jika RRO Anda mengandung kesalahan, lihat Memecahkan masalah hamparan sumber daya runtime sebelum Anda melanjutkan.

Untuk mengaktifkan RRO dan memverifikasi bahwa itu diaktifkan:

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

Aplikasi Anda menampilkan string "Hello World RRO”.

Selamat! Anda telah membuat RRO pertama Anda.

Saat menggunakan RRO, Anda mungkin ingin menggunakan tanda Android Asset Packaging Tool (AAPT2) --no-resource-deduping dan --no-resource-removal yang dijelaskan dalam Opsi tautan . Anda tidak perlu menambahkan tanda dalam codelab ini, namun kami menyarankan Anda menggunakannya di RRO untuk menghindari penghapusan sumber daya (dan kesulitan dalam proses debug). Anda dapat menambahkannya ke file build.gradle RRO Anda seperti ini:

android {
    …
    aaptOptions {
        additionalParameters "--no-resource-deduping", "--no-resource-removal"
    }
}

Untuk mempelajari selengkapnya tentang tanda ini, lihat Membangun paket dan AAPT2 .

Ubah komponen `car-ui-lib` menggunakan RRO di aplikasi Android Anda

Halaman ini menjelaskan cara menggunakan runtime resource overlay (RRO) untuk memodifikasi komponen dari pustaka car-ui-lib di aplikasi Android Anda.

Mengatur warna latar belakang bilah alat

Durasi: 15 menit

Untuk mengubah warna latar belakang toolbar:

Tambahkan nilai berikut ke aplikasi RRO Anda, dan atur sumber daya menjadi hijau terang ( #0F0 ):
```
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <drawable name="car_ui_toolbar_background">#0F0</drawable>
</resources>
```
Pustaka car-ui-lib berisi sumber daya bernama car_ui_toolbar_background . Ketika sumber daya ini terdapat dalam konfigurasi RRO, toolbar tidak berubah karena nilai yang salah ditargetkan.
Di AndroidManifest.xml untuk RRO Anda, perbarui targetName agar mengarah ke car-ui-lib :
```
…
android:targetName="car-ui-lib"
…
```
Anda HARUS membuat paket RRO baru untuk setiap paket target yang ingin Anda RRO. Misalnya, saat membuat overlay untuk dua target berbeda, Anda harus membuat dua apk overlay.
Bangun, verifikasi, instal, dan aktifkan RRO dengan cara yang sama seperti sebelumnya.

Aplikasi Anda muncul seperti ini:

Warna latar belakang Toolbar baru — **Gambar 5** : Warna latar belakang toolbar baru

Tata letak dan gaya RRO

Durasi: 15 menit

Dalam latihan ini, Anda membuat aplikasi baru yang mirip dengan aplikasi yang Anda buat sebelumnya. Aplikasi ini memungkinkan tata letak dilapis. Ikuti langkah yang sama seperti sebelumnya, atau ubah aplikasi Anda yang sudah ada.

Pastikan Anda menambahkan baris berikut ke overlayable.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <overlayable name="CarUiCodelab">
    <policy type="public">
      <item type="string" name="sample_text"/>
      <item type="layout" name="activity_main"/>
      <item type="id" name="textView"/>
    </policy>
  </overlayable>
</resources>

Pastikan activity_main.xml muncul seperti berikut:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/sample_text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Di aplikasi RRO Anda, buat res/layout/activity_main.xml dan tambahkan yang berikut:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/sample_text"
      android:textAppearance="@style/TextAppearance.CarUi"
      android:layout_gravity="center_vertical|center_horizontal"/>
</FrameLayout>

Perbarui res/values/styles.xml untuk menambahkan gaya kita ke RRO:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="TextAppearance.CarUi" parent="android:TextAppearance.DeviceDefault">
        <item name="android:textColor">#0f0</item>
        <item name="android:textSize">100sp</item>
    </style>
</resources>

Ubah targetName di AndroidManifest.xml agar mengarah ke nama aplikasi baru Anda:
```
…
android:targetName="CarUiCodelab"
…
```

Tambahkan sumber daya ke file sample_overlay.xml di RRO Anda:

<?xml version="1.0" encoding="utf-8"?>
<overlay>
    <item target="string/sample_text" value="@string/sample_text"/>
    <item target="id/textView" value="@id/textView"/>
    <item target="layout/activity_main" value="@layout/activity_main"/>
</overlay>

Bangun dan instal aplikasi dan RRO dengan cara yang sama seperti sebelumnya (tombol Putar hijau). Pastikan untuk mengaktifkan RRO Anda.

Aplikasi dan RRO dirender sebagai berikut. Teks Hello World RRO berwarna hijau dan berada di tengah seperti yang ditentukan dalam layout RRO.

Tambahkan CarUiRecyclerView ke aplikasi Anda

Durasi: 15 menit

Antarmuka CarUiRecyclerView menyediakan API untuk mengakses RecyclerView yang disesuaikan melalui sumber daya car-ui-lib . Misalnya, CarUiRecyclerView memeriksa tanda pada waktu proses untuk menentukan apakah bilah gulir harus diaktifkan atau tidak dan memilih tata letak yang sesuai.

**Gambar 7.** CarUiRecyclerViewContainer

Untuk menambahkan CarUiRecyclerView , tambahkan ke file activity_main.xml dan MainActivity.java Anda. Anda dapat membuat aplikasi baru dari awal atau memodifikasi aplikasi yang sudah ada. Jika Anda memodifikasi aplikasi yang ada, pastikan untuk menghapus sumber daya yang tidak dideklarasikan dari overlayable.xml .

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<com.android.car.ui.recyclerview.CarUiRecyclerView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Kesalahan berikut mungkin muncul, yang dapat Anda abaikan:

Cannot resolve class com.android.car.ui.recyclerview.CarUiRecyclerView

Selama kelas Anda dieja dengan benar dan Anda telah menambahkan car-ui-lib sebagai dependensi, Anda dapat membuat dan mengkompilasi apk Anda. Untuk menghilangkan kesalahan, pilih File > Invalidate Caches lalu klik Invalidate and Restart.

Tambahkan yang berikut ini ke 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;
}

Bangun dan instal aplikasi Anda seperti sebelumnya.

Anda sekarang melihat CarUiRecyclerView :

Gunakan RRO untuk menghapus bilah gulir

Durasi: 10 menit

Latihan ini menunjukkan cara menggunakan RRO untuk menghapus bilah gulir dari CarUiRecyclerView .

Di RRO Anda, tambahkan dan modifikasi file berikut:

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.caruirro">

    <application android:hasCode="false" />

    <uses-sdk
        android:minSdkVersion="29"
        android:targetSdkVersion="29"/>

    <overlay
        android:targetPackage="com.example.caruicodelab"
        android:targetName="car-ui-lib"
        android:isStatic="false"
        android:resourcesMap="@xml/sample_overlay"
        />
</manifest>

res/values/bools.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <bool name="car_ui_scrollbar_enable">false</bool>
</resources>

Sumber daya car_ui_scrollbar_enable adalah sumber daya boolean car-ui-lib , yang mengontrol apakah bilah gulir yang dioptimalkan untuk mobil dengan tombol Atas dan Bawah di CarUiRecyclerView ada atau tidak. Jika disetel ke false , CarUiRecyclerView bertindak seperti AndroidX RecyclerView .

res/xml/sample_overlay.xml

<?xml version="1.0" encoding="utf-8"?>
<overlay>
    <item target="bool/car_ui_scrollbar_enable" value="@bool/car_ui_scrollbar_enable"/>
</overlay>

Bangun dan instal aplikasi Anda seperti sebelumnya. Scrollbar kini dihapus dari CarUiRecyclerView :

CarUiRecyclerView tanpa bilah gulir — **Gambar 8.** CarUiRecyclerView tanpa scrollbar

Gunakan tata letak untuk melapisi bilah gulir CarUiRecyclerView

Durasi: 15 menit

Dalam latihan ini, Anda memodifikasi tata letak scrollbar CarUiRecyclerView .

Tambahkan dan ubah file berikut di aplikasi RRO Anda.

res/layout/car_ui_recycler_view_scrollbar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="112dp"
    android:layout_height="match_parent"
    android:id="@+id/car_ui_scroll_bar">
    <!-- View height is dynamically calculated during layout. -->
    <View
        android:id="@+id/car_ui_scrollbar_thumb"
        android:layout_width="6dp"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/car_ui_recyclerview_scrollbar_thumb"/>
    <View
        android:id="@+id/car_ui_scrollbar_track"
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/car_ui_scrollbar_page_up"/>
    <View
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:background="#323232"
        android:layout_toLeftOf="@+id/car_ui_scrollbar_thumb"
        android:layout_above="@+id/car_ui_scrollbar_page_up"
        android:layout_marginRight="5dp"/>
    <View
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:background="#323232"
        android:layout_toRightOf="@+id/car_ui_scrollbar_thumb"
        android:layout_above="@+id/car_ui_scrollbar_page_up"
        android:layout_marginLeft="5dp"/>
    <ImageView
        android:id="@+id/car_ui_scrollbar_page_up"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:focusable="false"
        android:hapticFeedbackEnabled="false"
        android:src="@drawable/car_ui_recyclerview_ic_up"
        android:scaleType="centerInside"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/car_ui_scrollbar_page_down"/>
    <ImageView
        android:id="@+id/car_ui_scrollbar_page_down"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:focusable="false"
        android:hapticFeedbackEnabled="false"
        android:src="@drawable/car_ui_recyclerview_ic_down"
        android:scaleType="centerInside"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>
</RelativeLayout>

Untuk melapisi file tata letak, Anda harus menambahkan semua ID dan atribut namespace ke overlay.xml RRO Anda. Lihat file di bawah ini.

res/xml/sample_overlay.xml

<?xml version="1.0" encoding="utf-8"?>
<overlay>
   <item target="drawable/car_ui_recyclerview_ic_down" value="@drawable/car_ui_recyclerview_ic_down"/>
   <item target="drawable/car_ui_recyclerview_ic_up" value="@drawable/car_ui_recyclerview_ic_up"/>
   <item target="drawable/car_ui_recyclerview_scrollbar_thumb" value="@drawable/car_ui_recyclerview_scrollbar_thumb"/>
   <item target="id/car_ui_scroll_bar" value="@id/car_ui_scroll_bar"/>
   <item target="id/car_ui_scrollbar_thumb" value="@id/car_ui_scrollbar_thumb"/>
   <item target="id/car_ui_scrollbar_track" value="@id/car_ui_scrollbar_track"/>
   <item target="id/car_ui_scrollbar_page_up" value="@id/car_ui_scrollbar_page_up"/>
   <item target="id/car_ui_scrollbar_page_down" value="@id/car_ui_scrollbar_page_down"/>
   <item target="layout/car_ui_recyclerview_scrollbar" value="@layout/car_ui_recyclerview_scrollbar"/>
</overlay>

res/drawable/car_ui_recyclerview_ic_up.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="48.0"
    android:viewportHeight="48.0">
    <path
        android:pathData="M14.83,30.83L24,21.66l9.17,9.17L36,28 24,16 12,28z"
        android:fillColor="#0000FF"/>
</vector>

res/drawable/car_ui_recyclerview_ic_down.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="48.0"
    android:viewportHeight="48.0">
    <path
        android:pathData="M14.83,16.42L24,25.59l9.17,-9.17L36,19.25l-12,12 -12,-12z"
        android:fillColor="#0000FF"/>
</vector>

res/drawable/car_ui_recyclerview_scrollbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#0000FF" />
    <corners android:radius="100dp"/>
</shape>

Disarankan untuk memeriksa bagaimana file-file ini berinteraksi.

Untuk kesederhanaan, dimensi dan warna diberi kode keras. Namun, praktik terbaiknya adalah mendeklarasikan nilai-nilai ini di dimens.xml dan colors.xml atau bahkan ditetapkan sebagai file warna di folder res/color/ . Untuk mempelajari lebih lanjut, lihat Gaya kode Java AOSP untuk kontributor .

Bangun dan instal aplikasi Anda seperti sebelumnya. Anda telah membuat CarUiRecyclerView dengan bilah gulir biru dan rel abu-abu.

Selamat! Kedua panah muncul di sepanjang bagian bawah scrollbar. Anda telah berhasil menerapkan RRO ke file resource tata letak car-ui-lib menggunakan sistem build Gradle melalui Android Studio.

**Gambar 9.** CarUiRecyclerView dengan scrollbar biru dengan rel abu-abu

Item Daftar RRO

Durasi: 15 menit

Sampai di sini, Anda telah menerapkan RRO ke komponen car-ui-lib menggunakan komponen framework (bukan AndroidX). Untuk menggunakan komponen AndroidX di RRO, Anda harus menambahkan dependensi komponen tersebut ke aplikasi dan ke build.gradle. Anda juga harus menambahkan attrs komponen tersebut ke overlayable.xml di aplikasi Anda, serta sample_overlay.xml di RRO Anda.

Pustaka kami ( car-ui-lib ) menggunakan ConstraintLayout serta komponen AndroidX lainnya, sehingga overlayable.xml nya mungkin terlihat seperti ini:

<?xml version='1.0' encoding='UTF-8'?>
<resources>
    <overlayable name="car-ui-lib">
        …
        <item type="attr" name="layout_constraintBottom_toBottomOf"/>
        <item type="attr" name="layout_constraintBottom_toTopOf"/>
        <item type="attr" name="layout_constraintCircle"/>
        <item type="attr" name="layout_constraintCircleAngle"/>
        <item type="attr" name="layout_constraintCircleRadius"/>
        <item type="attr" name="layout_constraintDimensionRatio"/>
        <item type="attr" name="layout_constraintEnd_toEndOf"/>
        <item type="attr" name="layout_constraintEnd_toStartOf"/>
        <item type="attr" name="layout_constraintGuide_begin"/>
        <item type="attr" name="layout_constraintGuide_end"/>
        <item type="attr" name="layout_constraintGuide_percent"/>
        <item type="attr" name="layout_constraintHeight_default"/>
        <item type="attr" name="layout_constraintHeight_max"/>
        <item type="attr" name="layout_constraintHeight_min"/>
        <item type="attr" name="layout_constraintHeight_percent"/>
        <item type="attr" name="layout_constraintHorizontal_bias"/>
        <item type="attr" name="layout_constraintHorizontal_chainStyle"/>
        <item type="attr" name="layout_constraintHorizontal_weight"/>
        <item type="attr" name="layout_constraintLeft_creator"/>
        <item type="attr" name="layout_constraintLeft_toLeftOf"/>
        <item type="attr" name="layout_constraintLeft_toRightOf"/>
        <item type="attr" name="layout_constraintRight_creator"/>
        <item type="attr" name="layout_constraintRight_toLeftOf"/>
        <item type="attr" name="layout_constraintRight_toRightOf"/>
        <item type="attr" name="layout_constraintStart_toEndOf"/>
        <item type="attr" name="layout_constraintStart_toStartOf"/>
        <item type="attr" name="layout_constraintTag"/>
        <item type="attr" name="layout_constraintTop_creator"/>
        <item type="attr" name="layout_constraintTop_toBottomOf"/>
        <item type="attr" name="layout_constraintTop_toTopOf"/>
        <item type="attr" name="layout_constraintVertical_bias"/>
        <item type="attr" name="layout_constraintVertical_chainStyle"/>
        …
    </overlayable>
</resources>

Ubah tata letak item daftar di CarUiRecyclerView menggunakan ConstraintLayout . Tambahkan atau ubah file berikut di RRO Anda:

res/xml/sample_overlay.xml

<?xml version="1.0" encoding="utf-8"?>
<overlay>
   <item target="id/car_ui_list_item_touch_interceptor" value="@id/car_ui_list_item_touch_interceptor"/>
   <item target="id/car_ui_list_item_reduced_touch_interceptor" value="@id/car_ui_list_item_reduced_touch_interceptor"/>
   <item target="id/car_ui_list_item_start_guideline" value="@id/car_ui_list_item_start_guideline"/>
   <item target="id/car_ui_list_item_icon_container" value="@id/car_ui_list_item_icon_container"/>
   <item target="id/car_ui_list_item_icon" value="@id/car_ui_list_item_icon"/>
   <item target="id/car_ui_list_item_content_icon" value="@id/car_ui_list_item_content_icon"/>
   <item target="id/car_ui_list_item_avatar_icon" value="@id/car_ui_list_item_avatar_icon"/>
   <item target="id/car_ui_list_item_title" value="@id/car_ui_list_item_title"/>
   <item target="id/car_ui_list_item_body" value="@id/car_ui_list_item_body"/>
   <item target="id/car_ui_list_item_action_container_touch_interceptor" value="@id/car_ui_list_item_action_container_touch_interceptor"/>
   <item target="id/car_ui_list_item_action_container" value="@id/car_ui_list_item_action_container"/>
   <item target="id/car_ui_list_item_action_divider" value="@id/car_ui_list_item_action_divider"/>
   <item target="id/car_ui_list_item_switch_widget" value="@id/car_ui_list_item_switch_widget"/>
   <item target="id/car_ui_list_item_checkbox_widget" value="@id/car_ui_list_item_checkbox_widget"/>
   <item target="id/car_ui_list_item_radio_button_widget" value="@id/car_ui_list_item_radio_button_widget"/>
   <item target="id/car_ui_list_item_supplemental_icon" value="@id/car_ui_list_item_supplemental_icon"/>
   <item target="id/car_ui_list_item_end_guideline" value="@id/car_ui_list_item_end_guideline"/>
   <item target="attr/layout_constraintBottom_toBottomOf" value="@attr/layout_constraintBottom_toBottomOf"/>
   <item target="attr/layout_constraintBottom_toTopOf" value="@attr/layout_constraintBottom_toTopOf"/>
   <item target="attr/layout_constraintEnd_toEndOf" value="@attr/layout_constraintEnd_toEndOf"/>
   <item target="attr/layout_constraintEnd_toStartOf" value="@attr/layout_constraintEnd_toStartOf"/>
   <item target="attr/layout_constraintGuide_begin" value="@attr/layout_constraintGuide_begin"/>
   <item target="attr/layout_constraintGuide_end" value="@attr/layout_constraintGuide_end"/>
   <item target="attr/layout_constraintHorizontal_bias" value="@attr/layout_constraintHorizontal_bias"/>
   <item target="attr/layout_constraintLeft_toLeftOf" value="@attr/layout_constraintLeft_toLeftOf"/>
   <item target="attr/layout_constraintLeft_toRightOf" value="@attr/layout_constraintLeft_toRightOf"/>
   <item target="attr/layout_constraintRight_toLeftOf" value="@attr/layout_constraintRight_toLeftOf"/>
   <item target="attr/layout_constraintRight_toRightOf" value="@attr/layout_constraintRight_toRightOf"/>
   <item target="attr/layout_constraintStart_toEndOf" value="@attr/layout_constraintStart_toEndOf"/>
   <item target="attr/layout_constraintStart_toStartOf" value="@attr/layout_constraintStart_toStartOf"/>
   <item target="attr/layout_constraintTop_toBottomOf" value="@attr/layout_constraintTop_toBottomOf"/>
   <item target="attr/layout_constraintTop_toTopOf" value="@attr/layout_constraintTop_toTopOf"/>
   <item target="attr/layout_goneMarginBottom" value="@attr/layout_goneMarginBottom"/>
   <item target="attr/layout_goneMarginEnd" value="@attr/layout_goneMarginEnd"/>
   <item target="attr/layout_goneMarginLeft" value="@attr/layout_goneMarginLeft"/>
   <item target="attr/layout_goneMarginRight" value="@attr/layout_goneMarginRight"/>
   <item target="attr/layout_goneMarginStart" value="@attr/layout_goneMarginStart"/>
   <item target="attr/layout_goneMarginTop" value="@attr/layout_goneMarginTop"/>
   <item target="attr/layout_constraintVertical_chainStyle" value="@attr/layout_constraintVertical_chainStyle"/>
   <item target="layout/car_ui_list_item" value="@layout/car_ui_list_item"/>
</overlay>

res/layout/car_ui_list_item.xml

<?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 mereferensikan beberapa referensi beberapa komponen/sumber daya yang tidak disertakan sebagai dependensi aplikasi. Ini adalah sumber daya car-ui-lib . Anda dapat memperbaikinya dengan menambahkan car-ui-lib sebagai ketergantungan pada aplikasi RRO Anda di app/build.gradle :
```
dependencies {
    implementation 'com.android.car.ui:car-ui-lib:2.0.0'
    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'com.google.android.material:material:1.4.0'
}
```
Catatan: Menambahkan car-ui-lib sebagai dependensi ke sebuah paket akan menambahkan semua sumber daya car-ui-lib ke RRO Anda, sehingga meningkatkan ukuran apk Anda.

Judul dan Isi sekarang rata kanan, bukan rata kiri.

Judul dan Isi rata kanan — **Gambar 10.** Judul dan Isi Rata Kanan

Kami hanya menerapkan RRO ke car-ui-lib menggunakan komponen AndroidX ( ConstraintLayout ) jika atributnya ada dalam file car-ui-lib bernama overlayable.xml serta RRO sample_overlay.xml . Anda dapat melakukan hal serupa di aplikasi Anda sendiri. Cukup tambahkan semua attrs yang sesuai ke overlayable.xml aplikasi Anda, mirip dengan car-ui-lib .

Namun, tidak mungkin melakukan RRO aplikasi menggunakan komponen AndroidX jika aplikasi memiliki car-ui-lib sebagai dependensi di build.gradle -nya (saat aplikasi menggunakan komponen car-ui-lib ). Karena pemetaan atribut sudah ditentukan di overlayable.xml pustaka car-ui-lib , menambahkannya ke overlayable.xml aplikasi Anda dengan car-ui-lib sebagai dependensi akan menyebabkan kesalahan mergeDebugResources seperti di bawah ini. Ini karena atribut berikut ada di beberapa file overlayable.xml :

org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:mergeDebugResources'

Codelab: Membuat RRO dengan komponen car-ui-lib menggunakan sistem build Gradle

Apa yang akan Anda pelajari

Sebelum kamu memulai

Prasyarat

Buat aplikasi Android baru

Tambahkan car-ui-lib ke aplikasi Android Anda

Gunakan komponen car-ui-lib di aplikasi Android Anda

Tambahkan RRO ke aplikasi Anda

Tambahkan pengontrol izin ke aplikasi Anda

Buat paket RRO

Ubah komponen car-ui-lib menggunakan RRO di aplikasi Android Anda

Mengatur warna latar belakang bilah alat

Tata letak dan gaya RRO

Tambahkan CarUiRecyclerView ke aplikasi Anda

Gunakan RRO untuk menghapus bilah gulir

Gunakan tata letak untuk melapisi bilah gulir CarUiRecyclerView

Item Daftar RRO

Ubah komponen `car-ui-lib` menggunakan RRO di aplikasi Android Anda