Menampilkan Instruksi Html Pada Webview Android

Hai sobat, kembali lagi dengan aku di artikel wacana pemrograman android. Pada artikel sebelumnya aku telah menjelaskan beberapa tutorial untuk mengambil dan menampilkan data dari server ke aplikasi android memakai library volley dan database MySQL. Dan kali ini aku akan menjelaskan tutorial atau cara menampilkan isyarat HTML di komponen WebView android.

 kembali lagi dengan aku di artikel wacana pemrograman android Menampilkan Kode HTML pada WebView Android


Di dalam pemrograman android, terdapat sebua komponen yang sangat serbaguna yaitu komponen WebView. Komponen ini dipakai untuk menampilkan halam web dari banyak sekali sumber, sanggup dari link url, file yang dimasukkan ke dalam aplikasi, maupun isyarat yang telah ditulis ke dalam isyarat android. Dan pada artikel kali ini aku akn menjelaskan cara untuk menampilkan isyarat HTML ko widget WebView supaya tampil menyerupai website pada umumnya.

Baca juga "Remote Smartphone Android Mengunakan Komputer"

Kasus dalam menciptakan aplikasi android ialah dikala kita mempunyai data berupa isyarat html, mungkin teman menerima data tersebut dari website menyerupai ckeditor dan alat pembuat isyarat html lainya. Kemudian dikala kita menampilkan pada komponen TextView, dta yang tampil ialah isyarat orisinil dari html. Untuk merubah tampilan sesuai dengan isyarat HTML, kita sanggup memakai komponen WebView, alasannya ialah isyarat HTML cocok sekali ditampilkan di komponen WebView.

Pada tutorial sebelumnya aku juga telah menjelaskan wacana komponen WebView dan menampilkan data atau halaman web lewat alamat URL. Sobt sanggup membacanya di link berikut :

Membuat Aplikasi Penampil Halaman Web di  Android

Oke mari kita praktikkan, berikut langkah pembuatanya :

Buat project baru, beri nama dengan Show HTML, dan atur packge serta lokasi penyimpanan project

 kembali lagi dengan aku di artikel wacana pemrograman android Menampilkan Kode HTML pada WebView Android


Pilih minimum SDK lalu pilih jenis activity yang diinginkan. Di sini aku memakai Empty Activity.

 kembali lagi dengan aku di artikel wacana pemrograman android Menampilkan Kode HTML pada WebView Android


Jika project sudah siap, kini pergi ke folder res > layout dan buka file activity_main.xml. Pada tampilanya, tambahkan satu komponen WebView, kodenya menyerupai berikut :

 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout 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.blogspot.blogsetyaaji.showhtml.MainActivity">      <WebView         android:id="@+id/web"         android:layout_width="match_parent"         android:layout_height="match_parent"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"         app:layout_constraintTop_toTopOf="parent" />  </android.support.constraint.ConstraintLayout>  


Setelah menciptakan tampilan, selanjutnya pergi ke folder java > folder pertama > lalu buka file MainActivity.java. uat kodenya sepeprti berikut

 package com.blogspot.blogsetyaaji.showhtml;  import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebView;  public class MainActivity extends AppCompatActivity {      private WebView web;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);          web = (WebView)findViewById(R.id.web);         String htmlText = "<html><body style=\"text-align:justify\"> %s </body></Html>";         String html = "<h2>Welcome to the HTML editor!</h2>\n" +                 "<p>Just type the HTML and it will be shown below.</p>\n" +                 "\n" +                 "<img src=\"http://www.google.se/images/google_80wht.gif\" alt=\"Google logo\"/>\n" +                 "\n" +                 "<h2>Heading in h2, som more sample text</h2>\n" +                 "<p>Lorem ipsum dolor sit amet, est oratio detraxit id, quaeque perpetua abhorreant cu his, qui choro tacimates ex. Et harum sanctus maluisset vix. Eum malis ullum te. Et deleniti periculis mei, <strong>no eam erant persecuti philosophia</strong>. Nec vivendo officiis in.</p>\n" +                 "\n" +                 "<ul>\n" +                 "\t<li>Nulla facilisi.</li>\n" +                 "\t<li>Pellentesque habitant morbi</li>\n" +                 "\t<li>Quisque vel justo.</li>\n" +                 "\t<li>Nullam posuere purus sed arcu.</li>\n" +                 "</ul>\n";         web.getSettings().getJavaScriptEnabled();         web.loadData(String.format(htmlText, html), "text/html", "utf-8" );     } } 


Karena kita akan menampilkan halaman web, kita memerlukan izin untuk mengakses internet. Tambahkan uses permission pada file AndroidManifest.xml, kodenya menyerupai berikut

 <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"     package="com.blogspot.blogsetyaaji.showhtml">      <uses-permission android:name="android.permission.INTERNET"/>      <application         android:allowBackup="true"         android:icon="@mipmap/ic_launcher"         android:label="@string/app_name"         android:roundIcon="@mipmap/ic_launcher_round"         android:supportsRtl="true"         android:theme="@style/AppTheme">         <activity android:name=".MainActivity">             <intent-filter>                 <action android:name="android.intent.action.MAIN" />                  <category android:name="android.intent.category.LAUNCHER" />             </intent-filter>         </activity>     </application>  </manifest> 


Sekarang jalankan aplikasinya, maka tampilanya akan menyerupai gambar di bawah ini

 kembali lagi dengan aku di artikel wacana pemrograman android Menampilkan Kode HTML pada WebView Android


Kode html yang sudah kita siapkan akan dikonfert oleh komponen WebView menjadi tampilan orisinil sebuah web. Bagaimana sob, gampang sekali kan, silahkan dikembangkan berdasarkan impian sobat.

Sekian artikel tentang Menampilkan Kode HTML pada WebView Android, semoga membantu dan bermanfaat. Silahkan follow dan share ke teman lainya jikalau teman menyukai artikel ini. Jika teman mempunyai pertanyaan, komentar, kritik atau saran, silahkan sanggup diisi di kolom komentar di bawah. Sekian dari saya, hingga jumpa di artikel selanjutnya.. 😁




0 Komentar untuk "Menampilkan Instruksi Html Pada Webview Android"

Back To Top