कोडलैब (कोड बनाना सीखना): Gradle बिल्ड सिस्टम का इस्तेमाल करके, कार-यूआई-लिब कॉम्पोनेंट की मदद से आरआरओ बनाना

सेल्फ़-कंसिस्टेंट, इन-व्हीकल, इन्फ़ोटेन्मेंट (आईवीआई) सिस्टम लॉन्च करने के लिए, car-ui-lib लाइब्रेरी का इस्तेमाल करें. इस कोडलैब में, आपको car-ui-lib के बारे में बताया गया है. साथ ही, इसमें यह भी बताया गया है कि लाइब्रेरी में मौजूद कॉम्पोनेंट को पसंद के मुताबिक बनाने के लिए, रनटाइम रिसॉर्स ओवरले (आरआरओ) का इस्तेमाल कैसे किया जा सकता है.

आपको क्या सीखने को मिलेगा

ये काम कैसे करें:

  • अपने Android ऐप्लिकेशन में, car-ui-lib कॉम्पोनेंट शामिल करना.
  • Android ऐप्लिकेशन और आरआरओ बनाने के लिए, Gradle का इस्तेमाल करना.
  • car-ui-lib के साथ आरआरओ का इस्तेमाल करना.

इस कोडलैब में, आरआरओ के काम करने के तरीके के बारे में जानकारी नहीं दी गई है. ज़्यादा जानने के लिए, रनटाइम में किसी ऐप्लिकेशन के संसाधनों की वैल्यू बदलना और रनटाइम रिसॉर्स ओवरले से जुड़ी समस्याएं हल करना लेख पढ़ें.

शुरू करने से पहले

ज़रूरी शर्तें

शुरू करने से पहले, पक्का करें कि आपके पास ये चीज़ें हों:

  • कमांड लाइन वाला कंप्यूटर (Linux मशीन, Mac या Windows मशीन, जिसमें Windows Subsystem for Linux हो).

  • Android Studio.

  • आपके कंप्यूटर से कनेक्ट किया गया Android डिवाइस या एम्युलेटर. ज़्यादा जानने के लिए, Android सोर्स कोड डाउनलोड करना और Android बनाना लेख पढ़ें.

  • आरआरओ के बारे में बुनियादी जानकारी.

नया Android ऐप्लिकेशन बनाना

अवधि: 15 मिनट

इस सेक्शन में, Android Studio का नया प्रोजेक्ट बनाया जाता है.

  1. Android Studio में, EmptyActivity वाला ऐप्लिकेशन बनाएं.

    खाली गतिविधि बनाना
    पहली इमेज.Empty Activity बनाना

  2. ऐप्लिकेशन का नाम CarUiCodelab रखें. इसके बाद, Java भाषा चुनें. अगर चाहें, तो फ़ाइल की जगह भी चुनी जा सकती है. बाकी सेटिंग के लिए, डिफ़ॉल्ट वैल्यू स्वीकार करें.

    अपने ऐप्लिकेशन को नाम दें
    दूसरी इमेज. अपने ऐप्लिकेशन का नाम डालें

  3. activity_main.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"
    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>

    इस कोड ब्लॉक में, sample_text स्ट्रिंग दिखती है. हालांकि, इसे तय नहीं किया गया है.

  4. strings.xml फ़ाइल में, sample_text रिसॉर्स स्ट्रिंग जोड़ें और इसे "Hello World!" पर सेट करें. इस फ़ाइल को खोलने के लिए, ऐप्लिकेशन > src > main > res > values > strings.xml चुनें.

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

  5. अपना ऐप्लिकेशन बनाने के लिए, सबसे ऊपर दाईं ओर मौजूद हरे रंग के चलाएं बटन पर क्लिक करें. ऐसा करने पर, Gradle की मदद से apk अपने-आप आपके एम्युलेटर या Android डिवाइस पर इंस्टॉल हो जाता है.

    चलाने का बटन

नया ऐप्लिकेशन, आपके एम्युलेटर या Android डिवाइस पर अपने-आप खुल जाना चाहिए. अगर ऐसा नहीं होता है, तो ऐप्लिकेशन लॉन्चर से CarUiCodelab ऐप्लिकेशन खोलें. यह ऐप्लिकेशन अब इंस्टॉल हो चुका है. यह इस तरह दिखता है:

CarUiCodelab ऐप्लिकेशन खोलें
तीसरी इमेज. नया CarUiCodelab ऐप्लिकेशन खोलना

अपने Android ऐप्लिकेशन में car-ui-lib जोड़ना

अवधि: 15 मिनट

अपने ऐप्लिकेशन में car-ui-lib जोड़ें:

  1. अपने प्रोजेक्ट की build.gradle फ़ाइल में, car-ui-lib डिपेंडेंसी जोड़ने के लिए, ऐप्लिकेशन > 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'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
}

अपने Android ऐप्लिकेशन में car-ui-lib कॉम्पोनेंट का इस्तेमाल करना

अब आपके पास car-ui-lib है, इसलिए अपने ऐप्लिकेशन में टूलबार जोड़ें.

  1. अपनी MainActivity.java फ़ाइल में, 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);
}

  2. ToolbarController को इंपोर्ट करना न भूलें:

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

  3. Theme.CarUi.WithToolbar थीम का इस्तेमाल करने के लिए, ऐप्लिकेशन > src > main > AndroidManifest.xml चुनें. इसके बाद, AndroidManifest.xml को इस तरह अपडेट करें:

    <?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>

  4. ऐप्लिकेशन बनाने के लिए, पहले की तरह हरे रंग के चलाएं बटन को दबाएं.

    ऐप्लिकेशन बनाना

अपने ऐप्लिकेशन में आरआरओ जोड़ना

अवधि: 30 मिनट

अगर आपको आरआरओ के बारे में जानकारी है, तो अगले सेक्शन पर जाएं. अपने ऐप्लिकेशन में अनुमति कंट्रोलर जोड़ना. इसके अलावा, आरआरओ की बुनियादी बातें जानने के लिए, रनटाइम में किसी ऐप्लिकेशन के संसाधनों की वैल्यू बदलना लेख पढ़ें.

अपने ऐप्लिकेशन में अनुमति कंट्रोलर जोड़ना

यह कंट्रोल करने के लिए कि आरआरओ पैकेज किन संसाधनों पर ओवरले करता है, अपने ऐप्लिकेशन के /res फ़ोल्डर में overlayable.xml नाम की फ़ाइल जोड़ें. यह फ़ाइल, आपके ऐप्लिकेशन (टारगेट) और आपके आरआरओ पैकेज (ओवरले) के बीच अनुमति कंट्रोलर के तौर पर काम करती है.

  1. अपने ऐप्लिकेशन में res/values/overlayable.xml जोड़ें और अपनी फ़ाइल में यह कॉन्टेंट कॉपी करें:

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

    चूंकि, sample_text स्ट्रिंग को आरआरओ से ओवरले किया जाना चाहिए, इसलिए ऐप्लिकेशन के overlayable.xml में संसाधन का नाम शामिल करें.

    आपकी overlayable.xml फ़ाइल, res/values/ में ज़रूर होनी चाहिए. अगर ऐसा नहीं है, तो OverlayManagerService इसे ढूंढ नहीं पाएगा.

    ओवरले किए जा सकने वाले संसाधनों और उन्हें कॉन्फ़िगर करने के तरीके के बारे में ज़्यादा जानने के लिए, ओवरले किए जा सकने वाले संसाधनों पर पाबंदी लगाना लेख पढ़ें.

आरआरओ पैकेज बनाना

इस सेक्शन में, "Hello World!" स्ट्रिंग को "Hello World RRO" में बदलने के लिए, आरआरओ पैकेज बनाया जाता है.

  1. नया प्रोजेक्ट बनाने के लिए, फ़ाइल > नया > नया प्रोजेक्ट चुनें. Empty Activity के बजाय, No Activity को चुनें, क्योंकि आरआरओ पैकेज में सिर्फ़ संसाधन होते हैं.

    आपका कॉन्फ़िगरेशन, नीचे दिखाए गए कॉन्फ़िगरेशन जैसा दिखेगा. हालांकि, इन्हें सेव करने की जगह अलग हो सकती है:

  2. CarUiRRO का नया प्रोजेक्ट बनाने के बाद, 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>

    ऐसा करने पर, @xml/sample_overlay में गड़बड़ी होती है. resourcesMap फ़ाइल, टारगेट पैकेज के संसाधन नामों को आरआरओ पैकेज से मैप करती है. आरआरओ पैकेज के लिए, hasCode फ़्लैग को false पर सेट करना ज़रूरी है. इसके अलावा, आरआरओ पैकेज में DEX फ़ाइलें शामिल नहीं की जा सकतीं.

  3. कोड का यह ब्लॉक, …/res/xml/sample_overlay.xml में कॉपी करें:

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

  4. …/res/values/strings.xml में, sample_text जोड़ें:

    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">CarUiRRO</string>
    <string name="sample_text">Hello World RRO</string>
</resources>
    Created Gradle build of RRO

  5. अपने आरआरओ टारगेट को बनाने के लिए, हरे रंग के चलाएं बटन को दबाएं. इससे, आपके एम्युलेटर या Android डिवाइस पर, आरआरओ का Gradle बिल्ड बन जाएगा.

  6. यह पुष्टि करने के लिए कि आपका आरआरओ सही तरीके से इंस्टॉल हुआ है, यह कमांड चलाएं:

    shell:~$ adb shell cmd overlay list --user current | grep -i com.example
com.example.caruicodelab
[ ] com.example.caruirro

    इस कमांड से, सिस्टम पर आरआरओ पैकेज की स्थिति के बारे में काम की जानकारी दिखती है.

    • [ ] का मतलब है कि आरआरओ इंस्टॉल हो गया है और इसे चालू किया जा सकता है.
    • --- का मतलब है कि आरआरओ इंस्टॉल हो गया है, लेकिन इसमें गड़बड़ियां हैं.
    • [X] का मतलब है कि आरआरओ इंस्टॉल हो गया है और चालू है.

    अगर आपके आरआरओ में गड़बड़ियां हैं, आगे बढ़ने से पहले, रनटाइम रिसॉर्स ओवरले से जुड़ी समस्याएं हल करना लेख पढ़ें.

  7. आरआरओ को चालू करने और यह पुष्टि करने के लिए कि यह चालू है:

    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

आपका ऐप्लिकेशन, "Hello World RRO” स्ट्रिंग दिखाता है.

Hello World RRO!
चौथी इमेज: Hello World RRO!

बधाई हो! आपने अपना पहला आरआरओ बना लिया है.

आरआरओ का इस्तेमाल करते समय, आपको Android Asset Packaging Tool (AAPT2) के फ़्लैग --no-resource-deduping और --no-resource-removal का इस्तेमाल करना पड़ सकता है. यह जानकारी लिंक के विकल्प में दी गई है. इस कोडलैब में, फ़्लैग जोड़ने की ज़रूरत नहीं है. हालांकि, हमारा सुझाव है कि आप अपने आरआरओ में इनका इस्तेमाल करें, ताकि संसाधनों को हटाने (और डीबग करने में होने वाली समस्याओं) से बचा जा सके. इन्हें अपने आरआरओ की build.gradle फ़ाइल में इस तरह जोड़ा जा सकता है:

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

इन फ़्लैग के बारे में ज़्यादा जानने के लिए, पैकेज बनाना और AAPT2 लेख पढ़ें.

अपने Android ऐप्लिकेशन में, आरआरओ का इस्तेमाल करके car-ui-lib कॉम्पोनेंट में बदलाव करना

इस पेज पर, रनटाइम रिसॉर्स ओवरले (आरआरओ) का इस्तेमाल करके, अपने Android ऐप्लिकेशन में car-ui-lib लाइब्रेरी के कॉम्पोनेंट में बदलाव करने का तरीका बताया गया है.

टूलबार के बैकग्राउंड का रंग सेट करना

अवधि: 15 मिनट

टूलबार के बैकग्राउंड का रंग बदलने के लिए:

  1. अपने आरआरओ ऐप्लिकेशन में यह वैल्यू जोड़ें और संसाधन को चमकीले हरे रंग (#0F0) पर सेट करें:

    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <drawable name="car_ui_toolbar_background">#0F0</drawable>
</resources>

    car-ui-lib लाइब्रेरी में, car_ui_toolbar_background नाम का एक संसाधन होता है. जब यह संसाधन, आरआरओ के कॉन्फ़िगरेशन में शामिल होता है, तो टूलबार में कोई बदलाव नहीं होता, क्योंकि गलत वैल्यू को टारगेट किया जाता है.

  2. अपने आरआरओ के AndroidManifest.xml में, targetName को car-ui-lib पर पॉइंट करने के लिए अपडेट करें:

    …
android:targetName="car-ui-lib"
…

    आपको हर उस टारगेट पैकेज के लिए एक नया आरआरओ पैकेज बनाना होगा जिसे आरआरओ करना है. उदाहरण के लिए, दो अलग-अलग टारगेट के लिए ओवरले बनाते समय, आपको दो ओवरले apk बनाने होंगे.

  3. आरआरओ को पहले की तरह बनाएं, उसकी पुष्टि करें, उसे इंस्टॉल करें, और उसे चालू करें.

आपका ऐप्लिकेशन इस तरह दिखेगा:

नए टूलबार के बैकग्राउंड का रंग
पांचवी इमेज: टूलबार के बैकग्राउंड का नया रंग

आरआरओ लेआउट और स्टाइल

अवधि: 15 मिनट

इस गतिविधि में, पहले बनाए गए ऐप्लिकेशन की तरह एक नया ऐप्लिकेशन बनाया जाता है. इस ऐप्लिकेशन की मदद से, लेआउट को ओवरले किया जा सकता है. पहले की तरह ही तरीका अपनाएं या अपने मौजूदा ऐप्लिकेशन में बदलाव करें.

  1. पक्का करें कि आपने 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>

  2. पक्का करें कि activity_main.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"
    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>

  3. अपने आरआरओ ऐप्लिकेशन में, res/layout/activity_main.xml बनाएं और इसमें यह जोड़ें:

    <?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>

  4. आरआरओ में अपना स्टाइल जोड़ने के लिए, res/values/styles.xml को अपडेट करें:

    <?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>

  5. AndroidManifest.xml में, targetName को अपने नए ऐप्लिकेशन के नाम पर पॉइंट करने के लिए बदलें:

    …
android:targetName="CarUiCodelab"
…

  6. अपने आरआरओ में, sample_overlay.xml फ़ाइल में संसाधन जोड़ें:

    <?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>

  7. ऐप्लिकेशन और आरआरओ को पहले की तरह बनाएं और इंस्टॉल करें (हरे रंग का चलाएं बटन). अपने आरआरओ को चालू करना न भूलें.

ऐप्लिकेशन और आरआरओ इस तरह दिखते हैं. Hello World RRO टेक्स्ट हरे रंग का है और यह बीच में है, जैसा कि लेआउट आरआरओ में बताया गया है.

Hello World RRO
छठी इमेज: Hello World RRO

अपने ऐप्लिकेशन में CarUiRecyclerView जोड़ना

अवधि: 15 मिनट

CarUiRecyclerView इंटरफ़ेस, RecyclerView को ऐक्सेस करने के लिए एपीआई उपलब्ध कराता है जिसे car-ui-lib संसाधनों की मदद से पसंद के मुताबिक बनाया गया है. उदाहरण के लिए, CarUiRecyclerView रनटाइम में एक फ़्लैग की जांच करता है, ताकि यह तय किया जा सके कि स्क्रोलबार को चालू किया जाना चाहिए या नहीं. इसके बाद, यह उससे जुड़ा लेआउट चुनता है.

CarUiRecyclerViewContainer
सातवीं इमेज. CarUiRecyclerViewContainer

  1. CarUiRecyclerView जोड़ने के लिए, इसे अपनी activity_main.xml और MainActivity.java फ़ाइलों में जोड़ें. आपके पास नया ऐप्लिकेशन बनाने या मौजूदा ऐप्लिकेशन में बदलाव करने का विकल्प है. अगर मौजूदा ऐप्लिकेशन में बदलाव किया जाता है, तो 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"/>

    यह गड़बड़ी दिख सकती है. हालांकि, इसे अनदेखा किया जा सकता है:

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

    जब तक आपकी क्लास की स्पेलिंग सही है और आपने car-ui-lib को डिपेंडेंसी के तौर पर जोड़ा है, तब तक अपने apk को बनाया और कंपाइल किया जा सकता है. गड़बड़ी हटाने के लिए, फ़ाइल > अमान्य कैश चुनें. इसके बाद, अमान्य करें और रीस्टार्ट करें पर क्लिक करें.

    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;
}

  2. अपने ऐप्लिकेशन को पहले की तरह बनाएं और इंस्टॉल करें.

अब आपको CarUiRecyclerView दिखेगा:

CarUiRecyclerView
सातवीं इमेज : CarUiRecyclerView

स्क्रोलबार हटाने के लिए, आरआरओ का इस्तेमाल करना

अवधि: 10 मिनट

इस गतिविधि में, CarUiRecyclerView से स्क्रोलबार हटाने के लिए, आरआरओ का इस्तेमाल करने का तरीका बताया गया है.

  1. अपने आरआरओ में, ये फ़ाइलें जोड़ें और इनमें बदलाव करें:

    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>

    car_ui_scrollbar_enable संसाधन, car-ui-lib का बूलियन संसाधन है. इससे यह कंट्रोल किया जाता है कि CarUiRecyclerView में, ऊपर और नीचे जाने के बटन वाला, कार के लिए ऑप्टिमाइज़ किया गया स्क्रोलबार मौजूद है या नहीं. जब इसे false पर सेट किया जाता है, तो CarUiRecyclerView, 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>

अपने ऐप्लिकेशन को पहले की तरह बनाएं और इंस्टॉल करें. CarUiRecyclerView से स्क्रोलबार हटा दिया गया है:

CarUiRecyclerView में स्क्रोलबार मौजूद नहीं है
आठवीं इमेज. बिना स्क्रोलबार वाला CarUiRecyclerView

CarUiRecyclerView स्क्रोलबार को ओवरले करने के लिए, लेआउट का इस्तेमाल करना

अवधि: 15 मिनट

इस गतिविधि में, CarUiRecyclerView स्क्रोलबार के लेआउट में बदलाव किया जाता है.

  1. अपने आरआरओ ऐप्लिकेशन में, ये फ़ाइलें जोड़ें और इनमें बदलाव करें.

    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>

    लेआउट फ़ाइल को ओवरले करने के लिए, आपको अपने आरआरओ के overlay.xml में सभी आईडी और नेमस्पेस एट्रिब्यूट जोड़ने होंगे. नीचे दी गई फ़ाइलें देखें.

    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>

    हमारा सुझाव है कि इन फ़ाइलों के इंटरैक्ट करने के तरीके की जांच करें.

    आसान बनाने के लिए, डाइमेंशन और रंगों को हार्डकोड किया गया है. हालांकि, सबसे सही तरीका यह है कि इन वैल्यू को dimens.xml और colors.xml में एलान किया जाए या इन्हें res/color/ फ़ोल्डर में रंग की फ़ाइलों के तौर पर तय किया जाए. ज़्यादा जानने के लिए, देखें योगदान देने वालों के लिए AOSP Java कोड स्टाइल.

  2. अपने ऐप्लिकेशन को पहले की तरह बनाएं और इंस्टॉल करें. आपने नीले स्क्रोलबार और ग्रे रेल वाला CarUiRecyclerView बनाया है.

बधाई हो! दोनों ऐरो, स्क्रोलबार के नीचे दिखते हैं. आपने Android Studio में Gradle बिल्ड सिस्टम का इस्तेमाल करके, car-ui-lib लेआउट रिसॉर्स फ़ाइल पर आरआरओ को सफलतापूर्वक लागू कर लिया है.

CarUiRecyclerView में नीले रंग का स्क्रोलबार और स्लेटी रंग की रेल
नौवीं इमेज. ग्रे रेल वाला, नीले स्क्रोलबार वाला CarUiRecyclerView

आरआरओ सूची के आइटम

अवधि: 15 मिनट

अब तक, आपने फ़्रेमवर्क कॉम्पोनेंट (AndroidX नहीं) का इस्तेमाल करके, car-ui-lib कॉम्पोनेंट पर आरआरओ लागू किया है. आरआरओ में AndroidX कॉम्पोनेंट का इस्तेमाल करने के लिए, आपको उस कॉम्पोनेंट की डिपेंडेंसी को ऐप्लिकेशन और आरआरओ build.gradle. दोनों में जोड़ना होगा. आपको अपने ऐप्लिकेशन में overlayable.xml के साथ-साथ, अपने आरआरओ में उस कॉम्पोनेंट के attrs को sample_overlay.xml में भी जोड़ना होगा.

हमारी लाइब्रेरी (car-ui-lib), ConstraintLayout के साथ-साथ अन्य AndroidX कॉम्पोनेंट का इस्तेमाल करती है. इसलिए, इसका overlayable.xml इस तरह दिख सकता है:

<?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>

  1. ConstraintLayout का इस्तेमाल करके, CarUiRecyclerView में सूची के आइटम का लेआउट बदलें. अपने आरआरओ में, ये फ़ाइलें जोड़ें या इनमें बदलाव करें:

    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>

  2. car_ui_list_item.xml में, कई कॉम्पोनेंट/संसाधनों के रेफ़रंस मौजूद हैं. इन्हें ऐप्लिकेशन की डिपेंडेंसी के तौर पर शामिल नहीं किया गया है. ये car-ui-lib संसाधन हैं. app/build.gradle में, अपने आरआरओ ऐप्लिकेशन में car-ui-lib को डिपेंडेंसी के तौर पर जोड़कर, इस समस्या को ठीक किया जा सकता है:

    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'
}

टाइटल और मुख्य हिस्सा अब बाईं ओर के बजाय दाईं ओर अलाइन हैं.

टाइटल और मुख्य भाग को दाईं ओर अलाइन करना
दसवीं इमेज. टाइटल और मुख्य हिस्सा, दाईं ओर अलाइन हैं

हमने AndroidX कॉम्पोनेंट (ConstraintLayout) का इस्तेमाल करके, car-ui-lib पर सिर्फ़ तब आरआरओ लागू किया, जब इसके एट्रिब्यूट, car-ui-lib की overlayable.xml नाम की फ़ाइल के साथ-साथ, आरआरओ sample_overlay.xml में मौजूद थे. अपने ऐप्लिकेशन में भी ऐसा किया जा सकता है. इसके लिए, अपने ऐप्लिकेशन के overlayable.xml में, car-ui-lib की तरह ही, सभी ज़रूरी attrs जोड़ें.

हालांकि, AndroidX कॉम्पोनेंट का इस्तेमाल करके, किसी ऐप्लिकेशन को आरआरओ करना मुमकिन नहीं है. ऐसा तब होता है, जब ऐप्लिकेशन के build.gradle में car-ui-lib को डिपेंडेंसी के तौर पर शामिल किया गया हो (जब ऐप्लिकेशन, car-ui-lib कॉम्पोनेंट का इस्तेमाल करता है). चूंकि, एट्रिब्यूट मैपिंग को car-ui-lib लाइब्रेरी के overlayable.xml में पहले से ही तय किया गया था, इसलिए इन्हें अपने ऐप्लिकेशन के overlayable.xml में car-ui-lib को डिपेंडेंसी के तौर पर शामिल करने पर, mergeDebugResources गड़बड़ी होगी. यह गड़बड़ी, नीचे दी गई गड़बड़ी जैसी होगी. ऐसा इसलिए होता है, क्योंकि ये एट्रिब्यूट, एक से ज़्यादा overlayable.xml फ़ाइलों में मौजूद होते हैं:

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