Android Studio Create A Simple About Me Page Using html and css
Download Follow @shajahanubaid Star Watch
1) Open Your Android studio Project
2) Create A Asset Folder
In left slide bar
Right click On res folder and select New > Folder > Asset folder
3) Right click on asset select new > file
4) Create a new activity
Right click on app folder then new > Activity > Empty Activity
This name it as about Activity
5) Open Activity_about.xml
Add this code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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=".AboutmeActivity"> | |
| <WebView | |
| android:id="@+id/simpleWebView" | |
| android:layout_width="331dp" | |
| android:layout_height="543dp" | |
| android:layout_marginBottom="20dp" | |
| android:layout_marginEnd="20dp" | |
| android:layout_marginLeft="20dp" | |
| android:layout_marginRight="20dp" | |
| android:layout_marginStart="20dp" | |
| android:layout_marginTop="20dp" /> | |
| </RelativeLayout> |
6) Open your MainActivity java class
Add This code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public class MainActivity extends AppCompatActivity { | |
| @Override | |
| protected void onCreate(Bundle savedInstanceState) { | |
| super.onCreate(savedInstanceState); | |
| setContentView(R.layout.activity_main); | |
| } | |
| public void AboutmeActivity(View view) { | |
| Intent intent=new Intent(MainActivity.this,AboutmeActivity.class); | |
| startActivity(intent); | |
| } | |
| } |
7) Open your About me Activity java class
Add this code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package com.mallutips.shajahan.aboutme; | |
| import android.support.v7.app.AppCompatActivity; | |
| import android.os.Bundle; | |
| import android.webkit.WebView; | |
| public class AboutmeActivity extends AppCompatActivity { | |
| WebView webView; | |
| public String fileName = "sample.html"; | |
| @Override | |
| protected void onCreate(Bundle savedInstanceState) { | |
| super.onCreate(savedInstanceState); | |
| setContentView(R.layout.activity_aboutme); | |
| // init webView | |
| webView = (WebView) findViewById(R.id.simpleWebView); | |
| // displaying content in WebView from html file that stored in assets folder | |
| webView.getSettings().setJavaScriptEnabled(true); | |
| webView.loadUrl("file:///android_asset/" + fileName); | |
| } | |
| } |
8) open assets folder
open sample.html file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <title>W3.CSS Template</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> | |
| <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue-grey.css"> | |
| <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <style> | |
| html,body,h1,h2,h3,h4,h5 {font-family: "Open Sans", sans-serif} | |
| </style> | |
| <body class="w3-theme-l5"> | |
| <!-- Page Container --> | |
| <div class="w3-container w3-content" style="max-width:1400px;margin-top:80px"> | |
| <!-- The Grid --> | |
| <div class="w3-row"> | |
| <!-- Left Column --> | |
| <div class="w3-col m3"> | |
| <!-- Profile --> | |
| <div class="w3-card w3-round w3-white"> | |
| <div class="w3-container"> | |
| <h4 class="w3-center">Shajahan Ubaid</h4> | |
| <p class="w3-center"><img src="https://scontent.fcok1-1.fna.fbcdn.net/v/t1.0-9/43183284_1316282525178082_6441055178413047808_n.jpg?_nc_cat=108&_nc_ht=scontent.fcok1-1.fna&oh=0c3ff2406925fe760c48bab06abb795f&oe=5C7BAEFE" class="w3-circle" style="height:106px;width:106px" alt="Avatar"></p> | |
| <hr> | |
| <p><i class="fa fa-pencil fa-fw w3-margin-right w3-text-theme"></i> Designer, UI</p> | |
| <p><i class="fa fa-home fa-fw w3-margin-right w3-text-theme"></i> India, Kerala</p> | |
| <p><i class="fa fa-birthday-cake fa-fw w3-margin-right w3-text-theme"></i> November 29, 1988</p> | |
| </div> | |
| </div> | |
| <br> | |
| <!-- Accordion --> | |
| <div class="w3-card w3-round"> | |
| <div class="w3-white"> | |
| <button onclick="myFunction('Demo1')" class="w3-button w3-block w3-theme-l1 w3-left-align"><i class="fa fa-circle-o-notch fa-fw w3-margin-right"></i> My Forum</button> | |
| <div id="Demo1" class="w3-hide w3-container"> | |
| <a href="http://nimbuzzmasters.forumotion.com/">NIMBUZZ MASTERS</a> | |
| </div> | |
| <button onclick="myFunction('Demo2')" class="w3-button w3-block w3-theme-l1 w3-left-align"><i class="fa fa-calendar-check-o fa-fw w3-margin-right"></i> My blog</button> | |
| <div id="Demo2" class="w3-hide w3-container"> | |
| <p><a href="https://tipze.blogspot.com/">MALLU TIPS</a></p> | |
| </div> | |
| <button onclick="myFunction('Demo3')" class="w3-button w3-block w3-theme-l1 w3-left-align"><i class="fa fa-users fa-fw w3-margin-right"></i> My team </button> | |
| <div id="Demo3" class="w3-hide w3-container"> | |
| <div class="w3-row-padding"> | |
| <br> | |
| <div class="w3-half"> | |
| <p>aysha</p> | |
| </div> | |
| <div class="w3-half"> | |
| <p>Top-coder</p> | |
| </div> | |
| <div class="w3-half"> | |
| <p>Ashiyana</p> | |
| </div> | |
| <div class="w3-half"><p>The jocker</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| </div> | |
| <br> | |
| <!-- Alert Box --> | |
| <!-- End Left Column --> | |
| </div> | |
| </div> | |
| <!-- End Grid --> | |
| </div> | |
| <!-- End Page Container --> | |
| </div> | |
| <br> | |
| <!-- Footer --> | |
| <footer class="w3-container w3-theme-d3 w3-padding-16"> | |
| <h5>Nimbuzzmasters Team</h5> | |
| </footer> | |
| <footer class="w3-container w3-theme-d5"> | |
| <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p> | |
| <p>created by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">Aysha</a></p> | |
| </footer> | |
| <script> | |
| // Accordion | |
| function myFunction(id) { | |
| var x = document.getElementById(id); | |
| if (x.className.indexOf("w3-show") == -1) { | |
| x.className += " w3-show"; | |
| x.previousElementSibling.className += " w3-theme-d1"; | |
| } else { | |
| x.className = x.className.replace("w3-show", ""); | |
| x.previousElementSibling.className = | |
| x.previousElementSibling.className.replace(" w3-theme-d1", ""); | |
| } | |
| } | |
| // Used to toggle the menu on smaller screens when clicking on the menu button | |
| function openNav() { | |
| var x = document.getElementById("navDemo"); | |
| if (x.className.indexOf("w3-show") == -1) { | |
| x.className += " w3-show"; | |
| } else { | |
| x.className = x.className.replace(" w3-show", ""); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Comments
Post a Comment