/FinestWebView-Android

Beautiful and customizable Android Activity that shows web pages within an app.

Primary LanguageJava

FinestWebView

Android Arsenal Platform API License

Beautiful and customizable Android Activity that shows web pages within an app.

  • Builder pattern
  • Various options
  • Material design
  • Pre-made icons
  • Custom themes
  • Transition animations
  • Device rotation
  • Collapsing toolbar
  • Gradient divider
  • Custom typeface
  • Contextual actionbar

Screenshots

Default theme & Copied to clipboard

Back and forward & More options

FinestWebView Demo Video - YouTube

Youtube

Getting started

Gradle Dependency (jcenter)

Easily reference the library in your Android projects using this dependency in your module's build.gradle file.

dependencies {
    compile 'com.thefinestartist:finestwebview:1.0.2'
}

Manifest Settings

FinestWebView is basically and Android activity with webview, toolbar and etc.
You have to add FinestWebViewActivity in your AndroidManifest.xml

<activity
    android:name="com.thefinestartist.finestwebview.FinestWebViewActivity"
    android:theme="@style/FinestWebViewTheme" />

Basic WebView

new FinestWebView.Builder(activity).show(url);

Customization

There are 2 ways to customize FinestWebView.

1. Using Themes

You can use your own Theme for FinestWebView. If you want to use pre-defined theme, use android:theme="@style/FinestWebViewTheme" or android:theme="@style/FinestWebViewTheme.Fullscreen"

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:textColorPrimary">@color/primary_text</item>
    <item name="android:textColorSecondary">@color/secondary_text</item>
    <item name="windowActionModeOverlay">true</item>
</style>
<activity
    android:name="com.thefinestartist.finestwebview.FinestWebViewActivity"
    android:theme="@style/AppTheme.NoActionBar" />

2. Builder Options

StatusBar Options

statusBarColor(@ColorInt int color);
statusBarColorRes(@ColorRes int color);

Toolbar Options

toolbarColor(@ColorInt int color);
toolbarColorRes(@ColorRes int color);
toolbarScrollFlags(@ScrollFlags int flags);

Icon Options

iconDefaultColor(@ColorInt int color);
iconDefaultColorRes(@ColorRes int color);
iconDisabledColor(@ColorInt int color);
iconDisabledColorRes(@ColorRes int colorRes);
iconPressedColor(@ColorInt int color);
iconPressedColorRes(@ColorRes int colorRes);
iconSelector(@DrawableRes int selectorRes);

Divider Options

showDivider(boolean showDivider);
gradientDivider(boolean gradientDivider);
dividerColor(@ColorInt int color);
dividerColorRes(@ColorRes int colorRes);
dividerHeight(float height);
dividerHeight(int height);
dividerHeightRes(@DimenRes int height);

ProgressBar Options

showProgressBar(boolean showProgressBar);
progressBarColor(@ColorInt int color);
progressBarColorRes(@ColorRes int colorRes);
progressBarHeight(float height);
progressBarHeight(int height);
progressBarHeightRes(@DimenRes int height);
progressBarPosition(@NonNull Position position);

Title Options

titleDefault(@NonNull String title);
titleDefaultRes(@StringRes int stringRes);
updateTitleFromHtml(boolean updateTitleFromHtml);
titleSize(float titleSize);
titleSize(int titleSize);
titleSizeRes(@DimenRes int titleSize);
titleFont(String titleFont);
titleColor(@ColorInt int color);
titleColorRes(@ColorRes int colorRes);

Url Options

showUrl(boolean showUrl);
urlSize(float urlSize);
urlSize(int urlSize);
urlSizeRes(@DimenRes int urlSize);
urlFont(String urlFont);
urlColor(@ColorInt int color);
urlColorRes(@ColorRes int colorRes);

Menu Options

menuColor(@ColorInt int color);
menuColorRes(@ColorRes int colorRes);
menuDropShadowColor(@ColorInt int color);
menuDropShadowColorRes(@ColorRes int colorRes);
menuDropShadowSize(float menuDropShadowSize);
menuDropShadowSize(int menuDropShadowSize);
menuDropShadowSizeRes(@DimenRes int menuDropShadowSize);
menuSelector(@DrawableRes int selectorRes);

menuTextSize(float menuTextSize);
menuTextSize(int menuTextSize);
menuTextSizeRes(@DimenRes int menuTextSize);
menuTextFont(String menuTextFont);
menuTextColor(@ColorInt int color);
menuTextColorRes(@ColorRes int colorRes);

showMenuRefresh(boolean showMenuRefresh);
stringResRefresh(@StringRes int stringResRefresh);
showMenuShareVia(boolean showMenuShareVia);
stringResShareVia(@StringRes int stringResShareVia);
showMenuCopyLink(boolean showMenuCopyLink);
stringResCopyLink(@StringRes int stringResCopyLink);
showMenuOpenWith(boolean showMenuOpenWith);
stringResOpenWith(@StringRes int stringResOpenWith);

More Options

setCustomAnimations(@AnimRes int animationOpenEnter,
                    @AnimRes int animationOpenExit,
                    @AnimRes int animationCloseEnter,
                    @AnimRes int animationCloseExit)
backPressToClose(boolean backPressToClose);
stringResCopiedToClipboard(@StringRes int stringResCopiedToClipboard);

WebView Options

webViewJavaScriptEnabled(boolean webViewJavaScriptEnabled);
webViewAppCacheEnabled(boolean webViewAppCacheEnabled);
webViewAllowFileAccess(boolean webViewAllowFileAccess);
webViewUseWideViewPort(boolean webViewUseWideViewPort);
webViewLoadWithOverviewMode(boolean webViewLoadWithOverviewMode);
webViewDomStorageEnabled(boolean webViewDomStorageEnabled);
webViewDisplayZoomControls(boolean webViewDisplayZoomControls);
webViewDesktopMode(boolean webViewDesktopMode);

Builder Pattern

new FinestWebView.Builder(activity)
    .titleDefault("Default Title")
    .toolbarScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS)
    .gradientDivider(false)
    .dividerHeight(100)
    .toolbarColorRes(R.color.accent)
    .dividerColorRes(R.color.black_30)
    .iconDefaultColorRes(R.color.accent)
    .iconDisabledColorRes(R.color.gray)
    .iconPressedColorRes(R.color.black)
    .progressBarHeight(DipPixelHelper.getPixel(context, 3))
    .progressBarColorRes(R.color.accent)
    .backPressToClose(false)
    .setCustomAnimations(R.anim.activity_open_enter, R.anim.activity_open_exit, R.anim.activity_close_enter, R.anim.activity_close_exit)
    .show(url);

More customizations

Status Bar Color & Toolbar Color

Status bar color will be set as colorPrimaryDark of FinestWebViewActivity's theme.
Toolbar color will be set as colorPrimary of FinestWebViewActivity's theme.
But, you can override theses settings using builder option statusBarColor, statusBarColorRes, toolbarColor, toolbarColorRes.

Disable Toolbar Collapsing

new FinestWebView.Builder(activity)
    .toolbarScrollFlags(0) // By sending as 0, toolbar collapsing will be disabled
    .show(url);

Full Screen Mode

<style name="AppTheme.NoActionBar.FullScreen" parent="AppTheme.NoActionBar">
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowFullscreen">true</item>
</style>
<activity
    android:name="com.thefinestartist.finestwebview.FinestWebViewActivity"
    android:theme="@style/AppTheme.NoActionBar.FullScreen" />

Customizing Animations

You can use some pre-defined animations from this library or your own animations.

new FinestWebView.Builder(activity)
    .setCustomAnimations(R.anim.activity_open_enter, R.anim.activity_open_exit, R.anim.activity_close_enter, R.anim.activity_close_exit)
    .show(url);

Pre-defined animation sets

.setCustomAnimations(R.anim.activity_open_enter, R.anim.activity_open_exit, R.anim.activity_close_enter, R.anim.activity_close_exit)
.setCustomAnimations(R.anim.fragment_open_enter, R.anim.fragment_open_exit, R.anim.fragment_close_enter, R.anim.fragment_close_exit)
.setCustomAnimations(R.anim.slide_up, R.anim.hold, R.anim.hold, R.anim.slide_down)
.setCustomAnimations(R.anim.slide_left_in, R.anim.hold, R.anim.hold, R.anim.slide_right_out)
.setCustomAnimations(R.anim.fade_in_fast, R.anim.fade_out_medium, R.anim.fade_in_medium, R.anim.fade_out_fast)

Orientation Support

Use configChange, screenOrientation to customize your orientation options

<activity
    android:name="com.thefinestartist.finestwebview.FinestWebViewActivity"
    android:configChanges="keyboardHidden|orientation|screenSize"
    android:screenOrientation="sensor"
    android:theme="@style/FinestWebViewTheme" />

Gradient Divider

You can make your divider gradient. If you do, webview will be under the gradient. If you disable gradient divider, webview will be below the divider.

new FinestWebView.Builder(activity)
    .gradientDivider(false)
    .show(url);

Custom Typeface

You can use your own typeface for title, url, and menus. You have to add your font file in assets/fonts folder.

new FinestWebView.Builder(activity)
    .titleFont("Roboto-Medium.ttf")
    .urlFont("Roboto-Regular.ttf")
    .menuTextFont("Roboto-Medium.ttf")
    .show(url);

Designer

Min Kim

  • User Interface Design
  • Graphic Design

License

The MIT License (MIT)

Copyright (c) 2013 TheFinestArtist

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.