প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

কাস্টম স্টাইলিং

স্থান বিবরণ চাক্ষুষ কাস্টমাইজেশন
ভিজ্যুয়াল কাস্টমাইজেশন উদাহরণ

আপনি এই স্থানগুলির UI কিট উপাদানগুলির রঙ, টাইপোগ্রাফি, ব্যবধান, সীমানা এবং কোণগুলি কাস্টমাইজ করতে পারেন:

Places UI কিট মোটামুটিভাবে মেটেরিয়াল ডিজাইনের (কিছু Google-Maps-নির্দিষ্ট পরিবর্তন সহ) উপর ভিত্তি করে ভিজ্যুয়াল কাস্টমাইজেশনের জন্য একটি ডিজাইন সিস্টেম পদ্ধতির প্রস্তাব দেয়। রঙ এবং টাইপোগ্রাফির জন্য মেটেরিয়াল ডিজাইনের রেফারেন্স দেখুন। ডিফল্টরূপে, শৈলীটি Google মানচিত্রের ভিজ্যুয়াল ডিজাইনের ভাষা মেনে চলে।

স্থান বিবরণ কাস্টমাইজেশন বিকল্প

একটি খণ্ডকে ইনস্ট্যান্টিয়েট করার সময়, আপনি একটি থিম নির্দিষ্ট করতে পারেন যা যেকোনো ডিফল্ট শৈলী বৈশিষ্ট্যকে ওভাররাইড করে। যে কোনো থিম বৈশিষ্ট্য ওভাররাইড করা হয় না ডিফল্ট শৈলী ব্যবহার করে।

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

আপনি নিম্নলিখিত শৈলী কাস্টমাইজ করতে পারেন:

থিম বৈশিষ্ট্য ব্যবহার
রঙ
placesColorSurface ধারক এবং ডায়ালগ ব্যাকগ্রাউন্ড
placesColorOutlineDecorative ধারক সীমানা
placesColorPrimary লিঙ্ক, লোডিং সূচক, ওভারভিউ আইকন
placesColorOnSurface শিরোনাম, সংলাপের বিষয়বস্তু
placesColorOnSurfaceVariant স্থান তথ্য
placesColorSecondaryContainer বোতাম ব্যাকগ্রাউন্ড
placesColorOnSecondaryContainer বোতাম পাঠ্য এবং আইকন
placesColorNeutralContainer তারিখ ব্যাজ পর্যালোচনা করুন, স্থানধারক আকার লোড হচ্ছে
placesColorOnNeutralContainer পর্যালোচনার তারিখ, লোডিং ত্রুটি৷
placesColorPositiveContainer উপলব্ধ EV চার্জার ব্যাজ
placesColorOnPositiveContainer উপলব্ধ EV চার্জার ব্যাজ সামগ্রী
placesColorPositive "খুলুন" এখন লেবেল রাখুন
placesColorNegative "বন্ধ" এখন লেবেল রাখুন
placesColorInfo অ্যাক্সেসযোগ্য প্রবেশ আইকন
placesColorButtonBorder মানচিত্র এবং ঠিক আছে বোতাম খুলুন
টাইপোগ্রাফি
placesTextAppearanceBodySmall স্থান তথ্য
placesTextAppearanceBodyMedium স্থান তথ্য, ডায়ালগ বিষয়বস্তু
placesTextAppearanceLabelMedium ব্যাজ সামগ্রী
placesTextAppearanceLabelLarge বোতাম সামগ্রী
placesTextAppearanceHeadlineMedium ডায়ালগ শিরোনাম
placesTextAppearanceDisplaySmall স্থানের নাম
placesTextAppearanceTitleSmall স্থানের নাম
ব্যবধান
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
পরিমাপ
placesBorderWidth ধারক
placesBorderWidthButton
আকৃতি
placesCornerRadius ধারক
placesCornerRadiusButton মানচিত্র এবং ঠিক আছে বোতামে খুলুন (বৃত্তাকার আইকন বোতাম বাদ)
placesCornerRadiusThumbnail থাম্বনেইল ছবি রাখুন
placesCornerRadiusCollageOuter মিডিয়া কোলাজ
placesCornerRadiusCard প্লেস কার্ড, ইউজার রিভিউ কার্ড
placesCornerRadiusDialog Google Maps প্রকাশের ডায়ালগ
গুগল ম্যাপ ব্র্যান্ড অ্যাট্রিবিউশন
placesColorAttributionLightTheme হালকা থিম গুগল ম্যাপ অ্যাট্রিবিউশন এবং ডিসক্লোজার বোতাম (সাদা, ধূসর এবং কালো জন্য enums)
placesColorAttributionDarkTheme ডার্ক থিম গুগল ম্যাপ অ্যাট্রিবিউশন এবং ডিসক্লোজার বোতাম (সাদা, ধূসর এবং কালো জন্য enums)

অ্যাট্রিবিউশন রং

বৈশিষ্ট্য
অ্যাট্রিবিউশন

Google Maps-এর পরিষেবার শর্তাবলীর জন্য আপনাকে Google Maps অ্যাট্রিবিউশনের জন্য তিনটি ব্র্যান্ডের রঙের মধ্যে একটি ব্যবহার করতে হবে। কাস্টমাইজেশন পরিবর্তন করা হলে এই অ্যাট্রিবিউশনটি দৃশ্যমান এবং অ্যাক্সেসযোগ্য হতে হবে।

আমরা বেছে নেওয়ার জন্য 3টি ব্র্যান্ডের রঙ অফার করি যা হালকা এবং অন্ধকার থিমের জন্য স্বাধীনভাবে সেট করা যেতে পারে:

  • হালকা থিম: সাদা, ধূসর এবং কালোর জন্য enum মান সহ placesColorAttributionLight
  • গাঢ় থিম: সাদা, ধূসর এবং কালোর জন্য enum মান সহ placesColorAttributionDark

উদাহরণ

এই কোড নমুনা দেখায় কিভাবে একটি থিম তৈরি করতে হয় যা ডিফল্ট শৈলী বৈশিষ্ট্যগুলিকে ওভাররাইড করে। যে কোনো থিম বৈশিষ্ট্য ওভাররাইড করা হয় না ডিফল্ট শৈলী ব্যবহার করে।
  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

প্রতিটি উপাদানের জন্য সম্পূর্ণ উদাহরণ