CODEWITHSUNDEEP
javaandroidwebview
chdryra
chdryra

Reputation: 523

Tumblr not rendering properly in WebView

Hi I am testing out OAuth authorisation in my app for various sites using a pop-up dialog with an embedded webview where the user can log in and authorise. Works fine for twitter and foursquare. However Tumblr doesn't render properly for some reason.

When I put the authorisation url into a desktop browser everything works fine. However on my phone, whether on a browser on the phone proper or in a webview in my app, all i get is the title "tumblr. Get Ready. It's time. Push the button" plus a blue rectangle and a grey rectangle underneath which I can't interact with.

I have tried putting on javascript settings (Android webview not rendering html content correctly), switching hardware acceleration on and off (Android webview not rendering correctly), or setting storage options (Problems loading mobile.twitter in webview). Nothing works. Would be very grateful if anyone has any ideas!

Many thanks, Riz

Edit: I suspect it's something to do with Chrome n the phone rather than my code as Chrome itself doesn't render Tumblr properly it seems.

Anyway, here is the code I'm using:

public class FragmentOAuthUrlBrowser extends Fragment {
    private static final String REQUEST =     "com.chdryra.android.reviewer.View.ActivitiesFragments.FragmentViewUrlBrowser.url";

    private static final int LAYOUT = R.layout.fragment_review_url_browser;
    private static final int WEB_VIEW = R.id.web_view;

    private OAuthRequest mRequest;

    public static FragmentOAuthUrlBrowser newInstance(OAuthRequest request) {
        return FactoryFragment.newFragment(FragmentOAuthUrlBrowser.class, REQUEST, request);
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bundle args = getArguments();
        if (args != null) mRequest = args.getParcelable(REQUEST);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View v = inflater.inflate(LAYOUT, container, false);

        WebView webView = (WebView) v.findViewById(WEB_VIEW);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebViewClient(new OAuthWebViewClient());
        webView.loadUrl(mRequest.getAuthorisationUrl());

        return v;
    }

    private class OAuthWebViewClient extends WebViewClient {
        @Override
        public void onPageFinished(WebView view, String url) {
            mRequest.setCallbackResult(view.getUrl());
            super.onPageFinished(view, url);
        }
    }

Here is how it renders: enter image description here

Thanks!

Upvotes: 0

Views: 375

Answers (1)

Clinkz
Clinkz

Reputation: 726

I implemented TumblrLogin. Playing around with Hardware acceleration and storage is not required.

Enable the JavaScript using

//Enable JS support on web browser - important since TumblrLogin utilises JS components to show / hide UI
//Login page will not show up properly if this is not done
webView.getSettings().setJavaScriptEnabled(true);

Set a new WebView client to capture redirections. I found a normal WebViewClient to do the trick. I guess the ChromeWebViewClient should work find too.

That's all. No other customization is required. Hope you're pointing the correct URLs.

<string name="tumblr_request">https://www.tumblr.com/oauth/request_token</string> <string name="tumblr_access">https://www.tumblr.com/oauth/access_token</string> <string name="tumblr_auth">https://www.tumblr.com/oauth/authorize</string>

Upvotes: 1

Related Questions