I am developing a simple app using ViewPager. It has content and images in a webview. ViewPager has a number of pages, all pages have the same data.
content.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<android.support.v4.view.ViewPager
android:id="@+id/content_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="5dp"
android:paddingLeft="9dp"
android:paddingRight="9dp"
android:paddingTop="5dp" />
</RelativeLayout>
SampleActivity.java: package com.android.sample;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.SimpleOnPageChangeListener;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.RelativeLayout;
public class SampleActivity extends Activity {
public static ViewPager contentPager;
public static ContentPagerAdapter contentPagerAdapter;
public static List<String> mPages;
public static SampleActivity context;
int _position;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.content);
context = this;
mPages = new ArrayList<String>();
for(int i =0;i<20;i++) {
mPages.add("<html><head><meta charset=\"utf-8\"></head><html><head><style type=\"text/css\"> img { max-width:100%; max-height:100%; } </style></head><body><p> "+ i +" <br> <img alt=\"\" class=\"alignleft\" height=\"160\" src=\"http://yourstory.in/wp-content/uploads/2011/10/vakil_search_n.jpg\" style=\"margin: 5px;\" title=\"vakil search\" width=\"280\" /><em>Lawyers at </em><a href=\"http://yourstory.in/?s=vakilsearch\" target=\"_blank\"><em>VakilSearch </em></a><em>shed some light</em></p><p>The categorisation of an expense as revenue expenditure or capital expenditure has been a perpetual ground for litigation between assessees and the authorities.</p>");
}
contentPager = (ViewPager) findViewById(R.id.content_pager);
contentPagerAdapter = new ContentPagerAdapter();
contentPager.setAdapter(contentPagerAdapter);
contentPager.setOnPageChangeListener(new PageListener());
contentPager.setCurrentItem(0 );
}
class PageListener extends SimpleOnPageChangeListener {
public void onPageScrollStateChanged (int state){
//Log.d(TAG, "onPageScrollStateChanged state " + state+ " _position "+_position + "webView"+webView);
}
public void onPageScrolled (int position, float positionOffset, int positionOffsetPixels){
//Log.d(TAG,"onPageScrolled Target webViewPrevious : " + webViewPrevious + " webView " + webView );
}
public void onPageSelected(int position) {
_position = position;
// TextView pageNumberView = (TextView) context.findViewById(R.id.page_no);
//pageNumberView.setText("" + (position + 1) + " of " + (viewNumber));
}
}
public class ContentPagerAdapter extends PagerAdapter {
String html="";
WebView webView;
@Override
public void destroyItem(View collection, int position, Object view) {
//clearALlVedios();
((ViewPager) collection).removeView((RelativeLayout) view);
}
@Override
public void finishUpdate(View arg0) {
}
@Override
public int getCount() {
return mPages.size();
}
@Override
public Object instantiateItem(View collection, int position) {
RelativeLayout ll = new RelativeLayout(context);
webView = new WebView(context);
String content;
try {
content = mPages.get(position) + "<br> ";
}
catch (Exception e) {
content="";
}
webView.clearCache(true);
webView.getSettings().setJavaScriptEnabled(true);
/// webView.getSettings().setLoadWithOverviewMode(false);
webView.getSettings().setPluginsEnabled(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.requestFocusFromTouch();
webView.setWebChromeClient(new WebChromeClient());
//webView.getSettings().setUseWideViewPort(false);
webView.getSettings().setLoadsImagesAutomatically(true);
webView.setWebViewClient(new WebViewClient());
// webView.getSettings().setUseWideViewPort(true);
//webView.getSettings().
/*int scale = ((int) (100 * ( webView.getScale()))) + 10 ;
Log.i(TAG, "zoom scale : "+ scale);
webView.setInitialScale( scale );*/
// webView.setVerticalScrollBarEnabled(false);
// webView.setHorizontalScrollBarEnabled(false);
//webView.setInitialScale(140);
html = "<p >"+ content+ " </p>";
ll.setPadding(8, 8, 2, 8);
final String mime = "text/html";
final String encoding = "utf-8";
webView.loadDataWithBaseURL(null, html, mime, encoding, null);
webView.setWebViewClient(new WebViewClient(){
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url != null && ((url.startsWith("http://")) || (url.startsWith("https://")) || (url.startsWith("www.")))) {
view.getContext().startActivity(
new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
return true;
} else {
return false;
}
}
});
ll.addView(webView);
((ViewPager) collection).addView(ll);
ll.setTag(position);
return ll;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == ((RelativeLayout) object);
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
}
@Override
public Parcelable saveState() {
return null;
}
@Override
public void startUpdate(View arg0) {
}
@Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
}
}
The html has different types of content (text + image) with same structure...
Problem: when the activity starts, images are not shown. When I tap the zoom-in, the image shows, when I tap zoom-out, the images are not shown.
I searched, but I didn't find any help.
First of all I don't see the
setContentViewin your code. AWebViewis another view likeImageView,TextView.. so you need to use thesetContentViewfunction.Note that you're using to different clients
WebViewClient()and theWebChromeClient()you need to know the difference between them, the main difference is that theWebViewClientis more configurable.You can load web content in at least 2 ways.
The first one is "Load the given data into the
WebViewusing a 'data' scheme URL" (using the functionThe other way is directly loading the URL of the webpage. To begin, I recomend you to do a normal webpage, save it in the assets folder or in the SD card and then load it from there.
Like this:
Hope, this helps a little.