{"id":218,"date":"2017-02-08T04:35:58","date_gmt":"2017-02-08T04:35:58","guid":{"rendered":"http:\/\/abhiandroid.com\/createandroidapp\/?page_id=218"},"modified":"2019-06-14T10:04:13","modified_gmt":"2019-06-14T10:04:13","slug":"create-html-app","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/createandroidapp\/create-html-app","title":{"rendered":"How To Create HTML App Using ListView, WebView And Intent In Android Studio"},"content":{"rendered":"

Do you know you can use HTML in your android app and it’s too easy to use!<\/p>\n

Let’s discuss how to create a android app using HTML. In this HTML App tutorial we are going use of multiple Android UI components to design and step by step developing a Basic application in Android Studio.<\/p>\n

Topics Used For Creating Calculator App \u2013<\/strong> Before following the below steps it is recommended you check out TextView, ImageView, WebView, Intent, ListView and\u00a0Linear Layout topics. Also go through JAVA OOPS<\/a> concept once.<\/p>\n

\n

How To Create HTML App Using ListView, WebView And Intent In Android Studio:<\/strong><\/h4>\n

Below you can download code, see final output and step by step explanation of HTML App in Android Studio.<\/p>\n

Download Code<\/a>
\n\"HTML<\/p>\n

 <\/p>\n

Step 1:<\/span><\/strong> Firstly get the Android Studio downloaded in your system, then open it.<\/p>\n

Step 2:<\/span> <\/strong>Create a new project and name it HtmlApp.<\/p>\n

Step 3:<\/span> <\/strong>Open res -> layout -> activity_main.xml (or) main.xml.<\/span> Here we are going to create the application interface like add layouts, ListView.<\/p>\n

<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/activity_main\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\"com.example.htmlapp.MainActivity\">\r\n\r\n    <ListView\r\n        android:id=\"@+id\/listview\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:layout_alignParentLeft=\"true\"\r\n        android:layout_alignParentStart=\"true\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:dividerHeight=\"7dp\"><\/ListView>\r\n<\/LinearLayout>\r\n<\/pre>\n
 <\/p>\n
Step 4:<\/span> <\/strong>Create a new activity name Listview<\/span>, in this add a textview and imageview and below is the code of activity_listview.xml.<\/span>\u00a0In this xml we design the UI for particular item in listview which involve image and text.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/activity_listview\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\"com.example.htmlapp.Listview\">\r\n\r\n    <ImageView\r\n        android:id=\"@+id\/imageView\"\r\n        android:layout_width=\"72dp\"\r\n        android:layout_height=\"48dp\"\r\n        app:srcCompat=\"@drawable\/pic\" \/>\r\n\r\n    <TextView\r\n        android:id=\"@+id\/textView\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_marginLeft=\"20dp\"\r\n        android:layout_marginRight=\"2dp\"\r\n        android:layout_weight=\"0.84\"\r\n        android:text=\"TextView\"\r\n        android:textSize=\"25sp\"\r\n        android:textStyle=\"bold|italic\" \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
 <\/p>\n
Step 5:<\/strong><\/span> Open src -> package -> MainActivity.java<\/span>. The interface part of the application is over, let\u2019s focus on adding functionality to the application.
\nIn this set a setOnItemClickListener over the listview and further intent<\/a> is used to move to next activities. See the code:<\/p>\n
Important Note:<\/strong> <\/span>Make sure images are stored in drawable folder<\/a> present inside res folder with correct naming.<\/p>\n
package com.example.htmlapp;\r\n\r\nimport android.content.Intent;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.View;\r\nimport android.widget.AdapterView;\r\nimport android.widget.ListView;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    ListView list;\r\n    String data[]={\"About\",\"Quotes \",\"Images\"};\r\n    int pic[]={R.drawable.pic,R.drawable.pic1,R.drawable.pic2};\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        list = (ListView) findViewById(R.id.listview);\r\n        CustomAdapter  customAdapter = new  CustomAdapter (getApplicationContext(),data,pic);\r\n        list.setAdapter(customAdapter);\r\n        list.setOnItemClickListener(new AdapterView.OnItemClickListener() {\r\n            @Override\r\n            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {\r\n               switch (position)\r\n               {\r\n                   case 0:\r\n                       Intent intent00 = new  Intent(getBaseContext(), AboutActivity.class);\r\n                       startActivity(intent00);\r\n                       break;\r\n                   case 1:\r\n                       Intent intent01 = new  Intent(getBaseContext(), QuotesActivity.class);\r\n                       startActivity(intent01);\r\n                       break;\r\n                   case 2:\r\n                       Intent intent10 = new  Intent(getBaseContext(), ImagesActivity.class);\r\n                       startActivity(intent10);\r\n                       break;\r\n               }\r\n            }\r\n        });\r\n    }\r\n}\r\n<\/pre>\n
 <\/p>\n
Step 6:<\/strong><\/span> Create a class CustomAdapter.java<\/span>. Custom Adapter which will extends BaseAdapter. Below is the code of CustomAdapter.java.<\/p>\n
If you are new Adapter please read BaseAdapter.<\/p>\n
package com.example.htmlapp;\r\n\r\nimport android.content.Context;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.widget.BaseAdapter;\r\nimport android.widget.ImageView;\r\nimport android.widget.TextView;\r\n\r\npublic class CustomAdapter extends BaseAdapter {\r\n    Context context;\r\n    String data[];\r\n    int pic[];\r\n    LayoutInflater inflter;\r\n\r\n    public CustomAdapter(Context applicationContext, String[] data, int[] pic) {\r\n        this.data = data;\r\n        this.context = context;\r\n        this.pic = pic;\r\n        inflter = (LayoutInflater.from(applicationContext));\r\n    }\r\n\r\n    @Override\r\n    public int getCount() {\r\n        return data.length;\r\n    }\r\n\r\n    @Override\r\n    public Object getItem(int position) {\r\n        return null;\r\n    }\r\n\r\n    @Override\r\n    public long getItemId(int position) {\r\n        return 0;\r\n    }\r\n\r\n    @Override\r\n    public View getView(int i, View view, ViewGroup viewGroup) {\r\n        view = inflter.inflate(R.layout.activity_listview, null);\r\n        TextView textView = (TextView) view.findViewById(R.id.textView);\r\n        ImageView imageView = (ImageView) view.findViewById(R.id.imageView);\r\n        textView.setText(data[i]);\r\n        imageView.setImageResource(pic[i]);\r\n        return view;\r\n    }\r\n}\r\n<\/pre>\n
 <\/p>\n
Step 7:<\/strong> <\/span>Now add three activities to the app, in current example there are further three activities(AboutActivity, QueryActivity, ImagesActivity) \u00a0linked via onclicked listener to the listview. After adding the activities add webview, textview, imageview etc in xml files. See the code of the activities.<\/p>\n
Code of activity_about.xml :<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/activity_html\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\"com.example.htmlapp.AboutActivity\">\r\n\r\n    <WebView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:layout_alignParentLeft=\"true\"\r\n        android:layout_alignParentStart=\"true\"\r\n        android:id=\"@+id\/webview00\" \/>\r\n<\/RelativeLayout>\r\n<\/pre>\n
Code of activity_quotes.xml :<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/activity_quotes\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\"com.example.htmlapp.QuotesActivity\">\r\n\r\n    <WebView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:id=\"@+id\/webview01\"\/>\r\n<\/RelativeLayout>\r\n<\/pre>\n
Code of activity_images.xml :<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/activity_images\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\"com.example.htmlapp.ImagesActivity\">\r\n\r\n    <ImageView\r\n        android:id=\"@+id\/imageView2\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_alignParentLeft=\"true\"\r\n        android:layout_alignParentStart=\"true\"\r\n        android:layout_marginTop=\"250dp\"\r\n        android:paddingTop=\"2dp\"\r\n        app:srcCompat=\"@drawable\/quote11\" \/>\r\n\r\n    <ImageView\r\n        android:id=\"@+id\/imageView1\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_alignParentEnd=\"true\"\r\n        android:layout_alignParentLeft=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentStart=\"true\"\r\n        android:layout_marginBottom=\"250dp\"\r\n        android:layout_marginTop=\"2dp\"\r\n        android:paddingTop=\"0dp\"\r\n        app:srcCompat=\"@drawable\/quote00\" \/>\r\n\r\n    <TextView\r\n        android:id=\"@+id\/textView1\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_alignParentLeft=\"true\"\r\n        android:layout_alignParentStart=\"true\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:layout_marginLeft=\"34dp\"\r\n        android:layout_marginStart=\"34dp\"\r\n        android:gravity=\"center\"\r\n        android:text=\"IMAGES\"\r\n        android:textColor=\"@android:color\/background_dark\"\r\n        android:textSize=\"25sp\"\r\n        android:textStyle=\"bold\" \/>\r\n\r\n<\/RelativeLayout>\r\n<\/pre>\n
 <\/p>\n
Step 8:<\/strong> <\/span> Open AndroidManifest.xml<\/strong> file and add internet permission to it just after the package name. It is required because the App will load HTML data.<\/p>\n
 <uses-permission android:name=\"android.permission.INTERNET\"><\/uses-permission><\/pre>\n
\"Adding<\/p>\n
 <\/p>\n
Step 9:<\/strong> <\/span>Now we will add functionality to these activities.
\nIn this we will add the code in HTML format and webview is used for that. See the code below:<\/p>\n
Code of AboutActivity.java<\/strong><\/p>\n
package com.example.htmlapp;\r\n\r\nimport android.os.Bundle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.webkit.WebView;\r\n\r\npublic class AboutActivity extends AppCompatActivity {\r\n    WebView webView;\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_about);\r\n        webView = (WebView) findViewById(R.id.webview00);\r\n        String about = \"<html> <body> <h2> Jayalalithaa Jayaram <\/h2> <p> (24 February 1948 \u2013 5 December 2016)\" +\r\n                \" was an Indian actress and politician who served five terms as the Chief Minister of Tamil Nadu,\" +\r\n                \" for over fourteen years between 1991 and 2016.<\/p> <\/body> <\/html>\";\r\n        webView.loadData(about, \"text\/html\", \"UTF-8\");\r\n    }\r\n}\r\n<\/pre>\n
Code of QuoteActivity.java<\/strong><\/p>\n
package com.example.htmlapp;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.webkit.WebView;\r\n\r\npublic class QuotesActivity extends AppCompatActivity {\r\n    WebView webView;\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_quotes);\r\n        webView = (WebView) findViewById(R.id.webview01);\r\n        String about= \"<html> <body> <h2> Jayalalithaa Jayaram Quotes <\/h2> <\/br>\" +\r\n                \" <ul> <li><b> Cops Should Fulfill the Expectations and needs of the Public <\/b><\/li> <\/br> \" +\r\n                \"<li> <b> Challenges set the standard for the rise of talent. <b> <\/li> <\/ul>\"+\r\n                \"<\/body> <\/html>\";\r\n        webView.loadData(about,\"text\/html\",\"UTF-8\");\r\n    }\r\n}\r\n<\/pre>\n
Output:<\/strong><\/h4>\n
Now run the App and you will see the Listview listing items and further click it over to see app functionality. You can customize the App based on your requirement.<\/p>\n","protected":false},"excerpt":{"rendered":"
Do you know you can use HTML in your android app and it’s too easy to use! Let’s discuss how to create a android app using HTML. In this HTML App tutorial we are going use of multiple Android UI components to design and step by step developing a Basic application in Android Studio. Topics … Continue reading How To Create HTML App Using ListView, WebView And Intent In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"footnotes":""},"class_list":["post-218","page","type-page","status-publish","hentry"],"psp_head":"How To Create HTML App Using ListView, WebView And Intent In Android Studio \u2013 Create Android App<\/title>\r\n<meta name=\"description\" content=\"In this step by step tutorial we discuss how to create HTML App in Android Studio using ListView, WebView And Intent.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/createandroidapp\/create-html-app\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/pages\/218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/comments?post=218"}],"version-history":[{"count":3,"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/pages\/218\/revisions"}],"predecessor-version":[{"id":313,"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/pages\/218\/revisions\/313"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/createandroidapp\/wp-json\/wp\/v2\/media?parent=218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}