How to fit web images to Android screen size inside a WebView? while getting content of a site using JSON data, using restful

Question

I'm fetching Json data using Rest API. And showing the contents in a WebView only, but that web images are showing in it's full size there. I want to make the images fit to the screen size.

Below is my code:

    content = (WebView)findViewById(R.id.content);
    final WebViewLoader webViewLoader = new WebViewLoader(content);
    webViewLoader.setWebSettings();

    String url = Const.get_content_by_id.replace("POST_ID",String.valueOf(id));

    StringRequest request = new StringRequest(Request.Method.GET, url, new Response.Listener<String>() {
        @Override
        public void onResponse(String s) {
            try {
                JSONObject ParentObject = new JSONObject(s);
                webViewLoader.setLoadDataWithBaseUrl(ParentObject.getJSONObject("content").getString("rendered"));

            } catch (JSONException e) {
                e.printStackTrace();
            }
        }
    }, new Response.ErrorListener() {
        @Override
        public void onErrorResponse(VolleyError volleyError) {

            Toast.makeText(Post.this,"Unable to Load", Toast.LENGTH_LONG).show();
        }
    });

SingletonVolley.getInstance(getApplicationContext()).addToRequestQueue(request);

where are you trying to show images, in an ImageView or inside WebView along with other web contents? — sourav.bh, Jan 10 '19 at 11:09
I'm showing content of a wp site on a webview, that content contains some image. The images are showing in large size as their sizes are large.. while the writings are formatted like responsive.. — Parameshwar Panja, Jan 10 '19 at 11:15
Possible duplicate of [Android WebView, Scaling Image to fit the screen](https://stackoverflow.com/questions/10395292/android-webview-scaling-image-to-fit-the-screen) — sourav.bh, Jan 10 '19 at 11:28
No. this is not duplicate of above question . He is populating web view with url. — Parameshwar Panja, Jan 10 '19 at 11:33
Populating webview is not the concern here, webview can be populated in multiple ways. The concern here is how to fit webview contents into device screen size, that's why I believe you can be benefitted from that question. — sourav.bh, Jan 10 '19 at 11:37
did you tried adding `viewport` meta tag into your webview content? from the code you attached it seems so similar with loading content from URL, because from the JSON response you are ultimately parsed a URL that is loaded finally. you are not loading any direct JSON data into the webview. — sourav.bh, Jan 10 '19 at 11:49
cool, then share the solution here by posting a answer so that others can use too. — sourav.bh, Jan 10 '19 at 12:28

score 1 · Accepted Answer · edited Jan 11 '19 at 12:04

1

I have finally solved it by setting the style tag with the web content.

webViewLoader.setLoadDataWithBaseUrl("<style>img{display: inline;height: auto;max-width: 100%</style>"+ParentObject.getJSONObject("content").getString("rendered"));

If someone wants to add any more style just add <style></style> after or before <style>img{display: inline;height: auto;max-width: 100%</style>

edited Jan 11 '19 at 12:04

sourav.bh

467
1
7
20

answered Jan 11 '19 at 06:24

Parameshwar Panja

83
1
10

Wijdan · Answer 2 · 2019-01-10T11:48:53.933

Use Picasso Image Rendering and Caching Library and use its method to customize the images.

 ImageView img = findViewById(R.id.image);
        Picasso.with(ctx)
                .load(res)
                .placeholder(R.drawable.loading)
                .error(R.mipmap.ic_launcher)
                .resize(Main_page.getScreenWidth(ctx),Main_page.getScreenHeight(ctx))
                .centerInside()
                .into(img);

Also get the screenwidth and screenHeight to resize the image to screen size and then use centerInside() to make the picture fit in the webview.

You can get screen width and height like this.

    public static  int getScreenWidth(Context c) {
      WindowManager wm = (WindowManager) c.getSystemService(Context.WINDOW_SERVICE);
      Display display = null;
      if (wm != null) {
        display = wm.getDefaultDisplay();
      }
      Point size = new Point();
      if (display != null) {
        display.getSize(size);
      }
      return size.x;
    }
    public static  int getScreenHeight(Context c) {
      WindowManager wm = (WindowManager) c.getSystemService(Context.WINDOW_SERVICE);
      Display display = null;
      if (wm != null) {
        display = wm.getDefaultDisplay();
      }
      Point size = new Point();
      if (display != null) {
        display.getSize(size);
      }
      return size.y;
   }

For webview use below code:

   WebView img = findViewById(R.id.image);
        img.getSettings().setBuiltInZoomControls(true);
        img.getSettings().setLoadWithOverviewMode(true);
        img.getSettings().setUseWideViewPort(true);
        img.loadUrl(res);
    } else {
        setContentView(R.layout.zoominwithoutnet);
        getWindow()
                .setLayout(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT
                );

he is not using any ImageView, rather showing that web images into a WebView. So Picasso library is not the appropriate solution for this issue. — sourav.bh, Jan 10 '19 at 11:24

How to fit web images to Android screen size inside a WebView? while getting content of a site using JSON data, using restful

2 Answers2