WebView: load image and fit to screen width

Question

I've already read several threads about this problem but I got another strange misbehavior:

I've created a ViewPager that has an initial Page count of 5. If the page count-2 is reached,

pagerAdapter.notifyDataSetChanged();

gets called. The fragments all get their own id, counting up from 1. So the first fragment got the number one, second one the number two and so on. Each fragment loads an image out of a webserver, depending on their id:

webView.loadUrl("http://myserver/" + id + ".jpg");

Now it appears, that sometimes the images are larger than the device's screen width. That's why I added these lines:

webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

The first 5 elements seem fitted perfectly, but when trying to swipe to the next fragment, you've got to first swipe the webview about 3px to the left, after that swipe again, to get to the next fragment. I don't know why this is happening , but after the initial 5 images, it works correctly. Maybe it has something to do with the fact that in the beginning I tell the pageradapter that there are 5 fragments to show, and after scrolling more fragments are added. These following fragments are not affected by this problem. This was the first problem.

The second problem is, when swiping through the completely correctly shown images, sometimes an image wil not be fitted to the screen. I've got to turn the screen to landscape and back to portrait, only then the image is fitted correctly. How can this happen, why does it work when the screen gets redrawn, but not on the first try? And it only appears to happen sometimes.

These are my two problems, the first one with the minimal wron fitting of the first 5 fragments and the second one the sometimes non-fitting images when swiping, but fit when screen gets redrawn

Here's my main activity:

public class MyActivity extends ActionBarActivity {

public static int NUM_PAGES = 5;

private ViewPager viewPager;
private CustomPagerAdapter pagerAdapter;

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

    viewPager = (ViewPager)findViewById(R.id.activity_my_viewpager);

    pagerAdapter = new CustomPagerAdapter(getSupportFragmentManager());
    viewPager.setAdapter(pagerAdapter);
    viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int i, float v, int i2) {

        }

        @Override
        public void onPageSelected(int i) {
            if(NUM_PAGES - i <= 2) {
                NUM_PAGES+=3;
            }
            pagerAdapter.notifyDataSetChanged();
        }

        @Override
        public void onPageScrollStateChanged(int i) {

        }
    });
}

private class CustomPagerAdapter extends FragmentStatePagerAdapter {
    public CustomPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return ScreenFragment.create(position);
    }

    @Override
    public int getCount() {
        return NUM_PAGES;
    }
}
}

And here's the fragment class:

public class ScreenFragment extends Fragment {

public static final String ARG_PAGE = "ARG_PAGE";

private int pageNumber;

public static ScreenFragment create(int pageNumber) {
    ScreenFragment fragment = new ScreenFragment();
    Bundle args = new Bundle();
    args.putInt(ARG_PAGE, pageNumber);
    fragment.setArguments(args);
    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    pageNumber = getArguments().getInt(ARG_PAGE)+1;
}

@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    ViewGroup viewGroup = (ViewGroup)inflater.inflate(R.layout.fragment_screen, container, false);
    WebView webView = (WebView)viewGroup.findViewById(R.id.fragment_screen_webview);
    webView.setWebViewClient(new WebViewClient());
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.getSettings().setUseWideViewPort(true);
    webView.loadUrl("http://someserver/" + Integer.toString(number) + ".jpg");
    return viewGroup;
}
}

Thanks in advance

Pls Post some screen shot for better understanding..... – M D Nov 03 '14 at 12:04 — M D, Nov 03 '14 at 12:04

score 1 · Answer 1 · edited May 23 '17 at 12:27

1

You should try inflating an ImageView layout instead of using a WebView. When inflating a ImageView for each page you can use a AsyncTask to download the image for every page.

See here: https://stackoverflow.com/a/2472175/3064486

You can have a layout holding only an ImageView that has android:scaleType="fitXY" or "fitCenter" then in your onCreateView inside your adapter you can just inflate this layout and find the ImageView inside it using findViewById. Then you can use img.setImageBitmap just as this answer suggests.

edited May 23 '17 at 12:27

Community

1
1

answered Nov 03 '14 at 12:10

Jonas Borggren

2,591
1
22
40

There are thousands of images on the server, wouldn't it use too much memory to have an image drawn on each fragment? Otherwise that sounds like a good alternative, thanks – user2410644 Nov 03 '14 at 12:18
Hmm. I think you are right. But are you sure the WebView is more efficient? – Jonas Borggren Nov 03 '14 at 12:30
I thought it'd be the easiest way, I've already tried something similar with images and bitmaps but I always ran into OutOfMemory exceptions. I think my solution works fine, just these two small problems need to be fixed – user2410644 Nov 03 '14 at 12:35
Have you tried modifying the quality of the image? If the image is clickable you might aswell use an lower quality image for the 'preview' in the ViewPager. – Jonas Borggren Nov 03 '14 at 12:52

score 0 · Answer 2 · edited Nov 03 '14 at 12:36

0

maybe this will help you,

getWindow().setFlags(
    WindowManager.LayoutParams.FLAG_FULLSCREEN, 
    WindowManager.LayoutParams.FLAG_FULLSCREEN
);

edited Nov 03 '14 at 12:36

Jonas Borggren

2,591
1
22
40

answered Nov 03 '14 at 12:02

WebView: load image and fit to screen width

2 Answers2