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

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

আপনি যা শিখবেন

কীভাবে করবেন:

  • আপনার অ্যান্ড্রয়েড অ্যাপে car-ui-lib কম্পোনেন্টগুলো অন্তর্ভুক্ত করুন।
  • অ্যান্ড্রয়েড অ্যাপ এবং আরআরও (RRO) তৈরি করতে গ্রেডল (Gradle) ব্যবহার করুন।
  • car-ui-lib এর সাথে RRO ব্যবহার করুন।

এই কোডল্যাবে RRO কীভাবে কাজ করে তা বিস্তারিতভাবে বলা হয়নি। আরও জানতে ‘Change the value of an app's resources at runtime’ এবং ‘Troubleshoot runtime resource overlays’ দেখুন।

শুরু করার আগে

পূর্বশর্ত

শুরু করার আগে নিশ্চিত হয়ে নিন যে আপনার কাছে নিম্নলিখিত জিনিসগুলো আছে:

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

সময়কাল: ১৫ মিনিট

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

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

    একটি খালি অ্যাক্টিভিটি তৈরি করুন
    চিত্র ১. একটি খালি অ্যাক্টিভিটি তৈরি করুন

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

    আপনার অ্যাপের নাম দিন
    চিত্র ২। আপনার অ্যাপটির নাম দিন।

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

    প্লে বোতাম

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

নতুন CarUiCodelab অ্যাপ খুলুন
চিত্র ৩। নতুন CarUiCodelab অ্যাপটি খুলুন।

আপনার অ্যান্ড্রয়েড অ্যাপে car-ui-lib যোগ করুন

সময়কাল: ১৫ মিনিট

আপনার অ্যাপে car-ui-lib যোগ করুন:

  1. আপনার প্রোজেক্টের build.gradle ফাইলে car-ui-lib ডিপেন্ডেন্সিটি যোগ করতে, app > build.gradle নির্বাচন করুন। আপনার ডিপেন্ডেন্সিগুলো দেখতে এইরকম হবে:

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

আপনার অ্যান্ড্রয়েড অ্যাপে 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 থিমটি ব্যবহার করতে, app > 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 যোগ করুন

সময়কাল: ৩০ মিনিট

যদি আপনি 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 প্যাকেজ তৈরি করুন

এই অংশে, আপনি উপরে প্রদর্শিত স্ট্রিং "Hello World!"-কে "Hello World RRO"-তে পরিবর্তন করার জন্য একটি RRO প্যাকেজ তৈরি করবেন।

  1. নতুন প্রজেক্ট তৈরি করতে, ফাইল > নতুন > নতুন প্রজেক্ট নির্বাচন করুন। এম্পটি অ্যাক্টিভিটির (Empty Activity) পরিবর্তে নো অ্যাক্টিভিটি (No Activity) নির্বাচন করতে ভুলবেন না, কারণ 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>
    RRO-এর গ্রেডল বিল্ড তৈরি করা হয়েছে

  5. আপনার RRO টার্গেটটি বিল্ড করতে, আপনার এমুলেটর বা অ্যান্ড্রয়েড ডিভাইসে 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

আপনার অ্যাপ "Hello World RRO" স্ট্রিংটি প্রদর্শন করে।

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

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

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

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

এই ফ্ল্যাগগুলো সম্পর্কে আরও জানতে, "Build the package" এবং "AAPT2" দেখুন।

আপনার অ্যান্ড্রয়েড অ্যাপে RRO ব্যবহার করে car-ui-lib কম্পোনেন্টগুলো পরিবর্তন করুন

এই পৃষ্ঠায় বর্ণনা করা হয়েছে কিভাবে আপনি আপনার অ্যান্ড্রয়েড অ্যাপে car-ui-lib লাইব্রেরির কম্পোনেন্টগুলো পরিবর্তন করতে একটি রানটাইম রিসোর্স ওভারলে (RRO) ব্যবহার করতে পারেন।

টুলবারের ব্যাকগ্রাউন্ড রঙ সেট করুন

সময়কাল: ১৫ মিনিট

টুলবারের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে:

  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 এ, targetName আপডেট করে car-ui-lib কে নির্দেশ করুন: 

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

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

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

আপনার অ্যাপটি দেখতে এইরকম:

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

RRO লেআউট এবং শৈলী

সময়কাল: ১৫ মিনিট

এই অনুশীলনীতে, আপনি পূর্বে তৈরি করা অ্যাপটির অনুরূপ একটি নতুন অ্যাপ তৈরি করবেন। এই অ্যাপটিতে লেআউট ওভারলে করার সুবিধা রয়েছে। আগের ধাপগুলোই অনুসরণ করুন, অথবা আপনার বিদ্যমান অ্যাপটি পরিবর্তন করুন।

  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-তে নির্দিষ্ট করা অনুযায়ী এটি কেন্দ্রে অবস্থিত।

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

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

সময়কাল: ১৫ মিনিট

CarUiRecyclerView ইন্টারফেসটি car-ui-lib রিসোর্সের মাধ্যমে কাস্টমাইজ করা একটি RecyclerView অ্যাক্সেস করার জন্য API প্রদান করে। উদাহরণস্বরূপ, স্ক্রলবারটি সক্রিয় করা হবে কি না তা নির্ধারণ করতে 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 বিল্ড ও কম্পাইল করতে পারবেন। ত্রুটিটি দূর করতে, File > Invalidate Caches নির্বাচন করুন, তারপর Invalidate and Restart-এ ক্লিক করুন।

    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 ব্যবহার করুন।

সময়কাল: ১০ মিনিট

এই অনুশীলনীতে দেখানো হয়েছে কিভাবে 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 স্ক্রলবারটি ওভারলে করতে একটি লেআউট ব্যবহার করুন।

সময়কাল: ১৫ মিনিট

এই অনুশীলনীতে, আপনি 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 তৈরি করেছেন।

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

ধূসর রেলিং সহ একটি নীল স্ক্রলবারযুক্ত CarUiRecyclerView।
চিত্র ৯. ধূসর রেলিং সহ নীল স্ক্রলবারযুক্ত CarUiRecyclerView।

আরআরও তালিকার আইটেমগুলি

সময়কাল: ১৫ মিনিট

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

শিরোনাম এবং মূল অংশ এখন বাম-সারিবদ্ধ না হয়ে ডান-সারিবদ্ধ হয়েছে।

ডানদিকে সারিবদ্ধ শিরোনাম এবং মূল অংশ
চিত্র ১০। ডানদিকে সারিবদ্ধ শিরোনাম ও মূল অংশ।

আমরা car-ui-lib এ AndroidX কম্পোনেন্ট ( ConstraintLayout ) ব্যবহার করে শুধুমাত্র তখনই একটি RRO প্রয়োগ করেছি, যখন এর অ্যাট্রিবিউটগুলো car-ui-lib এর overlayable.xml নামের ফাইলে এবং 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 এ আগে থেকেই সংজ্ঞায়িত করা ছিল, তাই car-ui-lib ডিপেন্ডেন্সি হিসেবে রেখে আপনার অ্যাপের overlayable.xml এ সেগুলো যোগ করলে নিচের মতো একটি mergeDebugResources এরর দেখা দেবে। এর কারণ হলো, এই অ্যাট্রিবিউটগুলো একাধিক overlayable.xml ফাইলে উপস্থিত থাকে: 

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