안드로이드 Webview 시작하기

기본 안드로이드 프로젝트를 생성한 후, 웹앱을 만들기 위해 기본템플릿을 만드는 과정을 기록합니다.

Permission

app > manifest > AndroidManifest.xml 에서 android.permission.INTERNET 을 추가합니다.

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

<application> 태그 위에 작성하면 됩니다.

Layout

모바일 화면에 딱 맞춰지도록 Layout을 정해줍니다.

app > res > layout > acivity_main.xml 을 실행 한 후, 다음과 같이 수정합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</LinearLayout>

화면에 꽉차보이도록 <Webview> 태그의 너비와 높이 모두 match_parent 로 전체화면에 맞춰주었습니다.

MainActivity

MainActivity 클래스 내에 Webview 를 선언합니다.

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

webView 에 웹앱을 위한 기본 세팅을 합니다.

import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

// ...

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

        // URL 필요
    loadWebviewWithURL(URL);
}

private void loadWebviewWithURL(String url) {
    webView = (WebView) findViewById(R.id.webView);
    webView.getSettings().setDefaultTextEncodingName("UTF-8");
    webView.getSettings().setUseWideViewPort(true);
    webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    webView.getSettings().setBlockNetworkImage(false);
    webView.getSettings().setLoadsImagesAutomatically(true);
    webView.getSettings().setSupportMultipleWindows(true);
    webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
    webView.clearCache(true);
    webView.getSettings().setAllowFileAccess(true);
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
    webView.getSettings().setDomStorageEnabled(true);
    webView.getSettings().setDatabaseEnabled(true);
    webView.getSettings().setAllowFileAccessFromFileURLs(true);
    webView.getSettings().setAllowContentAccess(true);

    webView.getSettings().setJavaScriptEnabled(true);

        // 아직 Android Bridge를 만들지는 않았어요!
    webView.addJavascriptInterface(new AndroidBridge(this), "ABridge");
    webView.setWebChromeClient(new WebChromeClient());

    webView.loadUrl(url);
}

AndroidBridge

Client(Web)에서 Android를 호출할 수 있도록 Bridge를 생성합니다.

package com.tmoa.us;

import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

public class AndroidBridge {

    private Context context;

    public AndroidBridge(Context context) {
        this.context = context;
    }

    @JavascriptInterface
    public void testMethod() {
        Toast.makeText(context, "세팅테스트를 합니다.", Toast.LENGTH_SHORT).show();
    }
}

MainActivity.java

loadWebviewWithURL 메소드내에서 아래의 코드는 다음과 같은 역할을 합니다.

webView.addJavascriptInterface(new AndroidBridge(this), "ABridge");

// JS
ABridge.testMethod();

Client(Web)에서 JS를 통해 다음과 같이 메소드를 실행시키면 AndroidBridge 클래스의 testMethod 메소드가 실행되게 됩니다.

상단 타이틀바 없애기

app > manifest > AndroidManifest.xml 파일에서 android:theme 에 style이 어디정의되어 있는지 확인합니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tmoa.us">
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

현재의 경우, @style/AppTheme 에 있다는 것을 확인하고 res > values > styles.xml 로 이동합니다.

AppTheme 을 name 으로 가지고 있는 <style> 내에 다음과 같이 item 을 넘겨줍니다.

<!-- 상단의 Title Bar 제거 -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

styles.xml 전체소스

<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>

        <!-- 상단의 Title Bar 제거 -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

</resources>