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

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

পূর্বশর্ত

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

যা শিখবেন

  • ইউজার ইন্টারফেস এলিমেন্ট কি, যেমন Views এবং ViewGroups ।
  • একটি TextView টেক্সটভিউতে কীভাবে পাঠ্য প্রদর্শন করবেন।
  • টেক্সটভিউতে টেক্সট, ফন্ট এবং TextView মতো বৈশিষ্ট্যগুলি কীভাবে সেট করবেন।

আপনি কি নির্মাণ করবেন

  • একটি Android অ্যাপ যা পাঠ্য বিন্যাসে জন্মদিনের শুভেচ্ছা প্রদর্শন করে।

আপনার কাজ শেষ হয়ে গেলে আপনার অ্যাপটি এমন দেখাবে।

তুমি কি চাও

  • অ্যান্ড্রয়েড স্টুডিও ইনস্টল করা একটি কম্পিউটার।

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

  1. শুরু করতে, খালি কার্যকলাপ টেমপ্লেট ব্যবহার করে Android স্টুডিওতে একটি নতুন কোটলিন প্রকল্প তৈরি করুন।
  2. ন্যূনতম এপিআই লেভেল 19 (KitKat) সহ অ্যাপটিকে "শুভ জন্মদিন" বলুন।

গুরুত্বপূর্ণ: আপনি যদি অ্যান্ড্রয়েড স্টুডিওতে একটি নতুন প্রকল্প তৈরি করার সাথে পরিচিত না হন, তাহলে বিস্তারিত জানার জন্য আপনার প্রথম অ্যান্ড্রয়েড অ্যাপ তৈরি করুন এবং চালান দেখুন।

  1. আপনার অ্যাপ চালান। অ্যাপটি নিচের স্ক্রিনশটের মতো দেখতে হবে।

আপনি যখন খালি অ্যাক্টিভিটি টেমপ্লেটের সাথে এই শুভ জন্মদিনের অ্যাপটি তৈরি করেছেন, তখন Android স্টুডিও একটি মৌলিক অ্যান্ড্রয়েড অ্যাপ্লিকেশনের জন্য সংস্থান সেট আপ করেছে, যার মধ্যে একটি "হ্যালো ওয়ার্ল্ড!" পর্দার মাঝখানে বার্তা। এই কোডল্যাবে, আপনি শিখবেন কীভাবে সেই বার্তাটি সেখানে পৌঁছায়, কীভাবে এটির পাঠ্যকে জন্মদিনের শুভেচ্ছা হিসেবে পরিবর্তন করতে হয় এবং কীভাবে অতিরিক্ত বার্তাগুলি যুক্ত এবং ফর্ম্যাট করতে হয়।

ইউজার ইন্টারফেস সম্পর্কে

একটি অ্যাপের ইউজার ইন্টারফেস (UI) যা আপনি স্ক্রিনে দেখতে পান: পাঠ্য, ছবি, বোতাম এবং অন্যান্য অনেক ধরনের উপাদান। অ্যাপটি কীভাবে ব্যবহারকারীকে জিনিসগুলি দেখায় এবং ব্যবহারকারী কীভাবে অ্যাপের সাথে ইন্টারঅ্যাক্ট করে।

এই উপাদানগুলির প্রতিটিকে একটি View বলা হয়। আপনার অ্যাপের স্ক্রিনে আপনি যা দেখছেন তা হল একটি View । Views ইন্টারেক্টিভ হতে পারে, যেমন একটি ক্লিকযোগ্য বোতাম বা একটি সম্পাদনাযোগ্য ইনপুট ক্ষেত্র।

এই কোডল্যাবে, আপনি এক ধরণের View নিয়ে কাজ করবেন যা পাঠ্য প্রদর্শনের জন্য এবং এটিকে বলা হয় TextView ।

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

এক ধরনের ViewGroup হল ConstraintLayout , যা আপনাকে এর Views গুলোকে নমনীয় উপায়ে সাজাতে সাহায্য করে।

লেআউট সম্পাদক সম্পর্কে

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

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

  • বাম দিকে (1) প্রজেক্ট উইন্ডো, যা আপনি আগে দেখেছেন। এটি আপনার প্রকল্প তৈরি করে এমন সমস্ত ফাইল তালিকাভুক্ত করে।
  • কেন্দ্রে আপনি দুটি অঙ্কন (4) এবং (5) দেখতে পাবেন যা আপনার অ্যাপের জন্য স্ক্রীন লেআউট উপস্থাপন করে। বাম দিকের উপস্থাপনা (4) অ্যাপটি চালানোর সময় আপনার স্ক্রীন কেমন দেখাবে তার একটি কাছাকাছি আনুমানিক। একে বলা হয় ডিজাইন ভিউ।
  • ডানদিকের উপস্থাপনা (5) হল ব্লুপ্রিন্ট ভিউ, যা নির্দিষ্ট ক্রিয়াকলাপের জন্য উপযোগী হতে পারে।
  • প্যালেট (2) এ বিভিন্ন ধরনের Views তালিকা রয়েছে যা আপনি আপনার অ্যাপে যোগ করতে পারেন।
  • কম্পোনেন্ট ট্রি (3) হল আপনার স্ক্রিনের ভিউগুলির একটি ভিন্ন উপস্থাপনা। এটি আপনার স্ক্রিনের সমস্ত ভিউ তালিকাভুক্ত করে।
  • একেবারে ডানদিকে (6) বৈশিষ্ট্যগুলি রয়েছে। এটি আপনাকে একটি View বৈশিষ্ট্যগুলি দেখায় এবং আপনাকে সেগুলি পরিবর্তন করতে দেয়৷

ডেভেলপার রেফারেন্স গাইডে লেআউট এডিটর এবং কীভাবে এটি কনফিগার করবেন সে সম্পর্কে আরও পড়ুন।

পুরো লেআউট সম্পাদকের টীকাযুক্ত স্ক্রিনশট:

আপনার অ্যাপটিকে জন্মদিনের কার্ডের মতো করে তুলতে লেআউট এডিটরে কিছু পরিবর্তন করা যাক!

হ্যালো ওয়ার্ল্ড বার্তাটি পরিবর্তন করুন

  1. অ্যান্ড্রয়েড স্টুডিওতে বাম দিকে প্রজেক্ট উইন্ডোটি খুঁজুন।
  2. এই ফোল্ডার এবং ফাইলগুলি নোট করুন: অ্যাপ ফোল্ডারে অ্যাপের বেশিরভাগ ফাইল রয়েছে যা আপনি পরিবর্তন করবেন। রেস ফোল্ডারটি সম্পদের জন্য, যেমন ছবি বা স্ক্রীন লেআউট। লেআউট ফোল্ডারটি স্ক্রিন লেআউটের জন্য। activity_main.xml ফাইলে আপনার স্ক্রীন লেআউটের একটি বিবরণ রয়েছে।
  3. অ্যাপ ফোল্ডার, তারপর রেস ফোল্ডার এবং তারপর লেআউট ফোল্ডার প্রসারিত করুন।
  4. activity_main.xml এ ডাবল ক্লিক করুন।
    এটি লেআউট এডিটরে activity_main.xml খোলে এবং ডিজাইন ভিউতে বর্ণনা করা লেআউটটি দেখায়।
  1. কম্পোনেন্ট ট্রিতে ভিউয়ের তালিকাটি দেখুন। লক্ষ্য করুন যে একটি ConstraintLayout এবং এটির নীচে একটি TextView রয়েছে।
    এগুলি আপনার অ্যাপের UI প্রতিনিধিত্ব করে। TextView ইন্ডেন্ট করা হয়েছে কারণ এটি ConstraintLayout এর ভিতরে রয়েছে। আপনি ConstraintLayout এ আরও Views যোগ করলে, সেগুলি এই তালিকায় যুক্ত হবে।
  2. লক্ষ্য করুন যে TextView "হ্যালো ওয়ার্ল্ড!" এটির পাশে, আপনি অ্যাপটি চালানোর সময় যে পাঠ্যটি দেখতে পান।
  3. কম্পোনেন্ট ট্রি -তে, TextView এ ক্লিক করুন।
  4. ডানদিকে বৈশিষ্ট্য খুঁজুন।
  5. ঘোষিত গুণাবলী বিভাগ খুঁজুন.
  6. লক্ষ্য করুন যে ঘোষিত বৈশিষ্ট্য বিভাগে পাঠ্য বৈশিষ্ট্যটিতে হ্যালো ওয়ার্ল্ড রয়েছে! .

টেক্সট অ্যাট্রিবিউট টেক্সট TextView -এর ভিতরে প্রিন্ট করা টেক্সট দেখায়।

  1. টেক্সট অ্যাট্রিবিউটে ক্লিক করুন যেখানে হ্যালো ওয়ার্ল্ড! পাঠ্য হল।
  2. শুভ জন্মদিন বলতে এটি পরিবর্তন করুন! , তারপর এন্টার কী টিপুন। আপনি যদি একটি হার্ডকোড করা স্ট্রিং সম্পর্কে একটি সতর্কতা দেখতে পান, তাহলে আপাতত এটি সম্পর্কে চিন্তা করবেন না। আপনি পরবর্তী কোডল্যাবে কীভাবে সেই সতর্কতা থেকে মুক্তি পাবেন তা শিখবেন।
  3. লক্ষ্য করুন যে ডিজাইন ভিউতে পাঠ্যটি পরিবর্তিত হয়েছে .....(এটি দুর্দান্ত, আপনি এখনই আপনার পরিবর্তনগুলি দেখতে পারেন!)
  4. আপনার অ্যাপটি চালান, এবং এখন এটি বলে শুভ জন্মদিন!

চমৎকার কাজ! আপনি একটি Android অ্যাপে আপনার প্রথম পরিবর্তন করেছেন।

আপনি যে জন্মদিনের কার্ডটি তৈরি করছেন তা এখন আপনার অ্যাপে যা আছে তার থেকে আলাদা দেখাচ্ছে। কেন্দ্রে ছোট পাঠ্যের পরিবর্তে, আপনার দুটি বড় বার্তা প্রয়োজন, একটি উপরের বাম দিকে এবং একটি নীচের ডানদিকে। এই টাস্কে আপনি বিদ্যমান TextView মুছে ফেলবেন, এবং দুটি নতুন TextViews যোগ করবেন এবং ConstraintLayout এর মধ্যে কীভাবে তাদের অবস্থান করবেন তা শিখবেন।

বর্তমান টেক্সটভিউ মুছুন

  1. লেআউট এডিটরে , লেআউটের কেন্দ্রে TextView নির্বাচন করতে ক্লিক করুন।
  2. ডিলিট কী টিপুন।
    অ্যান্ড্রয়েড স্টুডিও TextView মুছে দেয় এবং আপনার অ্যাপটি এখন লেআউট এডিটর এবং কম্পোনেন্ট ট্রি -তে শুধুমাত্র একটি ConstraintLayout দেখায়।

একটি TextView যোগ করুন

এই ধাপে, জন্মদিনের শুভেচ্ছা জানাতে আপনি আপনার অ্যাপের উপরের বাম দিকে একটি TextView যোগ করবেন।

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

  1. TextView খুঁজুন। এটি সাধারণ বিভাগ এবং পাঠ্য বিভাগে উভয়ই প্রদর্শিত হয়।
  2. প্যালেট থেকে লেআউট এডিটরের নকশা পৃষ্ঠের উপরের বাম দিকে একটি TextView টেনে আনুন এবং ড্রপ করুন।
    আপনাকে সঠিক হতে হবে না, শুধু উপরের বাম কোণে এটি ফেলে দিন।
  3. লক্ষ্য করুন যে সেখানে একটি TextView যোগ করা হয়েছে এবং কম্পোনেন্ট ট্রি -তে একটি লাল বিস্ময়বোধক চিহ্ন লক্ষ্য করুন।
  4. বিস্ময়বোধক চিহ্নের উপরে আপনার পয়েন্টারটি ঘোরান, এবং আপনি একটি সতর্কতা বার্তা দেখতে পাবেন যে দৃশ্যটি সীমাবদ্ধ নয় এবং আপনি যখন অ্যাপটি চালাবেন তখন একটি ভিন্ন অবস্থানে যাবে। আপনি পরবর্তী ধাপে এটি ঠিক করবেন।

TextView অবস্থান করুন

জন্মদিনের কার্ডের জন্য, TextView এর চারপাশে কিছু স্থান সহ উপরের বাম কোণে থাকা প্রয়োজন। সতর্কতাটি ঠিক করতে, আপনি TextView এ কিছু সীমাবদ্ধতা যুক্ত করবেন, যা আপনার অ্যাপকে এটিকে কীভাবে অবস্থান করতে হবে তা বলে। সীমাবদ্ধতা হল দিকনির্দেশ এবং সীমাবদ্ধতা যেখানে একটি View একটি বিন্যাসে থাকতে পারে৷

আপনি উপরের এবং বামে যে সীমাবদ্ধতাগুলি যোগ করবেন তাতে মার্জিন থাকবে। একটি মার্জিন নির্দিষ্ট করে যে একটি View তার কন্টেইনারের প্রান্ত থেকে কতদূর।

  1. ডানদিকে অ্যাট্রিবিউটে , লেআউট বিভাগে সীমাবদ্ধতা উইজেট খুঁজুন। বর্গক্ষেত্রটি আপনার দৃশ্যের প্রতিনিধিত্ব করে।
  2. বর্গক্ষেত্রের শীর্ষে + এ ক্লিক করুন। এটি আপনার পাঠ্য দৃশ্যের শীর্ষ এবং সীমাবদ্ধতা বিন্যাসের শীর্ষ প্রান্তের মধ্যে সীমাবদ্ধতার জন্য।
  3. শীর্ষ মার্জিন সেট করার জন্য একটি সংখ্যা সহ একটি ক্ষেত্র উপস্থিত হয়। মার্জিন হল TextView থেকে কন্টেইনারের প্রান্ত, ConstraintLayout পর্যন্ত দূরত্ব। আপনি TextView কোথায় ফেলেছেন তার উপর নির্ভর করে আপনি যে সংখ্যাটি দেখছেন তা ভিন্ন হবে। আপনি যখন শীর্ষ মার্জিন সেট করেন, তখন Android স্টুডিও স্বয়ংক্রিয়ভাবে পাঠ্য দৃশ্যের শীর্ষ থেকে ConstrainLayout এর শীর্ষে একটি সীমাবদ্ধতা যোগ করে।
  4. উপরের মার্জিনটি 16 এ পরিবর্তন করুন।
  1. বাম মার্জিনের জন্য একই কাজ করুন।
  2. আপনার বন্ধুকে শুভ জন্মদিনের শুভেচ্ছা জানাতে পাঠ্য সেট করুন, উদাহরণস্বরূপ "শুভ জন্মদিন, স্যাম!" এবং এন্টার টিপুন ।
  3. লক্ষ্য করুন যে আপনার অ্যাপটি কেমন হবে তা দেখানোর জন্য ডিজাইন ভিউ আপডেট হয়।

অন্য TextView যোগ করুন এবং অবস্থান করুন

আপনার জন্মদিনের কার্ডে নীচের ডানদিকে কোণায় একটি দ্বিতীয় লাইনের পাঠ্য প্রয়োজন, যা আপনি এই ধাপে আগের টাস্কের মতোই যোগ করবেন। আপনি কি মনে করেন এই TextView এর মার্জিন হওয়া উচিত?

  1. প্যালেট থেকে একটি নতুন TextView টেনে আনুন এবং লেআউট এডিটরে অ্যাপ ভিউয়ের নীচে ডানদিকে ফেলে দিন।
  2. 16 এর একটি ডান মার্জিন সেট করুন।
  3. 16 এর নিচের মার্জিন সেট করুন।
  4. বৈশিষ্ট্যগুলিতে , আপনার কার্ডে স্বাক্ষর করতে পাঠ্য বৈশিষ্ট্য সেট করুন, উদাহরণস্বরূপ "এমা থেকে।"
  5. আপনার অ্যাপ চালান। আপনি উপরের বাম দিকে আপনার জন্মদিনের শুভেচ্ছা এবং নীচের ডানদিকে আপনার স্বাক্ষর দেখতে হবে।

অভিনন্দন! আপনি আপনার অ্যাপে কিছু UI উপাদান যোগ করেছেন এবং অবস্থান করেছেন।

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

  1. কম্পোনেন্ট ট্রি -তে প্রথম TextView -এ ক্লিক করুন এবং অ্যাট্রিবিউটস উইন্ডোর কমন অ্যাট্রিবিউটস বিভাগটি খুঁজুন। এটি খুঁজে পেতে আপনাকে নীচে স্ক্রোল করতে হতে পারে।
  2. fontFamily , textSize , এবং textColor সহ বিভিন্ন গুণাবলী লক্ষ্য করুন।
  3. টেক্সট এপিয়ারেন্সের জন্য দেখুন।
  4. যদি textAppearance প্রসারিত না হয়, নিচের ত্রিভুজটিতে ক্লিক করুন।
  5. টেক্সট সাইজ 36sp এ সেট করুন।
  1. লেআউট এডিটরের পরিবর্তন লক্ষ্য করুন।
  2. নৈমিত্তিক ফন্ট ফ্যামিলিতে পরিবর্তন করুন।
  3. সেগুলি কেমন দেখাচ্ছে তা দেখতে কিছু ভিন্ন ফন্ট ব্যবহার করে দেখুন৷ আরও ফন্টের অধীনে তালিকার নীচে ফন্টের জন্য আরও পছন্দ রয়েছে...
  4. আপনি যখন বিভিন্ন ফন্ট চেষ্টা করা শেষ করেন, fontFamily sans-serif-light এ সেট করুন।
  5. টেক্সট কালার অ্যাট্রিবিউটের সম্পাদনা বাক্সে ক্লিক করুন এবং কালো টাইপ করা শুরু করুন।
    লক্ষ্য করুন যে আপনি টাইপ করার সাথে সাথে, অ্যান্ড্রয়েড স্টুডিও রঙের একটি তালিকা দেখায় যাতে আপনি এখন পর্যন্ত টাইপ করেছেন এমন পাঠ্য রয়েছে।
  6. রঙের তালিকা থেকে @android:color/black নির্বাচন করুন এবং এন্টার টিপুন ।
  7. আপনার স্বাক্ষর সহ TextView , টেক্সট সাইজ , টেক্সট কালার এবং ফন্ট ফ্যামিলি পরিবর্তন করুন।
  8. আপনার অ্যাপটি চালান এবং ফলাফল দেখুন।

অভিনন্দন, আপনি জন্মদিনের কার্ড অ্যাপ তৈরির প্রথম পদক্ষেপ নিয়েছেন!

  • লেআউট এডিটর আপনাকে আপনার Android অ্যাপের জন্য UI তৈরি করতে সাহায্য করে।
  • আপনার অ্যাপের স্ক্রিনে আপনি যা দেখছেন তা হল একটি View ।
  • আপনার অ্যাপে পাঠ্য প্রদর্শনের জন্য একটি TextView হল একটি UI উপাদান।
  • একটি ConstraintLayout হল অন্যান্য UI উপাদানগুলির জন্য একটি ধারক।
  • একটি ConstraintLayout মধ্যে Views অনুভূমিকভাবে এবং উল্লম্বভাবে সীমাবদ্ধ করা প্রয়োজন।
  • একটি View অবস্থান করার একটি উপায় একটি মার্জিন সঙ্গে হয়.
  • একটি মার্জিন বলে যে কন্টেইনারের একটি প্রান্ত থেকে একটি View কত দূরে।
  • আপনি TextView ফন্ট, পাঠ্যের আকার এবং রঙের মতো বৈশিষ্ট্যগুলি সেট করতে পারেন।