Android Webview: Handling Orientation Changes

Handling screen rotation in WebView

After researching and trying out different approaches I have discovered what I have come to believe is the optimal solution.

It uses setRetainInstance to retain the fragment instance along with addView and removeView in the onCreateView and onDestroyView methods to prevent the WebView from getting destroyed.

MainActivity.java

public class MainActivity extends Activity {
    private static final String TAG_FRAGMENT = "webView";

    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        WebViewFragment fragment = (WebViewFragment) getFragmentManager().findFragmentByTag(TAG_FRAGMENT);
        if (fragment == null) {
            fragment = new WebViewFragment();
        }

        getFragmentManager().beginTransaction().replace(android.R.id.content, fragment, TAG_FRAGMENT).commit();
    }
}

WebViewFragment.java

public class WebViewFragment extends Fragment {
    private WebView mWebView;

    public WebViewFragment() {
        setRetainInstance(true);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment_webview, container, false);
        LinearLayout layout = (LinearLayout)v.findViewById(R.id.linearLayout);
        if (mWebView == null) {
            mWebView = new WebView(getActivity());
            setupWebView();
        }
        layout.removeAllViews();
        layout.addView(mWebView, new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

        return v;
    }

    @Override
    public void onDestroyView() {
        if (getRetainInstance() && mWebView.getParent() instanceof ViewGroup) {
            ((ViewGroup) mWebView.getParent()).removeView(mWebView);
        }
        super.onDestroyView();
    }

    private void setupWebView() {
        mWebView.loadUrl("https:///www.example.com/");
    }
}

android:webView handling orientation changes

@Override
public void onConfigurationChanged(Configuration newConfig){
if(webView==null)
{
    webViewPlaceholder.removeView(webView);
}
super.onConfigurationChanged(newConfig);
setContentView(R.layout.display_result);
url = Uri.parse(getIntent().getStringExtra("Url"));
initUI();
}

Replace this with

@Override
public void onConfigurationChanged(Configuration newConfig){
super.onConfigurationChanged(newConfig);
}

WebView on orientation changed

In android webview you have a problem with percentage.
What I mean is if you declare by example a div/iframe like this:

iframe{
    height: 100%;
    width: 100%;
}

this won't work because if you use both % on width and on height.
You will get a small screen like in the photo in the question.

So how to solve this problem? You need at least one declared in px.
You need to declare width or height in px.

So a few examples:

iframe{
        height: 1500px;
        width: 100%;
    }

or

iframe{
        height: 100%;
        width: 1500px;
    }

android Webview orientation issue, when change orientation then application restart and show the page from start

Add android:configChanges="keyboard|keyboardHidden|screenSize|orientation" to your activity on the AndroidManifest.xml file. It should look like this

<activity
        android:name=".MainActivity"
        android:configChanges="keyboard|keyboardHidden|screenSize|orientation"
        android:label="@string/app_name" >

as seen here - Android WebView handling orientation changes

Android - Preventing WebView reload on Rotate

I think the main problem is that you call web.loadUrl(webURL); also when savedInstanceState != null

EDIT

Try:

if (savedInstanceState == null)
{
  web.loadUrl(webURL);
}

EDIT2: You also need the onSaveInstanceState and onRestoreInstanceState override.

@Override
protected void onSaveInstanceState(Bundle outState )
{
super.onSaveInstanceState(outState);
web.saveState(outState);
}

@Override
protected void onRestoreInstanceState(Bundle savedInstanceState)
{
super.onRestoreInstanceState(savedInstanceState);
web.restoreState(savedInstanceState);
}

Note: Please also add in your AndroidManifest.xml in your Activity
android:configChanges="orientation|screenSize"
Thanks

---

Related Topics