Android WebView with Sliding Menu tutorial
Hello, friendz I have already discuss a simple idea of How to create mobile apps of a website already. In this post I am going to make WebView with Sliding Menu in Android . WebView with Sliding Menu is more professional way to make a mobile apps of a website . Android WebView is a view that displays any website to your android application. You can also find many android navigation drawer view libraries in the internet . This Application Can be improved and also customize as per your requirement.
Read More
How to Create Mobile Application of a Website
Android Registration and Login with PHP MySQL
Prerequisites:
- JDK 7.0 or Above
- Android Studio 2.0
Steps to Follow:
Step 1: Create a New Android Studio project name MyWeb.
Step 2: Select minimum API level 16 so that it can support maximum of Android Device available in the google play.
Step 3: Select NavigationDrawer Activity and Give your layout xml name is activity_main and click finish.
Step 4: Within content_main.xml write the following code.
<?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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.prosen.myweb.MainActivity"
tools:showIn="@layout/app_bar_main">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView1"
/>
</RelativeLayout>
<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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.prosen.myweb.MainActivity"
tools:showIn="@layout/app_bar_main">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView1"
/>
</RelativeLayout>
Step 5: configure your manifest.xml like below.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.prosen.myweb">
<uses-permission android:name="android.permission.INTERNET"/>
android:hardwareAccelerated ="true"
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.prosen.myweb">
<uses-permission android:name="android.permission.INTERNET"/>
android:hardwareAccelerated ="true"
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Step 6: Inside MainActivity.java write the following code.
public class MainActivity extends AppCompatActivityimplements NavigationView.OnNavigationItemSelectedListener {
private WebView wv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
wv = (WebView) findViewById(R.id.webView1);
WebSettings settings = wv.getSettings();
settings.setJavaScriptEnabled(true);
wv.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
wv.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
wv.getSettings().setAppCacheEnabled(true);
wv.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
settings.setDomStorageEnabled(true);
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
settings.setUseWideViewPort(true);
settings.setSavePassword(true);
settings.setSaveFormData(true);
wv.loadUrl("http://www.uandblog.com");
wv.setWebViewClient(new MywebViewClient());
}
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.nav_android) {
// Handle the camera action
wv.loadUrl("http://www.uandblog.com/mWPage.uandblog?m=MQ==&s=MQ==");
} else if (id == R.id.nav_html) {
wv.loadUrl("http://www.uandblog.com/mWPage.uandblog?m=MQ==&s=NQ==");
} else if (id == R.id.nav_php) {
wv.loadUrl("http://www.uandblog.com/mWPage.uandblog?m=MQ==&s=Nw==");
} else if (id == R.id.nav_phone) {
wv.loadUrl("http://www.uandblog.com/mWPage.uandblog?m=NA==&s=MTI=");
} else if (id == R.id.nav_health) {
wv.loadUrl("http://www.uandblog.com/mWPage.uandblog?m=NQ==&s=OA==");
} else if (id == R.id.nav_money) {
wv.loadUrl("http://www.uandblog.com/mWPage.uandblog?m=Mg==&s=MTE=");
}else if (id == R.id.nav_login) {
wv.loadUrl("http://www.uandblog.com/login.uandblog");
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
private class MywebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (Uri.parse(url).getHost().equals("www.uandblog.com")){
return false;
}
else {
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
return true;
}
}
ProgressDialog pd = null;
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
pd = new ProgressDialog(MainActivity.this);
pd.setTitle("please wait...");
pd.setMessage("Website is loading..");
pd.show();
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, String url) {
pd.dismiss();
super.onPageFinished(view, url);
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(event.getAction()== KeyEvent.ACTION_DOWN){
switch(keyCode){
case KeyEvent.KEYCODE_BACK:
if(wv.canGoBack()){
wv.goBack();
}
else{
finish();
}
return true;
}
}
return super.onKeyDown(keyCode, event);
}
}
private WebView wv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
wv = (WebView) findViewById(R.id.webView1);
WebSettings settings = wv.getSettings();
settings.setJavaScriptEnabled(true);
wv.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
wv.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
wv.getSettings().setAppCacheEnabled(true);
wv.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
settings.setDomStorageEnabled(true);
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
settings.setUseWideViewPort(true);
settings.setSavePassword(true);
settings.setSaveFormData(true);
wv.loadUrl("http://www.uandblog.com");
wv.setWebViewClient(new MywebViewClient());
}
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.nav_android) {
// Handle the camera action
wv.loadUrl("http://www.uandblog.com/mWPage.uandblog?m=MQ==&s=MQ==");
} else if (id == R.id.nav_html) {
wv.loadUrl("http://www.uandblog.com/mWPage.uandblog?m=MQ==&s=NQ==");
} else if (id == R.id.nav_php) {
wv.loadUrl("http://www.uandblog.com/mWPage.uandblog?m=MQ==&s=Nw==");
} else if (id == R.id.nav_phone) {
wv.loadUrl("http://www.uandblog.com/mWPage.uandblog?m=NA==&s=MTI=");
} else if (id == R.id.nav_health) {
wv.loadUrl("http://www.uandblog.com/mWPage.uandblog?m=NQ==&s=OA==");
} else if (id == R.id.nav_money) {
wv.loadUrl("http://www.uandblog.com/mWPage.uandblog?m=Mg==&s=MTE=");
}else if (id == R.id.nav_login) {
wv.loadUrl("http://www.uandblog.com/login.uandblog");
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
private class MywebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (Uri.parse(url).getHost().equals("www.uandblog.com")){
return false;
}
else {
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
return true;
}
}
ProgressDialog pd = null;
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
pd = new ProgressDialog(MainActivity.this);
pd.setTitle("please wait...");
pd.setMessage("Website is loading..");
pd.show();
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, String url) {
pd.dismiss();
super.onPageFinished(view, url);
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(event.getAction()== KeyEvent.ACTION_DOWN){
switch(keyCode){
case KeyEvent.KEYCODE_BACK:
if(wv.canGoBack()){
wv.goBack();
}
else{
finish();
}
return true;
}
}
return super.onKeyDown(keyCode, event);
}
}
step 7: now from layout -> nav_header_main.xml write the following code. To change logo or the icon from res ->new -> Image Assets -> browse your logo Image ->Ok .Then set a name for the Image -> next -> finish.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="UandBlog.com"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="uandblog@gmail.com" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="UandBlog.com"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="uandblog@gmail.com" />
</LinearLayout>
Step 8: Now to use Sliding Menu item Image copy required .png images within Drawable or mipmap folder.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="135"
android:centerColor="#191919"
android:endColor="#191919"
android:startColor="#191919"
android:type="linear" />
</shape>
android:shape="rectangle">
<gradient
android:angle="135"
android:centerColor="#191919"
android:endColor="#191919"
android:startColor="#191919"
android:type="linear" />
</shape>
Step 10: from menu -> activity_main_drawer.xml write the following code.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_android"
android:icon="@drawable/android"
android:title="Android" />
<item
android:id="@+id/nav_html"
android:icon="@drawable/image1"
android:title="Html" />
<item
android:id="@+id/nav_php"
android:icon="@drawable/php"
android:title="PHP" />
<item
android:id="@+id/nav_phone"
android:icon="@drawable/phone"
android:title="Smartphone" />
<item
android:id="@+id/nav_health"
android:icon="@drawable/ic_menu_gallery"
android:title="Health" />
<item
android:id="@+id/nav_money"
android:icon="@drawable/ic_menu_slideshow"
android:title="Money" />
<item
android:id="@+id/nav_login"
android:icon="@drawable/ic_menu_share"
android:title="Login/Signup" />
</group>
</menu>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_android"
android:icon="@drawable/android"
android:title="Android" />
<item
android:id="@+id/nav_html"
android:icon="@drawable/image1"
android:title="Html" />
<item
android:id="@+id/nav_php"
android:icon="@drawable/php"
android:title="PHP" />
<item
android:id="@+id/nav_phone"
android:icon="@drawable/phone"
android:title="Smartphone" />
<item
android:id="@+id/nav_health"
android:icon="@drawable/ic_menu_gallery"
android:title="Health" />
<item
android:id="@+id/nav_money"
android:icon="@drawable/ic_menu_slideshow"
android:title="Money" />
<item
android:id="@+id/nav_login"
android:icon="@drawable/ic_menu_share"
android:title="Login/Signup" />
</group>
</menu>
So, this completes the whole coding part. Now compile and test your apps in real device.

Comments ( 0 )
Subscribe Latest Information
Categories
Most Popular Posts
How to Withdraw Money from ATM Machine 7steps 1180847 Views
How to Create Chat Application in Android Studio 152392 Views
How to Create a Shopping Cart Application in Android 115494 Views
You May Like Also
How to create your first Android Game 15829 Views
How to Animate your Android App 8747 Views
How to Create Overflow Menus in Android 14579 Views
How to Create PDF Reader Application in Android 28834 Views