Xamarin forms android splash screen

Best way to create a splash screen in Xamarin.Forms Android project

It is vital for every mobile app to have some sort of indication of the fact that the app has been started and it’s loading the content. Ideally, the waiting time would be reduced to 0 and user would see the landing page of the app straight after hitting the app’s icon.

Mikolaj Kieres

Mobile development adventurer

More posts by Mikolaj Kieres.

Mikolaj Kieres

It is vital for every mobile app to have some sort of indication of the fact that the app has been started and it’s loading the content. Ideally, the waiting time would be reduced to 0 and user would see the landing page of the app straight after hitting the app’s icon. The reality is, that there’s always a bit of time where things need to be initialized before they can be shown. That’s exactly where the splash screen comes into play.

The above is especially true with the Xamarin.Forms. Yes, we all have whinged about it at some point. Unfortunately, there’s not much you can do about the app start times besides trying to turn on the AOT and giving a shot any of the 5 ways described in the blog post by Xamarin.Forms PM David Ortinau to boost these values. Even if you succeed with any of the above and the app will load faster, it will still need some time to fully load and show user the content. Meaning, that you will require a splash screen.

Implementation

To show the splash screen we will use the Theme property of the Activity attribute. We will need to use the Activity that’s marked as the MainLauncher — usually it will be the MainActivity . The initial code for the MainActivity will usually look like this:

In the above code you can see that we’re assigning @style/MainTheme to the Theme property of the Activity attribute. This means that the theme of this activity will be whatever style is defined in your Resource/values/styles.xml file under the MainTheme key. There’s no problem with that, besides the fact that currently when launching the app, you will get an empty screen with a background color of whatever is specified for the android:windowBackground property. If you haven’t set it in your MainTheme style, then it will most likely default to white.

See how the launch of the app looks like when the android:windowBackground is set to black and the background of the landing page of the app to white. I’m deliberately setting these as different colors to show how long the splash screen is visible to the user, before the actual page is loaded.

Now, let’s update this boring black splash screen to include a logo in the middle of it.

We will start from creating a splash screen theme in the styles.xml file. It will be a separate style from the already existing ones.

Few things to notice here:

• The name of the style is Theme.Splash , we will set it later as the Theme on the Activity attribute
• We’re inheriting from the Theme.AppCompat.NoActionBar theme and we’re setting the windowNoTitle property to true. With these two we’re sure that we won’t have the action bar and the title of the activity showing on the screen
• Remember to define colorPrimary and colorPrimaryDark as these will be responsible to set the the color of the app bar. Read more about it here and here.
• Setting the android:windowBackground property to a drawable that’s defined in a Resources/drawable/splash_screen.xml file

The splash screen drawable code is very simple,

it defines two things. First is the background color @color/splash_screen and the second is a bitmap with an @drawable/logo image set as its source. The splash screen color is defined in the Resource/values/colors.xml file

The logo file has been included in the project as an AndroidResource in the Resources/drawable folder

Refer to the official docs for more information on why the splash screen drawable is structured in this particular way.

Once we’re done with the above then we need to go to our MainActivity and set the Theme.Splash as the new value for the Theme property in the Activity attribute.

The last thing to do after that is to update the activity Theme to the old MainTheme , with all the goodies that you need from your custom theme. Do it by invoking SetTheme(Resource.Style.MainTheme) method in the OnCreate method.

The final result is as follows:

The code for the above can be found in this GitHub repo

Источник

Create Splash Screens on Xamarin Forms: The right way!

Nov 14, 2017 · 4 min read

You wanted to learn Xamarin Forms to write code once for both Android and iOS, unfortunatly not today, not for making splash screens. It’s not too complicated though, so let’s get started!

How to make splash screen for Xamarin.Android

Under your .Droid project right click Resources->Drawable and click Add Files… to import your splash screen photo. Preferebly a logo of your app.

Tip: Remember the name, you will need to use the same exact name for your .iOS project if you want it to work for iOS. For our example we called it logo_splash.png

Under your .D r oid project right click Resources->Drawable and click Add New File and select a XML file format, name the file splash_background

Now paste this code in your new file and save it, but be sure to replace [YOUR_IMAGE_FILE_NAME_HERE] with your actual photo name.

Note: Pasting the above code will include “” quotes your editor cannot understand, so replace them by retyping the quotes “”

Open Resources->values->styles.xml and paste the following code inside the tag

Note: Pasting the above code will include “” quotes your editor cannot understand, so replace them by retyping the quotes “”

Under your .Droid project open MainActivity.cs and change your theme to “@style/MyTheme.Splash”

Now build your app and you should see your splash screen appear!

Note: The splash screen will always appear as a background for every new screen we create on the app. To get rid of it just set the background color of your or whatever layout is being used.

How to make splash screen for Xamarin.iOS

Under your .iOS project open Assets.xcassets and right click the column to click New Image Set

Drag your photo into the 2x box. Click on your file on the left side and rename your asset by pressing enter on the keyboard. We called ours logo_splash_screen

Tip: Remember the name, you will need to use the same exact name for your .Droid project if you want it to work for Android

Under your cross platform project open LaunchScreen.storyboard.

On the rght hand side under Toolbox, search for an ImageView. Then drag it to the center of the story board.

On the bottom right corner under Properties pane assign our ImageView the splash screen image. We can select an aspect fit.

Time to do our contstraints! Double click the ImageView so we go on contraint selection mode

Click on the center square and drag it to the top horizontal dotted line. When the dotted line becomes blue then let go.

Click on the center square and drag it to the left vertical dotted line. When the dotted line becomes blue then let go.

Now right click on the | — | looking icon on the bottom of the ImageView and click Width

Right click the I looking icon on the right side of the ImageView and click Height

Источник

Заставка

Запуск приложения 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. а именно, применение пользовательской темы к действию запуска.

Источник