[Android] Webview에서 경고창(Alert/Confirm) 커스터마이즈하기

웹뷰에서의 환경을 작성하다 보면 alert나 confirm에 대해 하나의 희망사항이 생길 겁니다. 아래와 같이 경고창에 타이틀이 주소 기반으로 보이는 예입니다.

커스터마이즈 하지 않은 경우

이런 경우 보통 어플을 완성해도 완성도가 낮아 보이는 요소로 작용하기 마련인데 WebChromeClient에 다음과 같이 생성을 해주면 위의 문제에 대한 해결이 깔끔하게 완료될 수 있습니다.

 

  CustomChrome

/**
 * @author royzero
 * @since 2020-09-03
 */
public class CustomChrome extends WebChromeClient {
    private Context mContext;            // WebChromeClient를 호출한 Context
    private AlertDialog mAlertDialog;    // 경고창을 띄울 Dialog
    private final String APP_NAME = "R.Space";     // 경고창 제목


    /**
     * 생성자
     * @param context WebChromeClient를 호출한 Context
     */
    public CustomChrome(Context context){
        mContext = context;
    }

    /**
     * alert창 구현
     * @param view alert을 호출한 webview
     * @param url alert창 호출한 webview의 url
     * @param message alert창에 띄울 메시지
     * @param result javascript 결과
     * @return true:정상적으로 호출됨/false:정상적으로 호출되지 않음
     */
    @Override
    public boolean onJsAlert(WebView view, String url, String message, final android.webkit.JsResult result){
        if(mAlertDialog == null){
            mAlertDialog = new AlertDialog.Builder(mContext)
                    .setTitle(APP_NAME)
                    .setMessage(message)
                    .setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {
                            result.confirm();
                            mAlertDialog.dismiss();
                            mAlertDialog = null;
                        }
                    })
                    .setCancelable(false)
                    .create();
        }
        mAlertDialog.show();
        return true;
    }

    /**
     * confirm 창 구현
     * @param view confirm을 호출한 webview
     * @param url confirm창 호출한 webview의 url
     * @param message confirm창에 띄울 메시지
     * @param result javascript 결과
     * @return true:정상적으로 호출됨/false:정상적으로 호출되지 않음
     */
    @Override
    public boolean onJsConfirm(final WebView view,final String url, final String message, final android.webkit.JsResult result) {
        if(mAlertDialog == null){
            mAlertDialog = new AlertDialog.Builder(mContext)
                    .setTitle(APP_NAME)
                    .setMessage(message)
                    .setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {
                            result.confirm();
                            mAlertDialog.dismiss();
                            mAlertDialog = null;
                        }
                    })
                    .setNegativeButton(android.R.string.cancel,new DialogInterface.OnClickListener(){
                        public void onClick(DialogInterface dialog, int which) {
                            result.cancel();
                            mAlertDialog.dismiss();
                            mAlertDialog = null;
                        }
                    })
                    .setCancelable(false)
                    .create();
        }
        mAlertDialog.show();
        return true;

    }
}

 

  MainActivity

public class MainActivity extends AppCompatActivity {
    private WebView mWebView;
    
    ...

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

        mWebView = findViewById(R.id.webview);
        mWebView.setWebChromeClient(new CustomChrome(this));
        
        ...
    }
}

 

다음과 같이 CustomChrome 클래스를 생성해주고  MainActivity의 WebView에 설정해주면 아래와 같이 표시됨을 확인할 수 있습니다.

커스터마이즈 한 경우