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...
Related
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...
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 ! :/
When i open a page in ViewPager, it instantiates the neighboring pages. What I would like to achieve is
1.load the contents the page only when the page is on focus.
2.show a loading screen, while i populate the page layout which is on focus and replace the loading screen with page layout after that.
Can someone point me in the right direction to achieve these 2 features?
I'm not sure of a good way to solve your first question (I don't believe you can control which pages get loaded, and in which order), but I have something that can help for your second:
Here is an example of a view I created that is loaded in every view of my ViewPager:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<LinearLayout
android:id="#+id/loading_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ProgressBar
style="#style/GenericProgressIndicator"/>
<TextView
android:id="#+id/loading_message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/loading_message_text"/>
</LinearLayout>
<WebView
android:id="#+id/webview"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:fadingEdge="vertical"
android:visibility="gone"
/>
</RelativeLayout>
There are two elements nested in the RelativeLayout: a LinearLayout that represents my loading message (including a ProgressBar and a TextView) and a WebView that will hold my content once it is loaded. The WebView initially has its visibility set to GONE to completely hide it. In code, I inflate the view and start an AsyncTask to load my data. Once the data is loaded, I set the LinearLayout's visibility to GONE and the WebView's visibility to VISIBLE.
onPostExecute in my AsyncTask - after the data is loaded, hide the loading message and show the data
protected void onPostExecute(Void v)
{
LinearLayout loadingMessage = (LinearLayout)articleLayout.findViewById(R.loading_message);
WebView articleContent = (WebView)articleLayout.findViewById(R.id.webview);
[...]
loadingMessage.setVisibility(View.GONE);
articleContent.setVisibility(View.VISIBLE);
}
I'm using an AsyncTask to download Images for my Listview, because I dont want the download of the Images to block my UI-Thread. While the images are being loaded, I want to show an animated progress circle in the spot, where the image will be.
But I cant find an Image of the progress circle. What is the Ressource-Id? Or is there any other way? Does someone has a link to this image?
Look at the progress bar. It can work (and it does by default, AFAIR) in indeterminate mode, which means it shows a rotating circle, like the one you are asking for. I know this is not an image, but what you can do, is to place a FrameLayout instead of the image, with progress bar as the only child. Then, once the loading of the images finishes, remove the progress bar and add the image.
Define this a global variable ProgressDialog pd;
Just before launche the AsyncTask do:
pd = ProgressDialog.show(CurrentClassName.this,"This is the title","This is the detail text",true,false,null);
When its done onPostExecute just call pd.dismiss();
For more detail look at : ProgressDialog
You will have to take special considerations for it to work when you rotate the device while the dialog is up.
This is an example of a layout file for intro activity with an image and circle progress bar:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/intro_description"
android:scaleType="fitXY"
android:src="#drawable/intro" />
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleInverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="150dp"
android:visibility="visible" />
</FrameLayout>
You want an indeterminate ProgressBar. Take a look at developer's website -
ProgressBar
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.