নতুনদের জন্য অ্যান্ড্রয়েড অ্যাপ ডেভেলপমেন্ট

সমস্ত ফোনের পঁচাত্তর শতাংশ অ্যান্ড্রয়েড ফোন এবং সমস্ত ইন্টারনেট ব্যবহারকারীদের পঁচাত্তর শতাংশ শুধুমাত্র তাদের ফোন ব্যবহার করেই ইন্টারনেট অ্যাক্সেস করে। তাই অ্যান্ড্রয়েড অ্যাপের একটি বড় বাজার রয়েছে৷

আমরা এইমাত্র freeCodeCamp.org YouTube চ্যানেলে অ্যান্ড্রয়েড অ্যাপ ডেভেলপমেন্টের ক্র্যাশ কোর্স প্রকাশ করেছি। আপনি যদি অ্যান্ড্রয়েড অ্যাপ ডেভেলপমেন্টে একেবারে নতুন হয়ে থাকেন তাহলে এই কোর্সটি নিখুঁত।

রাহুল পান্ডে এই কোর্সটি তৈরি করেছেন। রাহুল ফেসবুকে অ্যান্ড্রয়েড লিড এবং স্ট্যানফোর্ড ইউনিভার্সিটির লেকচারার।

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

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

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

নীচের কোর্সটি দেখুন বা freeCodeCamp.org YouTube চ্যানেলে (1-ঘন্টা দেখুন)।

ট্রান্সক্রিপ্ট

(স্বয়ংক্রিয়ভাবে তৈরি)

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

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

আমরা কোটলিন প্রোগ্রামিং ভাষা ব্যবহার করে এই অ্যাপটি তৈরি করতে যাচ্ছি।

তাই আমি অনুমান করতে যাচ্ছি আপনার প্রোগ্রামিং এর কিছু ব্যাকগ্রাউন্ড আছে।

কিন্তু আপনি যদি কোটলিনে নতুন হয়ে থাকেন, তাহলে আমি যে ভাষাটি তৈরি করেছি সে সম্পর্কে আমি একটি দ্রুত 12 মিনিটের প্রাইমারের বিবরণে একটি লিঙ্ক ছেড়ে দেব৷

আমি রাহো, আমি কিছুদিন ধরে ইউটিউবে এবং ইউটিউবের বাইরে অ্যান্ড্রয়েড শেখাচ্ছি।

সুতরাং আপনি যখন প্রস্তুত হন, আসুন এটিতে প্রবেশ করি এবং একসাথে এই অ্যাপটি তৈরি করি৷

এই ভিডিওতে আমি তিনটি জিনিস কভার করতে চাই৷

এক নম্বরে, আমি টিপ ক্যালকুলেটর অ্যাপ্লিকেশনের প্রধান বৈশিষ্ট্যগুলির মধ্য দিয়ে যেতে চাই।

দুই নম্বর, আমি মূল Android ধারণাগুলি ব্যাখ্যা করব যা আমরা এটি তৈরি করার সময় কভার করব।

এবং তৃতীয়ত, যেহেতু আমি অ্যাপটিকে ইচ্ছাকৃতভাবে রাখছি, খুব সহজ, আমি কিছু Android ধারণার কথাও বলতে চাই যা আমরা এটি তৈরি করার ক্ষেত্রে সম্মুখীন হব না৷

এবং সেগুলি পরে আরও পরিশীলিত বা জটিল অ্যান্ড্রয়েড অ্যাপগুলিতে কভার করা হবে৷

আমি আগে উল্লেখ করেছি যে আপনি আসলে কীভাবে এগিয়ে যেতে পারেন এবং এই অ্যাপটি গুগল প্লে স্টোরে প্রকাশ করার সাথে সাথে তিনি টিউটোরিয়ালটি শেষ করেন।

এবং আমি ঠিক সেটাই করেছি।

তাই আমরা যা তৈরি করতে যাচ্ছি তা যদি আপনি চেষ্টা করে দেখতে চান, তাহলে বর্ণনার লিঙ্কটি নির্দ্বিধায় দেখুন এবং আপনার Android ডিভাইসগুলির একটিতে ডাউনলোড করুন৷

তাই আসুন অ্যাপটির একটি ডেমো করি যাতে আমরা যে প্রধান বৈশিষ্ট্যগুলি তৈরি করতে যাচ্ছি সেগুলি সম্পর্কে ধারণা পেতে পারি৷

তাই এই উদাহরণে, আমি একটি খুব জমকালো একক ডিনারের জন্য বাইরে গিয়েছিলাম, এবং আমি $83.15 খরচ করেছি।

এবং আমি 24% এর একটি সুন্দর উদার টিপ রেখে যাচ্ছি এবং আপেল স্বয়ংক্রিয়ভাবে টিপ এবং মোট পরিমাণ গণনা করে।

তাই শুধু গণিতকে একটু সহজ করার জন্য, কেন আমরা বেস অ্যামাউন্ট আপডেট করব না $100।

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

এবং যদি আমি খাবারে যে পরিষেবাটি পেয়েছি তাতে আমি সত্যিই সন্তুষ্ট বোধ করি, তাহলে আমি টিপ শতাংশ বাড়াতে পারি এবং সর্বোচ্চ পরিমাণে 30% এ নিয়ে আসতে পারি।

এবং এখানে দুটি জিনিস ঘটে।

একটি হল আমরা গতিশীলভাবে টিপ এবং মোট পরিমাণ গণনা 30 এ আপডেট করি।

এবং যোগফল 130।

কিন্তু এছাড়াও, আমরা সেই টিপ শতাংশের বিবরণ আপডেট করি।

তাই দুর্দান্ত থেকে আশ্চর্যজনক হয়ে উঠেছে এবং এই উজ্জ্বল সবুজ রঙে পরিণত হয়েছে।

অন্য দিকে, যদি আমি সত্যিই পরিষেবার সাথে অসন্তুষ্ট হই, আমি শূন্য টিপ দিতে পারি।

এবং আমরা এটিকে একটি দুর্বল টিপ বলে মনে করি৷

এবং আপনি দেখতে পাচ্ছেন কিভাবে রঙটি এই লাল রঙে আপডেট হয়েছে।

এবং তারপরে এখানে পাদলেখের নীচে, আমাদের কাছে অ্যাপটিকে ব্যক্তিগতকৃত করার একটি উপায়ও রয়েছে যাতে আপনি বলতে পারেন আপনি কে এটি তৈরি করেছেন বা আপনি কোথা থেকে এসেছেন৷

টিপ ক্যালকুলেটরে আমরা যে ধারণাগুলি কভার করি সেগুলি একই ধারণা যা প্রতিটি Android অ্যাপের জন্য মৌলিক৷

প্রথমে UI তৈরি করছে।

প্রতিটি অ্যাপের একটি ইউজার ইন্টারফেস প্রয়োজন৷

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

দ্বিতীয়ত, প্রতিটি আকর্ষণীয় অ্যান্ড্রয়েড অ্যাপ ব্যবহারকারীর ইনপুট শুনতে এবং প্রতিক্রিয়া জানাতে চলেছে৷

সুতরাং আমাদের অ্যাপে ডেটা ইনপুট করার দুটি উপায় রয়েছে, একটি হল বেস পরিমাণে প্রবেশ করা।

এবং দ্বিতীয় হল টিপ শতাংশ৷

এবং এর উপর ভিত্তি করে আমাদের যথাযথভাবে UI-কে প্রতিক্রিয়া জানাতে হবে এবং আপডেট করতে হবে।

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

এমন অনেক কিছু আছে যা আমরা টিপ ক্যালকুলেটরে কভার করতে যাচ্ছি না।

এবং সুযোগ কমাতে এবং এই অ্যাপটিকে সত্যিই দ্রুত এবং সহজ করার জন্য এটি গুরুত্বপূর্ণ৷

নির্মাণ করতে।

আপনি যদি অ্যান্ড্রয়েডে নতুন হয়ে থাকেন, প্রথমে, আমাদের একাধিক স্ক্রিন থাকবে না৷

যার মানে হল যে আমাদের Android-এ নেভিগেশন বা ব্যাক স্ট্যাকের মতো জিনিসগুলি মোকাবেলা করতে হবে না৷

এবং প্রকৃতপক্ষে, আমাদের কাছে যে একক স্ক্রীন রয়েছে তা আসলে বেশ সহজ, কারণ আমাদের পরিচালনা করার জন্য আমাদের কাছে এমন কোনো তালিকা ডেটা নেই।

দ্বিতীয়ত, ইন্টারনেটে নেটওয়ার্কিং এর সাথে আমাদের কোন সম্পর্ক নেই।

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

এবং তৃতীয়ত, আমরা স্টোরেজ নিয়ে মোটেও কাজ করছি না, সবকিছুই হবে স্থানীয় এবং মেমরিতে।

তাই আমরা ডাটাবেসে বা ডিস্কে বা ক্লাউডে কোথাও লিখতে যাচ্ছি না।

এবং এই তিনটিই অ্যাপটিকে তৈরি করা আরও সহজ করে তোলে৷

তাই আমি নিশ্চিত যে আপনি যখন এটি তৈরি করবেন এবং আপনি একটি রেস্তোরাঁয় যাবেন, আপনি খুব জনপ্রিয় হয়ে উঠবেন কারণ আপনি সহজে এবং আক্ষরিক অর্থে আপনার নামটি অ্যাপটিতে থাকবে।

তাই পরের ভিডিওতে দেখা হবে।

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

আমরা প্রথমে যা করব তা হল একটি একেবারে নতুন এন্টার স্টুডিও প্রকল্প তৈরি করুন৷

তাই আমার এখানে আমাদের স্টুডিও চলছে, এবং আমি আর্কটিক ফক্স চালাচ্ছি, কিন্তু সাম্প্রতিক সংস্করণের নতুন প্রজেক্টে ট্যাপ করা উচিত।

এবং আমি খালি কার্যকলাপ টেমপ্লেট বাছাই করতে যাচ্ছি।

এই অন্যান্যগুলি কখনও কখনও দরকারী, কিন্তু তারা আমাদের অ্যাপ্লিকেশনে প্রচুর ক্রাফ্ট নিয়ে আসে, যা বিভ্রান্তিকর হতে পারে৷

তাই সাধারণত, আমি খালি কার্যকলাপের সাথে যাব।

আসুন আমাদের অ্যাপ্লিকেশনটিকে টিপ্পি বলি।

প্যাকেজের নাম, সাধারণত আমি যা করব তা হল আমি আমার ডোমেন নাম বা আমার ইমেল ঠিকানা নেব এবং এটিকে পিছনের দিকে ফ্লিপ করব৷

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

এবং আমি API 21-এর ন্যূনতম SDK সংস্করণ বেছে নিতে যাচ্ছি।

এখন আমি সমাপ্তিতে ট্যাপ করব।

এবং যখনই আমার কাছে একটি নতুন প্রজেক্ট আছে তখনই আমি যা করতে পছন্দ করি তা হল স্টার্টার কোড চালানোর চেষ্টা করা।

কারণ যদি আমরা স্টার্টার কোডটিও চালাতে না পারি, তাহলে কিছু ভুল হয়ে গেছে।

কোনো কোড লেখা শুরু করার আগে নিশ্চিত হয়ে নিন যে আমরা একটি পরিচিত ভালো জায়গায় আছি।

যখন আমরা আমাদের স্টুডিওতে একটি নতুন প্রকল্প তৈরি করি তখন সবকিছু সেট আপ করতে কিছুটা সময় লাগবে।

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

তাই আমি পিক্সেল টু এপিআই 29 বেছে নিতে যাচ্ছি, যেটি একটি এমুলেটর যা আমি আগে থেকে তৈরি করেছি, আমাদের এমুলেটরটি আগে থেকে না থাকলে বুট আপ করতে সেই সবুজ ত্রিভুজটি হিট করুন এবং তারপরে এই এমুলেটরটিতে আমাদের প্রকল্প তৈরি ও স্থাপন করুন৷

এবং বর্তমান অগ্রগতি দেখতে আপনি Android স্টুডিওর নীচে স্থিতি দেখতে পাবেন৷

এটি এক বা দুই মিনিট সময় নিতে পারে৷

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

তাই আমাদের যা করতে হবে তা হল অপেক্ষা করা যতক্ষণ না আমরা এমুলেটরে কিছু অ্যাকশন দেখতে পাচ্ছি।

ঠিক আছে, দারুণ।

এটি প্রতিশ্রুতিশীল দেখাচ্ছে৷

আমরা হ্যালো ওয়ার্ল্ডের পাঠ্য সহ সো ওপেন এমুলেটর নামে একটি অ্যাপ্লিকেশন দেখছি, যা একটি খালি প্রকল্পের জন্য ডিফল্ট৷

এবং এটি আমাদের আত্মবিশ্বাস দেয় যে আমরা মৌলিক প্রকল্পটি সফলভাবে চালাতে সক্ষম।

আসুন অভ্যন্তরীণ স্টুডিওতে আসা যাক এবং স্টার্টার ফাইলগুলি সম্পর্কে কথা বলার জন্য দ্রুত মিনিট ব্যয় করি৷

এবং প্রকৃতপক্ষে, এটি বেশ সহজ কারণ শুধুমাত্র দুটি ফাইল রয়েছে যা আমরা প্রধান কার্যকলাপ ডট কোটলিন এবং কার্যকলাপ প্রধান ডট এক্সএমএল নিয়ে উদ্বিগ্ন হতে যাচ্ছি, আপনি Android পরিভাষায় একটি ক্রিয়াকলাপকে একটি পর্দার প্রতিনিধিত্ব হিসাবে ভাবতে পারেন৷

তাই আমাদের যে প্রজেক্ট আছে, এই মুহূর্তে, আমাদের শুধুমাত্র একটি স্ক্রিন আছে।

এবং এটিকে প্রধান কার্যকলাপ বা প্রধান পর্দা হিসাবে উল্লেখ করা হয়।

এবং এটিই সেই ব্যবসায়িক যুক্তি যা আমরা এই ফাইলটিতে এখানে সংজ্ঞায়িত করছি যাকে প্রধান কার্যকলাপ বলা হয়৷

বিশেষ করে, স্টার্টার কোড আমাদের একটি ফাংশন বা একটি পদ্ধতি দেয় যা ইতিমধ্যেই ওভাররাইড করা হচ্ছে।

এবং এটিকে onCreate বলা হয়, যখন আমাদের অ্যাপ্লিকেশনটি আমাদের স্ক্রীন তৈরি করার সময় শুরু হবে তখন Android সিস্টেম স্বয়ংক্রিয়ভাবে এই ফাংশনটি শুরু করবে বা কল করবে৷

এবং এখানে গুরুত্বপূর্ণ লাইন হল লাইন নাইন সেট কনটেন্টভিউ আর ডট লেআউট কার্যকলাপ প্রধান।

তাই R মানে সম্পদ।

তাই আমরা এখানে যা বলছি তা হল যে আমাদের স্ক্রীনের বিষয়বস্তু বা UI হওয়া উচিত সম্পদের লেআউট ফাইল, কার্যকলাপ প্রধান ডট XML-এ সংজ্ঞায়িত৷

এবং প্রকৃতপক্ষে, যদি আমরা এর সংজ্ঞায় ঝাঁপিয়ে পড়ি, আমরা দেখতে পাব যে এটি সরাসরি অ্যাক্টিভিটি মেইন ডট XML-এ যায়।

তাই আমি এখানে প্রজেক্ট টুল উইন্ডোটি ছোট করতে যাচ্ছি যাতে নিজেদেরকে আরও জায়গা দেওয়া যায়।

এবং এটি অ্যাট্রিবিউট প্যানকেও ছোট করে।

সুতরাং এখানে আমরা অ্যাপ্লিকেশনটিতে ঠিক যা দেখছি, HelloWorld এর সাথে একটি ফাঁকা ক্যানভাস।

এবং বিশেষ করে, আপনি যদি এখানে কম্পোনেন্ট ট্রি দেখেন, তাহলে এটি আপনার জন্য ছোট করা হতে পারে।

কিন্তু আপনি এখানে ট্যাপ করে এটিকে প্রসারিত করতে পারেন, আমরা দেখতে পাচ্ছি প্যারেন্ট এলিমেন্টকে সীমাবদ্ধতা লেআউট বলা হয়।

এবং এটিতে ঠিক একটি শিশু রয়েছে যাকে টেক্সটভিউ বা একটি লেবেল বলা হয়৷

এবং এর একটি বৈশিষ্ট্য রয়েছে যার মান হ্যালো ওয়ার্ল্ড।

এবং এভাবেই আমরা আমাদের চলমান অ্যাপ্লিকেশনটিতে হ্যালো ওয়ার্ল্ড পাঠ্যটি দেখতে পাচ্ছি।

এই ভিডিওতে, আমরা আমাদের সমস্ত সময় অ্যাক্টিভিটি মেইন ডট XML-এ ব্যয় করতে যাচ্ছি, কারণ আমরা এই মুহূর্তে শুধুমাত্র আমাদের অ্যাপ্লিকেশনের জন্য UI তৈরি করা নিয়ে চিন্তিত৷

এবং বিশেষ করে, এখানে আমরা কিভাবে শেষ করতে চাই, আমাদের পর্দায় আটটি উপাদান থাকবে।

বাম দিকে, আমাদের চারটি ভিন্ন পাঠ্য দৃশ্য রয়েছে, আপনি একটি পাঠ্যের কথা ভাবতে পারেন, আপনি একটি লেবেল চান, যা ব্যবহারকারী দ্বারা সম্পাদনাযোগ্য নয়৷

ডানদিকে, টেক্সটভিউ দ্বারা বর্ণিত প্রকৃত উপাদানগুলি রয়েছে৷

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

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

কিন্তু আপনি কোড ট্যাবেও নামতে পারেন, যা প্রকৃত অন্তর্নিহিত XML৷

তাই আপনি দেখতে পাচ্ছেন যে আমাদের কীভাবে সীমাবদ্ধতা বিন্যাস রয়েছে এবং তারপরে একজন শিশু পাঠ্য দৃশ্যটিকে ডিজাইনের মতোই দেখতে পারে।

বিভক্ত মানে আপনি উভয়ের দিকে তাকান।

এবং আমাদের বেশিরভাগ সময় ডিজাইন প্রিভিউ দেখার জন্য ব্যয় করা হচ্ছে।

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

এবং আবার, এটি কোড ট্যাবে উপস্থাপন করা হবে।

তাই শুধু মনে রাখবেন যে ডিজাইন প্রিভিউ এবং অন্তর্নিহিত XML-এর মধ্যে আপনি যা কিছু পরিবর্তন করেন তার মধ্যে এক থেকে এক চিঠিপত্র রয়েছে৷

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

ডকুমেন্টেশন সীমাবদ্ধ লেআউটকে ফ্ল্যাট ভিউ হায়ারার্কি সহ বড় এবং জটিল লেআউট তৈরি করার একটি উপায় হিসাবে বর্ণনা করে।

আমরা সংজ্ঞায়িত সীমাবদ্ধতার একটি সেটের মাধ্যমে ভাইবোন দৃষ্টিভঙ্গি এবং পিতামাতার লেআউটের মধ্যে সম্পর্ক বর্ণনা করতে সক্ষম।

এবং এটি অভ্যন্তরীণ সিস্টেমকে একাধিক আকারের ফোন বা ট্যাবলেট জুড়ে আমাদের UI সুন্দরভাবে লেআউট করার অনুমতি দেয়৷

এবং এখানে গুরুত্বপূর্ণ বিষয় কোন নেস্টেড ভিউ গ্রুপ নয়।

অ্যান্ড্রয়েডে, যদি আপনার একটি খুব গভীরভাবে নেস্টেড ভিউ হায়ারার্কি থাকে, তাহলে এটি কর্মক্ষমতার অনেক অবনতি ঘটায় এবং এমন কিছু যাকে আমরা জ্যাঙ্ক বা UI ল্যাগ বলি৷

আর তাই সীমাবদ্ধতা বিন্যাস আমাদের নেস্টেড ভিউ গ্রুপ ছাড়াই জটিল ভিউ তৈরি করতে দেয়।

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

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

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

আমি যখনই কোনো উপাদান টেনে বের করি তখনই প্রথম যে কাজটি করি তা হল আইডি আপডেট করা যাতে আরও অর্থপূর্ণ হয়।

তাই আমি এই টিভি বেস লেবেলটিকে কল করব এবং তারপরে পাঠ্যটিকে ভিত্তি হিসাবে আপডেট করব৷

এবং আপনি এখানে যা লক্ষ্য করবেন তা হল যে Android স্টুডিও অভিযোগ করছে যে এই TextView সীমাবদ্ধতাগুলি অনুপস্থিত৷

তাই এটি শুধুমাত্র টাইম পজিশন ডিজাইন করেছে, এটি 00 পজিশনে চলে যাবে, যা রানটাইমে স্ক্রিনের উপরের বাম দিকে, যদি না আমরা সীমাবদ্ধতা যোগ করি।

এবং এটি সীমাবদ্ধতার লেআউটের সম্পূর্ণ বিন্দু, আমাদের প্রতিটি উপাদানকে উল্লম্ব এবং অনুভূমিকভাবে সীমাবদ্ধ করতে হবে।

তাই উল্লম্বভাবে, আমরা যা করব তা হল টিভি ভিত্তিক লেবেলের এই শীর্ষ অ্যাঙ্কর পয়েন্টটিকে টেনে আনব এবং পর্দার শীর্ষে টেনে আনব৷

এবং তারপরে অ্যাট্রিবিউট ট্যাবে, আমরা স্ক্রিনের শীর্ষ থেকে কত দূরে এটি চাই তার মার্জিনটি নির্দিষ্ট করব এবং আমি উপরে 48 বলতে যাচ্ছি।

একইভাবে, আমরা একটি বাম মার্জিন নির্দিষ্ট করতে চাই, তাই আমরা বাম অ্যাঙ্কর পয়েন্টটি টেনে আনব এবং এটিকে প্যারেন্টের কাছে টেনে আনব এবং স্ক্রিনের বাম প্রান্ত থেকে 32 ডিপি দূরে এটি নির্দিষ্ট করব৷

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

বেস লেবেলের ঠিক নীচে একটি দিয়ে শুরু হচ্ছে একটি টিভি টিপ শতাংশ লেবেল৷

লেখক এখানে পাঠ্য 24% হতে হবে।

নীচের টেক্সটভিউটি হবে টিভি টিপ লেবেল৷

পাঠ্য টিপ হবে।

এবং তারপর অবশেষে আমাদের কাছে টিভির মোট লেবেল থাকবে।

এবং এখানে টেক্সট মোট হবে।

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

এবং আমরা 32 dP-এর একটি মার্জিন নির্দিষ্ট করব যার অর্থ হল যে প্রতিটি টেক্সট আপনার উপরে থাকা টেক্সটের নীচে 32 dP-এ 32 পিক্সেল থাকা উচিত, এটি উপরের অ্যাঙ্কর পয়েন্টটিকে টেনে আনবে এবং এটিকে উপরের টেক্সটের নীচের অ্যাঙ্কর পয়েন্টে টেনে আনবে। .

এবং আবার, একই কাজ করুন 32 dP এই ভিউগুলির প্রতিটিকে উল্লম্বভাবে সীমাবদ্ধ করুন৷

এখন অনুভূমিকভাবে কীভাবে, যদি আমরা কাঙ্ক্ষিত শেষ অবস্থায় ফিরে যাই, আপনি যা লক্ষ্য করবেন তা হল যে আমরা যদি এখানে একটি উল্লম্ব রেখা আঁকি, বাম দিকের সমস্ত উপাদান, সেগুলি তার ডান প্রান্তে সারিবদ্ধ হবে। উপরের টেক্সট আপনি এই টিভি বেস টেবিল.

এভাবেই আমরা তাদের অনুভূমিকভাবে সীমাবদ্ধ করতে চাই।

এবং আমরা আসলে ডিজাইন ট্যাবে এটি করতে পারি, আপনি বলতে পারেন সারিবদ্ধ করুন এবং তারপরে ডান প্রান্তগুলি সারিবদ্ধ করুন৷

কিন্তু আমি কোড ট্যাবে এটি কিভাবে করতে হয় তা দেখাতে চাই।

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

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

তাই আমাদের এই লাল আন্ডারলাইন আছে।

উল্লম্ব সীমাবদ্ধতা হল যা আপনি এখানে দেখতে পাচ্ছেন।

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

তাই একইভাবে, আমরা যা করতে চাই তা হল এই উপাদানটির শেষ, টিভি টিপ শতাংশ লেবেলটি টিভি ভিত্তিক লেবেলের শেষের সমান হওয়া উচিত৷

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

এবং যদি আমরা ডিজাইন ট্যাবে ফিরে যাই, আপনি দেখতে পাবেন কিভাবে সবকিছু এখন সারিবদ্ধ হয়েছে।

আর একটা জিনিস আমি এখানে বলতে চাই তা হল টুলের নামস্থান শুধুমাত্র ডিজাইন প্রিভিউ রেন্ডার করার উদ্দেশ্যে ব্যবহার করা হয়।

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

তাই আমি এগুলোর প্রতিটি নির্বাচন করে মুছে ফেলতে যাচ্ছি।

আর একটা জিনিস হল আমি একটা সামঞ্জস্যপূর্ণ স্টাইল এবং বিভিন্ন অ্যাট্রিবিউট নামের ক্রমানুসারে বেশ বড়।

সুতরাং উদাহরণস্বরূপ, এখানে একই লাইন বা নতুন লাইনে শেষ কোণ বন্ধনী রয়েছে।

এবং এটি আমাদের জন্য স্বয়ংক্রিয়ভাবে ঠিক করতে, আমি ডাবল শিফটে আলতো চাপ দিতে পারি এবং তারপরে কেবল পুনরায় ফর্ম্যাট অনুসন্ধান করতে পারি।

এবং কোডটি পুনরায় ফর্ম্যাট করার জন্য একটি শর্টকাট রয়েছে৷

যদি আমি তা করি, তাহলে আপনি দেখতে পাবেন কিভাবে Android Studio আমাদের পুরো ফাইল জুড়ে এটি ঠিক করতে সাহায্য করেছে, যা আমি অনেক বেশি পছন্দ করি।

ঠিক আছে, তাই আসুন ডিজাইন ট্যাবে ফিরে যাই।

এবং আমরা স্ক্রিনের ডান দিকের কম্পোনেন্টে যাওয়ার আগে, একটি জিনিস আমি শুধু কয়েকটি দ্রুত ডিজাইন টুইক করতে চাই।

প্রথমে, আমি এখানে লেখাটিকে একটু বড় করতে চাই।

তাই আমি টেক্সট চেহারা মাঝারি করতে যাচ্ছি, আপনি দেখতে পারেন কিভাবে এটি বড় হয়েছে.

এবং তারপরে এই টিভি টিপ প্রেজেন্ট লেবেলটি কিছুটা অনন্য, কারণ এটি ব্যবহারকারীকে আসলে কী উপস্থাপন করতে হবে তার মান উপস্থাপন করে৷

তাই এটি বোঝাতে যে এটি অন্যদের থেকে কিছুটা আলাদা, আমি এখানে পাঠ্যটিকে বোল্ড করতে যাচ্ছি৷

দারুন, আমি এটা পছন্দ করি।

এখন স্ক্রিনের ডান প্রান্তের চারটি উপাদান সম্পর্কে চিন্তা করা যাক।

এটি একটি সম্পাদনা টেক্সট হতে যাচ্ছে, নীচে যে আমাদের সন্ধান বার আছে।

এবং তারপর তার নীচে আমাদের দুটি পাঠ্য দর্শন রয়েছে৷

সুতরাং আসুন একটি সম্পাদনা পাঠ্য টেনে বের করি।

এবং আমরা যেটিকে টেনে আনব সেটি হচ্ছে দশমিক সংখ্যা।

এবং এই সমস্ত বিভিন্ন সম্পাদনা পাঠ্যের মধ্যে পার্থক্য আসলে বেশ সহজ৷

এটি কেবল ইনপুট প্রকার।

যেহেতু আমরা মুদ্রার সাথে লেনদেন করছি, তাই আমরা আমাদের সংখ্যা এবং দশমিক চাই।

এর নীচে, আমরা একটি সন্ধান বার করতে যাচ্ছি৷

এবং তারপর তার নীচে, আমরা TextView-এ টেনে আনব।

ঠিক আছে, আরও বুদ্ধিমান কিছু হতে আইডিএস আপডেট করা যাক।

তাই এটিকে বেস অ্যামাউন্টে বলা হচ্ছে।

এরপরে আমাদের কাছে সিকবার টিপ আছে।

তারপরে আমাদের কাছে টিভি টিপের পরিমাণ আছে৷

এবং তারপর অবশেষে আমাদের কাছে টিভির মোট পরিমাণ আছে।

আসুন এখানে পাঠ্যটিকে 103 ডট 11 হতে আপডেট করি।

এবং এটি, আমি মনে করি আমরা 1996 বলেছিলাম।

আসুন আমরা এই উপাদানগুলির অবস্থান করার আগে কিছু ডিজাইনের পরিবর্তন করি৷

সুতরাং এই নীচের টেক্সচারগুলি, এইগুলি পুরো অ্যাপের সবচেয়ে গুরুত্বপূর্ণ অংশ।

তাই আমি টেক্সট বড় করতে যাচ্ছি।

সিকবার, আমি এটিকে কিছুটা প্রশস্ত করতে 200 ডিপির একটি হার্ড কোডেড প্রস্থ নির্দিষ্ট করতে যাচ্ছি৷

এবং তারপরে এখানে ম্যাক্স নামে একটি অ্যাট্রিবিউট রয়েছে, যা সিকবারে থাকা সর্বাধিক পরিমাণ।

এবং এটি 30 হবে।

কারণ আমরা শুধুমাত্র 30% পর্যন্ত অনুমতি দিই।

এডিট টেক্সটের জন্য, আমি EMAS-কে আট সেট করতে যাচ্ছি, যার মানে কত অক্ষর চওড়া এই এডিট টেক্সট কত অক্ষর চওড়া হবে এবং আট আমাদের জন্য যথেষ্ট, আমি টেক্সট সাইজ বাড়াতে যাচ্ছি 24 এসপি।

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

এখন চিন্তা করা যাক কিভাবে এগুলোর অবস্থান করা যায়।

সুতরাং উল্লম্বভাবে, নীচের দুটি পাঠ্য, আপনাকে উল্লম্বভাবে সারিবদ্ধ করা উচিত, তাই আমি উভয়টি নির্বাচন করতে যাচ্ছি এবং তারপর উল্লম্ব কেন্দ্রগুলিকে সারিবদ্ধ করতে যাচ্ছি৷

এবং একইভাবে উপরেরগুলির জন্য৷

এবং তারপর একইভাবে টিপ শতাংশ এবং সিকবারের জন্য।

এবং আপনি দেখতে পাচ্ছেন কিভাবে ডিজাইন ট্যাবে, আমরা আসলে যোগ করা সীমাবদ্ধতার এই সুন্দর পূর্বরূপ দেখতে সক্ষম হয়েছি।

বিলের পরিমাণের জন্য।

আসুন এটিকে অনুভূমিকভাবে কীভাবে সীমাবদ্ধ করা যায় সে সম্পর্কে চিন্তা করি, এটি আপনার বাম পাশে সংশ্লিষ্ট পাঠ্য থেকে 32 ডিপি দূরে থাকবে৷

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

এটা ভাল দেখায়.

আমাদের এখন যা করতে হবে তা হল যদি আমরা এখানে ঘোরাঘুরি করি, তাহলে আমরা সম্পাদনা পাঠে একটি উল্লম্ব সীমাবদ্ধতা মিস করছি।

তাই এটি করতে, আমি কোড ট্যাবে যেতে যাচ্ছি।

এখানে ভিত্তি পরিমাণে পাঠ্য সম্পাদনা করুন।

এবং যেভাবে আমরা উল্লম্ব অবস্থানের সাথে যোগাযোগ করব তা হল এই উপাদানটির শীর্ষটিকে উপরের বাম দৃশ্যের শীর্ষে বিবেচনা করা যা একটি টিভি বেস টেবিল এবং একইভাবে এই ভিউটির নীচের অংশটিও টিভি বেস টেবিলের নীচে হওয়া উচিত।

তাই এটি ঠিক মাঝখানে উল্লম্বভাবে থাকবে।

সুতরাং আপনি যদি ডিজাইন ট্যাবে ফিরে যান, আপনি দেখতে পাবেন যে এখন ত্রুটিগুলি চলে গেছে।

এবং আপনি এই সীমাবদ্ধতাগুলি দেখতে দেখতে দেখতে পারেন।

আপনি যদি আবার ডিজাইন ট্যাবে ফিরে যান, তাহলে আমাদের আর এই টুলের নামস্থানের প্রয়োজন হবে না, কারণ আমরা সবকিছু সম্পূর্ণরূপে সীমাবদ্ধ করে রাখছি।

আসুন কোডটি খুব দ্রুত রিফর্ম্যাট করি।

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

এগুলি বাম দিকের দৃশ্য৷

এবং তারপর TextView-এর জন্য, সম্পাদনা টেক্সট দিয়ে শুরু করে, এইগুলি ডান দিকের ভিউ।

এটি দেখতে কেমন তা দেখতে ঠিক।

ঠিক আছে, অসাধারণ।

যেমনটি আমরা আশা করি এটি ডিজাইন প্রিভিউতে আমরা যা দেখি তা প্রায় ঠিক প্রতিফলিত করে৷

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

এবং টুলস নেমস্পেসের উদ্দেশ্য ঠিক এটাই যা আমরা আগে বলেছি।

তাই আমি যা করব তা হল সংশ্লিষ্ট টেক্সট ভিউ নির্বাচন করুন।

এবং এখানে একটি টেক্সট থাকার চেয়ে, আমি নিচে স্ক্রোল করতে যাচ্ছি।

আমি এটিকে রেঞ্চ টেক্সট এলাকায় নিয়ে যেতে যাচ্ছি।

এবং সেটা হল টুলের নামস্থান।

তাই আমি এগুলোকে টুল টেক্সটে নিয়ে যাচ্ছি।

এবং তারপর অবশেষে, এখানে একই জিনিস।

শুধুমাত্র আপনাকে দেখানোর জন্য যে এটি কী করেছে, যদি আমরা কোড ট্যাবে ফিরে যাই, যদি আপনি টিভি টিপ শতাংশ লেবেলটি দেখেন তাহলে Android টেক্সট অ্যাট্রিবিউটের পরিবর্তে এখন টুল টেক্সট অ্যাট্রিবিউট।

আমরা যদি শেষবার অ্যাপটি চালাই, তাহলে দেখা যাক প্রাথমিক লেআউটের উপর এর প্রভাব কী।

অসাধারন, এটি দেখতে বেশ ভাল।

আশা করি এই ভিডিওটি আপনাকে সীমাবদ্ধতার লেআউটের শক্তি সম্পর্কে ভাল ধারণা দিয়েছে।

আমরা যা করেছি তা দেখানোর জন্য আমি আপনাকে একটি জিনিস দেখাতে পারি তা হল স্ক্রিনে এই আটটি ভিউ সহ, এগুলি একক অভিভাবকের পরিবর্তে অবস্থিত৷

এবং যদি আমি উপরের বাম দিকের টেক্সটভিউকে টেনে বের করি তবে সবকিছু সেই অনুযায়ী চলে যায়, যা একে অপরের কাছে তুলনামূলকভাবে সমস্ত দৃষ্টিভঙ্গি সীমাবদ্ধ করার একটি সত্যিই চমৎকার উপায়।

তাই পরবর্তী ভিডিওতে কাজটি আসলে মূল কার্যকলাপে ব্যবসায়িক যুক্তি যুক্ত করা, যাতে আমরা ইনপুটটিতে প্রতিক্রিয়া জানাতে পারি এবং মোট টিপটি গণনা করতে পারি।

পরবর্তী ভিডিওতে দেখা হবে।

শেষ ভিডিওতে, আমরা আমাদের টিপ ক্যালকুলেটর অ্যাপ্লিকেশনের জন্য স্ক্রিনে আটটি ভিউ তুলে ধরেছি।

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

এবং যখন তারা একটি ভিত্তি পরিমাণে প্রবেশ করে, তখন আমরা সেই মানটি নিতে চাই এবং তারপরে মোট পরিমাণে টিপ গণনা করতে চাই।

বিশেষ করে, আপনি লক্ষ্য করবেন যে কোনও জমা বোতাম নেই৷

তাই ব্যবহারকারী বেস পরিমাণ বা টিপের শতাংশ পরিবর্তন করার সাথে সাথে, কিছু পরিবর্তন হলে আমরা গতিশীলভাবে টিপ এবং মোট পরিমাণ গণনা করতে চাই।

তাই প্রথম অনুশীলন হিসাবে, আমি যা করতে চাই তা হল ব্যবহারকারী একটি সিকবারে মান পরিবর্তন করার সাথে সাথে আমি শতাংশ লেবেল আপডেট করতে সক্ষম হতে চাই।

তাই প্রথম কাজটি করার জন্য আমরা যা করব তা হল স্ক্রিনে ভিউগুলির একটি রেফারেন্স পাওয়া যা আমাদের আসলে ডেটা পড়তে বা পরিবর্তন করতে সক্ষম হতে হবে৷

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

তাই আমাদের স্টুডিওতে, আমরা যেভাবে এটি করব তা হল প্রতিটি উপাদানের জন্য এখানে একগুচ্ছ ভেরিয়েবল ঘোষণা করা।

সুতরাং উদাহরণস্বরূপ, আমাদের কাছে সম্পাদনা পাঠ্য রয়েছে, যা ভিত্তি পরিমাণে হবে।

এবং এটির ধরনটি একটি টাইপ সম্পাদনা পাঠ্য হতে চলেছে।

তবে এখানে সিনট্যাক্স নিয়ে খুব বেশি চিন্তা করবেন না।

যদি এটি বিভ্রান্তিকর হয়, আমরা যা বলছি তা হল একটি ব্যক্তিগত পরিবর্তনশীল৷

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

তাই এখন onCreate-এ।

কন্টেন্ট ভিউ সেট করার পর, আমরা বলতে যাচ্ছি বেস মাউন্ট ফাইন্ড ভিউ আইডি এবং বেস অ্যামাউন্ট দ্বারা।

এবং আমরা এখন পর্দার অন্য চারটি উপাদানের জন্য এটি পুনরাবৃত্তি করতে যাচ্ছি।

তাই আমাদের কাছে একটা সিকবার টিপ আছে।

আর সেই ধরনটি এখানে সিকবার।

এবং তারপরে আমাদের কাছে টিভি টিপ শতাংশ রয়েছে৷

এটি আপনার কাছে পাঠ্য হতে চলেছে৷

এবং তারপরে আমাদের জন্য আরও দুটি পাঠ্য রয়েছে৷

একটি হল টিভি টিপের পরিমাণ এবং অন্যটি হল টিভির মোট পরিমাণ৷

এখন আমি onCreate-এর ভিতরের এই সবগুলির রেফারেন্স বের করব এবং অবশেষে আমাদের কাছে মোট পরিমাণ আছে৷

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

তাই আসলে, আমাকে এখানে ভেরিয়েবলের নাম আপডেট করতে দিন শুধু ধারাবাহিকতার জন্য টিভি 2% লেবেল।

এবং সিট বারে পরিবর্তনের বিষয়ে আমরা যেভাবে বিজ্ঞপ্তি পাই তা হল এটিতে একজন শ্রোতা যোগ করা, এটি বলবে সিক বার টিপ ডট সেট সিক বার চেঞ্জ লিসেনার।

এবং এখন আমাদের বিনোদনকারীকে বলতে হবে যে সিট বার পরিবর্তন হলে কী ঘটতে হবে।

এবং এখানে সিনট্যাক্স হল আমরা অবজেক্ট বলতে যাচ্ছি, সিক বার.অন, সিকবার, শ্রোতা পরিবর্তন করুন।

এবং তারপর আমরা এখানে ভিতরে এই ক্লাস সংজ্ঞায়িত করতে যাচ্ছি.

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

সিকবারে এর সংজ্ঞা মেনে চলার জন্য আমাদের তিনটি পদ্ধতি ওভাররাইড করতে হবে, শ্রোতা পরিবর্তন করুন।

এবং এনআরসি এতে আমাদের সাহায্য করবে৷

এবং খুব বেশি চিন্তা করবেন না।

আবার, সিনট্যাক্স বিভ্রান্তিকর।

এখানে বিশদটি হল যে আমরা একটি বেনামী ক্লাস সংজ্ঞায়িত করছি যা এই ইন্টারফেসটি প্রয়োগ করে৷

তাই যদি আমি এখানে সংজ্ঞায় যাই, আপনি দেখতে পাবেন যে এটি একটি পাবলিক ইন্টারফেস, যেটিতে সেই তিনটি পদ্ধতি রয়েছে যা আমরা ওভাররাইড করেছি।

এবং এখন আমাদের কাজ হল সিস্টেমকে বলা যে এই পদ্ধতিগুলির প্রতিটিকে কল করার সময় কী ঘটতে হবে৷

এবং প্রকৃতপক্ষে, আমরা স্টার্ট ট্র্যাকিং টাচ বা স্টপ ট্র্যাকিং টাচ সম্পর্কে সত্যিই চিন্তা করি না।

তাই আমি এখানে দুটি বকেয়া অপসারণ করতে যাচ্ছি, এবং এটিকে খালি বাস্তবায়নে ছেড়ে দেওয়া যাক।

আমরা UI আপডেট করার আগে, আসুন প্রথমে Android-এ একটি লগ স্টেটমেন্ট যোগ করি যাতে আরও সহজে বোঝা যায় কী ঘটছে৷

তাই আমি ডান লগ ইন করব i এবং এটি একটি পদ্ধতি যা দুটি প্যারামিটার নেয়।

প্রথমটি একটি স্ট্রিং, যাকে আমি ট্যাক বলব, আমি পরে সংজ্ঞায়িত করব।

এবং দ্বিতীয়টিও একটি স্ট্রিং, যা একটি বার্তা বা একটি লগ স্টেটমেন্ট৷

এবং আমি অগ্রগতির পরিবর্তনের বিষয়ে বলব, যা একটি পদ্ধতির নাম, অগ্রগতির সাথে, যা সিকবারের বর্তমান মান।

সুতরাং আসুন এই ট্যাগটি সংজ্ঞায়িত করা যাক, আমি ক্লাসের শীর্ষে গিয়ে একটি প্রাইভেট কনস্ট ভ্যাল ট্যাগ সংজ্ঞায়িত করতে যাচ্ছি।

এবং এখানে নিয়ম হল যে যখনই আপনার কোন ধরনের লগিং থাকে, ট্যাগটি সাধারণত ক্লাসের নাম হতে চলেছে৷

ঠিক আছে, আসুন চেষ্টা করি।

সুতরাং এখানে ধারণাটি হল যে প্রতিবার সিট বারে অগ্রগতি পরিবর্তিত হয়েছে, যার অর্থ ব্যবহারকারী স্ক্রাব করছে, আমরা লগক্যাটে প্রদর্শিত বর্তমান মানটি প্রিন্ট করব, যেখানে লগগুলি এটি আউটপুট করে।

তাই লগক্যাট খুলুন।

এমুলেটর খুলুন।

এবং যে লগগুলি আমরা যত্ন করি সেগুলি শুধুমাত্র আমাদের অ্যাপ্লিকেশন থেকে আসে, যা শান্ত, শান্ত, আরকে পান্ডে টিপ্পি এবং আমরা শুধুমাত্র তথ্য স্তরের লগগুলির যত্ন করি কারণ এটিই log.io তথ্য স্তরের লগগুলিকে উপস্থাপন করে৷

এছাড়াও আমরা শুধুমাত্র লগের যত্ন নিই, যেগুলিতে এই বিশেষ ট্যাগ রয়েছে, যা প্রধান কার্যকলাপ৷

তাই আসুন একটি ফিল্টার হিসাবে প্রধান কার্যকলাপ যোগ করা যাক.

এবং এখানে যখন আমরা সীট বার পরিবর্তন করি, আপনি দেখতে পাচ্ছেন কিভাবে আমরা লগক্যাট আউটপুটের একটি লাইন পাই এবং এটি সিট বারের বর্তমান সূচকটি ঠিক কী দেখাচ্ছে তা প্রতিনিধিত্ব করে৷

তাই যদি আমরা সর্বোচ্চ পর্যন্ত যাই, আমরা আশা করি 30 দেখতে পাব, এবং যদি আমরা সমস্ত পথে ফিরে আসি, আমরা শূন্যে চলে যাব।

তাই এখন UI আপডেট করা যাক।

এবং বিশেষ করে, আমরা সিকবারের বর্তমান অগ্রগতি নির্দেশ করতে টিভি টিপ শতাংশ লেবেল আপডেট করতে চাই৷

তাই আমরা TV 2% বলব, এর টেক্সট অ্যাট্রিবিউট লেবেল করব, আমরা সেটাকে অগ্রগতির সমান সেট করব।

কিন্তু প্রকৃতপক্ষে, আমরা অগ্রগতিকে একটি স্ট্রিং হিসাবে উপস্থাপন করতে চাই, একটি int নয়।

এবং আমরা এর পরে একটি শতাংশ চিহ্ন সংযুক্ত করতে চাই।

তাই আমরা বলব ডলার চিহ্নের অগ্রগতি, যেভাবে আমরা কোটলিনে স্ট্রিং ইন্টারপোলেশন করি।

অনুরূপ আমরা একটি লগ বিবৃতিতে করেছি, এবং তারপর শেষে একটি শতাংশ চিহ্ন যোগ করুন।

আসুন এটি চেষ্টা করে দেখি।

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

যদিও এখানে একটি উন্নতি হল, প্রাথমিকভাবে, আমরা লেবেলে কোনো টিপ শতাংশ নির্দেশ করছি না।

এবং তাই এটি ঠিক করতে, আসুন আরও একটি ধ্রুবক সংজ্ঞায়িত করি, যাকে আমরা বলি প্রাথমিক টিপ উপস্থিত।

তাই আমাদের কাছে একটি প্রাইভেট কনস্ট ভ্যাল প্রারম্ভিক টিপ থাকবে এবং আমরা সেটিকে 15 এর সমান সেট করব।

So initially, the default tip is going to be 15%.

So with that diviner the constant before we do anything in the listener, great in the onCreate method, will they seek bar tip dot progress is equal to initial tip percent.

And we also want to update the label appropriately.

So we'll say TV tip percent label dot text is equal to initial tip percent, with the percent sign after.

Now when we run the app, we should see instead of the blank 2% label, we should see 15% like we do and the progress bar indicator is exactly in the middle of the width of the whole seat bar.

Next, similar to how we are able to react to changes in the seat bar, we also want to be able to react to changes In the edit text, so there's a analogous method on the ET base mount we'll call add text change listener.

And the syntax is similar, we pass in an object here, which is an anonymous class is an implementation of the text watcher.

And we'll have Enter to help us once again, there are some methods that we have to override.

So I'm going to tap on that red light bulb and implement the members three, override all them.

And then similar to before, the only thing that we care about is after text change, I'm going to go ahead and delete the body of implementation here.

Just to get a better understanding of what's happening here.

Again, let's add a log statement after text changed.

dollar sign ups.

Alright, let's try it.

So dollar sign s is the parameter passed in.

And that is actually what the user is typing at that moment.

Run this, let's open up logcat once again.

Alright, so like before, if I modify the seek bar, you can see that it is changing appropriately.

And then if I add the value into the edit text, you can see 800 it is being updated appropriately in log.

Two quick notes.

First, I sometimes see students will get tripped up when they invoke functions in kotlin.

The MSG that you're seeing when we call log into it is a hint from energy about what that parameter represents.

So if you actually type MSG, that will lead to a compile error.

So let's make sure you don't do this.

Second, I want to demystify what the object keyword means.

So the object expressions like we're using twice so far, are examples of how to create anonymous classes, which are one time use classes that are commonly used to implement interfaces.

So we have both text watcher and on seekbar change listener as interfaces defined by the Android system.

And these methods that we're overriding will automatically be invoked for us when the user takes the appropriate action on the underlying edit text or seekbar.

So now we have all the ingredients in place to actually make this app functional.

Whenever the Edit Text changes, I'm going to call a method called compute, tip, and total.

And this is actually what will take the values from the edit text and seekbar and then update the tip and total amount appropriately.

So this method doesn't exist yet.

But again, let's leverage the utility of Android Studio and have to create this function for us inside of main activity.

And there are a couple things that have to happen in this method.

First, we want to get the value of the basic tip present.

Second, we'd like to compute the tip in total.

And third, we need to update the UI to show those values.

So to get the value of the basic tip, that's pretty straightforward, we just look at the edit text at base amount, grab the text, and then call to string on it.

And then on a string, we know it's going to be a currency like a decimal, so we'll call to double on it, in order to turn it into a number that we can work with.

And we'll call this base amount.

And then similarly, for the 2%, we want to get the value of the progress on the seat bar, this attribute called progress, and that'll be saved in a variable that I'm going to call tip percent.

Quite Next, we want to compute the tip and total amount.

So the tip amount is going to be the base amount, times the tip percent divided by 100.

So for example, if the base amount is $100, I went for $100 meal, and the tip percent is 20, then I expect the tip amount to be $20.

So that'd be 20 divided by 100 is 20% times 100.

And that gives me $20.

So that'll be tip amount.

And then we have the total amount, and the total amount is simply going to be the base amount, plus the tip amount.

Okay, finally, we need to update the UI.

And again, this turns out to be pretty straightforward, because we have a reference to the two text views which show the tip and total amount, which is TV tip amount, and we're going to set the text attribute there to be tip amount.

And this is going to throw an error because tip amount is a number it's a double right, but we actually require something called a car sequence.

And to give it a car sequence, we can just call to string on this.

And then similarly, we call we need to say TV total amount is that the text attribute here to be the total amount to string.

And this should be a plus sign.

Wait, this is the whole brain of our application.

So if we run this, then what we're doing is anytime that the edit text value has changed, we're going to call this method and we should be updating the UI To have the correct amount for the tip and total amount, right, so we have 15%.

For the tip, if I add in $100 here, then you do see immediately we get the correct tip and total computation.

And we would like to have the same logic get executed if I change the seat bar, the 2%.

And that turns out to be really easy, because we've abstracted all the logic away into this method.

So I'm going to call compute tip and total, right here in on progress changed.

Alright, so if you try this now, we should have a pretty functional app.

So similar to before, if I put in 100.

Here, we do correctly compute 115.

And if I change the percent, you can see it does appropriately updated.

Alright, so this is working actually pretty well.

But there are two things that I think are incorrect or could be improved.

But just take a moment right now think about what are two improvements that you could do to the app that we have right now try playing around with it, see if you can identify any issues.

Okay, so the first improvement that we can make is actually a bug.

So notice what will happen now if I Backspace on the base amount, so that there's nothing there, so you can see the app actually crashed.

So if we look at logcat, let's take a look at what actually was the error.

So I'm going to scroll up to the very top of the stack trace.

And you can see here we have a number format exception.

This is the important part, there's an empty string.

And and the stack trace tells us exactly where the issue happened is a main activity line 58.

And so the issue that's happening is that when the edit text has an empty value, then it doesn't make sense to try and convert an empty string into a double.

The very first thing we shouldn't be doing here is actually checking if at base amount done dot txt, if that is empty, then we need to do an earlier turn.

Additionally, we should be clearing out the values of the TV tip and total amount.

Because if the edit text is empty, that means there's nothing to tap on.

And we should be showing nothing for those two textures, then we call return, so that none of the rest of the function will get executed.

The second improvement we'll make is about formatting the output of the tip and total amount.

So it's not that noticeable when we enter in 100 for the base amount.

But if we add in 100.9, then you can see the total amount becomes very long and unwieldy.

Because we're dealing with currency, we should really be mandating that there are exactly two decimal points in both a tip and total amount.

And the way we'll do that is right here, instead of just calling to string, we want to format the string before we put it into the TextView.

So the way we do that is by using this format method.

So we define the format like this percent.to F, which means we only want two numbers after after the decimal point dot format.

And we pass in the tip amount.

And then similarly for the total amount, a percent dot two f format.

Let's try it.

For hopefully now, in this scenario, we should actually end up with 116.04 instead of this very long decimal that had happened 100 right away, you can see instead of only having one decimal point now we have two.

And the true test is when I type in 100.9.

Now, the display of this is way better, we have 116.04 rather than that huge decimal which becomes unreadable.

So at this point, we have a very functional app, what we've done is gotten references to the relevant views on layout, and then added listeners to the seekbar into the Edit Text because there's no Submit button.

Anytime there's any change in the seekbar or the edit text, we are dynamically computing the tip and total amount and updating the views appropriately in this compute tip a total amount.

So in the next video, what I want to show you is some style improvements along with a way to personalize it and add a really cool animation.

So I'll see you in the next one.

At this point, we're done with the implementation of our tip calculator.

In this video, our goal is to add some color animation and personalization into the app.

So we'll start off with the footer at the bottom.

A lot of apps or websites have this where it says you know made with love in California or made with love by this person.

So we're gonna start off by adding a text at the bottom of the screen.

So let's go into enter studio, open up the activity main dot XML and scroll down to the bottom and we're going to drag out one TextView here.

Let's give it an ID of TV footer.

And then the text will be made with love by raw and of course you can personalize however you want to constrain it.

We're going to have this horizontally be in the center of the screen.

So we're gonna add a left and right Straight to make it centered, and then we're gonna make it 32 dP from the bottom of the screen.

I also want to add a couple different style tweaks here.

First is all caps, I want to make everything here capitalized.

And I want to change the font to be sans serif, condensed, slight.

And then finally, I want to make this a little bit larger text, appearance, medium weight.

And finally, I want to change the love word with the emoji.

And you can either add this to your keyboard, or another way to do this is if you Google for heart emoji, then the first result that comes up, gives me an option here to copy and paste the emoji.

paste that in.

And it looks a little bit weird in the preview, but it does show up properly when you render it in the design.

And if we check it out in the app.

Awesome, that looks pretty good.

The next thing I like to do is a bit the color scheme.

So we move away from these default status bar color color primary in this background white.

So let me explain where these colors are coming from.

There's one very important file that must exist in every single Android app.

And that's called the Android manifest file.

So if we open that up, then this file describes all the different components of your application, the permissions, for example, if your app needs internet permission, and much more.

And the important line for us is right here on line 11, where we're describing the theme of our application, and this is a file that automatically gets created for us when we create the empty project.

So I'm going to jump to the definition here.

And you'll see you have two different files here, one for normal theme and one for the night theme.

And the one that we're currently looking at is normal, I'm gonna open that up.

And this is where we're getting the colors for the default application that we have.

So in order to update the colors, we're going to have to define new colors and then replace them here, we can take a look at where this file lives by hitting this option, select Open File, and we can see that it lives inside of resources, values, and themes directory.

And the colors are also defined inside of colors XML in the values directory.

And each of the colors is defined as a hexadecimal value, purple, 500, and so on.

So our job is let's figure out what colors we want, and then add them here.

And then we'll reference them inside of the themes XML file.

So in order to figure out what colors you want, there's a couple different options, I'll show you what I typically do if you go to color.adobe.com.

There's this really nice tool where you figure out what kind of color scheme you want.

So there's a couple different options here, you can pick the color harmony rule, analogous monochrome chromatic triad, and so on.

Once you're happy with something, then you can scroll down and grab the hexadecimal values here.

So I did this exercise already.

And here are the colors I came up with, I'm going to have one which is called primary blue, darker blue and background blue.

So let's go ahead into the colors XML and define these for the first one is going to be called primary blue now has this value.

The next one is background blue, or the next one's a darker blue.

And then finally, we have background blue.

So now in themes XML, I updated the color primary to be primary blue.

And then I updated the primary variant to be darker blue, and that's gonna be the color of the status bar.

And then finally, in order to have a background color on the whole app, I'm going to add one more attribute here, which is called background color, Android color background.

And that is going to be the background blue that we have.

Let's try it.

Awesome, that looks great.

So we're getting very close now, to the desired end state, we have the footer, and we have the customized color.

The last thing I want to talk about is this animation on the tip description.

And here's actually what this looks like.

As the user is scrubbing, we will dynamically update the color of that word that's used to describe the current tip percentage, and it'll go from Red if it's a very bad tip to a really bright green if it's really good tip.

Not only that, but we're also going to be changing that word or that adjective used to describe the tip percentage.

So it gives the user some really nice interactive feedback about what kind of tip they're leaving.

Alright, so the first thing we'll do is just added text you need the seek bar and increase the vertical distance between these two texts.

So close out these other editor windows because we don't need to look at them again.

In activity main.

What we'll do is first increase the distance between the 24% which is the 2% label and the TV tip label.

Let's increase the margin here to be 56 Next, let's drag out one more text you.

And we'll call this TV tip description.

And then the text should be empty, because that will depend on the initial tip percent, which is set programmatically.

But to get a better sense of what this might look like, we are going to use a tools namespace and to say acceptable here.

That looks good.

And now we need to position this horizontally and vertically.

So vertically, it's going to be right below the seek bar tip bar, and we'll add a margin here of maybe eight dp.

And then we want these two to be horizontally aligned.

So horizontal centers, great.

And you can see how it added the left and right constraints.

So it'll be right in the middle.

And you can see the error also went away.

So now back in MainActivity, we need to get a reference to that TextView.

So let's say the ID here was TV tip description.

So when I say TV tip description, get a reference to it here.

And every time the C part is changed, that is where we have the potential now, to update the language on that text, you want to have one more method here called update tip description.

And let's have Enter to help us to create this because this method doesn't exist yet.

And one thing we'll do actually is as a parameter into the update tips, description method, I'd like to pass in the progress and progress.

And again, energy video can now help us to add this as a parameter into the function that we have defined.

The tap that red light bulb, and have Enter to help us to add the parameter and all I did here is added a parameter.

And instead of calling it progress, I'm going to call it tip percent.

And it's I've typed in.

So now the idea is that based on the value of tip percent, we'd like to be able to say TV tip description dot txt, and we'd like to be able to set it to be something like good.

And of course, this good will change based on the value.

And the construct in kotlin.

To be able to decide a value of something based on a set of conditionals is called when which is similar to a switch in Java.

So I'm going to save our tip description is equal to when and then depending on the value of 2% will take certain action.

So if tip description, if 10% is between zero and nine, then the string should be poor.

If it's between 10 and 14, we'll call it acceptable 15 and 19, it'll be good.

And when it's between 20 and 24.

It'll be great.

And there should be one extra period in here.

And finally, anything else meaning that the value is above 24 then we will say amazing.

And so now instead of using good here, we will say tip description.

And finally before we test this out one more thing I want to do is at the very beginning, when we are setting up our screen, which is you know in the onCreate method, as soon as we get all the references to each of the views, we also would like to call that method update tip description right here with the initial tip percent just so that language is always going to be in sync with what we start out with.

Let's try it.

So now hopefully we should see a text you right underneath the seekbar and the text on in that text you should change according to what we have selected through the seekbar.

Okay, this looks promising already because initially the 2% is 15, which means we fall into this branch of the wine statement and that means that the value should be good.

That's good.

And then if we bring it down to zero, we get poor and if we go all the way up, we should get amazing which we do.

One quick thing want to do is back in activity main.

I want to set the font weight of this to be bold.

The textile should be bold to make it stand out a little bit more.

Finally, the last thing I want to show is this interactive color animation where if the user picks a very good tip we show bright green and if the user picks a bad dip, then we show a red color indicating something went wrong.

Coming back into Android Studio in minute tivity kotlin update tip description is where we're going to add the logic for updating the color based on the tip percent.

The question is how do we dynamically compute a color based Based on an integer, the way we'll do this is through a concept called interpolation, which is actually a fancy word for something which is conceptually quite simple.

If I tell you I'm running 100 miles, and I'm 75% of the way done, then you would tell me that I'm roughly at the 75 mile mark.

And what you're doing in your head is linear interpolation, you're assuming I'm going at a constant speed starting at zero ending at 100.

Therefore, I'm at 75 miles, the same thing is exactly applying here.

Every color can be represented as integer.

So if I'm tipping 20%, then we're two thirds of the way between the very worst color and the very best color, which are two integers.

And all we need to do is some simple math in order to compute what exactly that color value is, for the tip description.

The first thing we'll do is define the color for the worst invest tip.

So open up colors, XML, and let's add in color words tip color, best tip and I picked a red and green color like we talked about, we're going to paste these values in for color worse and color best.

So we have these defined.

And now our job is simply to do some math at zero, we should show worst tip at 30, we should show the best tip and everything else is some value in between.

and this turns out to be so common that Android actually has something called a RGB evaluator to help with this, where we represent colors as integer values.

A stands for alpha, RGB is red, green, blue, and it will help compute the color for us.

So coming back into main activity, we're going to define a color.

And that will be coming from argb evaluator dot evaluate.

And then this takes in three parameters.

One is the fraction of where are we on this progress bar between zero and 32nd is a start value, which is the very worst color and the end value is the best color.

So the fraction is simply going to be the tip percent, which is the perimeter pass 10 divided by the maximum amount of tip which is 30.

And that's going to be seapark tip dot max.

Next, we need to get the very worst color.

And the way we'll do that is context compat dot get color pass in this which is referring to the context and then the actual color that we just defined in the colors XML, which is color first.

And then finally, we're going to provide the best color here.

One issue you'll notice is that there's a type mismatch, we require a float, but we found integer.

So by default, because both the numerator and denominator are integers, we're gonna do some sort of truncation, which we don't want.

So the way to handle this is to cast one of the numerator or denominator to a float value.

And that will resolve that.

So now we have this color, all we need to do is set the color on the tip description text, set text color, with the color.

And finally before before we try this, we need to cast the result of the evaluate function call to be an integer, because we know the values we're computing between are integers, so the color should be an int.

And now we should be able to compile and run this just fine.

So two things should happen now.

One is we should bold the text.

And second, there should be a color applied immediately.

And based on what present we pick, it should adapt as well.

Right, this looks good.

So initially, we have a color right in between the green and red.

And if I go all the way down to zero, you can see how it changes to red.

And if I scrub upward to the best tip, which is 30, you can see how it slowly transforms from red to green.

I like that a lot just because it feels much more interactive and dynamic now compared to what we had before.

Alright, so let's give it one last try.

We're going to put in $9 here for the bill.

And then as I scrub, you can see how everything updates appropriately.

If I Backspace, there's no crash, I can enter in another amount.

And everything works just as we expect.

Awesome.

So if this is your first ever entered app, that's amazing.

Congratulations.

Let me know in a comment.

The reason I really liked the tip calculator, there's so many ways you can extend this basic project that we have to make it more interesting.

So a couple ideas I had number one, you could split the bill by n people.

So you could imagine that you go out to dinner with the number of people you add in three or four and then you should divide that total amount by three or four in order to make it easy for everyone to pay a certain amount.

Second, you could add a button or some sort of component which allows the user to round the final amount up or down.

So there's no need to deal with change.

And of course, there's a lot more that you could do in terms of design or color updates.

So what I recommend now is complete any number of extensions, other ones that we talked about, or something that you came up with on your own, and then you can more or less publish exactly what you have on the Play Store.

I won't walk through that here, but I'll leave a video in the description where I talk about how to do that and I hope that you use This tip calculator as a starting point in your journey as an Android developer and you build many more apps in the future.

If you enjoyed this, please drop a like and comment.

We'd love to hear from you.

Thanks so much for watching and I will see you in the next one.

Bye