Webview Android Studio with HTML5

Asked

Viewed 795 times

1

How do I make a layout 100% responsive in Webview? I have to set it up in Webview or and my HTML is not Responsive?

inserir a descrição da imagem aqui

Code:

 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(R.layout.activity_main);

    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.loadUrl("file:///android_asset/index.html");
    myWebView.getSettings().setUseWideViewPort(true);
    myWebView.getSettings().setLoadWithOverviewMode(true);
    myWebView.getSettings().setSupportZoom(true);
    myWebView.getSettings().setBuiltInZoomControls(true);
    myWebView.getSettings().setDisplayZoomControls(false);

}
android html5 webview

  • You have to check if your html is responsive... there’s no way to know why it can’t be reproduced here for lack of code.

1 answer

3


You have to configure directly in html via style css, something like this:

<head>
<title>teu titulo da tua pagina</title>
<!-- ... -->
<!-- tem de ter isso no seu html -->
<meta name='viewport' content='width=device-width, initial-scale=1.0'
      charset='utf-8'>
<!-- faltou essa linha de código, foi maus... -->
<!-- -->
<link rel='stylesheet' href='bootstrap/css/bootstrap.min.css'>
<script src='bootstrap/js/jquery-1.12.3.min.js'></script>
<script src='bootstrap/js/bootstrap.min.js'></script>
<script src='bootstrap/js/jquery-scrolltofixed.js'></script>
<link href='bootstrap/css/bootstrap.min.css' rel='stylesheet'>
<style type="text/css">
/* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  //
  @media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
      width: 100%;
  }
  //
  * {
    margin: 0;
    padding:0;
  }
  /* reset de margens */
  /* para garantir que estes elementos ocuparão toda a tela */
  body, html {
    width: 100%;
    height: 100%;
    font-family: Arial, Tahoma, sans-serif;
  }
</style>
</head>

should also load the bootstrap’s and Styles if Voce is working with it. should also add this line to the webview:

myWebView.getSettings().setJavaScriptEnabled(true);

Try it, let me know if it worked.

[EDIT] - the line commented above is required.
As I specified in the comments, I search the settings for bootstrap directly in the root of my html, you can see that the links are to the folder 'src=bootstrap/...'.
I hope it works now

  • unfortunately it didn’t work.

  • Voce placed the code inside the correct html tags, like <style type="text/css"> o coding aqui ...</style> ?

  • yes set the tegs <style> and also create a file and specify its path by Teg <link> more unsuccessfully. There is no other configuration to do because I am new to the subject and I may have stopped doing.

  • here worked round, but I put a folder with the bootstrap directly in my folder Assets, there is even an app running in the store with this code there

  • I’ll edit the answer, then you look ok

  • Armando and this code helped me a lot , It was good after I put the Teg <meta > more when I turn the phone it does not adjust the screen on the left is blank yet , as the image above plus the login screen approached .

  • missing a configuration in Activity_main.xml that was like android:layout_width="368dp" android:layout_height="495dp" and I put: android:layout_width="match_parent" android:layout_height="match_parent"plus your reply was very helpful thank you very much Armando.

  • vote as the right answer, help and some dots too

Show 3 more comments

Browser other questions tagged android html5 webview

You are not signed in. Login or sign up in order to post.