{"id":29233,"date":"2017-01-30T13:04:22","date_gmt":"2017-01-30T21:04:22","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=29233"},"modified":"2019-03-25T19:43:21","modified_gmt":"2019-03-26T03:43:21","slug":"round-launcher-icons-in-android-7-1","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/round-launcher-icons-in-android-7-1\/","title":{"rendered":"Round Launcher Icons in Android 7.1"},"content":{"rendered":"<p>\t\t\t\tCircular launcher icons have become standard since the introduction of Android Nougat 7.1 and the new Pixel Launcher. Google has even introduced a new API enabling developers to specify a round launcher icon for launchers that support it, which is great if you have strong branding and only want a round icon to show up to match the launcher. Let&#8217;s look at a few examples of updated icons that have a strong brand and have updated to a new round icon for Nouget 7.1:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Icons.png\" alt=\"icons\" width=\"686\" height=\"189\" class=\"aligncenter size-full wp-image-29235\" \/><\/p>\n<p>Some icons are placed inside of a white circle with a small drop shadow, while others are enlarged to show off more detail. Your round icon isn&#8217;t restricted to being an absolute circle, as you can see in the calculator example. Integrating the new round icons in your app ensures that your apps are consistent with the majority of applications already installed on a user&#8217;s device and allows you to keep your existing icon on older devices. Best of all, it only takes a few minutes to get set up.<\/p>\n<h2>Create Round Launcher Icons<\/h2>\n<p>The <a href=\"https:\/\/romannurik.github.io\/AndroidAssetStudio\/\" target=\"_blank\">Android Asset Studio<\/a> is packed full of goodies for developers, including the ability create icons for their action bar, tabs, notifications, and launcher icons that are output at the correct resolution for each density. First, let&#8217;s head over to the <a href=\"https:\/\/romannurik.github.io\/AndroidAssetStudio\/icons-launcher.html\" target=\"_blank\">Launcher Icon Generator<\/a>, upload our existing artwork, and select the Circle shape for our new round icon. I&#8217;ve selected a matching blue background and will enlarge my icon by 5% to make room for the full icon. <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Pasted-image-at-2017_01_30-10_42-AM.png\" alt=\"Pasted image at 2017_01_30 10_42 AM\" width=\"922\" height=\"865\" class=\"aligncenter size-full wp-image-29703\" \/><\/p>\n<p>Next, click &#8220;Download .ZIP&#8221; for your new icon, which can be extracted and added to the <strong>mipmap<\/strong> folder under Resources:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/NewIconsInResources1.png\" alt=\"NewIconsInResources\" width=\"265\" height=\"442\" class=\"aligncenter size-full wp-image-29704\" \/><\/p>\n<h2>Target Android API 25<\/h2>\n<p>To be able to add round icons to our Android Manifest, we need to make sure that we&#8217;re a running a build of Xamarin that support Android 7.1 (<a href=\"https:\/\/blog.xamarin.com\/android-7-1-developer-preview-now-available\/\" target=\"_blank\">see post here<\/a>) and that we&#8217;ve updated our Android compile and target API settings to API 25 in the project settings:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/AppSettings1.png\" alt=\"AppSettings\" width=\"386\" height=\"197\" class=\"aligncenter size-full wp-image-29705\" \/><\/p>\n<h2>Update Activity Attributes<\/h2>\n<p>We must locate our Activity that has the MainLauncher property set to <em>true<\/em>. This is usually the MainActivity or a custom SplashActivity like the one I have in my app. Alongside the MainLauncher attribute are others, such as the label and normal icon, that are displayed. We can simply add another attribute with the name <b>RoundIcon<\/b> and set it to the location of the round launcher mipmap. Here&#8217;s what my final Activity attribute looks like:<\/p>\n<pre class=\"theme:vs2012 lang:csharp decode:true\">\r\n[Activity(Label = \"Scoreboard\", \r\n        Icon = \"@mipmap\/ic_launcher\", \r\n        RoundIcon=\"@mipmap\/ic_round_launcher\",\r\n        Theme = \"@style\/SplashTheme\", \r\n        MainLauncher = true)]\r\npublic class SplashActivity : AppCompatActivity\r\n{\r\n}\r\n<\/pre>\n<p>And here&#8217;s what the main launcher screens look side-by-side:\n<img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/NotRound.png\" alt=\"notround\" width=\"722\" height=\"656\" class=\"aligncenter size-full wp-image-29239\" \/><\/p>\n<h2>Learn More<\/h2>\n<p>Be sure to read the Google <a href=\"https:\/\/developer.android.com\/about\/versions\/nougat\/android-7.1.html#circular-icons\" target=\"_blank\">documentation<\/a> to learn more about the features in Android 7.1. You may also want to visit the <a href=\"https:\/\/material.io\/guidelines\/style\/icons.html#icons-product-icons\" target=\"_blank\">Material Design guidelines<\/a> for information on design and size when designing app icons.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Circular launcher icons have become standard since the introduction of Android Nougat 7.1 and the new Pixel Launcher. Google has even introduced a new API enabling developers to specify a round launcher icon for launchers that support it, which is great if you have strong branding and only want a round icon to show up to match the launcher. <\/p>\n","protected":false},"author":544,"featured_media":41047,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[313,2],"tags":[5,1389,1390,1391,4],"class_list":["post-29233","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-developers","tag-android","tag-design","tag-icons","tag-material-design","tag-xamarin-platform"],"acf":[],"blog_post_summary":"<p>Circular launcher icons have become standard since the introduction of Android Nougat 7.1 and the new Pixel Launcher. Google has even introduced a new API enabling developers to specify a round launcher icon for launchers that support it, which is great if you have strong branding and only want a round icon to show up to match the launcher. <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/29233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/544"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=29233"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/29233\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/41047"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=29233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=29233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=29233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}