Android splash screen xml

Делаем экран загрузки Android приложения правильно

Splash Screen (прим.: тут и далее — экран загрузки) просто отнимает ваше время, верно? Как Android разработчик, когда я вижу экран загрузки, я тут же представляю как некоторые плохие разработчики добавляют трехсекундную задержку в коде.

Я должен смотреть на какое-то изображение в течении нескольких секунд, и до тех пор я не могу использовать приложение. И я должен это делать каждый раз после запуска приложения. Я знаю какое приложение я запустил. Я знаю что оно делает. Просто позвольте мне использовать его!

Что рекомендует Google

Вы будете удивлены, узнав что сторонники Google используют Splash Screen. Это описано прямо вот тут, в спецификации к Material Design.

Так было не всегда. Google был против Splash Screen, и даже назвал его анти-паттерном.

Правильный Splash Screen

Я считаю, что Google не противоречит сам себе. Старый совет и новые рекомендации хорошо сочетаются. (Тем не менее, все-таки не очень хорошая идея использовать экран загрузки который отнимает время пользователя. Пожалуйста, не делайте так)

Однако, Android приложениям требуется некоторое количество времени для запуска, особенно при холодном запуске. Существует задержка которую вы не можете избежать. Вместо того чтобы показывать пустой экран, почему бы не показать пользователю что-то хорошее? Именно за этот подход Google и выступает. Не стоит тратить время пользователя, но не показывайте ему пустой, ненастроенный раздел приложения, когда он запускает его впервые.

Если вы посмотрите на последние обновления Google приложений, вы увидите подобный способ использования экрана загрузки. Например, взгляните на приложение YouTube:

Количество времени, которые вы тратите на просмотр Splash Screen, точно соответствует количеству времени, которое требуется приложению для запуска. При холодном запуске, это означает что Splash Screen будет виден дольше. А если приложение уже закэшировано, заставка исчезнет почти сразу.

Реализация Splash Screen

Реализация Splash Screen правильным способом немного отличается от того что вы можете себе приставить. Представление Splash Screen, который вы видите, должно быть готово немедленно, даже прежде чем вы можете раздуть (прим.: inflate) файл макета в вашей Splash Activity (прим.: Activity — активность, деятельность).

Поэтому мы не будем использовать файл макета. Вместо этого мы укажем фон нашего Splash Screen в фоне темы своей Activity. Для этого, сначала необходимо создать XML drawable в res/drawable.

Здесь я задал цвет фона и изображение.

Дальше, вы должны установить этот drawable в качестве фона для темы вашего Splash Screen Activity. Перейдите в файл styles.xml и добавьте новую тему для Splash Screen Activity:

В вашей новой SplashTheme установите в качестве фона ваш XML drawable. И установите эту тему в своей Splash Screen Activity в вашем AndroidManifest.xml:

И, наконец, ваш класс SplashActivity должен перенаправить вас в ваше основное Activity:

Обратите внимание, что вы не настраивает вид для SplashActivity. Представление берется непосредственно из темы. Когда вы задаете вид вашей Splash Screen Activity через тему, он доступен немедленно.

Если у вас есть файл макета для вашей Splash Activity, он будет показан только после того как ваше приложение будет полностью инициализировано, а это что очень поздно. Ведь мы хотим чтобы Splash Screen отображался только небольшой промежуток времени, до того как приложение будет инициализировано.

Делаем это правильно

Как только шаги выше завершены, вы получите Splash Screen реализованный правильным путем:

Вооруженные этим знанием, заставьте ваш Splash Screen работать правильно. Не тратьте время пользователей попусту, но дайте им то, на что им будет приятно смотреть пока они ждут.

Источник

Заставка

Запуск приложения Android занимает некоторое время, особенно при первом запуске приложения на устройстве. На экране-заставке может отображаться ход выполнения, или для обозначения фирменной символики.

Обзор

Запуск приложения Android занимает некоторое время, особенно во время первого запуска приложения на устройстве (иногда это называется холодный запуском). На экране-заставке может отображаться ход выполнения для пользователя или сведения о фирменной символике для обнаружения и продвижения приложения.

В этом руководством рассматривается один прием для реализации экрана-заставки в приложении Android. В нем рассматриваются следующие шаги.

Создание изображаемого ресурса для экрана-заставки.

Определение новой темы, которая будет отображать рисуемый ресурс.

Добавление нового действия в приложение, которое будет использоваться в качестве экрана-заставки, определенного темой, созданной на предыдущем шаге.

Требования

В этом учебнике предполагается, что приложение ориентировано на API Android уровня 21 или более поздней версии. в приложении также должны быть установлены пакеты xamarin. android. support. v4 и xamarin. android. support. версии 7. NuGet AppCompat , добавленные в проект.

Весь код и XML в этом разделе можно найти в примере проекта SplashScreen для этого руководством.

Реализация экрана-заставки

Самый быстрый способ отображения экрана-заставки — создать пользовательскую тему и применить ее к действию, которое покажет экран-заставку. Когда действие отображается, оно загружает тему и применяет рисуемый ресурс (на который ссылается тема) к фону действия. Такой подход позволяет избежать необходимости создавать файл макета.

Экран-заставка реализуется как действие, которое отображает нарисованную марку, выполняет инициализацию и запускает все задачи. После начальной загрузки приложения действие экрана-заставки запускает основное действие и удаляет себя из стека приложения.

Создание рисунка для экрана-заставки

На экране-заставке будет отображаться XML, отображаемый в фоновом режиме для действия заставки. Для вывода изображения необходимо использовать точечный рисунок (например, PNG или JPG).

Пример приложения определяет нарисованный, вызываемый splash_screen.xml. Для этого можно использовать список слоев для центрирования изображения экрана-заставки в приложении, как показано в следующем коде XML:

layer-list В данном случае изображение-заставка выравнивается по цвету фона, заданному @color/splash_background ресурсом. Образец приложения определяет этот цвет в файле Resources/Values/colors.xml :

Дополнительные сведения об Drawable объектах см. в Drawable .

Реализация темы

Чтобы создать пользовательскую тему для действия на экране-заставку, измените (или добавьте) значения файла/styles.xml и создайте новый элемент для заставки. Пример файла значений и style.xml показан ниже с именем мисеме. Splash:

Мисеме. Splash — очень Spartan — он объявляет фон окна, явно удаляет строку заголовка из окна и объявляет, что он находится в полноэкранном режиме. Если вы хотите создать экран-заставку, который эмулирует пользовательский интерфейс приложения до того, как действие будет расровнить первый макет, можно использовать windowContentOverlay вместо windowBackground в определении стиля. В этом случае необходимо также изменить splash_screen.xml нарисованной, чтобы она отображала ЭМУЛЯЦИЮ пользовательского интерфейса.

Создание действия-заставки

Теперь нам требуется новое действие для запуска Android, которое имеет образ заставки и выполняет любые задачи запуска. Следующий код является примером полной реализации экрана-заставки:

SplashActivity явно использует тему, созданную в предыдущем разделе, переопределяя тему приложения по умолчанию. Нет необходимости загружать макет в OnCreate , так как тема объявляет изображение, которое можно изобразить в качестве фона.

Важно установить NoHistory=true атрибут таким образом, чтобы действие было удалено из стека назад. Чтобы кнопка «назад» не отменила процесс запуска, можно также переопределить OnBackPressed и сделать это не так:

Работа по запуску выполняется асинхронно в OnResume . Это необходимо, чтобы при запуске не замедлить работу или задержать внешний вид экрана запуска. После завершения работы SplashActivity запустится MainActivity и пользователь может начать взаимодействие с приложением.

Это новое SplashActivity значение задается в качестве действия запуска для приложения путем присвоения MainLauncher атрибуту значения true . Так как SplashActivity теперь является действием запуска, необходимо изменить MainActivity.cs и удалить MainLauncher атрибут из MainActivity :

Альбомный режим

Экран-заставка, реализованный на предыдущих шагах, будет правильно отображаться в книжном и альбомном режиме. Однако в некоторых случаях необходимо иметь отдельные экраны-заставки для книжных и альбомных режимов (например, если изображение-заставка находится в полноэкранном режиме).

Чтобы добавить экран-заставку для альбомного режима, выполните следующие действия.

В папке Resources/Draw (ресурсы и нарисованная ) добавьте альбомную версию изображения экрана-заставки, которую вы хотите использовать. В этом примере splash_logo_land.png является альбомной версией эмблемы, которая использовалась в приведенных выше примерах (она использует белую букву вместо синего).

В папке Resources/Draw (ресурсы и нарисованная ) создайте альбомную версию рисунка, которая была определена ранее (например, splash_screen_land.xml). В этом файле задайте путь к точечному рисунку для альбомной версии изображения экрана-заставки. В следующем примере splash_screen_land.xml использует splash_logo_land.png:

Создайте папку » Resources/Values-Land «, если она еще не существует.

Добавьте файлы colors.xml и style.xml в значения-Land (они могут быть скопированы и изменены из существующих значений/colors.xml и файлов значений и style.xml ).

Измените значения-Land/style.xml так, чтобы в нем использовалась альбомная версия рисунка для . В этом примере используется splash_screen_land.xml :

Измените значения-Land/colors.xml , чтобы настроить цвета, которые будут использоваться в альбомной версии экрана-заставки. В этом примере цвет фона заставки меняется на синий для альбомного режима:

Выполните сборку и запуск приложения еще раз. Переворачивайте устройство в альбомный режим, пока экран-заставка все еще отображается. Экран-заставка изменится на альбомную версию:

Обратите внимание, что использование экранной заставки с альбомным режимом не всегда обеспечивает удобство работы. По умолчанию Android запускает приложение в книжной ориентации и переходит в альбомный режим, даже если устройство уже находится в альбомном режиме. В результате, если приложение запускается, когда устройство находится в альбомной ориентации, устройство ненадолго отображает портретный экран-заставку, а затем анимируется поворот с книжной страницы на альбомный экран-заставку. К сожалению, этот начальный переход на книжную ориентацию происходит даже при ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape указании флагов действия Splash. Лучший способ обойти это ограничение — создать одно изображение экрана-заставки, которое правильно визуализируется как в книжной, так и альбомной ориентации.

Итоги

В этом руководством обсуждался один из способов реализации экрана-заставки в приложении Xamarin. Android. а именно, применение пользовательской темы к действию запуска.

Источник

Meet the Jetpack Splashscreen API: a definitive guide for splash screens in Android

Splash screens, also called launch screens, are the screens shown by the app as it loads, during the app’s startup. They exist to provide a momentary brand exposure or improve the user experience by showing a preview of the app as it starts, which can reduce the user’s perceived load time.

Branded and preview splash screens as in Material Design docs

On many projects I’ve worked on, in addition to showing the splash screen, we had to animate the transition between splash and first app screen. Depending on the animation type and how we’re showing the first app views, we can have jank or a perceivable delay between the animations. So, we have to choose the right approach accordingly to the use case.

In this article you’ll see how animated splash screens are created in Android and how this should be done now that we have Jetpack’s Core SplashScreen, which backports Android 12 SplashScreen API back to Android Marshmallow (API 23).

Suppose we have to implement the following branded splash screen for an Android app:

Note that we start with a brand image, fade it out and then begin a slide down transition in the start screen. This use case will let us exercise multiple techniques in splash screen display, despite having simple transitions in the design. The animations must run sequentially and a long delay or jank between them is not acceptable.

Simple things first

Let’s start simple: showing what happens in Android when you don’t set up a splash screen. After creating an ‘Empty Activity Project’ in Android Studio, the main activity layout was adjusted to have the same design as the start screen reference. Nothing was made regarding the splash screen.
This is how it’s displayed up to API level 30:

As we didn’t add nothing to set up a splash screen yet, a black screen is shown while the main activity is loading.

Important: On an Android 12, a static branded splash screen was automatically displayed, using a centered app icon without any effort at all. Nice improvement!

Automatic static splash screen on Android 12

To repeat this step, clone the following branch in Github’s repo: github.com/tgloureiro/animated_splashscreen_android/tree/step1_no_splash

Showing a splash screen (Old way)

The traditional way of defining a splash screen in Android, is setting a window background to the the activity being launched. As the content is not attached to it yet, the window background is fully visible while the activity is loading. After it loads, content view is set inside the onCreate() method and it’s views starts being rendered.

Therefore, to show the splash screen we have to set up the window background in the theme being used by the activity:

Exit fullscreen mode

If we need the splash screen to have a logo centered over some background drawable, we can use a LayerDrawable , that allows us to specify a list of drawables that is drawn in the order they’re declared. In this example, we have a flat colored background with the logo centered in the screen. The use of android:gravity informs the platform to center the second drawable in the middle of the screen.

Exit fullscreen mode

For the splash background, we can use any type of drawable. For this example, we’ll use a solid color. The color can be specified directly in the layer list, instead of pointing to another Drawable as we did here

Exit fullscreen mode

This is the old way of doing a splash screen and it’s recommended up to API Level 22, the ones not covered by the new Core Splash Screen API.

Fading out the logo

There’s an easy way of implementing the splash screen’s fade out after activity loading: we can have the illusion of a logo fade out making a cross-fade between the splash screen and the screen background without the logo. We can do it using a TransitionDrawable . A transition drawable allows us to define two drawable layers and easily cross-fade between them using the startTransition(int) method.

Exit fullscreen mode

We have to perform the following tasks:

1. Check if the splash screen was not displayed, otherwise we just set content view
2. Get a reference to the window background and start the crossfade transition
3. Launch a coroutine and after waiting for the animation duration, set the content view

Exit fullscreen mode

Check how it is rendered in a phone:

To repeat this step, clone the following branch in Github’s repo: github.com/tgloureiro/animated_splashscreen_android/tree/step2_fade_out_splash

Showing the splash screen using Core SplashScreen API

The Core Splash Screen API provides a way of defining the elements we have in the Splash Screen. To setup a splash screen, you have to do the following steps:

1- Setup a style with Theme.SplashScreen as a parent, in themes.xml

Exit fullscreen mode

2- Setup windowSplashScreenBackground, windowSplashScreenAnimatedIcon as the background and the centered logo in the screen

Exit fullscreen mode

3- Setup the theme to be displayed in activity after the splash screen

Exit fullscreen mode

4- In build.gradle, change your compileSdkVersion to «android-S» (to be changed to apiLevel 31 with the release of Android 12) and include the library in dependencies.

Exit fullscreen mode

5- Finally, in the MainActivity (or the entry point for your app) you just have to call installSplashScreen() before setContentView()

Exit fullscreen mode

Very straightforward, huh? With these simple steps you’ll be showing your splash screen from API23 to Android12.

Core SplashScreen API + Animations

In Android 12, the logo itself can be animated using AnimationDrawable or AnimatedVector . The AnimationDrawable works similar to a classical animation which you have to represent
frame by frame and duration for each one. AnimatedVectorDrawable let’s you describe your animation that will be interpolated by the framework.

The backported version of the Core Splash Screen API doesn’t support animations on the logo yet. But we can implement a fadeout animation after splash’s exhibition and I’ll show how to implement it using this API.

We have to perform the following tasks:

1. Check if the splash screen was not displayed, otherwise we manually set the theme and the content view
2. Install the splash screen and listen for the ExitAnimation event
3. Get a reference to the the logo, fade it out, remove the splash and set content view after it finishes

Exit fullscreen mode

Check how it is rendered in a phone:

To repeat this step, clone the following branch in Github’s repo: github.com/tgloureiro/animated_splashscreen_android/tree/step3_core_splash_api_fade_out

Showing the splash screen using Core SplashScreen API with Jetpack Compose

The splash steps are pretty much the same, except we use Compose’s setContent<> instead of setContentView(int) . That’s it.

The challenge here is to replace the start screen animation, originally made using MotionLayout, with one made using Compose. We can use an initially invisible AnimatedVisibility Composable and make it visible in the first pass using a LaunchedEffect. Making it visible will start the animation as described in the widget.

Exit fullscreen mode

Check how it is rendered in a phone:

To repeat this step, clone the following branch in Github’s repo: github.com/tgloureiro/animated_splashscreen_android/tree/step4_core_splash_jetpack

Final thoughts

The new Jetpack Core Splashscreen API provides a default way to create splash screens back to API23, with useful mechanisms we can use to know whether the loading ended and a way to continue showing the splash if we want to do additional work after starting the activity. The results are similar to what we had before, with the benefit of reduced boilerplate and compatibility with new Android versions.

Источник