relative layout design

এই পর্বে আমরা দেখবো কিভাবে RelativeLayout এর সাহায্যে আমরা ডিজাইন করতে পারি  । ধরি আমরা নিম্নোক্ত ডিজাইন টি RelativeLayout  এর সাহায্যে করতে চাই ।

এখানে মোট ৬টি বাটন আছে । ৪ টি বাটন স্ক্রিনের উপর-নিচ-ডান-বামের মাঝ বরাবর । এবং আর ২টি স্ক্রিনের একদম মাঝের উপর-নিচে । তো চলুন ডিজাইন শুরু করা যাক -

প্রথমে একদম উপরের বাটনের ডিজাইন করা যাক -

   <Button  
     android:id="@+id/btn_top_center"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerHorizontal="true"/>  

RelativeLayout এ প্রতিটি বাটনের আইডি দেয়া উচিত । তাই আইডি দিলাম । এরপর আমরা আগের পর্বেই জেনে আসছি RelativeLayout এ কোন ভিউকে সরলরেখায় মাঝ বরাবর নিয়ে আসতে centerHorizontal ব্যাবহার করা হয় । এখানে ভ্যালু হিসেবে true কিংবা false ব্যাবহার করা হয় । true মানে ওখানেই বসবে আর false মানে ওখানে বসবে নাহ ।

এরপর আমরা একদম নিচের বাটন টি নিয়ে কাজ করবো -

   <Button  
     android:id="@+id/btn_bottom_center"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentBottom="true"  
     android:layout_centerHorizontal="true"/>  

এখানে alignParentBottom দ্বারা ভিউকে রুট লেআউট এর একদম নিচে নামালাম । এরপর  centerHorizontal ব্যাবহার করে সরলরেখায় মাঝ বরাবর নিয়ে আসলাম ।


এখন বামের বাটন টি নিয়ে কাজ করা যাক -

   <Button  
     android:id="@+id/btn_left_center"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerVertical="true"/>  

যেহেতু ভিউগুলো কোন আইডির সাথে লিংক করিয়ে ডানে -নিচে নাহ সড়ালে বাম দিকে দিয়েই শুরু হয় তাই আমরা আর  alignParentLeft ব্যাবহার করার প্রয়োজন পড়ে নাই । লম্ব বরাবর মাঝে নিয়ে আসতে centerVertical ব্যাবহার করলাম ।

এবার ডান বাটন নিয়ে কাজ করা যাক -

   <Button  
     android:id="@+id/btn_right_center"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentRight="true"  
     android:layout_centerVertical="true"/>  

ভিউটি ডানে সরাতে alignParentRight ব্যাবহার করলাম । এরপর লম্ব বরাবর মাঝে নিয়ে আসতে centerVertical ব্যাবহার করলাম ।

এবার একদম মাঝে একটি বাটন নিবো, যাতে বাকি যে দুইটি বাটন বসাবো তা ঠিক জায়গায় বসানোর জন্য সুবিধা হয় ।

   <Button  
     android:id="@+id/center"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerInParent="true"  
     android:visibility="invisible"/>  

centerInParent দ্বারা একদম মাঝে বাটনটি নিয়ে সেটি ইনভিজিবল করে দিলাম যাতে দেখা নাহ যায় ।

এবার মাঝের উপরের বাটন-টি নিবো -

   <Button  
     android:id="@+id/center_top"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerInParent="true"  
     android:layout_above="@id/center"/>  

centerInParent দ্বারা একদম মাঝে নিয়ে , মাঝ বাটনটির উপড়ে তুলে দিলাম layout_above এর মাধ্যমে ।

এবার মাঝের নিচের বাটন টি নিবো -

   <Button  
     android:id="@+id/center_bottom"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerInParent="true"  
     android:layout_below="@id/center"/>  

centerInParent দ্বারা একদম মাঝে নিয়ে  layout_below এর মাধ্যমে , মাঝের বাটনের নিচে বাটন-টি বসালাম ।

হয়ে গেল আমাদের ডিজাইন 😊এবার আপনার অ্যাপটি রান করে দেখুন 😊😊

আমাদের ফুল কোড -

 <?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout 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"  
   android:orientation="vertical"  
   tools:context="com.example.user.timepicker.MainActivity">  
   <Button  
     android:id="@+id/btn_top_center"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerHorizontal="true"/>  
   <Button  
     android:id="@+id/btn_bottom_center"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentBottom="true"  
     android:layout_centerHorizontal="true"/>  
   <Button  
     android:id="@+id/btn_left_center"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerVertical="true"/>  
   <Button  
     android:id="@+id/btn_right_center"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentRight="true"  
     android:layout_centerVertical="true"/>  
   <Button  
     android:id="@+id/center"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerInParent="true"  
     android:visibility="invisible"/>  
   <Button  
     android:id="@+id/center_top"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerInParent="true"  
     android:layout_above="@id/center"/>  
   <Button  
     android:id="@+id/center_bottom"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerInParent="true"  
     android:layout_below="@id/center"/>  
 </RelativeLayout>  

😊😊😊😊😊😊