Develop Reference

How to cover a WebView with a semi-transparent covering layer that prevents the WebView from being touched?

I'm trying to have a webpage load but I want the user to see the page loading but be unable to interact with it until the page loads.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/mainWebview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#40606060"
/>
I just thought I'd put a semi-transparent, gray layer over it which I would hide when the page has loaded. I think what I need is two views inside some sort of container. This post (Can I overlap the WebView with an ImageButton?) has a similar question but when I use a WebView I can still interact it by scrolling.So I've been using a WebView and a LinearLayout (i've tried an ImageView as well) inside a FrameLayout (I've tried a GridLayout as well).
In both cases, I can cover the WebView just like I want but I can still interact with the Webview by scrolling with my finger and I don't want that. In HTML I would just put one DIV on top of another and it would accomplish this but I'm not sure how to do the equivalent with Android.
Thanks for any help!

Just put your LinearLayout as clickeable = "true"
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#40606060"
android:clickeable="true"
/>

You can Implement WebViewClient and extend onPageFinished() as follows:
mWebView.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
// do your stuff here
}
});
you can show progress dialogue when WebView start load the page and dismiss ProgressBar onPageFinished() Method.
Tell me if you have still any query...

Best way to create a header and footer for webview in Android

I want to create news like activity that has title and date and some share and favorite buttons in the beginning at the top, the article text (and maybe some images and headers titles) is in html that I get from server, and at the end a list of related news!
I have to use WebView for the article html, but since I need the header and the main webview to scroll together, I may have to use them in the in wraping ScrollView, which, apparently is not the best option!
I have red these:
webview in scrollview and
Disable scrolling in webview
but I want to know what is the best way to implement this as of 2015! that can work with android 4.01+

Well, as it turns out, best way to do yet is to just put them in a scrollView !
It worked on my Samsung android 4.4, but I don't know about the rest !
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/news_activity_title_lay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
//Some Widgets Here for header
</RelativeLayout>
<WebView
android:layout_below="#+id/news_activity_title_lay"
android:id="#+id/news_activity_web_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
</WebView>
<LinearLayout
android:id="#+id/news_activity_related_base_lay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="#+id/news_activity_web_view">
//Some Widgets Here foe footer
</LinearLayout>
</RelativeLayout>
funny thing, though is Android Studio is saying I should not do this ! :/

How to PROPERLY show ProgressBar for a Webview while loading

I wan't to indicate that my webview is loading in some way. Using the Progressbar seems like a good solution but I am not certain how to properly do this.
By Progressbar I mean a spinning thingie in Android.
This is what I know by now and what I have tried:
I know about onPageStarted(...) and onPageFinished(...) callbacks which you define inside the WebViewClient and then hide or show Progressbar based on calls to those methods. BUT this approach is creating many problems with the HTML page inside the webview. For example when I hide Progressbar HTML elements resize and than go back to their original sizes for a brief moment. This looks really ugly and I don't know why this is happening. I tried putting my Progressbar and webview inside Frame and Relative layout (in order to have the progress cantered) and with both of these I get the above problem. HTML page loading is Javascript heavy since there is http://cubiq.org/iscroll-4 library on it but I doubt it's the problem with the library since the same page loads without strange behaviours when opened in Browser app on the phone.
My main problem is that I don't know how to define a layout containing my Progressbar and webview and avoid strange zoom in/out jumps. That is why I am asking how should one show progress bar correctly over a webview.
EDIT:
This is one of the layouts I tried:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
It's more or less similar with relative layout but I use centerInPerent=true on both axes for the ProgressBar

There's an efficient way to show progress in an activity. If you are using ActionBar, then
you can set an INDETERMINATE progressbar (the spinning one), or a horizontal progressbar (as seen on web browsers like Chrome). To do this you have to set the Window Feature to appropriate values like:
requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
OR
requestWindowFeature(Window.FEATURE_PROGRESS);
To set the progress value, do this:
setFeatureInt( Window.FEATURE_PROGRESS, Window.PROGRESS_VISIBILITY_ON);
Then call setProgress(int) whenever you want to change the progress value.
You can controll the visibility of the progressbar using
setProgressBarIndeterminateVisibility(true); //sets it to visible
AND
setProgressBarIndeterminateVisibility(false); //hides the progressbar

FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view.
I would use a RelativeLayout :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:centerInParent="true" />
</RelativeLayout>
This should work...

Android: problem scrolling my activity including a WebView

I included a WebView in my activity and load some Javascript in it which is then going to get data from an external website.
This works and displays fine but the problem is that my activity doesn't scroll when the WebView is done loading so I can't see the bottom of the WebView such as all the other Views I put below this. Any idea of how I should handle this?
Cheers.

Are you using scrollview in your layout? Try that and see if that helps.
Here is a link to the developer page

This works and displays fine but the problem is that my activity doesn't scroll when the WebView is done loading so I can't see the bottom of the WebView such as all the other Views I put below this.
You need to change your layout such that the "other Views I put below this" will be on the screen, and the WebView simply takes up the remaining space.
For example, here is a layout showing a WebView with a Button:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<WebView android:id="#+id/webkit"
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight="1"
/>
<Button android:id="#+id/helpcast"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="View Helpcast"
/>
</LinearLayout>
Because the WebView is set up with a 0px height but a weight of 1, and because the Button specifies no weight, the WebView will fill all space left over after the Button is on-screen. The WebView content will scroll inside the WebView itself, if needed, based upon whatever Web page you load in there.

How can I make my image scrollable? [Android Platform]

I have an image that takes up a lot more space than the android screen. I want the image to be presented full size and the user can move in any direction. Like a map.
Any suggestions?

You can use a webview which gives this to you for free. I'm not sure why but when I tried
using the loadData method it didn't work, but using loadDataWithBaseURL with a null URL did.
With a webview your image can even be embedded in HTML. In the example below yourContent is simply a string.
E.g.
yourView.loadDataWithBaseURL(null, yourContent, "text/html", "UTF-8", null);

Here is a tutorial I saw that did what you are describing
http://www.anddev.org/scrolling_a_picture_horizontally_and_vertically-t3245.html

You can put your image in an ImageView and wrap it using a ScrollView and a HorizontalScrollView like below.
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/yourImage"/>
</ScrollView>
</HorizontalScrollView>
So you can scroll it horizontally and vertically like a map.

Try to put scroll into xml layout with your image