Android WebView with Sliding Menu tutorial

In Android  |  Last Updated on Mon, 27 Jun 2016

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>

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>

 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);
}
}

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>

 Step 8: Now to use Sliding Menu item Image  copy required .png  images  within Drawable  or mipmap folder.

  Step 9: now from Drawable -> side_nav_bar.xml write the following code.
 

<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>

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>

So, this completes  the whole coding  part. Now compile and test your  apps in real device.