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

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

आप इन चीज़ों के बारे में जानेंगे

जानें:

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

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

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

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

शुरू करने से पहले, पक्का करें कि:

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

  • Android Studio.

  • आपकी मशीन से कनेक्ट किया गया Android डिवाइस या एम्युलेटर. यहां जाएं: Android सोर्स डाउनलोड करें और Android बनाएं.

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

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

कुल समय: 15 मिनट

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

  1. Android Studio में, EmptyActivity की मदद से कोई ऐप्लिकेशन बनाएं.

    कोई खाली गतिविधि बनाएं
    पहली इमेज.कोई गतिविधि न होने पर कौनसी गतिविधि करनी चाहिए

  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. sample_text संसाधन स्ट्रिंग जोड़ें और उसे "Hey World!" पर सेट करें आपके strings.xml फ़ाइल. इस फ़ाइल को खोलने के लिए, ऐप्लिकेशन > को चुनें सोर्स > मुख्य > रिज़ॉल्यूशन > मान > स्ट्रिंग.xml सबमिट करें.

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

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

    चलाने का बटन

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

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

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

कुल समय: 15 मिनट

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

  1. अपने प्रोजेक्ट की build.gradle फ़ाइल में car-ui-lib डिपेंडेंसी जोड़ने के लिए, ऐप्लिकेशन > को चुनें बिल्ड.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 है, तो अपने ऐप्लिकेशन में टूलबार जोड़ें.

  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 > मुख्य > 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 मिनट

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

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

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

  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 स्ट्रिंग ऐसी होनी चाहिए जिसे RRO से ओवरले किया जा सके, इसलिए संसाधन का नाम शामिल करें.

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

    ओवरले किए जा सकने वाले संसाधनों के बारे में ज़्यादा जानने के साथ-साथ, कॉन्फ़िगर किया गया है, तो ओवरले योग्य को प्रतिबंधित करें संसाधन शामिल हैं.

RRO पैकेज बनाना

इस सेक्शन में, ऊपर दिखाई गई स्ट्रिंग में बदलाव करने के लिए एक RRO पैकेज बनाया जाता है "हैलो वर्ल्ड!" से से लेकर "Hey World RRO" तक.

  1. नया प्रोजेक्ट बनाने के लिए, फ़ाइल > नया > नया प्रोजेक्ट. कृपया खाली गतिविधि के बजाय कोई गतिविधि नहीं चुनें, क्योंकि आरआरओ पैकेज में सिर्फ़ संसाधन तक सीमित नहीं हैं.

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

  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 फ़ाइल, टारगेट पैकेज से RRO पैकेज में संसाधन के नाम मैप करती है.

  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>
    अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
    RRO का Gradle बिल्ड बनाया गया

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

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

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

    यह निर्देश, RRO पैकेज की स्थिति के बारे में काम की जानकारी दिखाता है ट्रैक करने में मदद मिलती है.

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

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

  7. RRO को चालू करने और इसके चालू होने की पुष्टि करने के लिए:

    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

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

नमस्ते वर्ल्ड आरआरओ!
चौथी इमेज: नमस्ते वर्ल्ड आरआरओ!

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

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

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

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

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

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

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

कुल समय: 15 मिनट

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

  1. अपने RRO ऐप्लिकेशन में इस वैल्यू को जोड़ें और संसाधन को ब्राइट पर सेट करें हरा (#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. जब यह संसाधन RRO का कॉन्फ़िगरेशन, गलत वैल्यू होने की वजह से टूलबार नहीं बदलता है लक्षित है.

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

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

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

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

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

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

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

कुल समय: 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. अपने RRO ऐप्लिकेशन में, कोई 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. RRO ऐप्लिकेशन और ऐप्लिकेशन को पहले की तरह ही बनाएं और इंस्टॉल करें (हरा Play बटन). पक्का करें कि आपने RRO को चालू किया हो.

ऐप्लिकेशन और RRO को इस तरह दिखाया जाता है. हैलो वर्ल्ड आरआरओ टेक्स्ट का रंग हरा है और यह है जैसा कि 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

स्क्रोलबार हटाने के लिए RRO का इस्तेमाल करें

कुल समय: 10 मिनट

यह अभ्यास आपको स्क्रोलबार को हटाने के लिए, RRO का इस्तेमाल करने का तरीका बताता है CarUiRecyclerView.

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

    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. इन फ़ाइलों को अपने RRO ऐप्लिकेशन में जोड़ें और उनमें बदलाव करें.

    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>

    लेआउट फ़ाइल को ओवरले करने के लिए, आपको सभी आईडी और नेमस्पेस जोड़ने होंगे एट्रिब्यूट के लिए, आपके RRO के 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 बनाया है जिसमें नीले रंग की स्क्रोलबार और स्लेटी रेल शामिल हैं.

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

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

आरआरओ की सूची में शामिल आइटम

कुल समय: 15 मिनट

यहां तक, आपने फ़्रेमवर्क का इस्तेमाल करके car-ui-lib कॉम्पोनेंट पर RRO लागू किया है कॉम्पोनेंट (AndroidX नहीं). किसी RRO में AndroidX कॉम्पोनेंट का इस्तेमाल करने के लिए, आपको इसे जोड़ना होगा यह कॉम्पोनेंट, ऐप्लिकेशन और RRO build.gradle. You दोनों के लिए डिपेंडेंसी आपको अपने ऐप्लिकेशन में, उस कॉम्पोनेंट के attrs को overlayable.xml में भी जोड़ना होगा आपके आरआरओ में 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. इसका इस्तेमाल करके CarUiRecyclerView में लिस्ट आइटम का लेआउट बदलें ConstraintLayout. अपने RRO में इन फ़ाइलों को जोड़ें या उनमें बदलाव करें:

    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 संसाधन हैं. car-ui-lib को इसके तौर पर जोड़कर, इसे ठीक किया जा सकता है यह app/build.gradle में आपके RRO ऐप्लिकेशन पर निर्भर करता है:

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

टाइटल और बॉडी को अब बाईं ओर अलाइन के बजाय दाईं ओर अलाइन कर दिया गया है.

दाईं ओर अलाइन किया गया टाइटल और बॉडी
10वीं इमेज. दाईं ओर अलाइन किया गया टाइटल और मुख्य हिस्सा

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

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

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