Search code examples
androidandroid-layoutsplash-screen

Android - Same drawable included as windowBackground not the same size when in layout


I'm creating a splash screen with an image and am going to add an animation. So I'm starting with this activity:

            <activity
                android:name=".activities.SplashActivity"
                android:label="@string/app_name"
                android:theme="@style/SplashTheme">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>

This uses the following theme:

        <style name="SplashTheme" parent="Theme.AppCompat.Light">
            <item name="android:windowBackground">@drawable/loading_page_4</item>
        </style>

I am using this to bring the image up immediately while the layout renders. Then in the onCreate method of the activity I set the following layout file:

    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:foreground="@drawable/loading_page_4"
        android:id="@+id/splash_color_layout" >
    </FrameLayout>

For some reason, despite being the same drawable, the image shows up slightly differently (It shifts down slightly and may even slightly resize) when the page gets rendered. Is there a way to seamlessly transition from the theme background to the rendered layout using the same drawable?

Here is the activity class as well:

        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            // Splash screen view
            setContentView(R.layout.activity_splash);
        }
     }

Solution

  • So, the difference here is that the height of your Activity is going to be different from the height of the Window in which it is displayed. The Activity height is going to be shorter because of system chrome like the status bar and the navigation bar (on devices with software navigation keys).

    In order to achieve the effect that you want you have two options:

    1) Do the math to calculate the "true middle" of the window using the dimensions of the getWindow().getDecorView()

    2) (might only work on 21+) set the Activity to fullscreen with a stable layout:

    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
    
    • This will make your content the same size as the window.

    3) Wait until the layout to fade in the logo view with an alpha animation instead of putting it in the window background

    • The delay probably won't hurt anything unless your designer really complains...