Problem Solved 3: Android Full Screen View + Translucent + ScrollView + AdjustResize + Keyboard

A few days back I encountered with the requirement of designing full-screen view in Android. Meaning the screen should not have any color for status bar (i.e transparent), only icon should be made visible. Making this possible took sufficient time for me.

Screen shot of Uber App

In the context of Android, it is called Translucent. Basically, I want to make the screen Translucent but there are some added complexities in doing so such Scollview/NestScrollView and Keyboard are part of the screen.

Then I started looking on web what best I can do for this, found so many solutions and advises from Stackoverflow such as

• Make status bar color transparent i.e primaryDark color
• Use Theme.AppCompat.Light.NoActionBar theme
• set container Layout as android:fitsSystemWindows=”true”
• Use android:windowSoftInputMode=”adjustResize”

etc etc

Most of them worked for me, but I always encounter one or another blocker. My requirements are

• screen should be Translucent
• have form items such as EditText, Button
• Screen should resize when Keyboard opens up

Making the screen Translucent worked for me easily but making this screen auto adjust when keyboard opens up was a bit tricky as I was using NestedScrollview to handle it. So the when keyboard opens up the top part of the screen become Scrollable to allow the user to use EditText efficiently keeping soft-keyboard open.

I will not talk about what all I tried, it better to see some the code which worked for me ultimately.

First edit your Theme in style.xml and make screen Translucent

<style name="ThemeFullSCreen" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary_v2</item>
    <item name="colorPrimaryDark">@color/primarydark_v2</item>
    <item name="colorAccent">@color/accent_v2</item>
    <item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/transparent</item>
    <item name="android:windowEnableSplitTouch">false</item>
    <item name="android:windowTranslucentStatus" tools:targetApi="kitkat">true</item>
    <item name="android:windowTranslucentNavigation" tools:targetApi="kitkat">true</item>
</style>

Make activity adjustResize in Manifest and also apply the created theme

<activity
    android:name=".views.MyActivity"
    android:screenOrientation="portrait"
    android:theme="@style/ThemeFullSCreen"
    android:windowSoftInputMode="adjustResize" />

Now make some adjustment in your layout, keep NestedScrollView/ScrollView inside a container like LinearLayout or RelativeLayout and set android:fitsSystemWindows=”true” like

<RelativeLayout 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:ignore="MissingPrefix">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/image_header_movebw"
    android:fitsSystemWindows="true">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none">

Once all this done, some more work in your Activity to ajust window properties

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Window window = getWindow();
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    window.setStatusBarColor(Color.TRANSPARENT);
}

So here it is, the screen is called Full screen/Translucent with ScrollView containing keyboard. May be guessed it already, it works only for API level 21 and above.

I tried almost a day to achieve this implementation. If you are trying for a particular behavior and got stuck please comment below, will try my best to answer it. If this blog helped you, please hit the clap ;-)

References:

Using windowTranslucentStatus with CollapsingToolbarLayout

Why would I want to fitsSystemWindows?