Cicular floating action menu

এই পর্বে আমরা শিখবো এপে Cicular Floating Action Menu কিভাবে ব্যাবহার করতে হয় । Cicular Floating Action Menu এপে যেভাবে দেখাবে -

এজন্য আমরা একটি সাপোর্ট লাইব্রেরীর সাহায্য নিবো । সাপোর্ট লাইব্রেরী এড করতে এই লিংকে যান -  https://github.com/oguzbilgener/CircularFloatingActionMenu । কিভাবে Cicular Floating Action Menu ইউজ করতে হয় এখানে ধাপে ধাপে বর্ণনা করা আছে ।

Installation এ দেয়া লাইব্রেরী টি build.gradle(app) লেভেলে এড করে নিন । এই মেন্যু দেখাতে activity_main.xml এ কোন ভিউ এড করার দরকার নাই ।

MainActivity.java - ( onCreate ম্যাথডের ভিতরে )

     ImageView icon = new ImageView(this);  
     icon.setImageResource(R.drawable.ic_favorite);  
   
     FloatingActionButton actionButton = new FloatingActionButton.Builder(this)  
         .setContentView(icon)  
         .build();  

ইমেজভিউ এর অব্জেক্ট তৈরি করে তার সাথে আমরা যে আইকন টা দেখাতে চাই সেটি এড করে দিলাম । এরপর FloatingActionButton এর অব্জেক্ট তৈরি করে এর ভিতর ইমেজভিউ এর অব্জেক্ট সেট করে দিলাম । এখানে দুইটি অব্জেক্ট তৈরির সময়ই প্যারামিটারে this মানে Context পাস করা হইছে ।

ব্যাস , FloatingActionButton তৈরি হয়ে গেলো । এবার এই FloatingActionButton এ ক্লিক করলে যে সাবমেন্যু গুলো দেখাবে সেগুলো তৈরি করা যাক -

     SubActionButton.Builder itemBuilder = new SubActionButton.Builder(this);  
      
     ImageView snap = new ImageView(this);  
     snap.setImageResource(R.drawable.snapchat);  
     SubActionButton snapchat = itemBuilder.setContentView(snap).build();  

সাবমেন্যু তৈরি করতে প্রথমে SubActionButton এর অব্জেক্ট তৈরি করতে হবে । এরপর উপরের মতই ইমেজভিউতে আইকন সেট করে সেই ইমেজভিউ এর অব্জেক্ট SubActionButton এর সাথে সেট করে দিতে হবে । এইভাবে যতগুলো মেন্যু দেখাতে চাই সবগুলো সেইমভাবে এড করতে হবে । আমি আরো দুইটি মেন্যু এড করলাম -

     ImageView fb = new ImageView(this);  
     fb.setImageResource(R.drawable.facebook);  
     SubActionButton facebook = itemBuilder.setContentView(fb).build();  
   
     ImageView tr = new ImageView(this);  
     tr.setImageResource(R.drawable.twitter);  
     SubActionButton twitter = itemBuilder.setContentView(tr).build();  

এরপর  FloatingActionButton এর সাথে SubActionButton গুলো এড করতে FloatingActionMenu এর অব্জেক্ট তৈরি করে SubActionButton গুলো এড করে দিবো -

     final FloatingActionMenu actionMenu = new FloatingActionMenu.Builder(this)  
         .addSubActionView(snapchat)  
         .addSubActionView(twitter)  
         .addSubActionView(facebook)  
         .attachTo(actionButton)  
         .build();  

ব্যাস হয়ে গেলো আমাদের মেন্যু তৈরি । এবার কোন মেন্যু তে ক্লিক করলে কি ঘটবে সেটি SubActionButton গুলোর অব্জেক্ট এর সাথে setOnClickListener এড করে সেট করে দিতে হবে । যেমন -

     twitter.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {  
         Toast.makeText(MainActivity.this, "twitter clicked", Toast.LENGTH_SHORT).show();  
         actionMenu.close(true);  
       }  
     });  

এবার প্রোজেক্ট টি রান করুন ।

MainActivity.java র সম্পুর্ন কোড  -

 public class MainActivity extends AppCompatActivity {  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     
     ImageView icon = new ImageView(this);  
     icon.setImageResource(R.drawable.ic_favorite);  
  
     FloatingActionButton actionButton = new FloatingActionButton.Builder(this)  
         .setContentView(icon)  
         .build();  
     SubActionButton.Builder itemBuilder = new SubActionButton.Builder(this);  
    
     ImageView snap = new ImageView(this);  
     snap.setImageResource(R.drawable.snapchat);  
     SubActionButton snapchat = itemBuilder.setContentView(snap).build();  
   
     ImageView fb = new ImageView(this);  
     fb.setImageResource(R.drawable.facebook);  
     SubActionButton facebook = itemBuilder.setContentView(fb).build();  
   
     ImageView tr = new ImageView(this);  
     tr.setImageResource(R.drawable.twitter);  
     SubActionButton twitter = itemBuilder.setContentView(tr).build();  
   
     final FloatingActionMenu actionMenu = new FloatingActionMenu.Builder(this)  
         .addSubActionView(snapchat)  
         .addSubActionView(twitter)  
         .addSubActionView(facebook)  
         .attachTo(actionButton)  
         .build();  
   
     twitter.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {  
         Toast.makeText(MainActivity.this, "twitter clicked", Toast.LENGTH_SHORT).show();  
         actionMenu.close(true);  
       }  
     });  
   
   }  
 }  

ধন্যবাদ 😊😊😊