কোটলিন অ্যান্ড্রয়েড ফান্ডামেন্টাল 10.1: শৈলী এবং থিম

এই কোডল্যাবটি Android Kotlin Fundamentals কোর্সের অংশ। আপনি যদি কোডল্যাবগুলি ক্রমানুসারে কাজ করেন তবে আপনি এই কোর্সের সর্বাধিক মূল্য পাবেন৷ সমস্ত কোর্স কোডল্যাব অ্যান্ড্রয়েড কোটলিন ফান্ডামেন্টাল কোডল্যাব ল্যান্ডিং পৃষ্ঠায় তালিকাভুক্ত করা হয়েছে।

নকশা পরিচিতি

কোডল্যাবগুলির এই সিরিজের ফোকাস অ্যান্ড্রয়েড ডেভেলপমেন্ট, অ্যাপ ডিজাইনের অন্যতম গুরুত্বপূর্ণ দিকগুলির উপর। অ্যাপ ডিজাইনের সুস্পষ্ট দিকগুলি হল ভিউ, টেক্সট এবং বোতাম এবং সেগুলি স্ক্রিনে কোথায় আছে, সেইসাথে তারা যে রঙ এবং ফন্ট ব্যবহার করে। পরবর্তীতে কী করতে হবে সে সম্পর্কে ব্যবহারকারীকে ইঙ্গিত দেওয়াও ডিজাইনের একটি অপরিহার্য দিক। ব্যবহারকারীদের এক নজরে বলতে হবে তারা কী দেখছে, কী গুরুত্বপূর্ণ এবং তারা কী করতে পারে।

নীচের দুটি পর্দা তুলনা. লক্ষ্য করুন যে উপাদানগুলিকে চারপাশে স্থানান্তরিত করে এবং গুরুত্বপূর্ণ বিষয়গুলিতে ফোকাস করে, আপনি ব্যবহারকারীকে কী ঘটছে তা বুঝতে সাহায্য করতে পারেন৷ সাধারণ পর্দার জন্য, ভাল ডিজাইনের অর্থ প্রায়ই কম দেখানো। অনেক গুরুত্বপূর্ণ তথ্য সহ স্ক্রিনের জন্য, ভাল ডিজাইন ঘন তথ্যকে এক নজরে বোধগম্য করে তোলে। আপনি যখন অ্যান্ড্রয়েড অ্যাপে কাজ করেন তখন আপনি তথ্য আর্কিটেকচার (IA) নামক এই ধারণাটি শুনতে পারেন।

ডিজাইনের আরেকটি স্তর হল সুসংগত ব্যবহারকারীর প্রবাহ তৈরি করা, বা কেস ব্যবহার করা , যা ব্যবহারকারীদের কাজগুলি সম্পন্ন করতে দেয়। ডিজাইনের এই ফর্মটিকে ইউজার এক্সপেরিয়েন্স ডিজাইন (ইউএক্সডি) বলা হয় এবং কিছু ডিজাইনার এটিতে বিশেষজ্ঞ।

আপনার যদি কোনও ডিজাইনারের অ্যাক্সেস না থাকে তবে শুরু করার জন্য এখানে কয়েকটি টিপস রয়েছে:

  • ব্যবহারের ক্ষেত্রে সংজ্ঞায়িত করুন। আপনার অ্যাপের মাধ্যমে ব্যবহারকারীদের কী করা উচিত এবং কীভাবে তা লিখুন।
  • একটি নকশা বাস্তবায়ন. আপনার প্রথম খসড়ার সাথে সংযুক্ত হবেন না, এবং শুধুমাত্র এটিকে "যথেষ্ট ভাল" করুন, কারণ বাস্তব ব্যবহারকারীরা কীভাবে এটির সাথে ইন্টারঅ্যাক্ট করে তা দেখার পরে আপনি এটি পরিবর্তন করবেন৷
  • প্রতিক্রিয়া পেতে. আপনার অ্যাপ পরীক্ষা করার জন্য আপনি কথা বলতে পারেন এমন কাউকে খুঁজুন—আপনার পরিবার, বন্ধুবান্ধব, এমনকি এমন লোকেদের যাদের আপনি এইমাত্র একটি Google ডেভেলপার গ্রুপে দেখা করেছেন৷ আপনি যখন দেখবেন এবং বিস্তারিত নোট নেবেন তখন তাদের একটি ব্যবহারের ক্ষেত্রে আপনার অ্যাপ ব্যবহার করতে বলুন।
  • পরিমার্জিত ! সেই সমস্ত তথ্য দিয়ে, অ্যাপটিকে আরও ভাল করুন এবং তারপরে এটি আবার পরীক্ষা করুন।

একটি দুর্দান্ত অ্যাপ অভিজ্ঞতা ডিজাইন করার সময় নিজেকে জিজ্ঞাসা করার জন্য এখানে কিছু অন্যান্য প্রশ্ন রয়েছে৷ আপনি পূর্ববর্তী কোডল্যাবগুলিতে এই সমস্যাগুলি মোকাবেলা করার কৌশলগুলি শিখেছেন:

  • ব্যবহারকারী যখন তাদের ডিভাইস ঘোরায় তখন কি অ্যাপটি তার অবস্থা হারায়?
  • ব্যবহারকারী অ্যাপটি খুললে কী হবে? ব্যবহারকারী কি একটি লোডিং স্পিনার দেখতে পাচ্ছেন, নাকি অফলাইন ক্যাশে ডেটা প্রস্তুত আছে?
  • অ্যাপটি কি এমনভাবে কোড করা হয়েছে যা দক্ষ এবং নিশ্চিত করে যে অ্যাপটি সর্বদা ব্যবহারকারীর স্পর্শে প্রতিক্রিয়াশীল?
  • অ্যাপটি কি ব্যাকএন্ড সিস্টেমের সাথে এমনভাবে ইন্টারঅ্যাক্ট করে যা ব্যবহারকারীর কাছে কখনও বিজোড়, ভুল বা বাসি ডেটা উপস্থাপন করে না?

আপনি যখন বৃহত্তর দর্শকদের জন্য অ্যাপ্লিকেশানগুলিতে কাজ করেন, আপনার অ্যাপ্লিকেশানগুলিকে যতটা সম্ভব অনেক ধরণের ব্যবহারকারীর কাছে অ্যাক্সেসযোগ্য করে তোলা অপরিহার্য৷ উদাহরণ স্বরূপ:

  • অনেক ব্যবহারকারী বিভিন্ন উপায়ে কম্পিউটার সিস্টেমের সাথে যোগাযোগ করে। অনেক ব্যবহারকারী বর্ণান্ধ, এবং এক ব্যবহারকারীর জন্য বৈপরীত্য অন্যের জন্য কাজ নাও করতে পারে। অনেক ব্যবহারকারীর দৃষ্টি প্রতিবন্ধকতা রয়েছে, অন্ধত্বের মাধ্যমে চশমা পড়ার প্রয়োজন।
  • কিছু ব্যবহারকারী টাচ স্ক্রিন ব্যবহার করতে পারে না এবং তারা অন্যান্য ইনপুট ডিভাইস যেমন বোতামের মাধ্যমে ইন্টারঅ্যাক্ট করে।

ব্যবহারকারীদের আপনার অ্যাপ ব্যবহার করার সবচেয়ে গুরুত্বপূর্ণ উপায় হল ভালো ডিজাইন।

এই কোডল্যাবগুলি আপনাকে অ্যান্ড্রয়েডের জন্য ডিজাইন সম্পর্কে সবকিছু শেখানোর জন্য খুব ছোট, কিন্তু তারা আপনাকে একটি ভাল দিক দিয়ে শুরু করবে এবং আপনি নিজেরাই শিখতে এবং বিকাশ চালিয়ে যেতে পারেন৷

আপনি ইতিমধ্যে কি জানা উচিত

আপনার সাথে পরিচিত হওয়া উচিত:

  • ক্রিয়াকলাপ এবং টুকরোগুলি সহ অ্যাপগুলি কীভাবে তৈরি করবেন এবং ডেটা পাস করার টুকরোগুলির মধ্যে নেভিগেট করবেন৷
  • RecyclerView সহ একটি ইউজার ইন্টারফেস (UI) লেআউট করতে ভিউ এবং ভিউ গ্রুপ ব্যবহার করা
  • একটি সুগঠিত এবং দক্ষ অ্যাপ তৈরি করার জন্য প্রস্তাবিত আর্কিটেকচার সহ ViewModel সহ আর্কিটেকচার উপাদানগুলি কীভাবে ব্যবহার করবেন
  • ডেটা বাইন্ডিং, কোরোটিন এবং ক্লিকগুলি কীভাবে পরিচালনা করতে হয়
  • একটি Room ডাটাবেস ব্যবহার করে কীভাবে ইন্টারনেটের সাথে সংযোগ এবং স্থানীয়ভাবে ডেটা ক্যাশে করবেন
  • ভিউ প্রপার্টি কিভাবে সেট করবেন
  • কিভাবে এক্সএমএল রিসোর্স ফাইল থেকে রিসোর্স এক্সট্রাক্ট করবেন এবং রিসোর্স ব্যবহার করবেন

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

  • অ্যান্ড্রয়েডের স্টাইলিং সিস্টেমের মৌলিক বিষয়
  • আপনার অ্যাপ কাস্টমাইজ করার জন্য বৈশিষ্ট্য, শৈলী এবং থিমগুলি কীভাবে ব্যবহার করবেন

আপনি কি করবেন

  • ভিউ অ্যাট্রিবিউট, স্টাইল এবং থিম সহ একটি স্টার্টার অ্যাপের ডিজাইন উন্নত করুন

GDG-ফাইন্ডার স্টার্টার অ্যাপটি এই কোর্সে আপনি এখন পর্যন্ত যা কিছু শিখেছেন তার উপর তৈরি করে।

অ্যাপটি তিনটি স্ক্রীন লেআউট করার জন্য ConstraintLayout ব্যবহার করে। দুটি স্ক্রীন শুধুমাত্র লেআউট ফাইল যা আপনি অ্যান্ড্রয়েডে রঙ এবং পাঠ্য অন্বেষণ করতে ব্যবহার করবেন।

তৃতীয় পর্দা একটি GDG সন্ধানকারী. GDGs, বা Google বিকাশকারী গোষ্ঠীগুলি হল ডেভেলপারদের সম্প্রদায় যেগুলি Android সহ Google প্রযুক্তিগুলিতে ফোকাস করে৷ সারা বিশ্বে GDG গুলি মিটআপ, সম্মেলন, অধ্যয়ন জ্যাম এবং অন্যান্য ইভেন্টগুলি হোস্ট করে৷

আপনি এই অ্যাপটি বিকাশ করার সাথে সাথে আপনি GDG-এর আসল তালিকায় কাজ করবেন। ফাইন্ডার স্ক্রীন দূরত্ব অনুসারে GDG গুলি সাজানোর জন্য ডিভাইসের অবস্থান ব্যবহার করে।

আপনি যদি ভাগ্যবান হন এবং আপনার অঞ্চলে একটি GDG থাকে, আপনি ওয়েবসাইটটি দেখতে পারেন এবং তাদের ইভেন্টগুলির জন্য সাইন আপ করতে পারেন! GDG ইভেন্টগুলি অন্যান্য Android ডেভেলপারদের সাথে দেখা করার এবং শিল্পের সেরা অনুশীলনগুলি শেখার একটি দুর্দান্ত উপায় যা এই কোর্সের সাথে খাপ খায় না৷

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

অ্যান্ড্রয়েড একটি সমৃদ্ধ স্টাইলিং সিস্টেম সরবরাহ করে যা আপনাকে আপনার অ্যাপের সমস্ত দৃশ্যের উপস্থিতি নিয়ন্ত্রণ করতে দেয়৷ স্টাইলিং প্রভাবিত করতে আপনি থিম, শৈলী এবং বৈশিষ্ট্যগুলি দেখতে পারেন। নীচে দেখানো চিত্রটি স্টাইলিংয়ের প্রতিটি পদ্ধতির অগ্রাধিকারকে সংক্ষিপ্ত করে। পিরামিড ডায়াগ্রামটি নীচের দিক থেকে, সিস্টেমের দ্বারা স্টাইলিং পদ্ধতিগুলি যে ক্রমে প্রয়োগ করা হয় তা দেখায়৷ উদাহরণস্বরূপ, আপনি যদি থিমে টেক্সট সাইজ সেট করেন এবং তারপর ভিউ অ্যাট্রিবিউটে টেক্সট সাইজ আলাদাভাবে সেট করেন, ভিউ অ্যাট্রিবিউট থিম স্টাইলিংকে ওভাররাইড করবে।

বৈশিষ্ট্য দেখুন

  • প্রতিটি দৃশ্যের জন্য স্পষ্টভাবে বৈশিষ্ট্য সেট করতে ভিউ অ্যাট্রিবিউট ব্যবহার করুন। (দেখুন বৈশিষ্ট্যগুলি পুনঃব্যবহারযোগ্য নয়, শৈলীগুলির মতো।)
  • আপনি শৈলী বা থিমের মাধ্যমে সেট করা যেতে পারে এমন প্রতিটি সম্পত্তি ব্যবহার করতে পারেন।

কাস্টম বা এক-বন্ধ ডিজাইনের জন্য ব্যবহার করুন যেমন মার্জিন, প্যাডিং বা সীমাবদ্ধতা।

শৈলী

  • পুনঃব্যবহারযোগ্য স্টাইলিং তথ্যের একটি সংগ্রহ তৈরি করতে একটি শৈলী ব্যবহার করুন, যেমন ফন্টের আকার বা রঙ।
  • আপনার অ্যাপ জুড়ে ব্যবহৃত সাধারণ ডিজাইনের ছোট সেট ঘোষণা করার জন্য ভাল।

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

ডিফল্ট শৈলী

  • এটি অ্যান্ড্রয়েড সিস্টেম দ্বারা প্রদত্ত ডিফল্ট স্টাইলিং।

থিম

  • আপনার পুরো অ্যাপের রঙ নির্ধারণ করতে একটি থিম ব্যবহার করুন।
  • পুরো অ্যাপের জন্য ডিফল্ট ফন্ট সেট করতে একটি থিম ব্যবহার করুন।
  • সমস্ত ভিউতে প্রযোজ্য, যেমন টেক্সট ভিউ বা রেডিও বোতাম।
  • বৈশিষ্ট্যগুলি কনফিগার করতে ব্যবহার করুন যা আপনি পুরো অ্যাপের জন্য ধারাবাহিকভাবে প্রয়োগ করতে পারেন।

পাঠ্য উপস্থিতি

  • শুধুমাত্র টেক্সট অ্যাট্রিবিউট সহ স্টাইল করার জন্য, যেমন fontFamily ।

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

নীচের স্ক্রিনশটগুলি হালকা থিম (বাম) এবং একটি গাঢ় থিম (ডান) সহ একটি কাস্টম ফন্ট এবং হেডার আকার সহ GDG-ফাইন্ডার অ্যাপটি দেখায়৷ এটি বিভিন্ন উপায়ে প্রয়োগ করা যেতে পারে, এবং আপনি এই কোডল্যাবে তাদের কিছু শিখতে পারেন।

এই টাস্কে, আপনি অ্যাপ লেআউটের টেক্সটের জন্য স্টাইল হেডারে অ্যাট্রিবিউট ব্যবহার করেন।

  1. GDG-ফাইন্ডার স্টার্টার অ্যাপ ডাউনলোড করুন এবং চালান।
  2. লক্ষ্য করুন যে হোম স্ক্রিনে অনেকগুলি অভিন্ন ফর্ম্যাট করা পাঠ্য রয়েছে, যা পৃষ্ঠাটি কী সম্পর্কে এবং কী গুরুত্বপূর্ণ তা বোঝা কঠিন করে তোলে৷
  3. home_fragment.xml লেআউট ফাইলটি খুলুন।
  4. লক্ষ্য করুন যে লেআউটটি একটি ScrollView ভিতরে উপাদানগুলির অবস্থানের জন্য ConstraintLayout ব্যবহার করে।
  5. লক্ষ্য করুন যে প্রতিটি দৃশ্যের জন্য, সীমাবদ্ধতা এবং মার্জিন বিন্যাস বৈশিষ্ট্যগুলি ভিউতে সেট করা আছে, কারণ এই বৈশিষ্ট্যগুলি প্রতিটি ভিউ এবং স্ক্রিনের জন্য কাস্টমাইজ করা হয়।
  6. title টেক্সট ভিউতে, টেক্সটের সাইজ 24sp এ পরিবর্তন করতে একটি textSize অ্যাট্রিবিউট যোগ করুন।

    একটি অনুস্মারক হিসাবে, sp মানে স্কেল-স্বাধীন পিক্সেল , যেগুলি পিক্সেল ঘনত্ব এবং ব্যবহারকারীর ডিভাইস সেটিংসে সেট করা ফন্ট-আকার পছন্দ উভয় দ্বারা স্কেল করা হয়। অ্যান্ড্রয়েড টেক্সট আঁকার সময় স্ক্রিনে টেক্সট কত বড় হওয়া উচিত তা বের করে। পাঠ্য আকারের জন্য সর্বদা sp ব্যবহার করুন।
<TextView
       android:id="@+id/title"
...

android:textSize="24sp"
  1. #FF555555 এর একটি aRGB মান সেট করে title পাঠ্য দৃশ্যের টেক্সট textColor অস্বচ্ছ ধূসরে সেট করুন।
<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"
  1. অ্যান্ড্রয়েড স্টুডিওতে পূর্বরূপ ট্যাব খুলতে, দেখুন > টুল উইন্ডোজ > পূর্বরূপ নির্বাচন করুন বা লেআউট সম্পাদকের ডান প্রান্তে উল্লম্ব পূর্বরূপ বোতামে ক্লিক করুন। প্রিভিউতে, যাচাই করুন যে শিরোনামটি ধূসর এবং আগের চেয়ে বড়, যেমনটি নীচে দেখানো হয়েছে৷

  1. একটি ছোট ফন্ট, 18sp সহ হেডারের মতো একই রঙের জন্য সাবটাইটেলটিকে স্টাইল করুন। (ডিফল্ট আলফা হল FF , অস্বচ্ছ। আপনি যদি আলফা মান পরিবর্তন না করেন তবে আপনি বাদ দিতে পারেন।)
<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

  1. এই কোডল্যাবে, লক্ষ্য হল অ্যাপটিকে পেশাদার দেখাতে গিয়ে কিছুটা বাতিকপূর্ণ করার জন্য স্টাইল করা, তবে আপনি এটিকে আপনার ইচ্ছামত স্টাইল করতে পারেন। subtitle টেক্সট ভিউ জন্য নিম্নলিখিত গুণাবলী চেষ্টা করুন. আপনার অ্যাপের চেহারা কীভাবে পরিবর্তিত হয় তা দেখতে পূর্বরূপ ট্যাবটি ব্যবহার করুন। তারপর এই বৈশিষ্ট্যগুলি সরান।
<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"
  1. আপনি চালিয়ে যাওয়ার আগে subtitle ভিউ থেকে textAllCaps , textStyle , এবং background বৈশিষ্ট্যগুলিকে পূর্বাবস্থায় ফিরিয়ে আনতে ভুলবেন না৷
  2. আপনার অ্যাপটি চালান, এবং এটি ইতিমধ্যে আরও ভাল দেখা উচিত।

আপনার অ্যাপের সাথে ফন্ট ব্যবহার করার সময়, আপনি আপনার APK এর অংশ হিসাবে প্রয়োজনীয় ফন্ট ফাইল পাঠাতে পারেন। সহজ হলেও, এই সমাধানটি সাধারণত সুপারিশ করা হয় না, কারণ এটি আপনার অ্যাপটিকে ডাউনলোড এবং ইনস্টল করতে বেশি সময় নেয়।

Android অ্যাপগুলিকে ডাউনলোডযোগ্য ফন্ট API ব্যবহার করে রানটাইমে ফন্ট ডাউনলোড করতে দেয়। যদি আপনার অ্যাপটি ডিভাইসে অন্য অ্যাপের মতো একই ফন্ট ব্যবহার করে, তাহলে Android শুধুমাত্র একবার ফন্টটি ডাউনলোড করে, ডিভাইসের স্টোরেজ স্পেস বাঁচায়।

এই টাস্কে, আপনি থিম ব্যবহার করে আপনার অ্যাপের প্রতিটি ভিউয়ের ফন্ট সেট করতে ডাউনলোডযোগ্য ফন্ট ব্যবহার করেন।

ধাপ 1: একটি ডাউনলোডযোগ্য ফন্ট প্রয়োগ করুন

  1. ডিজাইন ট্যাবে home_fragment.xml খুলুন।
  2. কম্পোনেন্ট ট্রি প্যানে, title টেক্সট ভিউ নির্বাচন করুন।
  3. অ্যাট্রিবিউট প্যানে, fontFamily অ্যাট্রিবিউট খুঁজুন। আপনি এটি সমস্ত বৈশিষ্ট্য বিভাগে খুঁজে পেতে পারেন, অথবা আপনি এটির জন্য অনুসন্ধান করতে পারেন।
  4. ড্রপ-ডাউন তীরটিতে ক্লিক করুন।
  5. আরও ফন্টে স্ক্রোল করুন এবং এটি নির্বাচন করুন। একটি সম্পদ উইন্ডো খোলে।

  1. রিসোর্স উইন্ডোতে, lobster জন্য অনুসন্ধান করুন, অথবা শুধু lo .
  2. ফলাফলে, লবস্টার টু নির্বাচন করুন।
  3. ডানদিকে, ফন্ট নামের নীচে, ডাউনলোডযোগ্য ফন্ট তৈরি করুন রেডিও বোতামটি নির্বাচন করুন৷ ঠিক আছে ক্লিক করুন.
  4. অ্যান্ড্রয়েড ম্যানিফেস্ট ফাইলটি খুলুন।
  5. ম্যানিফেস্টের নিচের দিকে, "preloaded_fonts" -এ সেট করা name এবং resource অ্যাট্রিবিউট সহ নতুন <meta-data> ট্যাগ খুঁজুন। এই ট্যাগটি Google Play পরিষেবাগুলিকে বলে যে এই অ্যাপটি ডাউনলোড করা ফন্টগুলি ব্যবহার করতে চায়৷ যখন আপনার অ্যাপ চলে এবং লবস্টার টু ফন্টের অনুরোধ করে, ফন্ট প্রদানকারী ইন্টারনেট থেকে ফন্টটি ডাউনলোড করে, যদি ফন্টটি ডিভাইসে ইতিমধ্যে উপলব্ধ না থাকে।
<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>
  1. res/values ​​ফোল্ডারে, preloaded_fonts.xml ফাইলটি খুঁজুন, যেটি অ্যারেকে সংজ্ঞায়িত করে যা এই অ্যাপের জন্য সমস্ত ডাউনলোডযোগ্য ফন্ট তালিকাভুক্ত করে।
  2. একইভাবে, res/fonts/lobster_two.xml ফাইলে ফন্ট সম্পর্কে তথ্য রয়েছে।
  3. home_fragment.xml খুলুন এবং কোড এবং প্রিভিউতে লক্ষ্য করুন যে TextView title লবস্টার টু ফন্ট প্রয়োগ করা হয়েছে এবং এইভাবে শিরোনামে প্রয়োগ করা হয়েছে।

  1. res/values/styles.xml খুলুন এবং প্রকল্পের জন্য তৈরি করা ডিফল্ট AppTheme থিম পরীক্ষা করুন। এটি বর্তমানে নীচে দেখানো হিসাবে দেখায়. সমস্ত পাঠ্যে নতুন লবস্টার টু ফন্ট প্রয়োগ করতে, আপনাকে এই থিমটি আপডেট করতে হবে।
  2. <style> ট্যাগে, parent অ্যাট্রিবিউটটি লক্ষ্য করুন। প্রতিটি শৈলী ট্যাগ একটি অভিভাবক নির্দিষ্ট করতে পারে এবং পিতামাতার সমস্ত গুণাবলী উত্তরাধিকারী হতে পারে৷ কোডটি Android লাইব্রেরি দ্বারা সংজ্ঞায়িত Theme নির্দিষ্ট করে। MaterialComponents থিম যা বোতামগুলি কীভাবে কাজ করে তা থেকে টুলবারগুলি কীভাবে আঁকতে হয় তা সব কিছু নির্দিষ্ট করে। থিমটিতে বুদ্ধিমান ডিফল্ট রয়েছে, তাই আপনি যে অংশগুলি চান তা কাস্টমাইজ করতে পারেন৷ অ্যাপটি অ্যাকশন বার ( NoActionBar ) ছাড়াই এই থিমের Light সংস্করণ ব্যবহার করে, যেমনটা আপনি উপরের স্ক্রিনশটে দেখতে পাচ্ছেন।
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>
  1. AppTheme স্টাইলের ভিতরে, ফন্ট ফ্যামিলিটিকে lobster_two এ সেট করুন। আপনাকে android:fontFamily এবং fontFamily উভয়ই সেট করতে হবে, কারণ মূল থিম উভয়ই ব্যবহার করে। আপনি আপনার পরিবর্তনের পূর্বরূপ দেখতে ডিজাইন ট্যাবে home_fragment.xml চেক করতে পারেন।
<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>
  1. অ্যাপটি আবার চালান। নতুন ফন্ট সব লেখায় লাগানো হয়! নেভিগেশন ড্রয়ারটি খুলুন এবং অন্যান্য স্ক্রিনে যান এবং আপনি দেখতে পাবেন যে ফন্টটি সেখানেও প্রয়োগ করা হয়েছে।

ধাপ 2: শিরোনামে থিম প্রয়োগ করুন

  1. home_fragment.xml এ, title টেক্সট ভিউ খুঁজুন, যেটিতে lobster_two ফন্টের বৈশিষ্ট্য রয়েছে। fontFamily অ্যাট্রিবিউট মুছুন এবং অ্যাপটি চালান। কারণ থিম একই ফন্ট পরিবার সেট করে, কোন পরিবর্তন নেই।
  2. title টেক্সট ভিউতে একটি ভিন্ন fontFamily অ্যাট্রিবিউট রাখুন:
    app:fontFamily="serif-monospace "
     এটি app স্পেসে আছে তা নিশ্চিত করুন!
<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"
  1. অ্যাপটি চালান, এবং আপনি দেখতে পাচ্ছেন যে ভিউতে স্থানীয় বৈশিষ্ট্যটি থিমটিকে ওভাররাইড করে।
  1. title পাঠ্য দৃশ্য থেকে fontFamily বৈশিষ্ট্যটি সরান।

থিমগুলি আপনার অ্যাপে সাধারণ থিমিং প্রয়োগ করার জন্য দুর্দান্ত, যেমন একটি ডিফল্ট ফন্ট এবং প্রাথমিক রঙ৷ একটি নির্দিষ্ট দৃশ্য স্টাইল করার জন্য এবং মার্জিন, প্যাডিং এবং সীমাবদ্ধতার মতো লেআউট তথ্য যোগ করার জন্য বৈশিষ্ট্যগুলি দুর্দান্ত, যা প্রতিটি স্ক্রিনের জন্য নির্দিষ্ট হতে থাকে।

শৈলী-শ্রেণীবিন্যাস পিরামিডের মাঝখানে শৈলী রয়েছে। শৈলী হল বৈশিষ্ট্যগুলির পুনঃব্যবহারযোগ্য "গ্রুপ" যা আপনি আপনার পছন্দের দৃশ্যগুলিতে প্রয়োগ করতে পারেন৷ এই টাস্কে, আপনি শিরোনাম এবং সাবটাইটেলের জন্য একটি স্টাইল ব্যবহার করেন।

ধাপ 1: একটি শৈলী তৈরি করুন

  1. res/values/styles.xml খুলুন।
  2. <resources> ট্যাগের ভিতরে, <style> ট্যাগ ব্যবহার করে একটি নতুন শৈলী সংজ্ঞায়িত করুন, যেমন নীচে দেখানো হয়েছে।
<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

শৈলীর নামগুলি যখন আপনি তাদের নাম দেন তখন সেম্যান্টিক হিসাবে চিন্তা করা গুরুত্বপূর্ণ। শৈলীটি কিসের জন্য ব্যবহার করা হবে তার উপর ভিত্তি করে একটি শৈলীর নাম নির্বাচন করুন, স্টাইলটি প্রভাবিত করে এমন বৈশিষ্ট্যগুলির উপর ভিত্তি করে নয়। উদাহরণস্বরূপ, এই শৈলীটিকে Title বলুন, LargeFontInGrey মতো কিছু নয়। এই স্টাইলটি আপনার অ্যাপের যেকোনো জায়গায় যেকোনো শিরোনাম দ্বারা ব্যবহার করা হবে। একটি নিয়ম হিসাবে, TextAppearance শৈলীকে TextAppearance. Name , তাই এই ক্ষেত্রে, নামটি TextAppearance.Title ।

শৈলীর একটি অভিভাবক আছে, ঠিক যেমন একটি থিমের একটি অভিভাবক থাকতে পারে। কিন্তু এবার, একটি থিম প্রসারিত করার পরিবর্তে, শৈলীটি একটি শৈলীকে প্রসারিত করে, TextAppearance.MaterialComponents.Headline6 । এই স্টাইলটি MaterialComponents থিমের জন্য একটি ডিফল্ট টেক্সট স্টাইল, তাই এটিকে প্রসারিত করে আপনি স্ক্র্যাচ থেকে শুরু করার পরিবর্তে ডিফল্ট শৈলী পরিবর্তন করুন।

  1. নতুন শৈলীর ভিতরে, দুটি আইটেম সংজ্ঞায়িত করুন। একটি আইটেমে, textSize 24sp করুন। অন্য আইটেমটিতে, textColor আগে ব্যবহার করা একই গাঢ় ধূসরে সেট করুন।
 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>
  1. সাবটাইটেলগুলির জন্য অন্য শৈলী সংজ্ঞায়িত করুন। এটির নাম দিন TextAppearance.Subtitle .সাবটাইটেল।
  2. কারণ TextAppearance.Title থেকে শুধুমাত্র পার্থক্য হবে টেক্সট সাইজে, এই স্টাইলটিকে TextAppearance.Title এর চাইল্ড করুন।
  3. Subtitle শৈলীর ভিতরে, পাঠ্যের আকার 18sp সেট করুন। এখানে সম্পূর্ণ শৈলী আছে:
<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

ধাপ 2: আপনি যে শৈলী তৈরি করেছেন তা প্রয়োগ করুন

  1. home_fragment.xml এ, TextAppearance যোগ করুন। title টেক্সট ভিউ Title শৈলী. textSize এবং textColor বৈশিষ্ট্যগুলি মুছুন।

    থিম আপনার সেট করা যেকোনো TextAppearance স্টাইলিংকে ওভাররাইড করে। (কোডল্যাবের শুরুতে পিরামিড ডায়াগ্রামটি যে ক্রম অনুসারে স্টাইলিং প্রয়োগ করা হয়েছে তা দেখায়।) একটি TextAppearance হিসাবে শৈলী প্রয়োগ করতে textAppearance বৈশিষ্ট্য ব্যবহার করুন যাতে Theme সেট করা ফন্টটি আপনি এখানে যা সেট করেছেন তা ওভাররাইড করে।
<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"
  1. এছাড়াও subtitle টেক্সট ভিউতে TextAppearance.Subtitle শৈলী যোগ করুন এবং textSize এবং textColor বৈশিষ্ট্য মুছে দিন। আপনাকে এই স্টাইলটিকে একটি textAppearance হিসাবেও প্রয়োগ করতে হবে, যাতে থিমে সেট করা ফন্টটি আপনি এখানে যা সেট করেছেন তা ওভাররাইড করে।
<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"
  1. অ্যাপটি চালান এবং আপনার পাঠ্য এখন ধারাবাহিকভাবে স্টাইল করা হয়েছে।

অ্যান্ড্রয়েড স্টুডিও প্রকল্প: GDGFinderStyles ।

  • থিম, শৈলী এবং বৈশিষ্ট্যগুলি ব্যবহার করুন ভিউয়ের চেহারা পরিবর্তন করতে।
  • থিমগুলি আপনার পুরো অ্যাপের স্টাইলিংকে প্রভাবিত করে এবং রঙ, ফন্ট এবং ফন্টের আকারের জন্য অনেক প্রিসেট মান সহ আসে।
  • যে ভিউতে অ্যাট্রিবিউট সেট করা আছে সেখানে একটি অ্যাট্রিবিউট প্রযোজ্য। আপনার যদি স্টাইলিং থাকে যা শুধুমাত্র একটি ভিউতে প্রযোজ্য, যেমন প্যাডিং, মার্জিন এবং সীমাবদ্ধতা থাকে তাহলে বৈশিষ্ট্যগুলি ব্যবহার করুন৷
  • শৈলী হল বৈশিষ্ট্যের গোষ্ঠী যা একাধিক দর্শন দ্বারা ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনার সমস্ত বিষয়বস্তুর শিরোনাম, বোতাম বা পাঠ্য দর্শনের জন্য একটি স্টাইল থাকতে পারে।
  • থিম এবং শৈলী তাদের মূল থিম বা শৈলী থেকে উত্তরাধিকারসূত্রে প্রাপ্ত। আপনি শৈলী একটি অনুক্রম তৈরি করতে পারেন.
  • বৈশিষ্ট্য মান (যা ভিউ সেট করা হয়) ওভাররাইড শৈলী. শৈলী ডিফল্ট শৈলী ওভাররাইড করে। শৈলী থিম ওভাররাইড করে। থিমগুলি textAppearance বৈশিষ্ট্য দ্বারা সেট করা যেকোনো স্টাইলিংকে ওভাররাইড করে।

  • <style> এবং <item> ট্যাগ ব্যবহার করে styles.xml রিসোর্স ফাইলে শৈলী সংজ্ঞায়িত করুন।
<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

ডাউনলোডযোগ্য ফন্ট ব্যবহার করে আপনার APK এর আকার না বাড়িয়ে ব্যবহারকারীদের জন্য ফন্ট উপলব্ধ করে। একটি দর্শনের জন্য একটি ডাউনলোডযোগ্য ফন্ট যোগ করতে:

  1. ডিজাইন ট্যাবে ভিউ নির্বাচন করুন এবং ফন্ট fontFamily অ্যাট্রিবিউটের ড্রপ-ডাউন মেনু থেকে আরও ফন্ট নির্বাচন করুন।
  2. রিসোর্স ডায়ালগে, একটি ফন্ট খুঁজুন এবং ডাউনলোডযোগ্য ফন্ট তৈরি করুন রেডিও বোতামটি নির্বাচন করুন।
  3. যাচাই করুন যে Android ম্যানিফেস্টে প্রিলোড করা ফন্টগুলির জন্য একটি মেটা-ডেটা ট্যাগ রয়েছে৷

যখন অ্যাপটি প্রথমে একটি ফন্টের জন্য অনুরোধ করে এবং ফন্টটি ইতিমধ্যে উপলব্ধ না থাকে, তখন ফন্ট প্রদানকারী এটি ইন্টারনেট থেকে ডাউনলোড করে।

অ্যান্ড্রয়েড বিকাশকারী ডকুমেন্টেশন:

অন্যান্য উৎস:

এই বিভাগে একজন প্রশিক্ষকের নেতৃত্বে একটি কোর্সের অংশ হিসাবে এই কোডল্যাবের মাধ্যমে কাজ করা শিক্ষার্থীদের জন্য সম্ভাব্য হোমওয়ার্ক অ্যাসাইনমেন্ট তালিকাভুক্ত করা হয়েছে। নিম্নলিখিতগুলি করা প্রশিক্ষকের উপর নির্ভর করে:

  • প্রয়োজনে হোমওয়ার্ক বরাদ্দ করুন।
  • শিক্ষার্থীদের সাথে যোগাযোগ করুন কিভাবে হোমওয়ার্ক অ্যাসাইনমেন্ট জমা দিতে হয়।
  • হোমওয়ার্ক অ্যাসাইনমেন্ট গ্রেড.

প্রশিক্ষকরা এই পরামর্শগুলিকে তারা যতটা কম বা যতটা চান ব্যবহার করতে পারেন, এবং তাদের উপযুক্ত মনে করে অন্য কোনও হোমওয়ার্ক বরাদ্দ করতে নির্দ্বিধায় করা উচিত।

আপনি যদি নিজে থেকে এই কোডল্যাবের মাধ্যমে কাজ করে থাকেন, তাহলে আপনার জ্ঞান পরীক্ষা করার জন্য এই হোমওয়ার্ক অ্যাসাইনমেন্টগুলি ব্যবহার করুন।

এই প্রশ্নগুলোর উত্তর দাও

প্রশ্ন 1

থিম সংজ্ঞায়িত করতে কোন ট্যাগ ব্যবহার করা হয়?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

প্রশ্ন 2

নিচের কোনটি শৈলীর ভালো ব্যবহার নয়?

▢ একটি দৃশ্যের সীমাবদ্ধতা নির্দিষ্ট করুন।

▢ শিরোনামগুলির পটভূমির রঙ নির্দিষ্ট করুন।

▢ দৃষ্টিভঙ্গি জুড়ে ফন্টের আকার একত্রিত করুন।

▢ দর্শনের একটি গোষ্ঠীর জন্য পাঠ্যের রঙ নির্দিষ্ট করুন।

প্রশ্ন 3

থিম এবং শৈলী মধ্যে পার্থক্য কি?

▢ থিমগুলি সম্পূর্ণ অ্যাপে প্রযোজ্য, যখন আপনি নির্দিষ্ট দৃশ্যগুলিতে শৈলী প্রয়োগ করতে পারেন৷

▢ থিমগুলি অন্যান্য থিম থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হতে পারে না, তবে শৈলীগুলি অন্যান্য শৈলী থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হতে পারে৷

▢ শৈলী অন্যান্য শৈলী থেকে উত্তরাধিকারসূত্রে পাওয়া যায় না, তবে থিমগুলি অন্যান্য থিম থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হতে পারে।

▢ থিমগুলি Android সিস্টেম দ্বারা সরবরাহ করা হয়, যখন শৈলীগুলি বিকাশকারী দ্বারা সংজ্ঞায়িত করা হয়৷

প্রশ্ন 4

যদি আপনার অ্যাপের একটি TextView এর একটি Theme থাকে যা ফন্টের আকার 12sp এ সেট করে, একটি সংজ্ঞায়িত শৈলী যা এটিকে 14sp সেট করে এবং fontSize এর একটি ফন্ট সাইজ বৈশিষ্ট্য, 16sp প্রদর্শিত ফন্টের আকার কত?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

পরবর্তী পাঠ শুরু করুন: 10.2: উপাদান নকশা, মাত্রা, এবং রং

এই কোর্সে অন্যান্য কোডল্যাবগুলির লিঙ্কগুলির জন্য, Android Kotlin Fundamentals codelabs ল্যান্ডিং পৃষ্ঠাটি দেখুন।