অ্যান্ড্রয়েড কোটলিন ফান্ডামেন্টালস 02.1: লেআউট এডিটর ব্যবহার করে লিনিয়ার লেআউট

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

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

• কোটলিনে একটি মৌলিক অ্যান্ড্রয়েড অ্যাপ তৈরি করা হচ্ছে।
• একটি এমুলেটর বা একটি ডিভাইসে একটি Android অ্যাপ চালানো।
• LinearLayout মূল বিষয়গুলি।
• একটি সাধারণ অ্যাপ তৈরি করা যা LinearLayout এবং একটি TextView ব্যবহার করে।

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

• View এবং ViewGroup সাথে কীভাবে কাজ করবেন।
• LinearLayout. ব্যবহার করে কিভাবে একটি Activity ভিউ সাজাতে হয়।
• স্ক্রোলযোগ্য বিষয়বস্তু প্রদর্শনের জন্য কিভাবে ScrollView ব্যবহার করবেন।
• কিভাবে একটি View এর দৃশ্যমানতা পরিবর্তন করতে হয়।
• কিভাবে স্ট্রিং এবং ডাইমেনশন রিসোর্স তৈরি এবং ব্যবহার করবেন।
• অ্যান্ড্রয়েড স্টুডিওর লেআউট এডিটর ব্যবহার করে কীভাবে একটি লিনিয়ার লেআউট তৈরি করবেন।

আপনি কি করবেন

• AboutMe অ্যাপ তৈরি করুন।
• আপনার নাম প্রদর্শন করতে লেআউটে একটি TextView যোগ করুন।
• একটি ImageView.
• স্ক্রোলযোগ্য পাঠ্য প্রদর্শন করতে একটি ScrollView যোগ করুন।

AboutMe অ্যাপে, আপনি নিজের সম্পর্কে আকর্ষণীয় তথ্য প্রদর্শন করতে পারেন, অথবা আপনি কোনো বন্ধু, পরিবারের সদস্য বা পোষা প্রাণীর জন্য অ্যাপটি কাস্টমাইজ করতে পারেন। এই অ্যাপটি একটি নাম, একটি সম্পন্ন বোতাম, একটি তারকা চিত্র এবং কিছু স্ক্রোলযোগ্য পাঠ্য প্রদর্শন করে৷

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

1. অ্যান্ড্রয়েড স্টুডিও খুলুন, যদি এটি ইতিমধ্যে খোলা না থাকে।
2. যদি অ্যান্ড্রয়েড স্টুডিওতে একটি প্রকল্প ইতিমধ্যেই খোলা থাকে তবে ফাইল > নতুন > নতুন প্রকল্প নির্বাচন করুন।
   
   
   
3. যদি একটি প্রকল্প ইতিমধ্যেই খোলা না থাকে, তাহলে Android স্টুডিওতে স্বাগতম ডায়ালগে + একটি নতুন অ্যান্ড্রয়েড স্টুডিও প্রকল্প শুরু করুন নির্বাচন করুন।
   
   
   
4. নতুন প্রকল্প তৈরি করুন ডায়ালগে, ফোন এবং ট্যাবলেট ট্যাবে, খালি কার্যকলাপ টেমপ্লেটটি নির্বাচন করুন। পরবর্তী ক্লিক করুন.
   
   
   
5. পরবর্তী নতুন প্রকল্প তৈরি করুন ডায়ালগে, নিম্নলিখিত পরামিতিগুলি সেট করুন এবং শেষ ক্লিক করুন।
   

বৈশিষ্ট্য	মান
আবেদনের নাম	আমার সম্পর্কে
কোম্পানির নাম অ্যান্ড্রয়েড	com.android.example.AboutMe (বা আপনার নিজের ডোমেন)
স্থান সংরক্ষন	ডিফল্ট অবস্থান ছেড়ে দিন, অথবা আপনার পছন্দের ডিরেক্টরিতে পরিবর্তন করুন।
ভাষা	কোটলিন
ন্যূনতম API স্তর	API 19: Android 4.4 (KitKat)
এই প্রকল্পটি তাত্ক্ষণিক অ্যাপগুলিকে সমর্থন করবে	এই চেকবক্সটি সাফ করুন।
AndroidX শিল্পকর্ম ব্যবহার করুন	এই চেকবক্স নির্বাচন করুন.

অ্যান্ড্রয়েড স্টুডিও প্রকল্পের ফাইলগুলি তৈরি করতে কিছুক্ষণ সময় নেবে।

6. আপনার অ্যাপ চালান। আপনি ফাঁকা স্ক্রিনে "হ্যালো ওয়ার্ল্ড" স্ট্রিং দেখতে পাবেন।
   

খালি কার্যকলাপ টেমপ্লেট একটি একক খালি কার্যকলাপ তৈরি করে, Mainactivity.kt । টেমপ্লেটটি activity_main.xml নামে একটি লেআউট ফাইলও তৈরি করে। লেআউট ফাইলটির রুট ViewGroup হিসাবে ConstraintLayout রয়েছে এবং এটির বিষয়বস্তু হিসাবে এটির একটি একক TextView রয়েছে।

এই টাস্কে, আপনি জেনারেট করা রুট ViewGroup একটি LinearLayout পরিবর্তন করবেন। আপনি UI উপাদানগুলিকে উল্লম্বভাবে সাজান।

গ্রুপ দেখুন

একটি ViewGroup হল এমন একটি ভিউ যাতে চাইল্ড ভিউ থাকতে পারে, যা অন্যান্য ভিউ এবং ভিউ গ্রুপ। যে ভিউগুলি একটি লেআউট তৈরি করে সেগুলি ভিউয়ের শ্রেণীবিন্যাস হিসাবে সংগঠিত হয় এবং একটি ভিউ গ্রুপ রুট হিসাবে থাকে৷

একটি LinearLayout ভিউ গ্রুপে, UI উপাদানগুলি অনুভূমিকভাবে বা উল্লম্বভাবে সাজানো হয়।

রুট লেআউট পরিবর্তন করুন যাতে এটি একটি LinearLayout ভিউ গ্রুপ ব্যবহার করে:

1. প্রকল্প > অ্যান্ড্রয়েড ফলক নির্বাচন করুন। app/res/layout ফোল্ডার, activity_main.xml ফাইল খুলুন।
2. পাঠ্য ট্যাবটি নির্বাচন করুন এবং রুট ভিউ গ্রুপটিকে ConstraintLayout থেকে LinearLayout এ পরিবর্তন করুন।
3. TextView সরান। LinearLayout এলিমেন্টে, android:orientation অ্যাট্রিবিউট যোগ করুন এবং vertical তে সেট করুন।

আগে:

<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:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

পরে:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

লেআউট এডিটর হল অ্যান্ড্রয়েড স্টুডিওর ভিজ্যুয়াল-ডিজাইন টুল। আপনার অ্যাপের লেআউট তৈরি করতে হাতে XML কোড লেখার পরিবর্তে, আপনি ডিজাইন এডিটরে UI উপাদান টেনে আনতে লেআউট এডিটর ব্যবহার করতে পারেন।

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

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

টুলবার: ডিজাইন এডিটরে আপনার লেআউটের চেহারা কনফিগার করতে এবং কিছু লেআউট বৈশিষ্ট্য পরিবর্তন করতে বোতাম প্রদান করে। উদাহরণস্বরূপ, ডিজাইন এডিটরে আপনার লেআউটের প্রদর্শন পরিবর্তন করতে, ডিজাইন সারফেস নির্বাচন করুন ব্যবহার করুন ড্রপ-ডাউন মেনু:

• আপনার লেআউটের বাস্তব-বিশ্বের পূর্বরূপের জন্য ডিজাইন ব্যবহার করুন।
• প্রতিটি দৃশ্যের জন্য শুধুমাত্র রূপরেখা দেখতে ব্লুপ্রিন্ট ব্যবহার করুন।
• উভয় ডিসপ্লে পাশাপাশি দেখতে ডিজাইন + ব্লুপ্রিন্ট ব্যবহার করুন।

প্যালেট : ভিউ এবং ভিউ গ্রুপের একটি তালিকা প্রদান করে যা আপনি আপনার লেআউটে বা কম্পোনেন্ট ট্রি প্যানে টেনে আনতে পারেন।

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

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

ধাপ 1: একটি TextView যোগ করুন

1. res/layout/activity_main.xml ফাইলটি খুলুন, যদি এটি ইতিমধ্যে খোলা না থাকে।
2. টেক্সট ট্যাবে স্যুইচ করুন এবং কোড পরিদর্শন করুন। কোডটির রুট ভিউ গ্রুপ হিসাবে একটি LinearLayout রয়েছে। ( দেখুন গোষ্ঠী হল এমন ভিউ যা অন্যান্য ভিউ ধারণ করে।)
   
   LinearLayout এ প্রয়োজনীয় বৈশিষ্ট্য layout_height , layout_width , এবং orientation , যা ডিফল্টরূপে vertical ।
3. লেআউট এডিটর খুলতে ডিজাইন ট্যাবে স্যুইচ করুন।

দ্রষ্টব্য: ডিজাইন ট্যাব এবং টেক্সট ট্যাব একই লেআউট দেখায়, শুধু একটি ভিন্ন উপায়ে। আপনি একটি ট্যাবে যে পরিবর্তনগুলি করেন তা অন্য ট্যাবে প্রতিফলিত হয়৷

4. প্যালেট ফলক থেকে একটি টেক্সট ভিউ ডিজাইন এডিটরে টেনে আনুন।
   
   
   
5. কম্পোনেন্ট ট্রি প্যানে লক্ষ্য করুন। নতুন টেক্সট ভিউকে প্যারেন্ট ভিউ গ্রুপের একটি চাইল্ড এলিমেন্ট হিসেবে রাখা হয়েছে, যা হল LinearLayout ।
   
   
6. অ্যাট্রিবিউট প্যানটি খুলুন, যদি এটি ইতিমধ্যে খোলা না থাকে। (প্যানটি খুলতে, ডিজাইন এডিটরে নতুন যোগ করা TextView এ ডাবল ক্লিক করুন।)
7. অ্যাট্রিবিউট প্যানে নিম্নলিখিত বৈশিষ্ট্যগুলি সেট করুন:

বৈশিষ্ট্য	মান
আইডি	name_text
পাঠ্য	এটি আপনার নামে সেট করুন। ( টেক্সট ফিল্ডগুলির মধ্যে একটি রেঞ্চ আইকন দেখায় যা নির্দেশ করে যে এটি tools নেমস্পেসের জন্য। রেঞ্চ ছাড়াই একটি android নেমস্পেসের জন্য—এটি আপনি যে পাঠ্য ক্ষেত্রটি চান তা।)
textAppearance > textSize	20sp
textAppearance > text Color	@android:color/black
textAppearance > textAlignment	কেন্দ্র

ধাপ 2: একটি স্ট্রিং রিসোর্স তৈরি করুন

কম্পোনেন্ট ট্রি -তে, TextView, আপনি একটি সতর্কতা আইকন লক্ষ্য করবেন . সতর্কতা পাঠ্যটি দেখতে, আইকনে ক্লিক করুন বা এটিকে নির্দেশ করুন, নীচের স্ক্রিনশটে দেখানো হয়েছে৷

সতর্কতা সমাধান করতে, একটি স্ট্রিং সংস্থান তৈরি করুন:

1. অ্যাট্রিবিউট প্যানে, আপনার নামের সাথে সেট করা টেক্সট অ্যাট্রিবিউটের পাশের তিনটি বিন্দুতে ক্লিক করুন। রিসোর্স এডিটর খোলে।
   
   
   
2. সম্পদ ডায়ালগে, নতুন সম্পদ যোগ করুন > নতুন স্ট্রিং মান নির্বাচন করুন।
3. নতুন স্ট্রিং ভ্যালু রিসোর্স ডায়ালগে, রিসোর্স নামের ক্ষেত্রটিকে name হিসাবে সেট করুন। আপনার নিজের নামে সম্পদ মান ক্ষেত্র সেট করুন। ওকে ক্লিক করুন। লক্ষ্য করুন যে সতর্কতা চলে গেছে।
   
   
   
4. res/values/strings.xml ফাইলটি খুলুন এবং name নামক নতুন তৈরি স্ট্রিং রিসোর্সটি সন্ধান করুন।

<string name="name">Aleks Haecky</string>

ধাপ 3: একটি মাত্রা সম্পদ তৈরি করুন

আপনি শুধু রিসোর্স এডিটর ব্যবহার করে একটি রিসোর্স যোগ করেছেন। আপনি নতুন সংস্থান তৈরি করতে XML কোড সম্পাদক থেকে সংস্থানগুলিও বের করতে পারেন:

1. activity_main.xml ফাইলে, টেক্সট ট্যাবে স্যুইচ করুন।
2. টেক্সট সাইজ লাইনে, 20sp textSize এবং টাইপ Alt+Enter ( Option+Enter on a Mac)। পপআপ মেনু থেকে এক্সট্রাক্ট ডাইমেনশন রিসোর্স নির্বাচন করুন।
3. এক্সট্র্যাক্ট রিসোর্স ডায়ালগে, রিসোর্স নাম ক্ষেত্রে text_size লিখুন। ওকে ক্লিক করুন।
   
   
   
4. নিম্নলিখিত তৈরি করা কোড দেখতে res/values/dimens.xml ফাইলটি খুলুন:

<dimen name="text_size">20sp</dimen>

দ্রষ্টব্য: যদি dimens.xml ফাইলটি আপনার res/values ​​ফোল্ডারে আগে থেকে না থাকে, তাহলে Android Studio এটি তৈরি করে।

5. MainActivity.kt ফাইলটি খুলুন এবং onCreate() ফাংশনের শেষে নিম্নলিখিত কোডটি সন্ধান করুন:

setContentView(R.layout.activity_main)

setContentView() ফাংশন লেআউট ফাইলটিকে Activity সাথে সংযুক্ত করে। নির্দিষ্ট লেআউট রিসোর্স ফাইলটি হল R.layout.activity_main :

• R হল সম্পদের একটি রেফারেন্স। এটি আপনার অ্যাপের সমস্ত সংস্থানগুলির সংজ্ঞা সহ একটি স্বয়ংক্রিয়-উত্পন্ন শ্রেণী।
• layout.activity_main নির্দেশ করে যে সংস্থানটি activity_main main নামের একটি লেআউট।

6. আপনার অ্যাপ চালান। আপনার নামের সাথে একটি TextView প্রদর্শিত হয়।
   
   

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

প্যাডিং বনাম মার্জিন

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

একটি দৃশ্যের আকার এর প্যাডিং অন্তর্ভুক্ত। নিম্নলিখিত প্যাডিং বৈশিষ্ট্যগুলি সাধারণত ব্যবহৃত হয়:

• android:padding দৃশ্যের চারটি প্রান্তের জন্য প্যাডিং নির্দিষ্ট করে।
• android:paddingTop উপরের প্রান্তের জন্য প্যাডিং নির্দিষ্ট করে।
• android:paddingBottom নীচের প্রান্তের জন্য প্যাডিং নির্দিষ্ট করে।
• android:paddingStart "শুরু" প্রান্তের জন্য প্যাডিং নির্দিষ্ট করে।
• android:paddingEnd "শেষ" প্রান্তের জন্য প্যাডিং নির্দিষ্ট করে।
• android:paddingLeft বাম প্রান্তের জন্য প্যাডিং নির্দিষ্ট করে।
• android:paddingRight ডান প্রান্তের জন্য প্যাডিং নির্দিষ্ট করে।

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

• android:layout_margin চারটি দিকের জন্য একটি মার্জিন নির্দিষ্ট করে।
• android:layout_marginBottom এই দৃশ্যের নীচের দিকের বাইরে স্থান নির্দিষ্ট করে।
• android:layout_marginStart এই দৃশ্যের "শুরু" দিকের বাইরে স্থান নির্দিষ্ট করে।
• android:layout_marginEnd এই দৃশ্যের শেষ দিকে স্থান নির্দিষ্ট করে।
• android:layout_marginLeft এই দৃশ্যের বাম দিকে স্থান নির্দিষ্ট করে।
• android:layout_marginRight এই ভিউয়ের ডানদিকে স্থান নির্দিষ্ট করে।

ডান/বাম বনাম শুরু/শেষ

"ডান" এবং "বাম" সবসময় স্ক্রিনের ডান এবং বাম দিক নির্দেশ করে, আপনার অ্যাপ বাম-থেকে-ডান (LTR) প্রবাহ বা ডান-থেকে-বাম (RTL) প্রবাহ ব্যবহার করে কিনা। "শুরু" এবং "শেষ" সর্বদা প্রবাহের শুরু এবং শেষ নির্দেশ করে:

• একটি LTR প্রবাহের জন্য, শুরু = বাম এবং শেষ = ডান।
• একটি RTL প্রবাহের জন্য, শুরু=ডান এবং শেষ=বাম।

যদি আপনার অ্যাপটি API লেভেল 17 (Android 4.2) বা উচ্চতরকে লক্ষ্য করে:

• "বাম" এবং "ডান" এর পরিবর্তে "শুরু" এবং "শেষ" ব্যবহার করুন।
• উদাহরণস্বরূপ, RTL ভাষা সমর্থন করার জন্য android:layout_marginStart android:layout_marginLeft হওয়া উচিত।

আপনি যদি চান আপনার অ্যাপটি অ্যান্ড্রয়েড 4.2 এর চেয়ে কম সংস্করণের সাথে কাজ করুক; অর্থাৎ, যদি অ্যাপের targetSdkVersion বা minSdkVersion 16 বা তার কম হয়:

• "বাম" এবং "ডান" ছাড়াও "শুরু" এবং শেষ যোগ করুন।
• উদাহরণস্বরূপ, android:paddingLeft এবং android:paddingStart উভয়ই ব্যবহার করুন।

ধাপ 1: প্যাডিং যোগ করুন

আপনার নাম এবং name পাঠ্য দৃশ্যের উপরের প্রান্তের মধ্যে স্থান রাখতে, শীর্ষ প্যাডিং যোগ করুন।

1. ডিজাইন ট্যাবে activity_main.xml ফাইল খুলুন।
2. কম্পোনেন্ট ট্রি বা ডিজাইন এডিটরে, এর অ্যাট্রিবিউট প্যান খুলতে টেক্সট ভিউতে ক্লিক করুন।
3. বৈশিষ্ট্য ফলকের শীর্ষে, ডাবল-তীর আইকনে ক্লিক করুন সমস্ত উপলব্ধ বৈশিষ্ট্য দেখতে.
4. প্যাডিংয়ের জন্য অনুসন্ধান করুন, এটি প্রসারিত করুন এবং উপরের বৈশিষ্ট্যের পাশে তিনটি বিন্দুতে ক্লিক করুন । সম্পদ ডায়ালগ প্রদর্শিত হবে.
5. সম্পদ ডায়ালগে, নতুন সম্পদ যোগ করুন > নতুন মাত্রা মান নির্বাচন করুন।
6. নিউ ডাইমেনশন ভ্যালু রিসোর্স ডায়ালগে, 8dp এর মান সহ small_padding নামে একটি নতুন dimen রিসোর্স তৈরি করুন।
   
   dp সংক্ষিপ্ত রূপ হল ঘনত্ব-স্বাধীন । আপনি যদি বিভিন্ন ঘনত্বের স্ক্রিনে একটি UI উপাদান একই আকারের দেখতে চান তবে আপনার পরিমাপের একক হিসাবে dp ব্যবহার করুন। পাঠ্যের আকার নির্দিষ্ট করার সময়, তবে, সর্বদা sp (স্কেলযোগ্য পিক্সেল) ব্যবহার করুন।
7. ওকে ক্লিক করুন।

ধাপ 2: একটি মার্জিন যোগ করুন

name পাঠ্য দৃশ্যটিকে মূল উপাদানের প্রান্ত থেকে দূরে সরাতে, একটি শীর্ষ মার্জিন যোগ করুন।

1. বৈশিষ্ট্য ফলকে, Layout_Margin খুঁজে পেতে "margin" অনুসন্ধান করুন।
2. Layout_Margin প্রসারিত করুন এবং উপরের বৈশিষ্ট্যের পাশে তিনটি বিন্দুতে ক্লিক করুন ।
3. dimen নামে একটি নতুন মাত্রার সংস্থান তৈরি করুন এবং এটিকে layout_margin 16dp । ওকে ক্লিক করুন।

ধাপ 3: একটি ফন্ট যোগ করুন

name টেক্সট ভিউকে আরও ভালো দেখাতে, Android Roboto ফন্ট ব্যবহার করুন। এই ফন্টটি সমর্থন লাইব্রেরির অংশ, এবং আপনি একটি সম্পদ হিসাবে ফন্ট যোগ করুন।

1. বৈশিষ্ট্য ফলকে, "fontFamily" অনুসন্ধান করুন।
2. fontFamily ক্ষেত্রে, ড্রপ-ডাউন তীরটিতে ক্লিক করুন , তালিকার নীচে স্ক্রোল করুন এবং আরও ফন্ট নির্বাচন করুন।
3. রিসোর্স ডায়ালগে, rob এর জন্য অনুসন্ধান করুন এবং Roboto নির্বাচন করুন। পূর্বরূপ তালিকায়, নিয়মিত নির্বাচন করুন।
4. অ্যাড ফন্ট টু প্রজেক্ট রেডিও বোতামটি নির্বাচন করুন।
5. ওকে ক্লিক করুন।
   
   

res ফোল্ডারে এখন একটি font ফোল্ডার রয়েছে যাতে একটি roboto.ttf ফন্ট ফাইল রয়েছে। @font/roboto বৈশিষ্ট্যটি আপনার TextView এ যোগ করা হয়েছে।

ধাপ 4: শৈলী বের করুন

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

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

1. কম্পোনেন্ট ট্রিতে TextView ডান-ক্লিক করুন এবং রিফ্যাক্টর > এক্সট্রাক্ট স্টাইল নির্বাচন করুন।
2. এক্সট্র্যাক্ট অ্যান্ড্রয়েড স্টাইল ডায়ালগে, layout_width চেকবক্স, layout_height চেকবক্স এবং টেক্সট অ্যালাইনমেন্ট চেকবক্স textAlignment করুন। এই বৈশিষ্ট্যগুলি সাধারণত প্রতিটি দৃশ্যের জন্য আলাদা হয়, তাই আপনি তাদের শৈলীর অংশ হতে চান না।
3. শৈলীর নাম ক্ষেত্রে, NameStyle লিখুন।
4. ওকে ক্লিক করুন।
   
   
   
5. একটি শৈলীও একটি সম্পদ, তাই শৈলীটি একটি styles.xml ফাইলে res/values/ ফোল্ডারে সংরক্ষিত হয়। styles.xml খুলুন এবং NameStyle শৈলীর জন্য জেনারেট করা কোড পরীক্ষা করুন, যা দেখতে এর মতো হবে:

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. activity_main.xml খুলুন এবং টেক্সট ট্যাবে স্যুইচ করুন। লক্ষ্য করুন যে তৈরি করা শৈলীটি টেক্সট ভিউতে style="@style/NameStyle" হিসাবে ব্যবহৃত হচ্ছে।
7. অ্যাপটি চালান এবং আপনার TextView এর চারপাশে ফন্ট এবং প্যাডিংয়ের পরিবর্তনগুলি লক্ষ্য করুন।

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

ইমেজ ভিউ হল ইমেজ রিসোর্স প্রদর্শনের জন্য একটি ImageView । উদাহরণস্বরূপ, একটি ImageView Bitmap সংস্থানগুলি যেমন PNG, JPG, GIF, বা WebP ফাইলগুলি প্রদর্শন করতে পারে বা এটি একটি ভেক্টর অঙ্কনের মতো একটি Drawable সংস্থান প্রদর্শন করতে পারে।

অ্যান্ড্রয়েডের সাথে আসা ইমেজ রিসোর্স আছে, যেমন নমুনা আইকন, অবতার এবং ব্যাকগ্রাউন্ড। আপনি আপনার অ্যাপে এই সম্পদগুলির মধ্যে একটি যোগ করবেন।

1. ডিজাইন ট্যাবে লেআউট ফাইলটি প্রদর্শন করুন, তারপর কম্পোনেন্ট ট্রিতে name_text নিচে প্যালেট প্যান থেকে একটি ইমেজভিউ টেনে আনুন। রিসোর্স ডায়ালগ খোলে।
2. অঙ্কনযোগ্য নির্বাচন করুন যদি এটি ইতিমধ্যে নির্বাচিত না হয়।
3. অ্যান্ড্রয়েড প্রসারিত করুন, স্ক্রোল করুন এবং btn_star_big_on নির্বাচন করুন। এটা হলুদ তারা .
4. ওকে ক্লিক করুন।
   
   
   
   স্টার ইমেজ আপনার নামের নিচে লেআউট যোগ করা হয়. যেহেতু আপনার একটি উল্লম্ব LinearLayout আছে, আপনার যোগ করা দৃশ্যগুলি উল্লম্বভাবে সারিবদ্ধ।
   
   
5. টেক্সট ট্যাবে স্যুইচ করুন এবং জেনারেট করা ImageView কোডটি দেখুন। প্রস্থটি match_parent এ সেট করা হয়েছে, তাই ভিউটি এর মূল উপাদানের মতো প্রশস্ত হবে। উচ্চতা wrap_content এ সেট করা হয়েছে, তাই ভিউটি এর বিষয়বস্তুর মতো লম্বা হবে। ImageView রেফারেন্স করে btn_star_big_on অঙ্কনযোগ্য।

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. ImageView এর id নাম পরিবর্তন করতে, "@+id/imageView" -এ ডান-ক্লিক করুন এবং রিফ্যাক্টর > পুনঃনামকরণ নির্বাচন করুন।
7. রিনেম ডায়ালগে, @+id/star_image id সেট করুন। রিফ্যাক্টরে ক্লিক করুন।
   
   
   

টিপ: রিফ্যাক্টর > রিনেম আপনার অ্যাপ প্রোজেক্টে একটি অ্যাট্রিবিউট বা ভেরিয়েবল নামের সমস্ত ঘটনার পুনঃনামকরণ করে।

8. ডিজাইন ট্যাবে, কম্পোনেন্ট ট্রি -তে, সতর্কতা আইকনে ক্লিক করুন star_image পাশে। সতর্কতা একটি অনুপস্থিত contentDescription এর জন্য, যা স্ক্রীন রিডাররা ব্যবহারকারীর কাছে ছবি বর্ণনা করতে ব্যবহার করে।
9. অ্যাট্রিবিউট প্যানে, contentDescription অ্যাট্রিবিউটের পাশে তিনটি বিন্দুতে ক্লিক করুন । রিসোর্স ডায়ালগ খোলে।
10. সম্পদ ডায়ালগে, নতুন সম্পদ যোগ করুন > নতুন স্ট্রিং মান নির্বাচন করুন। রিসোর্স নামের ক্ষেত্রটিকে yellow_star এ সেট করুন এবং রিসোর্স মান ক্ষেত্রটিকে Yellow star তারকাতে সেট করুন। ওকে ক্লিক করুন।
11. নাম থেকে তারকা ছবিকে আলাদা করতে yellow_star এ 16dp (যা @dimen/layout_margin ) শীর্ষ মার্জিন যোগ করতে অ্যাট্রিবিউট প্যান ব্যবহার করুন।
12. আপনার অ্যাপ চালান। আপনার নাম এবং তারকা ছবি আপনার অ্যাপের UI এ প্রদর্শিত হয়।
    
    

একটি ScrollView হল একটি ভিউ গ্রুপ যা এটির মধ্যে রাখা ভিউ হায়ারার্কিটিকে স্ক্রোল করার অনুমতি দেয়। একটি স্ক্রোল ভিউ শিশু হিসাবে শুধুমাত্র একটি অন্য ভিউ বা ভিউ গ্রুপ থাকতে পারে। চাইল্ড ভিউ সাধারণত একটি LinearLayout হয়। একটি LinearLayout ভিতরে, আপনি অন্যান্য ভিউ যোগ করতে পারেন।

নিম্নলিখিত চিত্রটি একটি ScrollView -এর একটি উদাহরণ দেখায় যাতে একটি লিনিয়ার LinearLayout রয়েছে যাতে আরও কয়েকটি দৃশ্য রয়েছে।

এই কাজটিতে, আপনি একটি ScrollView যুক্ত করবেন যা ব্যবহারকারীকে একটি সংক্ষিপ্ত জীবনী প্রদর্শন করে এমন একটি পাঠ্য দৃশ্য স্ক্রোল করতে দেয়। আপনি যদি শুধুমাত্র একটি ভিউ স্ক্রোলযোগ্য করে থাকেন, তাহলে আপনি ভিউটিকে সরাসরি ScrollView এ রাখতে পারেন, যা আপনি এই কাজটিতে করেন।

ধাপ 1: একটি স্ক্রলভিউ যোগ করুন যাতে একটি পাঠ্য ভিউ রয়েছে

1. activity_main.xml ফাইলটি ডিজাইন ট্যাবে খুলুন।
2. ডিজাইন এডিটরে বা কম্পোনেন্ট ট্রিতে টেনে নিয়ে লেআউটে একটি স্ক্রোল ভিউ টেনে আনুন। তারকা চিত্রের নীচে স্ক্রোল ভিউ রাখুন।
3. জেনারেট করা কোড পরিদর্শন করতে পাঠ্য ট্যাবে স্যুইচ করুন।

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

ScrollView এর উচ্চতা এবং প্রস্থ মূল উপাদানের সাথে মেলে। একবার name_text টেক্সট ভিউ এবং star_image ইমেজ ভিউ তাদের বিষয়বস্তু প্রদর্শনের জন্য পর্যাপ্ত উল্লম্ব স্থান ব্যবহার করলে, অ্যান্ড্রয়েড সিস্টেম স্ক্রিনে উপলব্ধ অবশিষ্ট স্থান পূরণ করতে ScrollView তৈরি করে।

4. ScrollView এ একটি id যোগ করুন এবং এটিকে bio_scroll । ScrollView একটি id যোগ করা হলে অ্যান্ড্রয়েড সিস্টেমকে ভিউয়ের জন্য একটি হ্যান্ডেল দেয় যাতে ব্যবহারকারী যখন ডিভাইসটি ঘোরায়, তখন সিস্টেমটি স্ক্রোল অবস্থান সংরক্ষণ করে।
5. LinearLayout এর ভিতরে, ScrollView কোড সরান, কারণ আপনার অ্যাপে শুধুমাত্র একটি ভিউ থাকবে যা স্ক্রোলযোগ্য—একটি TextView ।
6. প্যালেট থেকে কম্পোনেন্ট ট্রিতে একটি TextView টেনে আনুন। bio_scroll TextView একটি চাইল্ড এলিমেন্ট bio_scroll ।
   
   
7. নতুন টেক্সট ভিউ এর আইডি bio_text এ সেট করুন।
8. এরপরে আপনি নতুন পাঠ্য দর্শনের জন্য একটি শৈলী যোগ করুন। অ্যাট্রিবিউট প্যানে, রিসোর্স ডায়ালগ খুলতে স্টাইল অ্যাট্রিবিউটের পাশে তিনটি বিন্দুতে ক্লিক করুন ।
9. সম্পদ ডায়ালগে, NameStyle অনুসন্ধান করুন। তালিকা থেকে NameStyle নির্বাচন করুন এবং ঠিক আছে ক্লিক করুন। টেক্সট ভিউ এখন NameStyle শৈলী ব্যবহার করে, যা আপনি একটি পূর্বের কাজে তৈরি করেছিলেন।
   
   

ধাপ 2: নতুন TextView-এ আপনার জীবনী যোগ করুন

1. strings.xml খুলুন, bio নামে একটি স্ট্রিং রিসোর্স তৈরি করুন এবং নিজের সম্পর্কে, বা আপনি যা চান তার সম্পর্কে কিছু দীর্ঘ লেখা লিখুন।
   

বিঃদ্রঃ:

• একটি লাইন বিরতি নির্দেশ করতে \n ব্যবহার করুন।
• আপনি যদি একটি অ্যাপোস্ট্রফি ব্যবহার করেন, তাহলে আপনাকে অবশ্যই একটি ব্যাকস্ল্যাশ দিয়ে এড়িয়ে যেতে হবে৷ উদাহরণ স্বরূপ:
  " You mustn\'t forget the backslash. "
• বোল্ড টেক্সটের জন্য <b>...</b> ব্যবহার করুন, এবং তির্যক লেখার জন্য <i>...</i> ব্যবহার করুন। উদাহরণ স্বরূপ:
  "This text is <b>bold</b> and this text is <i>italics</i>."

এখানে একটি নমুনা জীবনী আছে:

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. bio_text টেক্সট ভিউতে, আপনার জীবনী ধারণ করা bio স্ট্রিং রিসোর্সে text অ্যাট্রিবিউটের মান সেট করুন।
3. bio_text টেক্সট পড়া সহজ করতে, লাইনের মধ্যে ফাঁক যোগ করুন। lineSpacingMultiplier অ্যাট্রিবিউট ব্যবহার করুন এবং এটিকে 1.2 এর মান দিন।
   
   
   
   লক্ষ্য করুন কিভাবে ডিজাইন এডিটরে, bio টেক্সট স্ক্রিনের পাশের প্রান্তে চলে যায়। এই সমস্যাটি সমাধান করতে, আপনি রুট LinearLayout এ বাম, শুরু, ডান এবং শেষ প্যাডিং বৈশিষ্ট্য যোগ করতে পারেন। আপনাকে নীচের প্যাডিং যোগ করার দরকার নেই, কারণ যে পাঠ্যটি নীচের দিকে চলে তা ব্যবহারকারীকে সংকেত দেয় যে পাঠ্যটি স্ক্রোলযোগ্য।
4. রুট LinearLayout 16dp এর শুরু এবং শেষ প্যাডিং যোগ করুন।
5. টেক্সট ট্যাবে স্যুইচ করুন, ডাইমেনশন রিসোর্সটি বের করুন এবং এর নাম দিন layout_padding ।
   
   

দ্রষ্টব্য: API স্তর 17 থেকে শুরু করে, আরবির মতো RTL ভাষার জন্য আপনার অ্যাপটিকে মানিয়ে নিতে প্যাডিং এবং মার্জিনের জন্য "বাম" এবং "ডান" এর পরিবর্তে "শুরু" এবং "শেষ" ব্যবহার করুন।

6. আপনার অ্যাপটি চালান এবং পাঠ্যের মাধ্যমে স্ক্রোল করুন।
   
   

অভিনন্দন!

আপনি স্ক্র্যাচ থেকে একটি সম্পূর্ণ অ্যাপ তৈরি করেছেন এবং এটি দুর্দান্ত দেখাচ্ছে!

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

দ্রষ্টব্য: সমস্ত কোডিং চ্যালেঞ্জ ঐচ্ছিক।

TextView এর ভিতরে, ScrollView এর উপরে একটি ImageView যোগ করুন। আপনি যখন অ্যাপটি চালান, তখন এই চিত্রটি, তারার বিপরীতে, পাঠ্যটি স্ক্রোল করার সাথে সাথে দৃশ্যের বাইরে স্ক্রোল করে।

ইঙ্গিত: স্ক্রোল ভিউতে শুধুমাত্র একটি চাইল্ড ভিউ থাকতে পারে। আপনাকে দুটি স্ক্রোলযোগ্য ভিউ, ImageView এবং TextView , একটি LinearLayout মোড়ানো করতে হবে।

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

উদাসীনতা কোর্স:

• কোটলিনের সাথে অ্যান্ড্রয়েড অ্যাপস তৈরি করা

অ্যান্ড্রয়েড ডেভেলপার ডকুমেন্টেশন:

• বিন্যাস
• ViewGroup
• View
• লিনিয়ার লেআউট
• ScrollView
• বিভিন্ন পিক্সেল ঘনত্ব (ডিপি) সমর্থন করে
• লেআউট এডিটর দিয়ে একটি UI তৈরি করুন
• অ্যান্ড্রয়েড স্টুডিও ডকুমেন্টেশন
• শৈলী এবং থিম

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

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

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

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

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

প্রশ্ন 1

নিচের কোনটি ভিউ গ্রুপ?

EditText পাঠ্য সম্পাদনা করুন

LinearLayout লিনিয়ার লেআউট

TextView টেক্সটভিউ

▢ Button

প্রশ্ন 2

নিচের তালিকাভুক্ত ভিউ হায়ারার্কিগুলির মধ্যে কোনটি বৈধ নয়?

LinearLayout লিনিয়ার লেআউট > ImageView , TextView , TextView

LinearLayout ScrollView > লিনিয়ার লেআউট > TextView , Button , Button , TextView > ScrollView

▢ TextView > TextView , ImageView , ScrollView

প্রশ্ন 3

শৈলী হল styles.xml এ সংজ্ঞায়িত সম্পদ। শৈলী ব্যবহার করে, আপনি একটি দৃশ্যের রঙ, ফন্ট, পাঠ্যের আকার এবং অন্যান্য অনেক বৈশিষ্ট্য নির্ধারণ করতে পারেন। সত্য অথবা মিথ্যা?

▢ সত্য

▢ মিথ্যা

প্রশ্ন 4

একটি ScrollView হল একটি ভিউ গ্রুপ যাতে যেকোন সংখ্যক ভিউ থাকতে পারে বা তার বাচ্চা হিসাবে গ্রুপগুলি দেখতে পারে। সত্য অথবা মিথ্যা?

▢ সত্য

▢ মিথ্যা

প্রশ্ন 5

কোন UI উপাদান আপনার অ্যাপে ছবি প্রদর্শন করতে ব্যবহার করা যেতে পারে?

TextView টেক্সটভিউ

ImageView ইমেজ ভিউ

▢ Button

▢ ScrollView

পরবর্তী পাঠ শুরু করুন: 2.2: ব্যবহারকারীর ইন্টারঅ্যাক্টিভিটি যোগ করুন

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