Fullscreen App With DisplayCutout

Question

How do you make an app with an actual fullscreen capabilities, that has the layout to be rendered underneath the notch?

Here's what I want:

Here's the code of what I've tried:

class MainActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
//            window.addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN)

            val attrib = window.attributes
            attrib.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS

            layout_main.setOnApplyWindowInsetsListener { _, windowInsets ->
                val inset = windowInsets.displayCutout
                Log.d("Tag", "Inset: $inset")
                windowInsets
            }
        }
    }
}

The layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layout_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#3000FFFF"
    android:fitsSystemWindows="true">

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#FFFF0000"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#FF00FF00"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#FF0000FF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#FFFF00"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

The style:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>

    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

Here's the Android Manifest:

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

    <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="com.app.testandroidp.MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

Here's the result that I've gotten so far:

I've tried setting different themes, setting the fullscreen flag in XML / Kotlin, setting the resizable activity in manifest, but the activity just won't get rendered under the notch.

For reference, this is the project's source code: https://gitlab.com/alvin.rusli/AndroidPTest

Solution 1

I finally found out why. For some strange reason, the application won't enter the if condition:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
    // It never gets here
}

I removed that if condition and the activity finally goes fullscreen correctly.

---

Here are the bare minimum codes required to render the activity fullscreen.

Activity:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // or add <item name="android:windowTranslucentStatus">true</item> in the theme
        window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)

        val attrib = window.attributes
        attrib.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
    }
}

Styles:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <!-- Adding fullscreen will just hide the status bar -->
    <!-- <item name="android:windowFullscreen">true</item> -->
</style>

Solution 2

Set these properties in your theme :

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

Solution 3

I tried lot's of things but didn't get any success, then I try the following code and it's working fine.

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            getWindow().getAttributes().layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
        }

      ---
    }

I hope it's helpful.

Solution 4

if nothing works then try this one once

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P){
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
                WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
    }

Solution 5

I`m having same problem while developing App for Notch Device, i cater this issue by defining the theme style for android P devices and set the mode like default,shortEdges,never mode.

Step 1: Create a new values-v28 folder in your res directory and copy the default styles.xml file into it.

Step 2: In the values-28 variant of the styles.xml file, go to your Activity’s theme or create a new one if you’ve been using the default one, and set this attribute:

<style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    shortEdges
  </item>
</style>

That’s all you have to do to get a more immersive experience in your app and avoid letterboxing by making the app’s window render on either side areas of the notch.

Here is the link to learn more about Developing Compatible App for Notch Devices. Making Notch Friendly Apps

View more solutions