Fri. Nov 16th, 2018

এন্ড্রয়েড এপস ডেভেলপমেন্ট পর্ব ০২ঃ RadioButton , Spinner এবং RatingBar নিয়ে কাজ

এন্ড্রয়েড এপস তৈরি করার সময় আমাদের অনেক ধরনের Widget নিয়ে কাজ করতে হয় । বিভিন্ন ধরনের Widget এর সমন্বয়ে একেকটা এন্ড্রয়েড এপস তৈরি করা হয় যেমন TextView , Button , ListView কিংবা ImageView । আজকের পর্বে আমরা দেখবো RadioButton , Spinner এবং RatingBar এই কম্পোনেন্ট গুলো নিয়ে কিভাবে কাজ করতে হয় ।

RadioButton নিয়ে কাজ

এন্ড্রয়েডে RadioButton সাধারণত RadioGroup এর মাধ্যমে একই Group এর ভেতরে কাজ করে । RadioGroup এর ভেতরে যেকোনো একটি RadioButton চেক করলে বাকিগুলো অটোম্যাটিক আনচেক হয়ে যায় । অর্থাৎ একবারে শুধুমাত্র একটি RadioButton checked থাকতে পারবে । RadioButton বিভিন্ন ক্ষেত্রে ব্যবহার করা হয় যেমন Multiple choice এপ, Quiz এপ ইত্যাদি । RadioButton এর দুইটা স্টেট থাকে checked/unchecked । একবারে শুধুমাত্র check বা uncheck করা যায় , অনেকটা HTML এর ইনপুট টাইপ radio এর মতো কাজ করে ।

RadioGroup এবং RadioButton এর XML কোডঃ

<RadioGroup
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/java"
            android:text="Java Programming"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/python"
            android:text="Python Programming"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/kotlin"
            android:text="Kotlin Programming"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RadioGroup>

RadioGroup ও RadioButton এর জাভা কোডঃ

RadioButton java=(RadioButton)findViewById(R.id.java);
        RadioButton python=(RadioButton)findViewById(R.id.python);
        RadioButton kotlin=(RadioButton)findViewById(R.id.kotlin);
        java.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Java Programming !", Toast.LENGTH_LONG).show();
            }
        });
        python.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Python Programming !", Toast.LENGTH_LONG).show();
            }
        });
        kotlin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Kotlin Programming !", Toast.LENGTH_LONG).show();
            }
        });

RadioButton এর Attribute গুলো দেখে নেয়া যাক

১ ) ID : ID হচ্ছে RadioButton এর ইউনিক  Identifier । উপরের কোডে তিনটি ইউনিক ID আছে java,python এবং kotlin । আগের টিউটোরিয়ালে আমরা দেখেছি যেকোনো Widget কে এক্সেস করতে হলে findViewByID ( ) মেথড ইউজ করতে হয় ।

২ ) Checked : checked Attribute কোন RadioButton এর checked / unchecked স্টেট নির্ধারণ করে । বাই ডিফল্ট unchecked থাকে ।

এছাড়াও আরও অনেক Attribute রয়েছে যেমন text সেট করার জন্য text , text সাইজের জন্য textSize , background কালারের জন্য backgroundColor ইত্যাদি । RadioButton থেকে ক্লিক নেয়ার জন্য setOnClickListener( ) মেথড ইউজ করা হয় ।

উপরের কোডগুলো একত্রেঃ

XML লেআউট

<?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"
    tools:context="com.example.asifkhan.basic.MainActivity">

   <RadioGroup
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/java"
            android:text="Java Programming"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/python"
            android:text="Python Programming"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/kotlin"
            android:text="Kotlin Programming"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RadioGroup>

</RelativeLayout>

জাভা কোড

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.RadioButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RadioButton java=(RadioButton)findViewById(R.id.java);
        RadioButton python=(RadioButton)findViewById(R.id.python);
        RadioButton kotlin=(RadioButton)findViewById(R.id.kotlin);
        java.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Java Programming !", Toast.LENGTH_LONG).show();
            }
        });
        python.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Python Programming !", Toast.LENGTH_LONG).show();
            }
        });
        kotlin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Kotlin Programming !", Toast.LENGTH_LONG).show();
            }
        });
    }
}

উপরের কোডের আউটপুটঃ

উপরের কোডের আউটপুটে আমরা দেখতে পাচ্ছি যে প্রথম Java Programming radio button ক্লিক করায় আউটপুট মেসেজে “Java Programming” দেখাচ্ছে এবং সেই সাথে বাকি RadioButton গুলো unchecked অবস্থায় আছে ।এভাবে বাকিগুলোতে ক্লিক করলে ঠিক একইভাবে কাজ করবে ।

Spinner নিয়ে কাজ

HTML নিয়ে আমরা যারা কাজ করেছি তারা সবাই select অপশন সম্পর্কে জানি ।  এন্ড্রয়েডে  Spinner ও ঠিক সেইরকম সিলেক্ট অপশনের মতো কাজ করে । Spinner এ ডাটা লোড করানোর জন্য সাধারণত setAdapter( ) মেথড ব্যবহার করা হয় । আর Spinner থেকে selected ডাটা নেয়ার জন্য ক্লিক ইভেন্টে setOnItemSelectedListener( ) মেথড ইউজ করা হয় ।

Spinner এর XML কোডঃ

<Spinner
        android:id="@+id/choose_lang"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_width="300dp"
        android:layout_height="60dp"/>

Spinner এর জাভা কোড ঃ

Spinner choose=(Spinner)findViewById(R.id.choose_lang);
        choose.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_spinner_dropdown_item,langs));
        choose.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(MainActivity.this, langs[i], Toast.LENGTH_LONG).show();
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });

Spinner এর Attribute গুলো দেখে নেয়া যাক

১ ) ID : অন্যান্য Widget এর মতো Spinner এর একটি ইউনিক ID থাকে যার মাধ্যমে Spinner কে নির্দিষ্ট করা যায় । উপরের কোডে ID হচ্ছে  choose_lang এবং  Spinner এর ID কে এক্সেস করতে হয় findViewByID(R.id.id_name) মেথডের মাধ্যমে ।

২ ) layout_centerVertical:  Spinner এর vertical Alignment এর জন্য layout_centerVertical Attribute ব্যাবহার করা হয় । উপরের কোডে layout_centerVertical সেট করা হয়েছে  true অর্থাৎ vertically centered ।

৩ ) layout_centerHorizontal:  Spinner এর horizontal Alignment এর জন্য layout_centerHorizontal Attribute ব্যাবহার করা হয় । উপরের কোডে layout_centerHorizontal সেট করা হয়েছে  true অর্থাৎ horizontally centered ।

উপরের কোডগুলো একত্রেঃ

XML লেআউট

<?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"
    tools:context="com.example.asifkhan.basic.MainActivity">

    <Spinner
        android:id="@+id/choose_lang"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_width="300dp"
        android:layout_height="60dp"/>

</RelativeLayout>

জাভা কোড

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    String[] langs={"Java","Kotlin","PHP","JavaScript","Golang"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Spinner choose=(Spinner)findViewById(R.id.choose_lang);
        choose.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_spinner_dropdown_item,langs));
        choose.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(MainActivity.this, langs[i], Toast.LENGTH_LONG).show();
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });
    }
}

উপরের কোডের আউটপুটঃ

 

 

 

 

 

 

 

 

 

 

 

উপরের আউটপুট থেকে দেখা যাচ্ছে যে Spinner থেকে ডাটা সিলেক্ট ( বামে )  করলে Toast মেসেজে আউটপুট ( ডানে ) দেখাচ্ছে ।

RatingBar নিয়ে কাজ

এন্ড্রয়েডে  RatingBar সাধারনণত Rating দেয়ার জন্য ইউজ করা হয় । RatingBar  এ ডিফল্ট Rating ও দেয়া যায় । আর RatingBar থেকে ডাটা নেয়ার জন্য ক্লিক / টাচ ইভেন্টে setOnRatingBarChangeListener( ) মেথড ইউজ করা হয় । জাভা কিংবা XML এর মাধ্যমে RatingBar Instance তৈরি করা যায় ।

RatingBar এর XML কোডঃ

<RatingBar
        android:id="@+id/rating"
        android:rating="3"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

RatingBar এর জাভা কোড ঃ

RatingBar rating=(RatingBar)findViewById(R.id.rating);
        rating.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float v, boolean b) {
                Toast.makeText(MainActivity.this, "Rating : " + v, Toast.LENGTH_LONG).show();
            }
        });

RatingBar এর Attribute গুলো দেখে নেয়া যাক

১ ) id : RatingBar এর ইউনিক Identifier হিসেবে কাজ করে । উপরের কোডে rating হচ্ছে ইউনিক id ।

২ ) rating :  RatingBar এর ডিফল্ট rating ভেলু ঠিক করার জন্য ব্যবহার করা হয় । উপরের কোডে ডিফল্ট rating 3 সেট করা আছে । আরো বিভিন্ন ধরনের Attribute রয়েছে যেমন gravity , style , layout_centerVertical ইত্যাদি ।

উপরের কোডগুলো একত্রেঃ

XML লেআউট

<?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"
    tools:context="com.example.asifkhan.basic.MainActivity">

    <RatingBar
        android:id="@+id/rating"
        android:rating="3"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

জাভা কোড

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RatingBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RatingBar rating=(RatingBar)findViewById(R.id.rating);
        rating.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float v, boolean b) {
                Toast.makeText(MainActivity.this, "Rating : " + v, Toast.LENGTH_LONG).show();
            }
        });
    }
}

উপরের কোডের আউটপুটঃ

 

উপরের আউটপুটে দেখা যাচ্ছে RatingBar এ ক্লিক / টাচ করায় Toast মেসেজে আউটপুট দেখাচ্ছে ” Rating : 3.5 ” ।

আজকের পর্ব এই পর্যন্তই । ভালো থাকবেন । ভালো লাগলে শেয়ার করবেন । আমার তৈরি করা Android এপটি ডাউনলোড  করুন 

 

 

Comments

comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: