html content

এই পর্বে আমরা দেখবো HTML - CSS দ্বারা কিভাবে এন্ড্রয়েড এপের ভিতরে কোন ভিউ ডিজাইন করতে পারি ।  এই পর্বে HTML - CSS দ্বারা একটি টেবিল বানানো যাক ।

আমাদের ফাইনাল আউটপুট দেখতে এরকম হবে -

এন্ড্রয়েড এপে সাধারনত দুইটি ভিউ দ্বারা HTML - CSS লেখা হয় । একটি হল WebView এবং অন্যটি TextView । WebView দিয়ে আপনি কমপ্লেক্স কোন ভিউ ডিজাইন করতে পারবেন কিন্তু TextView দিয়ে সেটি করা যাবে নাহ । TextView দিয়ে একদম সোজাসাপ্টা কোন কিছু করা যেমন - হেডলাইন তৈরি করা , বোল্ড  ইটালিক করা , এরকম করতে পারবেন । আরেকটি পার্থক্য হলো TextView তে আপনি CSS দ্বারা ডিজাইন করতে পারবেন নাহ ।

তো চলুন প্রথমে WebView এর পার্ট টা দেখা যাক ।
নতুন একটি প্রোজেক্ট খুললাম । সেখানে activity_main.xml এ WebView নিলাম ।

activiy_main.xml -

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout  
   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=".MainActivity">  
    
   <WebView  
     android:id="@+id/htmlContent"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent">  
   </WebView>  
     
 </LinearLayout>  

এবার MainActivity.java তে -

 public class MainActivity extends AppCompatActivity {  
  
   WebView webView;  
   String htmlText = "";  
   
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
       
     webView = findViewById(R.id.htmlContent);  
     webView.loadDataWithBaseURL(null,htmlText,"text/html","utf-8",null);  
      
   }  
 }  

WebView ভিউয়ের ইন্সট্যান্স তৈরি করে, String ভ্যারিয়েবল নিলাম । এই ভ্যারিয়েবল এর ভিতরেই আমরা আমাদের HTML - CSS কন্টেন্ট গুলো লিখবো । এবং সর্বশেষ loadDataWithBaseURL ম্যাথড দ্বারা আমাদের HTML - CSS দ্বারা তৈরি ভিউটি দেখিয়ে দিবো  😊তাহলেই কাজ শেষ😊

এখন আমরা  HTML - CSS কন্টেন্ট কিভাবে লিখবো ? যদিও আমরা আমাদের এপের ভিতরে ব্যাবহার করা সকল String গুলো String.xml এ লিখে দেই , কিন্তু এখানে সেভাবে লেখাটা একটু ঝামেলার তাই ডায়রেক্ট জাভা ক্লাসের ভিতরেই লিখে দিবো ।

HTML - CSS যেসব সফটওয়ার এ লেখা হয়, যেমন - Notepad++ , Sublime Text । যেকোন একটি ওপেন করুন । আমি Sublime Text ব্যাবহার করি । এবার সেখানে সুন্দর করে  HTML - CSS দ্বারা ডিজাইন করে সেটি কপি করে এখানে পেস্ট করে দিন । যেমন আমার ভিউটির ডিজাইন -

এখানে HTML ট্যাগের সাথেই CSS টা করতে হবে ।

এবার আমাদের MainActivity.java দেখতে যেরকম হবে  । এবার এপটি রান করুন -

 public class MainActivity extends AppCompatActivity {  
 
   WebView webView;  
   String htmlText = "<table border=\"1\" style=\"margin: 30px;padding: 20px;background-color: green;color: white\">\n" +  
       "\t\t<caption style=\"color: red\">MarkSheet</caption>\n" +  
       "\t\t<thead>\n" +  
       "\t\t <th>Name</th>\n" +  
       "\t\t <th>CGPA</th>\n" +  
       "\t\t</thead>\n" +  
       "\t\t<tbody>\n" +  
       "\t\t\t<tr>\n" +  
       "\t\t\t\t<td>Mashiur</td>\n" +  
       "\t\t\t\t<td>3.50</td>\n" +  
       "\t\t\t</tr>\n" +  
       "\t\t\t<tr>\n" +  
       "\t\t\t\t<td>Sajib</td>\n" +  
       "\t\t\t\t<td>3.40</td>\n" +  
       "\t\t\t</tr>\n" +  
       "\t\t</tbody>\n" +  
       "\t</table>";  
   
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
 
     webView = findViewById(R.id.htmlContent);  
     webView.loadDataWithBaseURL(null,htmlText,"text/html","utf-8",null);  
  
   }  
 }  

😊😊😊😊😊😊😊😊😊😊😊😊😊

এবার TextView পার্ট টা দেখা যাক -

activity_main.xml -

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout  
   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=".MainActivity">  
  
   <TextView  
     android:id="@+id/htmlContent"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent">  
   </TextView>  
  
 </LinearLayout>  

TextView ভিউ নিলাম ।

MainActivity.java -

 public class MainActivity extends AppCompatActivity {  
   
   TextView textView;  
   String htmlText = "<H1>Mashiur Rahman Sajib</H1>\n"+  
       "<b>Daffodil International University</b>";  
   
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
  
     textView = findViewById(R.id.htmlContent);  
     textView.setText(Html.fromHtml(htmlText));  
  
   }  
 }  

ব্যাস হয়ে গেলো । এবার এপটি রান করুন । আমরা আগেই জেনে আসছি TextView দ্বারা HTML এর কোন কঠিন ভিউ দেখানো যায় নাহ এবং CSS ও করা যায় নাহ ।

আজকের পর্ব এখানেই শেষ 😊 দেখা হবে আগামী পর্বে 😊