How to have a full-screen Webview?

Asked

Viewed 2,785 times

3

My specific question: How to open a WebView in full screen at Android Studio?

Change Theme in Manifest? Change Theme in XML? Force a JAVA script? Change view margins? Change code in Style?

All these attempts cited above have been thoroughly tested, mainly coming from foreign websites. Even when I search for English content, I see the difficulty of finding the solution to a full-screen webview. Often the supposed solution is to hide the title bar of the application, leaving that margin in the application, not solving the specific problem. My project is like this:

Manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.duff.webviewoficial">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/TelaCheia">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>


    </application>
    <uses-permission android:name="android.permission.INTERNET" />

</manifest>

Mainactivity.java

package com.example.duff.webviewoficial;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {



    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        getSupportActionBar().hide(); //aqui a mágica   REMOVE A BARRA DE TITULO
        getWindow().setFeatureInt( Window.FEATURE_PROGRESS, Window.PROGRESS_VISIBILITY_ON);
        setContentView(R.layout.activity_main);


        WebView mWebView = (WebView) findViewById(R.id.activity_main_webview);

        // Enable Javascript
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true); // Aparentemente habilitado

        mWebView.setWebViewClient(new WebViewClient()
        {
         public boolean shouldOverrideUrlLoading(WebView view, String url){
             view.loadUrl(url);
             return false;
         }
        });


        mWebView.loadUrl("http://duffproapps.16mb.com/appFinal/home2.html");
        //mWebView.loadUrl("file:///android_asset/index.html");
        //http://duffproapps.16mb.com/appFinal/


    }


}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.example.duff.webviewoficial.MainActivity">


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></LinearLayout>

    <WebView
        android:id="@+id/activity_main_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"




        />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </RelativeLayout>

</RelativeLayout>

xml style.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>

    <style name="TelaCheia" parent="Theme.AppCompat.Light.DarkActionBar" >
        <item name="android:colorBackground">@color/background_material_light</item>
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>

</resources>
  • Ever tried to configure in xml for her to grab the whole screen? you can do this with ease in the graphics editor of Android Studio!

3 answers

6


To leave the WebView in fullscreen or fullscreen, in English, first you should define both height and width as math_parent. Soon after there are basically two ways to let the device fill in all screen space, via XML and programmatically. See:

XML:

In the AndroidManifest.xml of your project:

<activity android:name=".ActivityMain"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/>

Programmatically:

In the Activity that you wish it to be FULLSCREEN:

public class ActivityMain extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // removendo o título
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.main);
    }
}

As also specified in the documentation on good practices for user interface, there is a technique called Immersive Full-Screen Mode available from Kitkat version of Android.

See the image:

inserir a descrição da imagem aqui

For more details, read more in the documentation.

  • Very good post. Although not the case. I gave a +1 to anyone who needs something similar, because the template looks beautiful like this, without the title bar. Mine is also like this, although I managed otherwise. I could not get the full screen. As I said before, changing Theme to "android:Theme="@android:style/Theme.NoTitleBar.Fullscreen" never worked. Develop on a Macbook Pro. Does the SDK for Mac OS not have this theme?

  • About JAVA, I only get error in Gradle.

  • @Paulosérgioduff with me has always worked. Did you ever try using Appcompat? This way: Theme.AppCompat.Fullscreen

  • <style name="Telacheia" Parent="Theme.AppCompat.Fullscreen" > <item name="android:colorBackground">@color/background_material_light</item> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowFullscreen">true/item> </style> <style name="Theme.AppCompat.Fullscreen">Theme.AppCompat.Fullscreen</style>

  • So far so good

  • @Paulosérgioduff the way you sent me, I opened it here and it shows fullscreen usually without any problem.

  • @Paulosérgioduff See: https://drive.google.com/open?id=0BxfzFAS7MTC0OFk4eW1GdVVhSEk

  • @Paulosérgioduff But I commented on this part in the class: //getWindow().setFeatureInt( Window.FEATURE_PROGRESS, Window.PROGRESS_VISIBILITY_ON);

  • I just commented on the same line as well. I’m suspicious that this has something to do with the SDK version. Are you using Windows, MAC or Linux? Looks like this: https://drive.google.com/file/d/0B0iOWJod1WArWE55N1B6WUJUY3M/view?usp=sharing There is a small colorful menu line that makes you notice the blank track on the screen. I put that border in CSS to make it more explicit. Did you play the project file by file? Because when possible I can try the same thing using a blank project or on Windows.

  • @Paulosérgioduff Here I am on Windows. Is it OK with your emulator? Which version is on your emulator? Is there a device there to test directly?!

  • Sue answer came in handy. I had problems with emulator!

Show 7 more comments

0

EDITED:

    <FrameLayout             
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
     android:layout_height="match_parent">

    <WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />


<ProgressBar
android:id="@+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />

</FrameLayout>

I used your own "Telacheia" on Manisfest and it worked. I had to remove this part getSupportActionBar(). Hide(); //here the magic REMOVES THE TITLEBAR getWindow(). setFeatureInt( Window.FEATURE_PROGRESS, Window.PROGRESS_VISIBILITY_ON);

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/TelaCheia"> <<<<<<<<<<<<<<<=========
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

-2

It’s very simple people! You don’t need any of this! I use the sketchware I looked for the same thing and found something very practical

See how easy it is to watch a youtube video in full screen, or even create a webview with video in full screen.

1 - Open google browser cel.

2 - log in to youtube normally

3 - type the desired video name

4 - suppose this would be the url of the video -> https://m.youtube.com/watch? v=-3C6hX4PTLk

5 - exchange’m for www and watch? v=' for embed/'

6 - would look like this: https://www.youtube.com/embed/-3C6hX4PTLk

7 - copy and paste in the address bar, and ready, fullscreen video!

Good Luck!

Browser other questions tagged

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