docs/html/topic/instant-apps/index.jd

   1 fullpage=true
   2 page.title=Android Instant Apps
   3 page.viewport_width=970
   4 meta.tags="instant apps, getstarted, sdk, appquality, landing"
   5 section.landing=true
   6 header.hide=1
   7 carousel=1
   8 tabbedList=1
   9 excludeFromSuggestions=true
  10 @jd:body
  11
  12 <!-- Hero section -->
  13 <section class="dac-expand dac-hero dac-section-light">
  14 <div class="wrap">
  15   <div class="dac-hero-content">
  16     <div style="margin-bottom:40px">
  17       <h1>
  18         Android Instant Apps
  19       </h1>
  20
  21       <p class="sub-head">
  22         Native Android apps, without the installation
  23       </p>
  24
  25       <p class="dac-hero-description">
  26         An evolution in app sharing and discovery, Android Instant Apps enables
  27         Android apps to run instantly, without requiring installation. Instant
  28         Apps lets you experience what you love about apps&#8212fast and beautiful
  29         user interfaces, high performance, and great capabilities&#8212with just a
  30         tap.
  31       </p>
  32
  33       <p class="dac-hero-description">
  34         Request early access to the Instant Apps documentation today.
  35       </p>
  36
  37       <p style="margin-top:24px">
  38         <a class="landing-button green download-bundle-button" href=
  39         "https://docs.google.com/a/google.com/forms/d/1S3MzsMVIlchLCqyNLaFbv64llxWaf90QSeYLeswco90/viewform"
  40         target="_blank">I'M INTERESTED IN ANDROID INSTANT APPS<br></a>
  41         <a class="dac-hero-cta dev-bytes"
  42           href="https://www.youtube.com/watch?v=cosqlfqrpFA">
  43           <span class="dac-sprite dac-auto-chevron"></span>
  44           Watch a video about Instant Apps
  45         </a>
  46       </p>
  47     </div>
  48
  49   </div> <!-- end cols dac-hero-content -->
  50 </div> <!-- end .wrap -->
  51 </section>
  52
  53 <!-- Second section -->
  54
  55 <div class="wrap sub-section">
  56 <div class="cols dac-hero-content">
  57   <div class="col-1of2 dac-hero-figure">
  58     <img src="/images/topic/instant-apps/instant-apps-section-2.png">
  59   </div>
  60 <div class="col-1of2">
  61 <div class="dac-hero-tag"></div>
  62
  63   <h2 id="section-2" class="norule">Run Android Apps Without Installation</h2>
  64   <p class="dac-hero-description">
  65     Android Instant Apps lets you experience beautiful and immersive
  66     apps, with material design and smooth animations, without installing them
  67     on your device.
  68   </p>
  69
  70 </div>
  71 </div>
  72 </div>
  73
  74 <!-- Third section -->
  75
  76 <div class="wrap sub-section">
  77
  78   <h2 id="section-3" class="norule">Access Apps From Anywhere</h2>
  79
  80   <p>
  81     Get people to your flagship Android experience from links that would
  82     otherwise open your mobile web page &mdash; like
  83     search, social media, messaging, and other deep links &mdash; without them
  84     needing to stop and install your app first.
  85   </p>
  86
  87   <div class="cols" style="margin-top:1em;">
  88     <div class="col-4of12 gif-container">
  89       <img class="partner-gifs"
  90         src="/images/topic/instant-apps/s3-BandH-static.png"
  91         data-stat="/images/topic/instant-apps/s3-BandH-static.png"
  92         data-anim="/images/topic/instant-apps/s3-BandH-animated.gif">
  93       <p class="figure-caption">
  94         <em>B&amp;H Photo<br/>
  95             (via Google Search)</em>
  96       </p>
  97     </div>
  98
  99     <div class="col-4of12 gif-container">
 100       <img class="partner-gifs"
 101         src="/images/topic/instant-apps/s3-BuzzFeed-static.png"
 102         data-stat="/images/topic/instant-apps/s3-BuzzFeed-static.png"
 103         data-anim="/images/topic/instant-apps/s3-BuzzFeed-animated.gif">
 104       <p class="figure-caption">
 105         <em>BuzzfeedVideo<br/>
 106             (via a shared link)</em>
 107       </p>
 108     </div>
 109
 110     <div class="col-4of12 gif-container">
 111       <img class="partner-gifs"
 112         src="/images/topic/instant-apps/s3-ParkandPay-static.png"
 113         data-stat="/images/topic/instant-apps/s3-ParkandPay-static.png"
 114         data-anim="/images/topic/instant-apps/s3-ParkandPay-animated.gif">
 115       <p class="figure-caption">
 116         <em>Park and Pay<br/>
 117             (via NFC)</em>
 118       </p>
 119     </div>
 120   </div>
 121 </div>
 122
 123 <!-- Fourth section -->
 124
 125 <div class="wrap sub-section">
 126 <div class="cols dac-hero-content">
 127   <div class="col-1of2 dac-hero-figure">
 128     <img src="/images/topic/instant-apps/instant-apps-section-4.png">
 129   </div>
 130 <div class="col-1of2">
 131 <div class="dac-hero-tag"></div>
 132
 133   <h2 id="section-4" class="norule">Built On Google Play Services</h2>
 134   <p class="dac-hero-description">
 135     Take advantage of Google Play services features &mdash; like location,
 136     identity,
 137     payments, and Firebase &mdash; which are built right in for a seamless user
 138     experience.
 139   </p>
 140
 141 </div>
 142 </div>
 143 </div>
 144
 145 <!-- Fifth section -->
 146
 147 <div class="wrap sub-section">
 148 <div class="cols dac-hero-content">
 149   <div class="col-1of2 col-push-1of2 dac-hero-figure">
 150     <img src="/images/topic/instant-apps/instant-apps-section-5.png">
 151   </div>
 152 <div class="col-1of2 col-pull-1of2">
 153 <div class="dac-hero-tag"></div>
 154   <h2 id="section-5" class="norule">Works On Most Android Devices</h2>
 155
 156   <p class="dac-hero-description">
 157     Android Instant Apps can work on Android devices running Android 4.1+
 158     (API Level 16) or higher with Google Play services.
 159   </p>
 160
 161 </div>
 162 </div>
 163 </div>
 164
 165 <!-- Sixth section -->
 166
 167 <div class="wrap sub-section">
 168 <div class="cols dac-hero-content">
 169   <div class="col-1of2 dac-hero-figure">
 170     <img src="/images/topic/instant-apps/upgrade-your-app-2x.png">
 171   </div>
 172 <div class="col-1of2">
 173 <div class="dac-hero-tag"></div>
 174
 175   <h2 id="section-6" class="norule">Upgrade Your Existing App</h2>
 176   <p class="dac-hero-description">
 177     Android Instant Apps functionality is an upgrade to your existing Android
 178     app, not a new, separate app. It's the same Android APIs, the same
 179     project, the same source code.  It can take less than a day to get
 180     up and running for some developers, though the effort involved varies,
 181     depending on how your app is structured. You modularize your app,
 182     and Google Play downloads only the parts that are needed, on the fly.
 183   </p>
 184
 185 </div>
 186 </div>
 187 </div>
 188
 189 <!-- Seventh section -->
 190
 191 <div class="wrap sub-section" id="section-7">
 192   <h2 id="sign-up-docs" class="dac-section-title norule" style="margin-bottom: 0px;">
 193     Sign up for access to Android Instant Apps documentation
 194   </h2>
 195
 196   <p class="dac-section-subtitle" style="margin-top:0px">
 197     We’ll let you know if you’re selected for early access
 198     to Android Instant
 199     Apps.
 200   </p>
 201
 202   <p class="dac-section-subtitle">
 203     <a class="landing-button green download-bundle-button"
 204       href="https://docs.google.com/forms/d/1S3MzsMVIlchLCqyNLaFbv64llxWaf90QSeYLeswco90/viewform"
 205       target="_blank">
 206       I'M INTERESTED IN ANDROID INSTANT APPS<br>
 207     </a>
 208   </p>
 209
 210   <p  class="dac-section-subtitle" style="margin-top:24px">
 211     Check out our <a href="faqs.html">frequently asked questions</a> to find out
 212     more about Android Instant Apps.
 213   </p>
 214 </div>
 215
 216 <style>
 217
 218   /* Sub-heading styling */
 219   .sub-head {
 220     font-size: 28px;
 221     line-height: 125%;
 222   }
 223
 224   /* Background color for hero module. */
 225   .dac-section-light {
 226     background: #B0BEC5;
 227   }
 228
 229   /* Increase top margin for sections */
 230   .sub-section {
 231     margin-top: 2em;
 232   }
 233
 234   a.dev-bytes {
 235    padding-top: 1em;
 236    padding-left: 1em;
 237   }
 238
 239   #section-3, #sign-up-docs {
 240     margin-top: 0px;
 241     border-top: 0px;
 242   }
 243
 244   /* GIF section styling */
 245   .figure-caption {
 246     text-align: center;
 247   }
 248
 249   .partner-gifs {
 250     width: 80%;
 251     height: auto;
 252   }
 253
 254   .gif-container {
 255      text-align: center;
 256   }
 257
 258 </style>
 259
 260 <script>
 261
 262 (function () {
 263
 264   function onMouseEnter(evt) {
 265     if (evt.target.dataset && evt.target.dataset.anim) {
 266       swap(evt.target, {
 267         newStr: evt.target.dataset.anim
 268       });
 269     }
 270   }
 271
 272   function onMouseOut(evt) {
 273     if (evt.target.dataset && evt.target.dataset.stat) {
 274       swap(evt.target, {
 275         newStr: evt.target.dataset.stat
 276       });
 277     }
 278   }
 279
 280   function swap(target, options) {
 281     if (options && options.newStr) {
 282       $(target).attr("src", options.newStr);
 283     }
 284   }
 285
 286   $(".partner-gifs").mouseenter(onMouseEnter);
 287   $(".partner-gifs").mouseout(onMouseOut);
 288
 289 })();
 290
 291 </script>