{"id":846,"date":"2018-09-14T08:45:30","date_gmt":"2018-09-14T08:45:30","guid":{"rendered":"http:\/\/www.inwizards.com\/blog\/?p=846"},"modified":"2024-08-20T08:06:58","modified_gmt":"2024-08-20T08:06:58","slug":"how-can-you-create-a-splash-screen-in-xamarin-forms","status":"publish","type":"post","link":"https:\/\/www.inwizards.com\/blog\/how-can-you-create-a-splash-screen-in-xamarin-forms\/","title":{"rendered":"How can you create a splash screen in Xamarin forms?"},"content":{"rendered":"<p><strong>Introduction &#8211; A splash<\/strong> screen is an image or Splash Screen is a better way to promote your application and gives people a warm welcome at the start or page that shows up when you first load your app. When the application is initializing, Xamarin Forms do not have any functionality to add a splash screen. You should do this with the platform.<\/p>\n<p><strong>Need an expert <a href=\"https:\/\/www.inwizards.com\/technologies\/xamarin-app-development-services.php\">Xamarin App Development Services<\/a>? Consult Inwizards Now!<\/strong><\/p>\n<p>Screen: Splash Screen<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-847 size-medium\" src=\"https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/1-2.png?resize=146%2C300&#038;ssl=1\" alt=\"splash screen in Xamarin forms\" width=\"146\" height=\"300\" srcset=\"https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/1-2.png?resize=146%2C300&amp;ssl=1 146w, https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/1-2.png?w=209&amp;ssl=1 209w\" sizes=\"(max-width: 146px) 100vw, 146px\" data-recalc-dims=\"1\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Creating the Project<\/h2>\n<p>Open Visual Studio Community 2017 and click New Project. Select Visual C# &gt;&gt; Cross-Platform template &gt;&gt; Blank App (Xamarin.Forms Portable).<\/p>\n<p><strong>Step 1. Go in the Android project.<\/strong><br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-1542270097115731\" data-ad-slot=\"5976953901\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p>Create new class SplashScreen.cs<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-848 size-medium\" src=\"https:\/\/i0.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/2-2.png?resize=192%2C300&#038;ssl=1\" alt=\"SplashScreen.cs\" width=\"192\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/2-2.png?resize=192%2C300&amp;ssl=1 192w, https:\/\/i0.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/2-2.png?w=266&amp;ssl=1 266w\" sizes=\"(max-width: 192px) 100vw, 192px\" data-recalc-dims=\"1\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step. 2 Add a some code in SplashScreen.cs .<\/strong><\/p>\n<p>using Android.App;<br \/>\nusing Android.Content;<br \/>\nusing Android.Content.PM;<br \/>\nusing Android.OS;<br \/>\nusing Android.Runtime;<br \/>\nusing Android.Views;<br \/>\nusing Android.Widget;<\/p>\n<p>namespace LetsCookApp.Droid<br \/>\n{<br \/>\n[Activity(Label = &#8220;App2&#8221;, MainLauncher = true, NoHistory = true, Theme = &#8220;@style\/Theme.Splash&#8221;, ConfigurationChanges = ConfigChanges.ScreenSize)]<\/p>\n<p>public class SplashScreen : Activity<br \/>\n{<br \/>\nprotected override void OnCreate(Bundle bundle)<br \/>\n{<br \/>\nbase.OnCreate(bundle);<br \/>\n\/\/ Simulate a long loading process on app startup.<br \/>\nStartActivity(typeof(MainActivity));<br \/>\nFinish();<br \/>\n}<br \/>\n}<br \/>\n}<\/p>\n<p><strong>Step 3. Go in the Android project.<\/strong><\/p>\n<p>Edit in MainActivity.cs file<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-849\" src=\"https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/3.png?resize=469%2C150&#038;ssl=1\" alt=\"Go in the Android project\" width=\"469\" height=\"150\" srcset=\"https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/3.png?resize=300%2C96&amp;ssl=1 300w, https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/3.png?resize=768%2C246&amp;ssl=1 768w, https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/3.png?resize=1024%2C329&amp;ssl=1 1024w, https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/3.png?w=1365&amp;ssl=1 1365w\" sizes=\"(max-width: 469px) 100vw, 469px\" data-recalc-dims=\"1\" \/><\/p>\n<p>In App default MainLauncher = true, chamge to MainLauncher = false. Show in above screenshort.<\/p>\n<p><strong>Step 4. Add some code in the Styles.xml file.<\/strong><\/p>\n<p>In Android project.<\/p>\n<p>=&gt; App2.Droid &gt;&gt; Resources &gt;&gt; values &gt;&gt; c<\/p>\n<p><strong>Figure 1: <\/strong><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-850 size-full\" src=\"https:\/\/i2.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/4.png?resize=228%2C269&#038;ssl=1\" alt=\"styles.xml\" width=\"228\" height=\"269\" data-recalc-dims=\"1\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Figure 2: In styles.xml file<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-851\" src=\"https:\/\/i2.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/5.png?resize=370%2C221&#038;ssl=1\" alt=\"In styles.xml file\" width=\"370\" height=\"221\" srcset=\"https:\/\/i2.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/5.png?resize=300%2C179&amp;ssl=1 300w, https:\/\/i2.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/5.png?resize=768%2C459&amp;ssl=1 768w, https:\/\/i2.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/5.png?w=941&amp;ssl=1 941w\" sizes=\"(max-width: 370px) 100vw, 370px\" data-recalc-dims=\"1\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 5 . Add some code in styles.xml above in screen.<\/strong><\/p>\n<p>&lt;style name=&#8221;Theme.Splash&#8221; parent=&#8221;android:Theme&#8221;&gt;<br \/>\n&lt;item name=&#8221;android:windowBackground&#8221;&gt;@drawable\/icon&lt;\/item&gt;<br \/>\n&lt;item name=&#8221;android:windowNoTitle&#8221;&gt;true&lt;\/item&gt;<br \/>\n&lt;item name=&#8221;android:windowIsTranslucent&#8221;&gt;false&lt;\/item&gt;<br \/>\n&lt;item name=&#8221;android:windowIsFloating&#8221;&gt;false&lt;\/item&gt;<br \/>\n&lt;item name=&#8221;android:backgroundDimEnabled&#8221;&gt;true&lt;\/item&gt;<br \/>\n&lt;\/style&gt;<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-1542270097115731\" data-ad-slot=\"5976953901\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p>In the above screen line number 2 ( @drawable \/ icon) in place of icon you can change and set<\/p>\n<p>&#8220;your screen name&#8221; Ex:- splash.png<\/p>\n<p><strong>Step 6. Create a splash screen image in the following sizes.\u00a0<\/strong><\/p>\n<p>MDPI is = 320x480px<br \/>\nXHDPI is 2 x MDPI = 640x960px<br \/>\nXXHDPI is 3 x MDPI = 960x1440px<br \/>\nXXXHDPI is 4 x MDPI = 1280x1920px<\/p>\n<p>Hopefully, this will help you to understand and we have successfully created a Xamarin. Forms splash screen. If you are looking forward to <strong><a href=\"https:\/\/www.inwizards.com\/hire-xamarin-developers.php\">Hire Xamarin Developers<\/a>. Consult Inwizards Now!<\/strong><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction &#8211; A splash screen is an image or Splash Screen is a better way to promote your application and gives people a warm welcome at the start or page that shows up when you first load your app. When<\/p>\n","protected":false},"author":1,"featured_media":852,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"spay_email":""},"categories":[1,91],"tags":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/splashscreen-01.png?fit=700%2C430&ssl=1","_links":{"self":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts\/846"}],"collection":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/comments?post=846"}],"version-history":[{"count":10,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts\/846\/revisions"}],"predecessor-version":[{"id":3258,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts\/846\/revisions\/3258"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/media\/852"}],"wp:attachment":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/media?parent=846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/categories?post=846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/tags?post=846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}