1 page.title=Your Branding 2 page.tags=branding,logo 3 @jd:body 4 5 <p>Following Android design patterns doesn't mean that your app has to look the same as 6 everyone else's. In Android, your app can shine as an extension of your brand. </p> 7 8 <h2 id="color">Color</h2> 9 10 <p>Use your brand color for accent by overriding the Android framework's default blue in UI elements like checkboxes, progress bars, radio buttons, sliders, tabs, and scroll indicators.</p> 11 12 <p>Look for opportunities to use high-contrast color for emphasis, for example, as the background color of the action bar or a primary button. But don't go overboard: not all actions are equal, so use it only for the one or two most important things.</p> 13 <p>When customizing colors, <a href="{@docRoot}design/style/touch-feedback.html">touch feedback</a> 14 should be subtle — just slightly lighter or darker than the untouched color.</p> 15 16 <div class="vspace size-1"> </div> 17 18 <div class="layout-content-row"> 19 <div class="layout-content-col span-6"> 20 <img src="{@docRoot}design/media/branding_wallet.png" style="width:94%"> 21 <div class="figure-caption"> 22 The four colors of the Google Wallet logo provide a playful accent to the four dots 23 that appear as the user enters a PIN. 24 </div> 25 </div> 26 <div class="layout-content-col span-6"> 27 <img src="{@docRoot}design/media/branding_googlemusic.png" style="width:94%"> 28 <div class="figure-caption"> 29 The Google Play Music app has an orange theme color, which is used for emphasis 30 in the action bar and for accent in the selected tab, scroll indicator, and 31 hyperlinks. 32 </div> 33 </div> 34 </div> 35 36 <h2 id="logo">Logo</h2> 37 38 <p>Your app's <a href="{@docRoot}design/style/iconography.html#launcher">launcher icon</a> is 39 a key place to incorporate your logo, because it's what 40 users will look for and touch to begin using your app. You can carry the launcher 41 icon through to all the screens in your app by showing it in the 42 <a href="{@docRoot}design/patterns/actionbar.html">action bar</a> along 43 with the name of the app.</p> 44 45 <p>Another approach to consider is to have your logo take the place of the launcher icon 46 and app name in the action bar.</p> 47 48 49 <div class="vspace size-1"> </div> 50 51 <div class="layout-content-row"> 52 <div class="layout-content-col span-6" style="padding-top:24px;"> 53 <img src="{@docRoot}design/media/branding_launcher_icon.png" style="width:60px;float:left;padding-right:1em;"> 54 <div class="figure-caption" style="width:290px;margin-left:20px;"> 55 Google+ reinforces its brand by carrying its launcher icon through to the action bar. 56 </div> 57 <img src="{@docRoot}design/media/branding_logo_icon_action_bar.png" style="width:320px;float:left;padding-right:1em;"> 58 </div> 59 <div class="layout-content-col span-6"> 60 <img src="{@docRoot}design/media/yourbranding_app.png" style="width:320px;"> 61 <div class="figure-caption" style="width:320px;"> 62 Example of a the logo in the action bar. This works well in cases where the brand's logo matches the name of the app. 63 </div> 64 </div> 65 </div> 66 67 <h2 id="logo">Icons</h2> 68 69 70 <div class="layout-content-row"> 71 <div class="layout-content-col span-6"> 72 <p>If you have icons that you're already using for your app on other platforms 73 and they have a distinctive look intended to fit your brand, use them on your 74 Android app as well. <strong>If you take this approach, make sure your brand styling is 75 applied to every single icon in your app</strong>.</p> 76 77 </div> 78 79 <div class="layout-content-col span-6"> 80 <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;"> 81 </div> 82 </div> 83 </div> 84 <p>One exception: For any icon in your existing set where the symbol is different from 85 Android's, use Android's symbol but give it your brand's styling. That way, users will 86 understand what the purpose of the icon is based on what they've learned in other 87 Android apps (Design principle: 88 <a href="{@docRoot}design/get-started/principles.html#give-me-tricks">Give me tricks that 89 work everywhere</a>). But the icon will still look like it belongs with all of 90 your other icons as a part of your brand.</p> 91 92 <div class="layout-content-row"> 93 <div class="layout-content-col span-6"> 94 <p><strong>Example</strong>:<br /> 95 </p> 96 <p>The brand's normal icon for sharing on other platforms is a right arrow. 97 </div> 98 99 <div class="layout-content-col span-6 lasyout-with-list-item-margins"> 100 101 <div style="margin-bottom:1em;"> 102 <span class="do-dont-label bad" style="margin-left:12px">Don't</span> 103 <span style="margin-left: 64px;" class="do-dont-label good"><strong>Do</strong></span> 104 </div> 105 <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:180px;"> 106 </div> 107 </div> 108 109 <p>What if you don't already have your own icons — for example, if you're creating a 110 brand new app only for Android? In this case, use Android's standard icons and rely 111 more on color and logo for branding. Get the Action Bar Icon Pack, available for free 112 in <a href="{@docRoot}design/downloads/index.html">Downloads</a>.</p> 113
