পোস্টটি পড়া হয়েছে 1,045 বার
collapsingtoolbar custom toolbar android tutorial

Android App এ দৃষ্টিনন্দন ডিজাইনের জন্য CollapsingToolbarLayout

CollapsingToolbarLayout Android Tutorial
CollapsingToolbarLayout Android Tutorial

অল্প কয়েক লাইনের কিছু কোড লিখেই আপনার অ্যান্ড্রয়েড অ্যাপে এরকম সুন্দর একটা এনিমেটেড ইফেক্ট নিয়ে আসতে পারবেন। আমরা সাধারণত Activity-তে ImageView, TextView ইত্যাদি রেখে সেগুলোকে Scroll করতে চাইলে ScrollVew ইউজ করি। নিচের GIF’র উদাহরণটা ScrollView থেকে একটু ভিন্ন। এখানে নিচের দিকের কনটেন্ট দেখার জন্য স্ক্রল করা হলে উপরের image-টা collapse হয়ে যাচ্ছে। আবার উপরের কনটেন্ট দেখার জন্য স্ক্রল করলে উপরে থাকা Toolbar-টা সেই আগের ইমেজে রূপান্তরিত হচ্ছে।

এই ফিচারটা ইমপ্লিমেন্ট করার জন্য XML এবং Java code উভয়ের combination লাগবে। নিচে পুরো প্রকৃয়াটি ধারাবাহিক ভাবে তুলে ধরা হলো।

Gradle file modification

প্রথমেই gradle এর dependency সেকশনটাতে support design এর লাইব্রেরিটা যুক্ত করে নিন। আপনি যখন এটা ইমপ্লিমেন্ট করবেন তখনকার latest version-টা ইউজ করুন। আমি যখন এই পোস্ট লিখছি এই সময়ের সর্বশেষ ভার্সন 26.0.0-alpha1. ডিপেন্ডেন্সির জন্য লিখতে হবে এই লাইনটাঃ

compile ‘com.android.support:design:26.0.0-alpha1’

XML file modification

আমরা LinearLayout, RelativeLayout সাধারণত ব্যবহার করে থাকি। CollapsingToolbarLayout এই widget-টা ব্যবহার করতে হয় AppBarLayout নামের widget এর ভিতরে। আর AppBarLayout ইউজ করার জন্য প্রয়েজন হয় CoordinatorLayout. তাই MainActivity’র xml এর root layout হিসাবে CoordinatorLayout ব্যবহার করতে হবে। GIF ইমেজ থেকে দেখতে পাচ্ছেন যে Activity এর back button press করলে একটা SnackBar দেখানো হচ্ছে। এটা দেখানোর জন্যেও CoordinatorLayout ব্যবহার করতে হয়।

Root layout এর ভিতরে পরপর দুইটা widget থাকবে। সেগুলো হচ্ছে AppBarLayout ও NestedScrollView. প্রথমটির মাধ্যমে toolbar দেখানো হবে, আর দ্বিতীয়টি দিয়ে দেখানো হবে বাকি সব কনটেন্ট। এই প্রোজেক্টের ক্ষেত্রে আমি এই স্ক্রলভিউয়ের মধ্যে শুধু একটা TextView দেখিয়েছি। আপনার প্রোজেক্ট অনুসারে এটা ভিন্ন হতে পারে।

AppBarLayout এর ভিতরে থাকবে CollapsingToolbarLayout. তার ভিতরে থাকবে একটা ImageView ও Toolbar. মূল গুরুত্বপূর্ণ অংশ আসলে এটিই। Activity যখন open হবে তখন AppBarLayout expanded অবস্থায় থাকবে। সে অবস্থাতেও উপরের বামপাশের কোণায় Back Button দেখানো হচ্ছে। এখানে back button টা দেখানো হচ্ছে Toolbar এ। কিন্তু চালাকি করে toolbar এর ব্যাকগ্রাউন্ড কালার transparent করে দেয়া হয়েছে। কিন্তু AppBarLayout যখন collapsed হবে তখন toolbar এ lemon-green টাইপের ব্যাকগ্রাউন্ড দেখা যাচ্ছে। এটা পরবর্তীতে Java code এর মাধ্যমে handle করা হয়েছে। নিচে পুরো xml-টা তুলে দেয়া হলোঃ

প্রতিটা widget এর property-গুলো নিয়ে ঘাটাঘাটি করতে পারেন। এতে হয়ত আরো ভালো ডিজাইন করা সম্ভব হবে।

Custom design এর toolbar এর জন্য নিচের custom_toolbar.xml ফাইলটা drawable এ রেখেছিঃ

Java class modification

Toolbar show করা বা না করার জন্য আমরা লজিক চিন্তা করেছি। লজিক হচ্ছেঃ যখন AppBarLayout-টা expanded অবস্থায় থাকবে তখন toolbar এর background color হবে transparent (এটাকে বলছি toolbar show না করা)। আর যখন AppBarLayout collapsed অবস্থায় থাকবে তখন আমাদের কাস্টম ডিজাইনের টুলবারটা শো করবে। এই কাজটা করার জন্য আমাদের জানতে হবে কখন AppBarLayout expanded হচ্ছে আর কখনই বা collapsed হচ্ছে। এই event-গুলো listen করার জন্য AppBarStateChangeListener নামের একটা abstract class লিখে রেখেছি। এটা সরাসরি কপি-পেস্ট করলে যে কোনো প্রোজেক্টেই কাজ করবে।

এখন MainActivity-তে event listen করে logic implement করবঃ

আসল কাজ শেষ। সর্বশেষ কাজ বাকি আছে। তা হলো back button এর click event listener. ব্যাক বাটনে ক্লিক করলে স্ক্রিনের নিচে একটা Snackbar দেখাচ্ছে। click event সহ Snackbar show করার করার কোডঃ

পুরো সোর্স কোডটি পাওয়া যাবে আমার গিটহাব রিপোজিটরিতে

Leave a Reply

Your email address will not be published. Required fields are marked *