CODEWITHSUNDEEP
androidcsscordova
blacktide
blacktide

Reputation: 12076

Remove green border around Android application

I am currently having an issue with an Android application built with Cordova having a green frame around the body of the application:

Green border issue

It appears to be due to the web container being in focus, as the green outline disappears when an alert is shown.

This green border does not appear on the iOS version of the application, as well as in the browser or when inspecting the emulator frame using chrome://inspect.

I've tried multiple CSS fixes to try to remove this border such as:

* {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  border: 0px solid #000;
}

As well as disabled all accessibility settings on the devices, but to no avail.

Additional details:

Does anyone know how this issue can be resolved?

Upvotes: 15

Views: 12962

Answers (4)

khayam
khayam

Reputation: 11

  1. remove android platform

  2. Add this item

<item name="android:defaultFocusHighlightEnabled">false</item>

in those two files below

\node_modules\cordova-android\spec\fixtures\android_studio_project\app\src\main\res\values\styles.xml

and

\node_modules\cordova-android\test\app\src\main\res\values\styles.xml
  1. add android platform

Upvotes: 0

Vinoth K
Vinoth K

Reputation: 475

This is because isInTouchMode is true in Cordova webview (specific to Oreo).

Solution

  • Go to CordovaLib/src/org/apache/cordova/CordovaActivity.java

  • Find appView.getView().requestFocusFromTouch();

  • Replace the above line with the following:

    if (Build.VERSION.SDK_INT < 26) {
    appView.getView().requestFocusFromTouch();
}

Upvotes: 0

Manojvirat457
Manojvirat457

Reputation: 200

In your

Android/App/src/main/res/values/styles.xml

Add this item, Inside the style tag

<item name="android:defaultFocusHighlightEnabled">false</item>

Upvotes: 14

blacktide
blacktide

Reputation: 12076

I was able to resolve this issue by adding the following line to the init method of the CordovaWebView Java class under CordovaLib/src/org/apache/cordova/:

this.setDefaultFocusHighlightEnabled(false);

Upvotes: 6

Related Questions