কোডল্যাব: Gradle বিল্ড সিস্টেম ব্যবহার করে car-ui-lib উপাদান দিয়ে RRO তৈরি করুন

স্ব-সামঞ্জস্যপূর্ণ, যানবাহনে, ইনফোটেইনমেন্ট (IVI) সিস্টেম চালু করতে car-ui-lib লাইব্রেরি ব্যবহার করুন। এই কোডল্যাবটি আপনাকে car-ui-lib এর সাথে পরিচয় করিয়ে দেয় এবং কিভাবে আপনি লাইব্রেরির উপাদান কাস্টমাইজ করতে রানটাইম রিসোর্স ওভারলে (RROs) ব্যবহার করতে পারেন।

আপনি কি শিখবেন

কিভাবে:

  • আপনার Android অ্যাপে car-ui-lib উপাদান অন্তর্ভুক্ত করুন।
  • অ্যান্ড্রয়েড অ্যাপ এবং আরআরও তৈরি করতে Gradle ব্যবহার করুন।
  • car-ui-lib সাথে RRO ব্যবহার করুন।

এই কোডল্যাবে আরআরওগুলি কীভাবে কাজ করে তার বিশদ বিবরণ দেয় না। রানটাইমে অ্যাপের রিসোর্সের মান পরিবর্তন করুন এবং আরও জানতে রানটাইম রিসোর্স ওভারলে সমস্যা সমাধান দেখুন।

আপনি শুরু করার আগে

পূর্বশর্ত

আপনি শুরু করার আগে, নিশ্চিত করুন যে আপনার আছে:

একটি নতুন অ্যান্ড্রয়েড অ্যাপ তৈরি করুন

সময়কাল: 15 মিনিট

এই বিভাগে, আপনি একটি নতুন অ্যান্ড্রয়েড স্টুডিও প্রকল্প তৈরি করুন।

  1. অ্যান্ড্রয়েড স্টুডিওতে একটি EmptyActivity সহ একটি অ্যাপ তৈরি করুন।

    একটি খালি কার্যকলাপ তৈরি করুন
    চিত্র 1. একটি খালি কার্যকলাপ তৈরি করুন

  2. CarUiCodelab অ্যাপটির নাম দিন এবং তারপরে জাভা ভাষা নির্বাচন করুন। আপনি চাইলে ফাইলের অবস্থানও নির্বাচন করতে পারেন। অবশিষ্ট সেটিংসের জন্য ডিফল্ট মান গ্রহণ করুন।

    আপনার অ্যাপের নাম দিন
    চিত্র 2. আপনার অ্যাপের নাম দিন

  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 রিসোর্স স্ট্রিং যোগ করুন এবং "হ্যালো ওয়ার্ল্ড!" এ সেট করুন। আপনার strings.xml ফাইলে। এই ফাইলটি খুলতে, অ্যাপ > src > প্রধান > res > মান > 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. আপনার অ্যাপ তৈরি করতে, উপরের ডানদিকে সবুজ প্লে বোতামে ক্লিক করুন। এটি করলে গ্রেডলের মাধ্যমে আপনার এমুলেটর বা অ্যান্ড্রয়েড ডিভাইসে স্বয়ংক্রিয়ভাবে apk ইনস্টল হয়ে যাবে।

    প্লে বোতাম

নতুন অ্যাপটি আপনার এমুলেটর বা অ্যান্ড্রয়েড ডিভাইসে স্বয়ংক্রিয়ভাবে খুলতে হবে। যদি না হয়, অ্যাপ লঞ্চার থেকে CarUiCodelab অ্যাপটি খুলুন, যা এখন ইনস্টল করা আছে। এটি এই মত প্রদর্শিত হয়:

নতুন CarUiCodelab অ্যাপ খুলুন
চিত্র 3. নতুন 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. অ্যাপটি তৈরি করতে, আগের মতো সবুজ প্লে বোতাম টিপুন।

    অ্যাপটি তৈরি করুন

আপনার অ্যাপে RRO যোগ করুন

সময়কাল: 30 মিনিট

আপনি যদি RRO-এর সাথে পরিচিত হন, তাহলে পরবর্তী বিভাগে যান, আপনার অ্যাপে একটি অনুমতি নিয়ন্ত্রক যোগ করুন । অন্যথায়, RRO-এর মূল বিষয়গুলি শিখতে, রানটাইমে একটি অ্যাপের সম্পদের মান পরিবর্তন দেখুন।

আপনার অ্যাপে একটি অনুমতি নিয়ন্ত্রক যোগ করুন

কোন RRO প্যাকেজ ওভারলে রিসোর্স নিয়ন্ত্রণ করতে, আপনার অ্যাপের /res ফোল্ডারে overlayable.xml নামে একটি ফাইল যোগ করুন। এই ফাইলটি আপনার অ্যাপ ( টার্গেট ) এবং আপনার 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-এ রিসোর্সের নাম অন্তর্ভুক্ত করুন।

    আপনার overlayable.xml ফাইল অবশ্যই res/values/ এ থাকতে হবে। যদি না হয়, OverlayManagerService এটি সনাক্ত করতে পারে না।

    ওভারলেয়েবল রিসোর্স এবং সেগুলি কীভাবে কনফিগার করা যায় সে সম্পর্কে আরও জানতে, ওভারলেয়েবল রিসোর্স সীমাবদ্ধ করুন দেখুন।

একটি RRO প্যাকেজ তৈরি করুন

এই বিভাগে, আপনি "হ্যালো ওয়ার্ল্ড!" থেকে উপরে প্রদর্শিত স্ট্রিং পরিবর্তন করতে একটি RRO প্যাকেজ তৈরি করুন। "হ্যালো ওয়ার্ল্ড আরআরও" কে।

  1. একটি নতুন প্রকল্প তৈরি করতে, ফাইল > নতুন > নতুন প্রকল্প নির্বাচন করুন। খালি ক্রিয়াকলাপের পরিবর্তে নো অ্যাক্টিভিটি নির্বাচন করতে ভুলবেন না কারণ RRO প্যাকেজগুলিতে কেবলমাত্র সংস্থান রয়েছে৷

    আপনার কনফিগারেশন নীচের চিত্রিত অনুরূপভাবে প্রদর্শিত হবে. যে অবস্থানে তারা সংরক্ষণ করা হয়েছে তা ভিন্ন হতে পারে:

  2. আপনি নতুন CarUiRRO প্রোজেক্ট তৈরি করার পর, AndroidManifest.xml পরিবর্তন করে প্রোজেক্টটিকে RRO হিসেবে ঘোষণা করুন।

    <?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 প্যাকেজে রিসোর্সের নাম ম্যাপ করে। RRO প্যাকেজগুলির জন্য ফ্ল্যাগ hasCode false সেট করা বাধ্যতামূলক৷ উপরন্তু, RRO প্যাকেজগুলিতে 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>
    আরআরও-এর গ্রেডল বিল্ড তৈরি করা হয়েছে

  5. আপনার RRO লক্ষ্য তৈরি করতে, আপনার এমুলেটর বা Android ডিভাইসে আপনার RRO-এর একটি Gradle বিল্ড তৈরি করতে সবুজ প্লে বোতাম টিপুন।

  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

আপনার অ্যাপটি "হ্যালো ওয়ার্ল্ড আরআরও" স্ট্রিংটি প্রদর্শন করে।

হ্যালো ওয়ার্ল্ড আরআরও!
চিত্র 4 : হ্যালো ওয়ার্ল্ড আরআরও!

অভিনন্দন! আপনি আপনার প্রথম RRO তৈরি করেছেন।

RROs ব্যবহার করার সময়, আপনি লিঙ্ক বিকল্পগুলিতে বর্ণিত Android সম্পদ প্যাকেজিং টুল (AAPT2) ফ্ল্যাগ --no-resource-deduping এবং --no-resource-removal ব্যবহার করতে চাইতে পারেন। এই কোডল্যাবে ফ্ল্যাগ যোগ করার প্রয়োজন নেই, তবে আমরা আপনাকে রিসোর্স অপসারণ (এবং ডিবাগিং মাথাব্যথা) এড়াতে আপনার RRO-তে সেগুলি ব্যবহার করার পরামর্শ দিই। আপনি সেগুলিকে আপনার RRO এর build.gradle ফাইলে এইভাবে যুক্ত করতে পারেন: 

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

এই পতাকাগুলি সম্পর্কে আরও জানতে, প্যাকেজ তৈরি করুন এবং AAPT2 দেখুন।

আপনার অ্যান্ড্রয়েড অ্যাপে RROs ব্যবহার করে car-ui-lib উপাদান পরিবর্তন করুন

এই পৃষ্ঠাটি বর্ণনা করে যে আপনি কীভাবে আপনার Android অ্যাপে car-ui-lib লাইব্রেরি থেকে উপাদানগুলি পরিবর্তন করতে রানটাইম রিসোর্স ওভারলে (RRO) ব্যবহার করতে পারেন৷

টুলবার পটভূমির রঙ সেট করুন

সময়কাল: 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. আপনার RRO-এর জন্য AndroidManifest.xml এ, car-ui-lib এ নির্দেশ করতে targetName আপডেট করুন: 

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

    আপনি RRO করতে চান এমন প্রতিটি লক্ষ্য প্যাকেজের জন্য আপনাকে অবশ্যই একটি নতুন RRO প্যাকেজ তৈরি করতে হবে। উদাহরণস্বরূপ, দুটি ভিন্ন লক্ষ্যের জন্য ওভারলে তৈরি করার সময়, আপনাকে অবশ্যই দুটি ওভারলে apks তৈরি করতে হবে।

  3. আগের মতই RRO তৈরি করুন, যাচাই করুন, ইনস্টল করুন এবং সক্ষম করুন।

আপনার অ্যাপ্লিকেশন এই মত প্রদর্শিত হবে:

নতুন টুলবার পটভূমির রঙ
চিত্র 5 : নতুন টুলবারের পটভূমির রঙ

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. RRO-তে আমাদের স্টাইল যোগ করতে 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. আপনার RRO-তে 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 সক্ষম করতে ভুলবেন না।

অ্যাপ এবং RRO নিম্নরূপ রেন্ডার। হ্যালো ওয়ার্ল্ড RRO টেক্সট সবুজ এবং লেআউট RRO-তে উল্লেখ করা মত কেন্দ্রিক।

হ্যালো ওয়ার্ল্ড RRO
চিত্র 6 : হ্যালো ওয়ার্ল্ড আরআরও

আপনার অ্যাপে CarUiRecyclerView যোগ করুন

সময়কাল: 15 মিনিট

CarUiRecyclerView ইন্টারফেস একটি RecyclerView অ্যাক্সেস করার জন্য API প্রদান করে যা car-ui-lib সম্পদের মাধ্যমে কাস্টমাইজ করা হয়। উদাহরণস্বরূপ, CarUiRecyclerView রানটাইমে একটি পতাকা পরীক্ষা করে স্ক্রলবারটি সক্ষম করা উচিত কিনা তা নির্ধারণ করে এবং সংশ্লিষ্ট লেআউট নির্বাচন করে।

CarUiRecyclerView Container
চিত্র 7. CarUiRecyclerView Container

  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
চিত্র 7 : CarUiRecyclerView

স্ক্রলবার সরাতে একটি RRO ব্যবহার করুন

সময়কাল: 10 মিনিট

CarUiRecyclerView থেকে স্ক্রলবার সরাতে RRO কীভাবে ব্যবহার করবেন এই অনুশীলনটি আপনাকে দেখায়।

  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
চিত্র 8. 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 জাভা কোড স্টাইল দেখুন।

  2. আগের মতই আপনার অ্যাপ তৈরি এবং ইনস্টল করুন। আপনি একটি নীল স্ক্রলবার এবং ধূসর রেল সহ CarUiRecyclerView তৈরি করেছেন৷

অভিনন্দন! উভয় তীর স্ক্রলবারের নীচে প্রদর্শিত হয়, আপনি Android Studio এর মাধ্যমে Gradle বিল্ড সিস্টেম ব্যবহার করে একটি car-ui-lib লেআউট রিসোর্স ফাইলে সফলভাবে একটি RRO প্রয়োগ করেছেন।

ধূসর রেল সহ একটি নীল স্ক্রলবার সহ CarUiRecyclerView
চিত্র 9. ধূসর রেল সহ একটি নীল স্ক্রলবার সহ CarUiRecyclerView

RRO তালিকা আইটেম

সময়কাল: 15 মিনিট

এই মুহুর্তে, আপনি ফ্রেমওয়ার্ক উপাদান ব্যবহার করে car-ui-lib উপাদানগুলিতে একটি RRO প্রয়োগ করেছেন (AndroidX নয়)। একটি RRO-তে AndroidX উপাদান ব্যবহার করতে, আপনাকে অবশ্যই সেই উপাদানটির নির্ভরতা অ্যাপ এবং RRO build.gradle. আপনাকে অবশ্যই আপনার অ্যাপের overlayable.xml এ সেই কম্পোনেন্টের attrs যোগ করতে হবে, সেইসাথে আপনার RRO-তে 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 এ তালিকা আইটেমগুলির বিন্যাস পরিবর্তন করুন। আপনার 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 সম্পদ। আপনি app/build.gradle এ আপনার RRO অ্যাপে নির্ভরতা হিসেবে 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'
}

শিরোনাম এবং বডি এখন বাম-সারিবদ্ধের পরিবর্তে ডান-সারিবদ্ধ।

ডান-সারিবদ্ধ শিরোনাম এবং মূল অংশ
চিত্র 10. ডান-সারিবদ্ধ শিরোনাম এবং বডি

আমরা শুধুমাত্র AndroidX উপাদান ( ConstraintLayout ) ব্যবহার করে car-ui-lib এ একটি RRO প্রয়োগ করেছি যখন এর বৈশিষ্ট্যগুলি overlayable.xml নামে car-ui-lib ফাইলের পাশাপাশি RRO sample_overlay.xml এ উপস্থিত ছিল। আপনার নিজের অ্যাপে অনুরূপ কিছু করা সম্ভব। শুধু car-ui-lib এর মতো আপনার অ্যাপের overlayable.xml এ সমস্ত সংশ্লিষ্ট attrs যোগ করুন।

যাইহোক, যখন অ্যাপটির build.gradle এ নির্ভরতা হিসেবে car-ui-lib থাকে (যখন অ্যাপ car-ui-lib উপাদান ব্যবহার করে) তখন AndroidX উপাদান ব্যবহার করে কোনো অ্যাপ RRO করা সম্ভব নয় । যেহেতু অ্যাট্রিবিউট ম্যাপিংগুলি ইতিমধ্যেই car-ui-lib লাইব্রেরির overlayable.xml এ সংজ্ঞায়িত করা হয়েছে, সেগুলিকে আপনার অ্যাপের overlayable.xml এ car-ui-lib সাথে একটি নির্ভরতা হিসাবে যুক্ত করলে নীচের মত একটি mergeDebugResources ত্রুটি হবে৷ কারণ এই বৈশিষ্ট্যগুলি একাধিক overlayable.xml ফাইলগুলিতে উপস্থিত রয়েছে: 

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