Top Quality Products

Webview with navigation drawer 

5
Expert ScoreRead review

$18.00

Added to wishlistRemoved from wishlist 0
Add to compare

33 sales

Webview with navigation drawer 

Introduction

In this review, I will be discussing the "Webview with Navigation Drawer" demo app, which is a comprehensive Android app that combines the functionality of a webview with the ease of use of a navigation drawer. This app is designed to provide a seamless user experience, with features such as custom loading screens, push notifications, and swipe-to-refresh functionality.

Design and Features

The app’s design is modern and clean, with a navigation drawer that provides easy access to various sections of the app. The webview is fully customizable, with options to change the URL, customize the splash screen, and more. The app also includes a range of features, such as a custom search bar, floating button, and back button.

Some of the notable features of this app include:

  • Custom web page loading screen
  • Horizontal web page loading bar
  • Push notifications with dashboard
  • Floating button
  • Amazing navigation drawer
  • Custom search bar
  • On click page top
  • Custom dialog (app rating, exit confirm)
  • Swipe to refresh with theme color
  • Internet connection detection
  • Custom error page
  • Back button

Usability

The app is easy to use, with a simple and intuitive interface. The navigation drawer provides easy access to various sections of the app, and the webview is fully customizable. The app also includes a range of features that make it easy to use, such as a custom search bar and floating button.

Customization

The app allows for a high degree of customization, with options to change the URL, customize the splash screen, and more. The app also includes a range of themes and colors, allowing users to customize the look and feel of the app to suit their preferences.

Documentation

The app comes with comprehensive documentation, including a user guide and developer guide. The documentation provides detailed instructions on how to use the app, as well as information on how to customize and extend the app’s functionality.

Changelog

The app has a changelog that tracks updates and bug fixes. The changelog provides information on what changes were made, and when they were made. This is useful for developers who need to keep up with the latest changes and updates.

Conclusion

Overall, I am impressed with the "Webview with Navigation Drawer" demo app. The app provides a comprehensive set of features, a modern and clean design, and a high degree of customization. The app is easy to use, and the documentation is comprehensive and helpful. I would highly recommend this app to anyone looking for a webview-based app with a navigation drawer.

Score: 5/5

I would rate this app a 5 out of 5, as it provides a comprehensive set of features, a modern and clean design, and a high degree of customization. The app is easy to use, and the documentation is comprehensive and helpful.

User Reviews

0.0 out of 5
0
0
0
0
0
Write a review

There are no reviews yet.

Be the first to review “Webview with navigation drawer ”

Your email address will not be published. Required fields are marked *

Introduction

The WebView is a powerful component in Android that allows you to display web pages within your app. It's commonly used to load HTML content, web pages, or even mobile apps. However, when it comes to using a WebView with a navigation drawer, things can get a bit tricky. In this tutorial, we'll show you how to use a WebView with a navigation drawer in your Android app.

Prerequisites

Before we dive into the tutorial, make sure you have the following:

  • Android Studio installed
  • Basic knowledge of Android development
  • A project set up with a Navigation Drawer (if you don't have one, you can create one using the Android Studio template)

Step 1: Add the WebView to your layout

In your layout file (e.g. activity_main.xml), add the following code to create a WebView:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

This code creates a LinearLayout with a WebView that takes up the entire screen.

Step 2: Initialize the WebView

In your activity class (e.g. MainActivity.java), add the following code to initialize the WebView:

WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://www.example.com"); // Load a web page

This code finds the WebView in the layout, enables JavaScript, and loads a web page.

Step 3: Add the Navigation Drawer

If you haven't already, add the Navigation Drawer to your app using the Android Studio template or by creating one manually. This will give you a basic navigation drawer with a list of items.

Step 4: Connect the WebView to the Navigation Drawer

To connect the WebView to the Navigation Drawer, you'll need to create an interface that allows the WebView to communicate with the Navigation Drawer. Create a new interface:

public interface WebViewListener {
    void onWebViewLoaded();
}

This interface has a single method onWebViewLoaded() that will be called when the WebView has finished loading.

Next, modify your activity class to implement the WebViewListener interface:

public class MainActivity extends AppCompatActivity implements WebViewListener {
    //...
}

Step 5: Update the Navigation Drawer when the WebView is loaded

In your activity class, add the following code to update the Navigation Drawer when the WebView is loaded:

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        ((WebViewListener) getApplicationContext()).onWebViewLoaded();
    }
});

This code sets the WebView client to a new instance that overrides the onPageFinished() method. When the page finishes loading, it calls the onWebViewLoaded() method on the WebViewListener interface.

Step 6: Update the Navigation Drawer

In your Navigation Drawer adapter (e.g. DrawerAdapter.java), add the following code to update the Navigation Drawer when the WebView is loaded:

public class DrawerAdapter extends RecyclerView.Adapter<DrawerAdapter.ViewHolder> {
    //...

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        //...
        if (webViewListener!= null && webViewListener.onWebViewLoaded()) {
            // Update the Navigation Drawer here
            holder.itemView.setActivated(true);
        }
    }
}

This code checks if the WebViewListener interface is implemented and if the onWebViewLoaded() method has been called. If so, it updates the Navigation Drawer by setting the selected item to the current item.

Step 7: Put it all together

Finally, put all the code together in your activity class:

public class MainActivity extends AppCompatActivity implements WebViewListener {
    private WebView webView;
    private DrawerAdapter drawerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("https://www.example.com");

        drawerAdapter = new DrawerAdapter(this);
        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawerLayout.setDrawerListener(drawerAdapter);
    }

    @Override
    public void onWebViewLoaded() {
        // Update the Navigation Drawer here
        drawerAdapter.notifyDataSetChanged();
    }
}

That's it! You should now have a WebView with a Navigation Drawer that updates when the WebView is loaded.

Conclusion

In this tutorial, we've shown you how to use a WebView with a Navigation Drawer in your Android app. By following these steps, you should be able to create a WebView that loads a web page and updates the Navigation Drawer when the page is finished loading.

Here is an example of a complete settings configuration for a WebView with Navigation Drawer:

XML Layout

First, create a layout file (e.g., activity_main.xml) with the following content:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:orientation="vertical">

        <ListView
            android:id="@+id/navigation_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

Java Code

Next, create a Java class (e.g., MainActivity.java) with the following content:

import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ListView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.drawerlayout.widget.DrawerLayout;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    private DrawerLayout drawerLayout;
    private ListView navigationList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);
        webView.setWebViewClient(new WebViewClient());

        drawerLayout = findViewById(R.id.drawer_layout);
        navigationList = findViewById(R.id.navigation_list);

        // Load the web page
        webView.loadUrl("https://www.example.com");

        // Set the navigation drawer listener
        navigationList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // Handle navigation drawer item click
                //...
            }
        });

        // Set the drawer layout listener
        drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                // Handle drawer slide
                //...
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                // Handle drawer open
                //...
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                // Handle drawer close
                //...
            }

            @Override
            public void onDrawerStateChanged(int newState) {
                // Handle drawer state change
                //...
            }
        });
    }
}

AndroidManifest.xml

Finally, add the following permissions and features to the AndroidManifest.xml file:

<uses-permission android:name="android.permission.INTERNET" />

<application
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme">

    <activity
        android:name=".MainActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

    <uses-feature android:name="android.hardware.touchscreen" />

</application>

This is a complete example of how to configure a WebView with a Navigation Drawer in Android.

Here is the list of features about the Webview with Navigation Drawer:

  1. App Splash Screen: A custom splash screen is available for the app.
  2. Custom web page loading Screen: A custom loading screen is available for web pages.
  3. Horizontal web page loading bar: A horizontal loading bar is available for web pages.
  4. Push Notifications (with dashboard): Push notifications are available with a dashboard to manage them.
  5. Floating Button: A floating button is available on the app.
  6. Amazing navigation drawer: An amazing navigation drawer is available for easy navigation.
  7. Custom Search Bar: A custom search bar is available for searching.
  8. On click Page top: A feature to go back to the top of the page by clicking on the page top.
  9. Custom Dialog (app rating, exit confirm): A custom dialog is available for app rating and exit confirmation.
  10. Swipe to refresh with theme color: Swipe to refresh is available with a theme color.
  11. Internet connection detection: The app detects internet connection.
  12. Custom Error Page: A custom error page is available for error handling.
  13. Back button: A back button is available on the app.

Additionally, the following are mentioned as part of the features:

  • Mobile Responsive Website
  • Basic Knowledge

And the following are tutorials/links provided:

  • Import project to Android Studio
  • Change web URL
  • Customize Splash screen
  • Change Package Name
  • Change App Name
  • Change App Icon
  • App Theming Guide
  • Search bar setup
  • Shortcut Setup
  • Build APK file

Also, the following images are provided:

  • Group-10.png
  • BANERMAIN.png
  • Group-12.png
  • Group-11.png
  • Group-14.png
  • Group-15.png
  • Group-16.png
  • loading.png
  • NAVIGATION.png
  • customloadingscreen.png
  • ERRORPAGE.png
  • SWIPE-TO-REFRESH.png
  • SERCHBAR.png
  • oneclicktop.png
  • pushnotofocation.png
  • Group-17.png

And the following change log is provided:

  • Version "1.0"
    • Fix some internal bugs
    • Update documentation
    • Android R fix
    • Add Animation Splash
  • Version "1.1"
    • Update SDK Version 30
    • Update buildToolsVersion 30.0.1
    • Update documentation
    • Add Host fix method
    • Add Hide Webview Elements
    • Bug fix
  • Version "1.2"
    • Update buildToolsVersion 30.0.3
    • Update documentation
    • Update All SDK & Library's
    • Update New Onsignal push notification
    • Fix WebView Layout Error
    • Bug fix
Webview with navigation drawer 
Webview with navigation drawer 

$18.00

Shop.Vyeron.com
Logo
Compare items
  • Total (0)
Compare
0