Google for Developers - from AI and Cloud to Mobile and Web

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Google for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#fff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/developers/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/images/touchicon-180-new.png"><link rel="canonical" href="https://developers.google.com/"><link rel="search" type="application/opensearchdescription+xml" title="Google for Developers" href="https://developers.google.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developers.google.com/" /><link rel="alternate" hreflang="x-default" href="https://developers.google.com/" /><link rel="alternate" hreflang="ar" href="https://developers.google.com/?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developers.google.com/?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developers.google.com/?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developers.google.com/?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developers.google.com/?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developers.google.com/?hl=fr" /><link rel="alternate" hreflang="de" href="https://developers.google.com/?hl=de" /><link rel="alternate" hreflang="he" href="https://developers.google.com/?hl=he" /><link rel="alternate" hreflang="hi" href="https://developers.google.com/?hl=hi" /><link rel="alternate" hreflang="id" href="https://developers.google.com/?hl=id" /><link rel="alternate" hreflang="it" href="https://developers.google.com/?hl=it" /><link rel="alternate" hreflang="ja" href="https://developers.google.com/?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developers.google.com/?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developers.google.com/?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developers.google.com/?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developers.google.com/?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developers.google.com/?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developers.google.com/?hl=th" /><link rel="alternate" hreflang="tr" href="https://developers.google.com/?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developers.google.com/?hl=vi" /><title>Google for Developers - from AI and Cloud to Mobile and Web</title> <meta property="og:title" content="Google for Developers - from AI and Cloud to Mobile and Web"><meta name="description" content="Explore developer resources, community events, and inspirational stories to help you build smarter and ship faster."> <meta property="og:description" content="Explore developer resources, community events, and inspirational stories to help you build smarter and ship faster."><meta property="og:url" content="https://developers.google.com/"><meta property="og:image" content="https://developers.google.com/static/site-assets/images/home/developers-social-media.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://developers.google.com/static/site-assets/images/home/developers-social-media.png"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Google for Developers - from AI and Cloud to Mobile and Web" } </script> <meta name="google-site-verification" content="u63GsPxC7nSL9_iKT6-jN0FpOze5tBvZ0yeeayDob7g"><script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Organization", "name": "Google for Developers", "logo": "https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/images/touchicon-180-new.png", "url": "https://developers.google.com/" } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "Google for Developers", "url": "https://developers.google.com/", "potentialAction": { "@type": "SearchAction", "target": "https://developers.google.com/s/results?q={search_term_string}", "query-input": "required name=search_term_string" } } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="dgc-hero-fullscreen" template="landing" theme="white" type="article" layout="full" concierge='hide' pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="googleForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/images/lockup-new.svg" class="devsite-site-logo" alt="Google for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab class="devsite-dropdown devsite-dropdown-full "> <a href="https://developers.google.com/products" class="devsite-tabs-content gc-analytics-event products-dropdown-tab" track-metadata-eventdetail="https://developers.google.com/products" track-type="nav" track-metadata-position="nav - products" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Products" track-name="products" > Products </a> <button aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown menu for Products" track-type="nav" track-metadata-eventdetail="https://developers.google.com/products" track-metadata-position="nav - products" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Products" track-name="products" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column products-dropdown"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Platforms and Operating Systems</li> <li class="devsite-nav-item"> <a href="//developer.android.com" track-type="nav" track-metadata-eventdetail="//developer.android.com" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="platforms and operating systems" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="//developer.android.com/static/images/android-logo.svg" srcset=" //developer.android.com/static/images/android-logo.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Android → </div> </a> </li> <li class="devsite-nav-item"> <a href="//ai.google.dev/" track-type="nav" track-metadata-eventdetail="//ai.google.dev/" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="platforms and operating systems" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/site-assets/logo-google-g.svg" srcset=" /static/site-assets/logo-google-g.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google AI → </div> </a> </li> <li class="devsite-nav-item"> <a href="//developer.chrome.com" track-type="nav" track-metadata-eventdetail="//developer.chrome.com" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="platforms and operating systems" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/homepage-assets/images/chromeos-logo.svg" srcset=" /static/homepage-assets/images/chromeos-logo.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Chrome → </div> </a> </li> <li class="devsite-nav-item"> <a href="//cloud.google.com/developers" track-type="nav" track-metadata-eventdetail="//cloud.google.com/developers" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="platforms and operating systems" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="//gstatic.com/images/branding/product/2x/google_cloud_64dp.png" srcset=" //gstatic.com/images/branding/product/2x/google_cloud_64dp.png" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google Cloud → </div> </a> </li> <li class="devsite-nav-item"> <a href="//firebase.google.com" track-type="nav" track-metadata-eventdetail="//firebase.google.com" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="platforms and operating systems" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/_static/firebase/images/icon.svg" srcset=" /_static/firebase/images/icon.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Firebase → </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column products-dropdown"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Frameworks, IDEs, and SDKs</li> <li class="devsite-nav-item"> <a href="//developer.android.com/jetpack" track-type="nav" track-metadata-eventdetail="//developer.android.com/jetpack" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="frameworks, ides, and sdks" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="//developer.android.com/static/images/spot-icons/jetpack-compose.svg" srcset=" //developer.android.com/static/images/spot-icons/jetpack-compose.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Jetpack Compose → </div> </a> </li> <li class="devsite-nav-item"> <a href="//developer.android.com/studio" track-type="nav" track-metadata-eventdetail="//developer.android.com/studio" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="frameworks, ides, and sdks" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="//developer.android.com/static/images/android-logo.svg" srcset=" //developer.android.com/static/images/android-logo.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Android Studio → </div> </a> </li> <li class="devsite-nav-item"> <a href="//flutter.dev" track-type="nav" track-metadata-eventdetail="//flutter.dev" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="frameworks, ides, and sdks" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/site-assets/logo-flutter.svg" srcset=" /static/site-assets/logo-flutter.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Flutter → </div> </a> </li> <li class="devsite-nav-item"> <a href="//idx.dev/" track-type="nav" track-metadata-eventdetail="//idx.dev/" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="frameworks, ides, and sdks" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/products/images/project-idx.png" srcset="https://developers.google.com/static/products/images/project-idx_36.png 36w, https://developers.google.com/static/products/images/project-idx_48.png 48w, https://developers.google.com/static/products/images/project-idx_72.png 72w, https://developers.google.com/static/products/images/project-idx_96.png 96w, https://developers.google.com/static/products/images/project-idx_480.png 480w, https://developers.google.com/static/products/images/project-idx_720.png 720w, https://developers.google.com/static/products/images/project-idx_856.png 856w, https://developers.google.com/static/products/images/project-idx_960.png 960w, https://developers.google.com/static/products/images/project-idx_1440.png 1440w, https://developers.google.com/static/products/images/project-idx_1920.png 1920w, https://developers.google.com/static/products/images/project-idx_2880.png 2880w" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Project IDX → </div> </a> </li> <li class="devsite-nav-item"> <a href="//makersuite.google.com/" track-type="nav" track-metadata-eventdetail="//makersuite.google.com/" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="frameworks, ides, and sdks" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/focus/images/ai-studio-icon.png" srcset="https://developers.google.com/static/focus/images/ai-studio-icon_36.png 36w, https://developers.google.com/static/focus/images/ai-studio-icon_48.png 48w, https://developers.google.com/static/focus/images/ai-studio-icon_72.png 72w, https://developers.google.com/static/focus/images/ai-studio-icon_96.png 96w, https://developers.google.com/static/focus/images/ai-studio-icon_480.png 480w, https://developers.google.com/static/focus/images/ai-studio-icon_720.png 720w, https://developers.google.com/static/focus/images/ai-studio-icon_856.png 856w, https://developers.google.com/static/focus/images/ai-studio-icon_960.png 960w, https://developers.google.com/static/focus/images/ai-studio-icon_1440.png 1440w, https://developers.google.com/static/focus/images/ai-studio-icon_1920.png 1920w, https://developers.google.com/static/focus/images/ai-studio-icon_2880.png 2880w" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google AI Studio → </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column products-dropdown"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Services and Integrations</li> <li class="devsite-nav-item"> <a href="//ai.google.dev/gemini-api/docs" track-type="nav" track-metadata-eventdetail="//ai.google.dev/gemini-api/docs" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="services and integrations" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/focus/images/gemini-icon.png" srcset="https://developers.google.com/static/focus/images/gemini-icon_36.png 36w, https://developers.google.com/static/focus/images/gemini-icon_48.png 48w, https://developers.google.com/static/focus/images/gemini-icon_72.png 72w, https://developers.google.com/static/focus/images/gemini-icon_96.png 96w, https://developers.google.com/static/focus/images/gemini-icon_480.png 480w, https://developers.google.com/static/focus/images/gemini-icon_720.png 720w, https://developers.google.com/static/focus/images/gemini-icon_856.png 856w, https://developers.google.com/static/focus/images/gemini-icon_960.png 960w, https://developers.google.com/static/focus/images/gemini-icon_1440.png 1440w, https://developers.google.com/static/focus/images/gemini-icon_1920.png 1920w, https://developers.google.com/static/focus/images/gemini-icon_2880.png 2880w" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Gemini API → </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/privacy-sandbox" track-type="nav" track-metadata-eventdetail="https://developers.google.com/privacy-sandbox" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="services and integrations" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/privacy-sandbox/assets/images/privacy-sandbox-logo.svg" srcset=" /static/privacy-sandbox/assets/images/privacy-sandbox-logo.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Privacy Sandbox → </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="services and integrations" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/site-assets/logo-google-g.svg" srcset=" /static/site-assets/logo-google-g.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Identity </div> </a> </li> <li class="devsite-nav-item"> <a href="//checks.google.com/" track-type="nav" track-metadata-eventdetail="//checks.google.com/" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="services and integrations" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/checks/images/Checks_Icon.png" srcset="https://developers.google.com/static/checks/images/Checks_Icon_36.png 36w, https://developers.google.com/static/checks/images/Checks_Icon_48.png 48w, https://developers.google.com/static/checks/images/Checks_Icon_72.png 72w, https://developers.google.com/static/checks/images/Checks_Icon_96.png 96w, https://developers.google.com/static/checks/images/Checks_Icon_480.png 480w, https://developers.google.com/static/checks/images/Checks_Icon_720.png 720w, https://developers.google.com/static/checks/images/Checks_Icon_856.png 856w, https://developers.google.com/static/checks/images/Checks_Icon_960.png 960w, https://developers.google.com/static/checks/images/Checks_Icon_1440.png 1440w, https://developers.google.com/static/checks/images/Checks_Icon_1920.png 1920w, https://developers.google.com/static/checks/images/Checks_Icon_2880.png 2880w" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Checks → </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/workspace" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="services and integrations" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/site-assets/logo-google-g.svg" srcset=" /static/site-assets/logo-google-g.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google Workspace </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column products-dropdown"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Growth and Monetization</li> <li class="devsite-nav-item"> <a href="//developer.android.com/distribute/" track-type="nav" track-metadata-eventdetail="//developer.android.com/distribute/" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="growth and monetization" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="//gstatic.com/images/branding/product/2x/play_prism_64dp.png" srcset=" //gstatic.com/images/branding/product/2x/play_prism_64dp.png" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google Play → </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/admob" track-type="nav" track-metadata-eventdetail="https://developers.google.com/admob" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="growth and monetization" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="//gstatic.com/images/branding/product/2x/admob_36dp.png" srcset=" //gstatic.com/images/branding/product/2x/admob_36dp.png" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google AdMob </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/google-ads" track-type="nav" track-metadata-eventdetail="https://developers.google.com/google-ads" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="growth and monetization" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/homepage-assets/images/google-ads.svg" srcset=" /static/homepage-assets/images/google-ads.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google Ads </div> </a> </li> <li class="devsite-nav-item"> <a href="//developer.chrome.com/docs/extensions" track-type="nav" track-metadata-eventdetail="//developer.chrome.com/docs/extensions" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="growth and monetization" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/homepage-assets/images/chromeos-logo.svg" srcset=" /static/homepage-assets/images/chromeos-logo.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Chrome Extensions → </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/search" track-type="nav" track-metadata-eventdetail="https://developers.google.com/search" track-metadata-position="nav - products" track-metadata-module="tertiary nav" track-metadata-module_headline="growth and monetization" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/search/images/google-search-central-logo.svg" srcset=" /static/search/images/google-search-central-logo.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google Search Central </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developers.google.com/solutions/catalog" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/solutions/catalog" track-type="nav" track-metadata-position="nav - solutions" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Solutions" track-name="solutions" > Solutions </a> </tab> <tab > <a href="https://developers.google.com/events" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/events" track-type="nav" track-metadata-position="nav - events" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Events" track-name="events" > Events </a> </tab> <tab > <a href="https://developers.google.com/learn" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/learn" track-type="nav" track-metadata-position="nav - learn" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" aria-label="Learning Catalog" > Learn </a> </tab> <tab > <a href="https://developers.google.com/community" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/community" track-type="nav" track-metadata-position="nav - community" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" > Community </a> </tab> <tab > <a href="https://developers.google.com/profile/u/me/dashboard" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/profile/u/me/dashboard" track-type="nav" track-metadata-position="nav - developer program" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Developer Program" track-name="developer program" > Developer Program </a> </tab> <tab > <a href="https://developers.googleblog.com" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.googleblog.com" track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Google for Developers" tenant-name="Google for Developers" > <form class="devsite-search-form" action="https://developers.google.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles fp-auth id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="googleForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/images/lockup-new.svg" class="devsite-site-logo" alt="Google for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/products" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Products" track-name="products" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Products" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Products </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Products" track-name="products" > <span class="devsite-nav-text" tooltip menu="Products"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Products"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/solutions/catalog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Solutions" track-name="solutions" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Solutions" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Solutions </span> </a> </li> <li class="devsite-nav-item"> <a href="/events" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Events" track-name="events" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Events" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Events </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" aria-label="Learning Catalog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> <li class="devsite-nav-item"> <a href="/community" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Community" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Community </span> </a> </li> <li class="devsite-nav-item"> <a href="/profile/u/me/dashboard" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Developer Program" track-name="developer program" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer Program" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer Program </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.googleblog.com" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Products" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Platforms and Operating Systems </span> </span> </li> <li class="devsite-nav-item"> <a href="//developer.android.com" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android → </span> </a> </li> <li class="devsite-nav-item"> <a href="//ai.google.dev/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AI →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google AI → </span> </a> </li> <li class="devsite-nav-item"> <a href="//developer.chrome.com" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome → </span> </a> </li> <li class="devsite-nav-item"> <a href="//cloud.google.com/developers" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Cloud →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Cloud → </span> </a> </li> <li class="devsite-nav-item"> <a href="//firebase.google.com" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Firebase →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Firebase → </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Frameworks, IDEs, and SDKs </span> </span> </li> <li class="devsite-nav-item"> <a href="//developer.android.com/jetpack" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Jetpack Compose →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Jetpack Compose → </span> </a> </li> <li class="devsite-nav-item"> <a href="//developer.android.com/studio" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android Studio →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android Studio → </span> </a> </li> <li class="devsite-nav-item"> <a href="//flutter.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Flutter →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Flutter → </span> </a> </li> <li class="devsite-nav-item"> <a href="//idx.dev/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Project IDX →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Project IDX → </span> </a> </li> <li class="devsite-nav-item"> <a href="//makersuite.google.com/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AI Studio →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google AI Studio → </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Services and Integrations </span> </span> </li> <li class="devsite-nav-item"> <a href="//ai.google.dev/gemini-api/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gemini API →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gemini API → </span> </a> </li> <li class="devsite-nav-item"> <a href="/privacy-sandbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy Sandbox →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy Sandbox → </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item"> <a href="//checks.google.com/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Checks →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Checks → </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Workspace" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Workspace </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Growth and Monetization </span> </span> </li> <li class="devsite-nav-item"> <a href="//developer.android.com/distribute/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Play →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Play → </span> </a> </li> <li class="devsite-nav-item"> <a href="/admob" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AdMob" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google AdMob </span> </a> </li> <li class="devsite-nav-item"> <a href="/google-ads" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Ads" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Ads </span> </a> </li> <li class="devsite-nav-item"> <a href="//developer.chrome.com/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Extensions →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Extensions → </span> </a> </li> <li class="devsite-nav-item"> <a href="/search" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Search Central" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Search Central </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" > <devsite-content> <article class="devsite-article"><style> /* Styles inlined from /site-assets/styles/landing.css */ /* Home page template - hero promo full bleed */ .dgc-hero-promo-full-bleed, .dgc-hero-promo-full-bleed-black-text { padding: 0; } .dgc-hero-promo-full-bleed-black-text .devsite-landing-row-item-description-content { color: black; } .dgc-hero-promo-full-bleed .devsite-landing-row-inner, .dgc-hero-promo-full-bleed-black-text .devsite-landing-row-inner{ padding: 0 2.5rem; } .dgc-hero-promo-full-bleed-black-text a { color: black !important; } .dgc-hero-promo-full-bleed img, .dgc-hero-promo-full-bleed-black-text img { border-radius: .6rem; } .dgc-hero-promo-full-bleed .dgc-hero-promo-full-bleed-button { background-color: transparent !important; border: 1px solid var(--tenant-inverted-text-color, white) !important; color: var(--tenant-inverted-text-color, white) !important; } .dgc-hero-promo-full-bleed-black-text .dgc-hero-promo-full-bleed-button { background-color: transparent !important; border: 1px solid var(--tenant-primary-text-color, black) !important; color: var(--tenant-primary-text-color, black) !important; } .dgc-hero-promo-full-bleed-button:hover, .dgc-hero-promo-full-bleed-button:focus { background-color: rgb(0,0,0,.15) !important; } @media screen and (max-width: 870px) { .dgc-hero-promo-full-bleed, .dgc-hero-promo-full-bleed-black-text { padding: 24px 0; } } @media screen and (max-width: 600px) { .dgc-hero-promo-full-bleed, .dgc-hero-promo-full-bleed-black-text { padding: 1px 0 36px; } } /* Home page template - hero promo full bleed with animation */ .dgc-hero-promo-animated figure { background-image: url(/homepage-assets/images/build-anything-with-google.png) !important; background-size: contain !important; border-radius: .6rem; } .dgc-hero-promo-animated img { animation: heroPromo 4s; } @keyframes heroPromo { 0%, 50% { opacity: 0; } 100% { opacity: 1; } } /* Home page template - hero promo stories offset */ .dgc-hero-offset-inner > div:first-child { margin-inline-start: -10vw; min-width: 50vw; width: 880px; } /* [1] Ensure the row item description slightly overlaps its media. */ .dgc-hero-offset-inner > div:last-child { background-color: var(--tenant-background-1); border-radius: 8px; box-shadow: 0 0 30px -10px grey; padding: 32px; z-index: 1 /* [1] */; } .dgc-hero-offset > div { padding: 0 48px; } .dgc-hero-offset img { border-radius: 8px; height: 400px; object-fit: cover; } @media screen and (max-width: 1310px) { .dgc-hero-offset-inner > div:first-child { margin-inline-start: -14vw; width: 78vw; } .dgc-hero-offset-inner > div:last-child { width: 40vw; } .dgc-hero-offset-inner h3 a { display: inline-block; font-size: 24px; line-height: 28px; } } @media screen and (max-width: 840px) { .dgc-hero-offset > div { padding: 0; } /* [1] Forces hero to display in a column with flex centering rather than a * row at 840px width */ .dgc-hero-offset-inner { display: flex !important; /* [1] */ } /* [1] Forces image container width to full screen width when resized to 840px * rather than having small amounts of whitespace on each side. */ .dgc-hero-offset-inner > div:first-child { margin-inline-start: 0; width: 100% !important /* [1] */; } .dgc-hero-offset img { border-radius: 0; height: 50vh; } /* [1] Pull the description up in order to to overlap the image. */ /* [2] Adds padding to header/description card at lower resolution width * because mobile breakpoints remove all padding. */ .dgc-hero-offset-inner > div:last-child { margin-top: -144px !important; /* [1] */ padding: 32px !important; /* [2] */ width: calc(100% - 64px); } } /* Home page template - I/O Fullscreen takeover */ .dgc-hero-fullscreen { --dgc-hero-grid: '. . .' '. heading .' '. item .' '. . .' 0.7fr / 10vw auto 10vw; --dgc-hero-heading-font-size: 72px; --dgc-hero-heading-line-height: 82px; --dgc-hero-margin: 0 calc(-50vw + 50%); } .dgc-hero-fullscreen-item { --dgc-hero-fullscreen-item-padding: 24px; } .dgc-hero-fullscreen-row::after { --dgc-hero-background: url(/homepage-assets/images/io-promo-background.jpg) no-repeat bottom center / cover; } @media screen and (min-width: 2000px) { .dgc-hero-fullscreen-row h2 { --dgc-hero-heading-font-size: 3vw; --dgc-hero-heading-line-height: 3vw; } .dgc-hero-fullscreen-item { --dgc-hero-fullscreen-item-padding: 1.5vw; } } #gc-wrapper { margin-right: 0 !important; } @media screen and (max-width: 1025px) { .dgc-hero-fullscreen { --dgc-hero-grid: '. . .' 1fr '. item .' '. . .' '. . .' 7fr / 1fr 12fr 1fr; } .dgc-hero-fullscreen-row::after { --dgc-hero-background: url(/homepage-assets/images/io-promo-background.jpg) no-repeat bottom center / cover; } } @media screen and (max-width: 750px) { .dgc-hero-fullscreen { --dgc-hero-grid: '.' 12px 'item' '.' '.' 7fr / 1fr; --dgc-hero-margin: 0; } .dgc-hero-fullscreen-row::after { --dgc-hero-background: url(/homepage-assets/images/io-promo-background.jpg) no-repeat bottom center / cover; } .dgc-hero-fullscreen-item { text-align: center; } .dgc-hero-fullscreen-row h2 { --dgc-hero-heading-font-size: 64px; --dgc-hero-heading-line-height: 74px; } } @media screen and (max-width: 600px) { .dgc-hero-fullscreen { --dgc-hero-grid: '.' 1fr 'item' '.' '.' 7fr / 1fr; --dgc-hero-heading-font-size: 40px; --dgc-hero-heading-line-height: 42px; } .dgc-hero-fullscreen-item { --dgc-hero-fullscreen-item-padding: 16px; } .dgc-hero-fullscreen-row h2 { --dgc-hero-heading-font-size: 48px; --dgc-hero-heading-line-height: 54px; } .dgc-hero-fullscreen-row a { margin-top: 8px; } .dgc-hero-fullscreen-row::after { --dgc-hero-background: url(/homepage-assets/images/io-promo-background-mobile.png) no-repeat bottom 16px center / cover } } @media screen and (max-width: 1025px) and (max-height: 750px) { .dgc-hero-fullscreen-item p { display: none; } .dgc-hero-fullscreen-row a { margin-top: 8px; } } @media screen and (max-width: 600px) and (max-height: 410px) { .dgc-hero-fullscreen { --dgc-hero-heading-font-size: 32px; --dgc-hero-heading-line-height: 34px; } .dgc-hero-fullscreen-item { --dgc-hero-fullscreen-item-padding: 12px; } } /* [1] Override default overflow hidden property to allow sticky properties, * which allows fullscreen takeover to slide over the below content. */ .dgc-hero-fullscreen .devsite-wrapper { overflow: unset !important; /* [1] */ } /* [1] Override primary color background so that the row has a transparent * background that doesn't cover up the background image. */ .dgc-hero-fullscreen-row { background: transparent !important; /* [1] */ overflow: hidden; padding: 0; position: relative; z-index: 1; } .dgc-hero-fullscreen-row::after, .dgc-hero-fullscreen-row .devsite-landing-row-html { height: calc(100vh - 112px); } .dgc-hero-fullscreen-row::after { background: var(--dgc-hero-background); content: ''; position: absolute; top: 0; width: 100vw; } .dgc-hero-fullscreen-row .devsite-landing-row-html { display: grid; grid: var(--dgc-hero-grid); margin: var(--dgc-hero-margin); } .dgc-hero-fullscreen-row h2, .dgc-hero-fullscreen-item { z-index: 1; } .dgc-hero-fullscreen-row h2 { color: black; font-size: var(--dgc-hero-heading-font-size); font-weight: 500; grid-area: heading; line-height: var(--dgc-hero-heading-line-height); margin-block: unset; } .dgc-hero-fullscreen-item { color: black; font: 500 36px 'Google Sans'; grid-area: item; padding: var(--dgc-hero-fullscreen-item-padding); text-align: center; } .dgc-hero-fullscreen-item p { margin-block: var(--dgc-hero-fullscreen-item-padding); } .dgc-hero-fullscreen-row a { align-items: center; background: #1a73e8; border-radius: 100px; border: none; color: white; display: inline-flex; font: 500 20px 'Google Sans'; padding: 22px 24px; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 4px 80px 0px; } .dgc-hero-fullscreen-row a.button:hover { background: rgb(27, 102, 201); border: none; color: white; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; } .dgc-hero-fullscreen-row a.button:focus, .dgc-hero-fullscreen-row a.button:active { background: rgb(27, 102, 201); border: none; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; color: white; } /* Home page - logo garden following fullscreen hero */ .dgc-hero-fullscreen-row + .dgc-logo-garden { bottom: -30vh; position: sticky; } .dgc-hero-fullscreen-row + .dgc-build-smarter-hero { bottom: 0vh; position: sticky; } .dgc-build-smarter-hero video { aspect-ratio: 16 / 9; width: 960px; } .dgc-hero-fullscreen-row + .dgc-recs-carousel { bottom: -10vh; position: sticky; } /* Home page - hero */ /* Add a border between the hero and any following row other than .dgc-recs */ .dgc-hero + .devsite-landing-row:not(.dgc-recs) { border-top: 2px solid #f1f3f4; } .dgc-hero img { aspect-ratio: 720 / 416; } .dgc-hero .devsite-landing-row-item .devsite-landing-row-item-body h3 { font-size: 32px; line-height: 40px; } .dgc-hero .devsite-landing-row-item-image { margin: 40px auto; } .dgc-hero .devsite-landing-row-item-buttons { padding-top: 38px; } .dgc-recs-fallback { padding-top: 46px; } /* Reduce bottom padding for row to compensate for the extra space taken up by * carousel markers. */ .dgc-recs-carousel { padding-bottom: 16px; } /* Markers are only visible above 600px, so normalize the row padding for * mobile. */ @media screen and (max-width: 600px) { .dgc-recs-carousel { padding: 16px 26px; } } /* Home page - recommended content fallback */ .dgc-recs-fallback h2 { display: flex; font-size: 16px; line-height: 24px; margin-block: 0 24px; } .dgc-recs-fallback[header-position='top'] .devsite-landing-row-header + .devsite-landing-row-group { margin: 0; } .dgc-recs-fallback .devsite-landing-row-item-no-media h3 { font-size: 20px; line-height: 28px; } .dgc-recs-fallback .devsite-landing-row-item-icon-container[size], .dgc-recs-fallback [size] .devsite-landing-row-item-icon { height: 32px; width: 32px; } /* Home page - logo garden */ .dgc-logo-garden .devsite-landing-row-item-custom-image-icon { max-height: 64px; width: 64px; } .dgc-logo-garden-cta { padding-bottom: 0; } .dgc-logo-garden-cta > div > div { margin-bottom: 48px; } @media screen and (max-width: 600px) { .dgc-hero-fullscreen-row + .dgc-logo-garden { bottom: -70vh; } .dgc-logo-garden-cta { margin-top: 40px; } } /* Home page - programs */ .dgc-programs.devsite-landing-row-item { overflow: visible; } .dgc-programs .devsite-landing-row-item-image { position: relative; } .dgc-programs .devsite-landing-row-item-image::before { background: center / contain no-repeat; content: ''; display: block; height: 160px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 160px; } .dgc-programs--events .devsite-landing-row-item-image::before { background-image: url(/site-assets/images/home/events-graphic.png); } .dgc-programs--community .devsite-landing-row-item-image::before { background-image: url(/site-assets/images/home/community-graphic.png); } @media screen and (max-width: 840px) { .dgc-programs .devsite-landing-row-item-media { overflow: visible !important; } } /* Home page - experts */ .devsite-directory__wrapper { padding: 0 12px 0; } .devsite-directory__content { display: grid; grid-gap: 24px; grid-template-columns: repeat(var(--directory-columns, 4), 1fr); } .devsite-directory__content__item { background-color: #fff; margin: 0; padding: 0; } .experts-row { overflow: hidden; } .experts-directory__item__profile { padding: 20px 20px 0; text-align: center; } .experts-directory__item__profile-pic-holder { background-size: cover; border-radius: 50%; display: block; height: 100px; margin: 0 auto 20px; overflow: hidden; position: relative; width: 100px; } .experts-directory__item__name { margin: 0; } .experts-directory__item__name h3 { font-size: 12px; font-style: normal; font-weight: 500; padding-top: 15px; text-align: center; } .experts-directory__item__location, .experts-directory__item__experience { font: 400 14px/20px; margin-top: 0; } .experts-directory__item__expertise { color: gray; } .experts-directory__item__view-profile { margin: auto auto 16px; } @media screen and (max-width: 1000px) { .devsite-directory__content { --directory-columns: 2; } } @media screen and (max-width: 500px) { .devsite-directory__content { --directory-columns: 1; } } /* Google for Developers rebranding */ .dgc-build-smarter { align-items: center; } .dgc-hero-news-card { border: 1px solid #dadce0; border-radius: 8px; } .dgc-hero-news-card img { border-radius: 8px 8px 0 0; } .dgc-hero-news-card-description { margin: 12px !important; } .dgc-build-smarter h3 { font: var(--dgc-build-smarter-font) !important; letter-spacing: unset; } .dgc-gdpp { --devsite-description-content-font: 400 20px/32px 'Google Sans'; --devsite-text-color: #3c4043; } .dgc-gdpp h3 { --devsite-h3-font: var(--dgc-gdpp-font); } .dgc-gdpp h3 a { color: var(--devsite-heading-color, var(--devsite-secondary-text-color)); } .dgc-build-smarter + div { align-items: center; } .dgc-build-smarter + div > span { margin-left: 4px !important; } .dgc-build-smarter div { font: 400 24px 'Google Sans'; justify-content: center; } .dgc-ecosystem-bold-button, .dgc-ecosystem-bold-button:hover, .dgc-ecosystem-bold-button:focus, .dgc-ecosystem-bold-button:active { border: 2px solid var(--tenant-primary-text-color); } .selected-btn, .selected-btn:hover, .selected-btn:focus, .selected-btn:active { background: #1a73e8; color: white; pointer-events: none; } .dgc-build-smarter-buttons-label { font: 700 24px 'Google Sans'; margin-right: 30px; vertical-align: middle; } .dgc-build-smarter-buttons div { display: inline; } .dgc-build-smarter-buttons figure { pointer-events: none; } .dgc-web-ecosystem-cards header h2, .dgc-ecosystem-solution-cards header h2, .dgc-ecosystem-additional-solutions header h2, .dgc-ecosystem-case-studies h2, .dgc-social-footer h2 { font: 700 48px 'Google Sans'; } /* Overrides icon size */ .dgc-social-footer img { height: 38px !important; width: 38px !important; } /* Ensures LinkedIn image does not look stretched */ .dgc-social-footer .dgc-social-li img { width: 44.69px !important; } .dgc-web-ecosystem-cards header div, .dgc-ecosystem-solution-cards header div, .dgc-ecosystem-additional-solutions header div, .dgc-ecosystem-case-studies header div { font: 400 24px 'Google Sans'; } .dgc-web-ecosystem-card { flex-direction: row-reverse; } .dgc-web-ecosystem-card img { max-height: 105px; max-width: 155px; } .dgc-web-ecosystem-card > div:first-child { align-self: center; padding-right: 16px; } /* Google for Developers rebranding */ /* [1] Overrides blue link color in favor of primary text color */ .dgc-web-ecosystem-card h3 > a, .dgc-ecosystem-solution-card h3 > a, .dgc-ecosystem-additional-solutions-card h3 > a { color: var(--tenant-primary-text-color) !important; /* [1] */ font: 700 24px 'Google Sans'; } .dgc-web-ecosystem-card h3 + div, .dgc-ecosystem-solution-card h3 + div, .dgc-ecosystem-additional-solutions-card h3 + div, .android-spotlight h3 + div { font: 400 18px 'Roboto'; line-height: 24px; } /* [1] Forces material icons in buttons to have 0 margin */ .dgc-web-ecosystem-card .material-icons, .dgc-ecosystem-additional-solutions-card .material-icons, .dgc-build-smarter-buttons .material-icons, .dgc-ecosystem-bold-button .material-icons { margin: 0 !important; /* [1] */ } .dgc-logo-garden.dgc-ecosystem-logo-garden h2 { font: 700 48px 'Google Sans'; } .dgc-ecosystem-logo-garden + .dgc-logo-garden-cta { padding-top: 0; } .dgc-ecosystem-logo-garden .devsite-landing-row-item:not( .dgc-logo-garden-card) { background: var(--tenant-background-1); border: var(--tenant-primary-border); border-radius: 10px; } .dgc-ecosystem-logo-garden .devsite-landing-row-item:not( .dgc-logo-garden-card) > a { margin-bottom: auto; } .dgc-logo-garden-card { padding: 8px 32px 25px; } .dgc-logo-garden-card p:first-of-type { font-size: 18px; font-weight: 700; } .dgc-trending-news { padding-bottom: 64px; } .dgc-trending-row { --trending-carousel-padding-bottom: 64px; padding-inline: 8px; } .dgc-trending-row li > div { border-radius: 8px; height: 100%; padding: 32px 40px; } /* [1] Forces link color to be primary text color instead of blue */ .dgc-trending-row h3 a { color: var(--tenant-primary-text-color) !important; /* [1] */ font: 700 48px 'Google Sans'; } /* [1] Forces link color to be primary text color instead of blue */ .dgc-showcase-row h3 a { color: var(--tenant-primary-text-color) !important; /* [1] */ font: 700 40px 'Google Sans'; } .dgc-trending-row h3 + div, .dgc-showcase-row h3 + div { color: var(--tenant-primary-text-color); font: 400 18px 'Roboto'; line-height: 26px; } .dgc-trending-row .devsite-landing-row-item-labels span, .dgc-showcase-row .devsite-landing-row-item-labels span { font: 400 14px 'Roboto'; } .dgc-trending-row img, .dgc-showcase-row figure img { border-radius: 10px; } .dgc-showcase-row:last-of-type { margin-bottom: 40px; } .android-spotlight { background: #f1f3f4 !important; margin-bottom: 24px; padding-block: 64px !important; } .android-spotlight img { border-radius: 8px; } .android-spotlight-mobile { margin-bottom: 64px; } .android-spotlight h3 a { color: var(--tenant-primary-text-color) !important; font: 700 48px 'Google Sans'; } /* Carousel section */ .trending-carousel-bard img:first-of-type { display: block; } .trending-carousel-bard img:last-of-type { display: none; } .dgc-build-smarter h3 { --dgc-build-smarter-font: 700 100px/110px 'Google Sans'; } .dgc-gdpp h3 { --dgc-gdpp-font: 700 72px/82px 'Google Sans'; } .products .dgc-build-smarter-hero { padding-block: 0; } .products .dgc-build-smarter-hero:not(.landing) > div { background: #f1f3f4; } .products .dgc-build-smarter-hero:not(.landing) .dgc-build-smarter { grid-template-columns: 1fr; text-align: center; margin-inline: 200px; padding-block: 40px; } .products-hero-mobile { display: none; } .products .dgc-build-smarter-hero .devsite-landing-row-inner { background: center right no-repeat url(/products/images/grid-bg.png), #f1f3f4; background-size: 1012px; .color-scheme--dark & { background: center right no-repeat url(/products/images/grid-bg.png), #36373a; } } .products .dgc-build-smarter h3 { --dgc-build-smarter-font: 700 82px/84px 'Google Sans'; } .products .dgc-build-smarter-hero:not(.landing) .dgc-build-smarter h3 { --dgc-build-smarter-font: 700 68px/72px 'Google Sans'; } .products .dgc-build-smarter div { font: 400 18px/28px 'Roboto'; } .trending-carousel-slide { --trending-carousel-slide-flex-direction: row; --trending-carousel-slide-gap: 70px; } .trending-carousel-slide > div { --trending-carousel-slide-display: grid; } .trending-carousel-slide > div.trending-carousel-bard { --trending-carousel-slide-display: flex; --trending-carousel-slide-flex-direction: column-reverse; --trending-carousel-slide-gap: 0; } @media screen and (min-width: 961px) { .products .dgc-build-smarter-hero img { padding-block: 80px; } .products .dgc-build-smarter .devsite-landing-row-item-description { max-width: 100%; } .products .dgc-build-smarter-hero.landing img { padding-block: unset; } } @media screen and (max-width: 1348px) { .dgc-build-smarter h3 { --dgc-build-smarter-font: 700 64px/72px 'Google Sans'; } } @media screen and (max-width: 1024px) { .dgc-gdpp h3 { --dgc-gdpp-font: 700 40px/45px 'Google Sans'; } } @media screen and (max-width: 960px) { .products .dgc-build-smarter-hero:not(.landing) .dgc-build-smarter { margin-inline: 40px; padding-top: unset; } .products .dgc-build-smarter-hero .devsite-landing-row-inner { background: bottom no-repeat url(/products/images/grid-bg-m.png), #f1f3f4; background-size: contain; height: 76vw; min-height: 440px; } .products .dgc-build-smarter-hero:not(.landing) .devsite-landing-row-inner { height: unset; min-height: unset; } .products .dgc-build-smarter-hero > div > div { max-width: 400px; text-align: center; } .products .dgc-build-smarter-hero:not(.landing) > div > div { max-width: unset; } .products .dgc-build-smarter-hero img { height: 40vw; margin-block: 2vw; max-width: unset; padding-block: 2vw; width: auto; } .products-hero-mobile { display: block; margin-top: -4vw; } .products .dgc-build-smarter-hero.landing img{ margin-block: unset; padding-block: unset; } .products .dgc-build-smarter-hero.landing .products-arrow { height: auto; left: 0; margin-top: -6vw; max-width: 100%; position: absolute; width: 100%; } .products .dgc-build-smarter-hero.landing .products-img { height: 36vw; margin-top: 12vw; margin-left: 13vw; width: auto; } .products-hero-web { display: none; } .products .dgc-build-smarter h3, .products .dgc-build-smarter-hero:not(.landing) .dgc-build-smarter h3 { --dgc-build-smarter-font: 700 32px/38px 'Google Sans'; line-height: 32px !important; } .products .dgc-build-smarter div { font: 400 16px/24px 'Roboto'; } .dgc-build-smarter-hero > div > div { display: flex; flex-direction: column; padding-top: 40px; } .trending-carousel-slide { --trending-carousel-slide-flex-direction: column-reverse; --trending-carousel-slide-gap: 20px; } .trending-carousel-slide > div:not(.trending-carousel-bard) .devsite-landing-row-item-media { align-self: baseline; width: 75%; } .dgc-trending-row { --trending-carousel-padding-bottom: 24px; } .dgc-logo-garden-cta > div > div { padding-bottom: 16px; margin-bottom: 16px; } .dgc-trending-row { --trending-carousel-padding-bottom: 24px; } .trending-carousel-slide > div { --trending-carousel-slide-display: flex; } .trending-carousel-slide img { border: var(--tenant-primary-border); border-radius: 10px; } .trending-carousel-bard img { padding: 50px 12px 60px; } } @media screen and (max-width: 850px) { .dgc-ecosystem-logo-garden > div > div { grid-template-columns: 1fr 1fr !important; } } @media screen and (max-width: 600px) { .trending-carousel-slide { --trending-carousel-slide-gap: 0; } .trending-carousel-slide > div:not(.trending-carousel-bard) .devsite-landing-row-item-media { width: 100%; } .trending-carousel-bard img:first-of-type { display: none !important; } .trending-carousel-bard img:last-of-type { display: block !important; } .trending-carousel-bard > div:last-of-type { margin-top: 24px !important; } .trending-carousel-bard > div:last-of-type > div > div { padding-top: 0 !important; } /* [1] Forces logo garden to be 1 column at 600px width */ .dgc-ecosystem-logo-garden > div > div { grid-template-columns: 1fr !important; /* [1] */ } } .dgc-trending-row { --trending-row-padding-bottom: 64px; } .dgc-trending-row { padding-bottom: var(--trending-carousel-padding-bottom); } .dgc-trending-row-tech-stack { padding-top: 64px; } .trending-carousel-slide { align-items: center; display: flex; justify-content: center; margin: 0 auto; width: 100%; } .trending-carousel-slide > div.trending-carousel-bard { align-items: baseline; padding: 32px 40px 54px; width: 100%; } .trending-carousel-slide > div.trending-carousel-bard img { width: 1100px; } .trending-carousel-slide > div { align-items: center; border: var(--trending-carousel-slide-border, var(--tenant-primary-border)); display: var(--trending-carousel-slide-display); flex-direction: var(--trending-carousel-slide-flex-direction); gap: var(--trending-carousel-slide-gap); grid: auto-flow / 2fr 3fr; width: 100%; } .trending-carousel-slide > div > div { grid-column: unset !important; } /* [1] Forces carousel slide grid-column to be unset */ .trending-carousel-slide > div > div { grid-column: unset !important; /* [1] */ } /* Tech stack pages */ /* [1] Overrides font of page header */ .dgc-ecosystem-header h3 { font: 700 100px 'Google Sans' !important; /* [1] */ margin-bottom: 6px; } .dgc-ecosystem-header div { font: 400 24px 'Google Sans'; } .dgc-ecosystem-header-mobile { background: var(--dgc-ecosystem-header-mobile-background); padding: var(--dgc-ecosystem-header-mobile-padding); } .dgc-ecosystem-header-web { background: var(--dgc-ecosystem-header-web-background); padding: var(--dgc-ecosystem-header-web-padding); } .dgc-ecosystem-header-cloud { background: var(--dgc-ecosystem-header-cloud-background); padding: var(--dgc-ecosystem-header-cloud-padding); } .dgc-ecosystem-header-ai { background: var(--dgc-ecosystem-header-ai-background); padding: var(--dgc-ecosystem-header-ai-padding); } .dgc-ecosystem-related { background: #e8f0fe; padding-block: 64px; } .dgc-ecosystem-solution-cards { padding-block: 8px 0; } .dgc-ecosystem-solution-cards + section { padding-block: 24px 64px; } .dgc-ecosystem-case-studies { padding-bottom: 64px; } .dgc-ecosystem-case-studies header { max-width: 800px; } .dgc-ecosystem-solution-cards-paginator { display: grid; gap: 24px; grid: auto-flow / repeat(auto-fit, minmax(350px, 1fr)); margin-bottom: 24px; } .dgc-ecosystem-solution-card { border: var(--tenant-primary-border); border-radius: 8px; } .dgc-ecosystem-solution-card, .dgc-ecosystem-solution-card > div, .dgc-ecosystem-solution-card > div > div { height: 100%; } .dgc-ecosystem-solution-card .devsite-landing-row-item-labels { display: flex; justify-content: space-between; } .dgc-ecosystem-solution-card .devsite-landing-row-item-labels span { font: 400 14px 'Roboto'; } .dgc-ecosystem-solution-card-icons { align-items: center; display: flex; gap: 12px; margin-top: auto; padding-top: 32px; } .dgc-ecosystem-solution-card-icons + div { margin-top: 32px; } .dgc-ecosystem-solution-card-icons img { max-height: 32px; max-width: 32px; min-width: 32px; } .dgc-ecosystem-case-study .devsite-landing-row-item-labels span, .android-spotlight .devsite-landing-row-item-labels span { font: 400 14px 'Roboto'; } .dgc-ecosystem-case-study h3 a { color: #202124; font: 700 24px 'Google Sans'; } .dgc-ecosystem-case-study > div:first-child { padding: 24px 24px 0; } .dgc-ecosystem-additional-solutions-card > div:first-child { order: 1; padding: 25px; } .dgc-ecosystem-additional-solutions-card { display: grid; grid: auto-flow / 1.5fr 1fr; } .products .dgc-ecosystem-additional-solutions-card { grid: auto-flow / 1fr 1fr; } .dgc-ecosystem-additional-solutions-card img { max-height: 100px; max-width: 155px; width: auto; } .products .dgc-ecosystem-additional-solutions-card img { max-height: 140px; max-width: 300px; } /* [1] Forces background color of row to be #f8f9fa instead of white */ .dgc-ecosystem-additional-solutions { background: #f8f9fa !important; /* [1] */ padding-block: 64px; } .products .dgc-ecosystem-additional-solutions { background: white !important; /* Forces correct bg for products pg */ .color-scheme--dark & { background: #2a2b2e !important; } } .dgc-ecosystem-header-mobile { --dgc-ecosystem-header-mobile-background: url(/focus/images/mobile-header.png) no-repeat center center / min(calc(100vw - 66px), 1436px); --dgc-ecosystem-header-mobile-padding: min(9vw, 150px) 0; } .dgc-ecosystem-header-web { --dgc-ecosystem-header-web-background: url(/focus/images/web-header.png) no-repeat center center / min(calc(100vw - 66px), 1436px); --dgc-ecosystem-header-web-padding: min(9vw, 150px) 0; } .dgc-ecosystem-header-cloud { --dgc-ecosystem-header-cloud-background: url(/focus/images/cloud-header.png) no-repeat center center / min(calc(100vw - 66px), 1436px); --dgc-ecosystem-header-cloud-padding: min(9vw, 150px) 0; } .dgc-ecosystem-header-ai { --dgc-ecosystem-header-ai-background: url(/focus/images/ai-header.png) no-repeat center center / min(calc(100vw - 66px), 1436px); --dgc-ecosystem-header-ai-padding: min(9vw, 150px) 0; } @media screen and (max-width: 1420px) { .dgc-build-smarter-hero .devsite-landing-row-item-buttons { display: block; } .dgc-build-smarter-buttons-label { margin: 0 0 8px 12px; } .dgc-ecosystem-additional-solutions-card img { width: -webkit-fill-available; } } @media screen and (max-width: 1000px) { .dgc-ecosystem-header-mobile { --dgc-ecosystem-header-mobile-background: url(/focus/images/mobile-header-mobile.png) no-repeat top 30px left 30px / 50vw; --dgc-ecosystem-header-mobile-padding: 36vw 0 50px; } .dgc-ecosystem-header-web { --dgc-ecosystem-header-web-background: url(/focus/images/web-header-mobile.png) no-repeat top 30px left 30px / 50vw; --dgc-ecosystem-header-web-padding: 36vw 0 50px; } .dgc-ecosystem-header-cloud { --dgc-ecosystem-header-cloud-background: url(/focus/images/cloud-header-mobile.png) no-repeat top 30px left 30px / 50vw; --dgc-ecosystem-header-cloud-padding: 36vw 0 50px; } .dgc-ecosystem-header-ai { --dgc-ecosystem-header-ai-background: url(/focus/images/ai-header-mobile.png) no-repeat top 30px left 30px / 50vw; --dgc-ecosystem-header-ai-padding: 36vw 0 50px; } } @media screen and (max-width: 840px) { .dgc-ecosystem-additional-solutions-card, .products .dgc-ecosystem-additional-solutions-card { grid: unset; } .dgc-web-ecosystem-card img { max-height: 105px; padding: 10px 0 0 10px; width: auto; } .dgc-ecosystem-additional-solutions-card img { width: auto; } } @media screen and (max-width: 600px) { .products .dgc-build-smarter-hero { text-align: center; } .dgc-build-smarter h3 { line-height: 85px !important; } .products .dgc-build-smarter h3 { line-height: 38px !important; } /* [1] Forces logo garden to be 1 column at 600px width */ .dgc-ecosystem-logo-garden > div > div { grid-template-columns: 1fr !important; /* [1] */ } .dgc-ecosystem-header-mobile { --dgc-ecosystem-header-mobile-background: url(/focus/images/mobile-header-mobile.png) no-repeat top 30px left 30px / calc(100vw - 66px); --dgc-ecosystem-header-mobile-padding: 58vw 0 50px; } .dgc-ecosystem-header-web { --dgc-ecosystem-header-web-background: url(/focus/images/web-header-mobile.png) no-repeat top 30px left 30px / calc(100vw - 66px); --dgc-ecosystem-header-web-padding: 58vw 0 50px; } .dgc-ecosystem-header-cloud { --dgc-ecosystem-header-cloud-background: url(/focus/images/cloud-header-mobile.png) no-repeat top 30px left 30px / calc(100vw - 66px); --dgc-ecosystem-header-cloud-padding: 58vw 0 50px; } .dgc-ecosystem-header-ai { --dgc-ecosystem-header-ai-background: url(/focus/images/ai-header-mobile.png) no-repeat top 30px left 30px / calc(100vw - 66px); --dgc-ecosystem-header-ai-padding: 58vw 0 50px; } .dgc-logo-garden-cta { margin-top: 0 !important; } .dgc-ecosystem-solution-cards + section { padding-block: 24px 32px; } .dgc-trending-row h3 a { font: 700 32px 'Google Sans'; } .dgc-ecosystem-additional-solutions { padding-block: 32px; } .dgc-ecosystem-case-studies { padding-bottom: 32px; } .android-spotlight-mobile { margin-bottom: 32px; } } .dgc-events-learn-community { background-image: url(/homepage-assets/images/dgc-learn-community-event-background.png); background-size: contain; padding-top: 40px !important; .find-an-event-sticker, .join-a-community-sticker, .improve-skills-sticker { position: absolute; top: 200px; right: 20px; height: 100px; } } @media screen and (max-width: 1349px) { .find-an-event-sticker, .join-a-community-sticker, .improve-skills-sticker { display: none; } } </style> <div class="devsite-banner devsite-banner-announcement nocontent" > <div class="devsite-banner-message"> <div class="devsite-banner-message-text"> <style> .devsite-banner-announcement { background: #1a73e8; color: white; font-size: 16px; font-weight: 500; } .devsite-banner-announcement a { color: white !important; font-weight: 700; } .devsite-banner-announcement a:link:not(.button), .devsite-banner-announcement a:visited:not(.button) { background: 0; } .devsite-banner-announcement a:hover, .devsite-banner-announcement a:focus { text-decoration: none; } .devsite-banner-announcement .devsite-banner-message-text { margin: 0 auto; } </style> <span class="nocontent">See what premium Google Developer Program benefits can do for you. <a href="/profile/u/me/plans-and-pricing?utm_source=gdpmarketing&utm_medium=referral&utm_campaign=top_bar&utm_content" data-category="Announcement" data-label="Google Developer Program premium" class="gc-analytics-event nocontent">Learn more</a> </span> </div> </div> </div> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google for Developers" > Google for Developers </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/products" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="" > Products </a> </li> </ul> </div> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <section class="devsite-landing-row devsite-landing-row-1-up dgc-hero-fullscreen-row" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-html"> <div class="dgc-hero-fullscreen-item"> <h2 id="get-ready-for-google-io" data-text="Get ready for Google I/O" tabindex="-1">Get ready for Google I/O</h2> <p>Join us May 20-21 for live streamed keynotes, sessions, and more.</p> <a href="https://io.google/2025/register/?utm_source=google-hpp&utm_medium=embedded_marketing&utm_campaign=hpp_watch&utm_content=" class="button gc-analytics-event" data-category="Homepage Hero Banner" data-label="Google I/O 2024, Register">Register</a> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up devsite-landing-row-header-centered devsite-landing-row-large-headings devsite-landing-row-logos dgc-logo-garden dgc-ecosystem-logo-garden" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="start-building-today" data-text="Start building today" tabindex="0"> Start building today </h2> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <a href="https://developer.android.com" data-category="Homepage Logo Garden" data-label="Android"> <div class="devsite-landing-row-item dgc-logo-garden-card" description-position="bottom"> <div class="devsite-landing-row-item-media"> <figure class="devsite-landing-row-item-custom-image"> <div class="devsite-landing-row-item-custom-image-icon-wrapper"> <div class="devsite-landing-row-item-custom-image-icon-container" size="medium"> <img class="devsite-landing-row-item-custom-image-icon" alt="Android logo" src="/static/site-assets/images/products/android-logo.png"> </div> </div> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <p>Android</p> <p>Modern tools to help you build experiences that people love across every Android device.</p> </div> </div> </div> </div> </a> </div> <div class="devsite-landing-row-item" description-position="bottom" > <a href="https://console.cloud.google.com/freetrial?redirectPath=/products/solutions/catalog&utm_source=developers.google.com&utm_medium=et&utm_campaign=FY24-Q1-DGC-HP-Google-Cloud-card" data-category="Homepage Logo Garden" data-label="Google Cloud"> <div class="devsite-landing-row-item dgc-logo-garden-card" description-position="bottom"> <div class="devsite-landing-row-item-media"> <figure class="devsite-landing-row-item-custom-image"> <div class="devsite-landing-row-item-custom-image-icon-wrapper"> <div class="devsite-landing-row-item-custom-image-icon-container" size="medium"> <img class="devsite-landing-row-item-custom-image-icon" alt="Google Cloud logo" src="//www.gstatic.com/images/branding/product/2x/google_cloud_64dp.png"> </div> </div> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <p>Google Cloud</p> <p>New customers get $300 in free credits to deploy a dynamic website, launch a VM, build a three-tier web app, and more.</p> </div> </div> </div> </div> </a> </div> <div class="devsite-landing-row-item" description-position="bottom" > <a href="https://aistudio.google.com/app/prompts/new_chat/?utm_source=gfd&utm_medium=referral&utm_campaign=home_garden&utm_content=" data-category="AI Logo Garden" data-label="Google AI Studio"> <div class="devsite-landing-row-item dgc-logo-garden-card" description-position="bottom"> <div class="devsite-landing-row-item-media"> <figure class="devsite-landing-row-item-custom-image"> <div class="devsite-landing-row-item-custom-image-icon-wrapper"> <div class="devsite-landing-row-item-custom-image-icon-container" size="medium"> <img class="devsite-landing-row-item-custom-image-icon" alt="Google AI Studio logo" src="/static/focus/images/ai-studio-icon.png"> </div> </div> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <p>Google AI Studio</p> <p>Build generative AI applications quickly with Gemini in Google AI Studio.</p> </div> </div> </div> </div> </a> </div> <div class="devsite-landing-row-item" description-position="bottom" > <a href="https://ai.google.dev/gemini-api/docs?utm_source=gfd&utm_medium=referral&utm_campaign=ai_logo_garden&utm_content=" data-category="AI Logo Garden" data-label="Gemini API"> <div class="devsite-landing-row-item dgc-logo-garden-card" description-position="bottom"> <div class="devsite-landing-row-item-media"> <figure class="devsite-landing-row-item-custom-image"> <div class="devsite-landing-row-item-custom-image-icon-wrapper"> <div class="devsite-landing-row-item-custom-image-icon-container" size="medium"> <img class="devsite-landing-row-item-custom-image-icon" alt="Gemini API" src="/static/focus/images/gemini-icon.png"> </div> </div> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <p>Gemini API</p> <p> Build and deploy production ready generative AI experiences, enhanced by Gemini models. Get started for free! </p> </div> </div> </div> </div> </a> </div> <div class="devsite-landing-row-item" description-position="bottom" > <a href="https://developer.chrome.com/" data-category="Homepage Logo Garden" data-label="Google Chrome"> <div class="devsite-landing-row-item dgc-logo-garden-card" description-position="bottom"> <div class="devsite-landing-row-item-media"> <figure class="devsite-landing-row-item-custom-image"> <div class="devsite-landing-row-item-custom-image-icon-wrapper"> <div class="devsite-landing-row-item-custom-image-icon-container" size="medium"> <img class="devsite-landing-row-item-custom-image-icon" alt="ChromeOS logo" src="/static/homepage-assets/images/chromeos-logo.svg"> </div> </div> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <p>Chrome</p> <p>Modern tools and features that help you build high-quality web experiences.</p> </div> </div> </div> </div> </a> </div> <div class="devsite-landing-row-item" description-position="bottom" > <a href="https://developer.android.com/distribute" data-category="Homepage Logo Garden" data-label="Google Play"> <div class="devsite-landing-row-item dgc-logo-garden-card" description-position="bottom"> <div class="devsite-landing-row-item-media"> <figure class="devsite-landing-row-item-custom-image"> <div class="devsite-landing-row-item-custom-image-icon-wrapper"> <div class="devsite-landing-row-item-custom-image-icon-container" size="medium"> <img class="devsite-landing-row-item-custom-image-icon" alt="Play prism" src="https://www.gstatic.com/images/branding/product/2x/play_prism_64dp.png"> </div> </div> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <p>Google Play</p> <p> Grow your business, improve app quality, engage your audience, and earn revenue. </p> </div> </div> </div> </div> </a> </div> <div class="devsite-landing-row-item" description-position="bottom" > <a href="https://firebase.google.com/" data-category="Homepage Logo Garden" data-label="Firebase"> <div class="devsite-landing-row-item dgc-logo-garden-card" description-position="bottom"> <div class="devsite-landing-row-item-media"> <figure class="devsite-landing-row-item-custom-image"> <div class="devsite-landing-row-item-custom-image-icon-wrapper"> <div class="devsite-landing-row-item-custom-image-icon-container" size="medium"> <img class="devsite-landing-row-item-custom-image-icon" alt="Firebase logo" src="https://www.gstatic.com/devrel-devsite/prod/v7b55e5943f9ab80a0423ff6653c19f56a0e5266641f85a6a76aee662b0157d18/firebase/images/icon.svg"> </div> </div> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <p>Firebase</p> <p>An app development platform that helps you build and grow apps and games users love.</p> </div> </div> </div> </div> </a> </div> <div class="devsite-landing-row-item" description-position="bottom" > <a href="https://www.tensorflow.org/" data-category="Homepage Logo Garden" data-label="TensorFlow"> <div class="devsite-landing-row-item dgc-logo-garden-card" description-position="bottom"> <div class="devsite-landing-row-item-media"> <figure class="devsite-landing-row-item-custom-image"> <div class="devsite-landing-row-item-custom-image-icon-wrapper"> <div class="devsite-landing-row-item-custom-image-icon-container" size="medium"> <img class="devsite-landing-row-item-custom-image-icon" alt="TensorFlow logo" src="/static/site-assets/images/products/tensorflow-logo-196.png"> </div> </div> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <p>TensorFlow</p> <p>An end-to-end platform that makes it easy to build and deploy ML models in any environment.</p> </div> </div> </div> </div> </a> </div> <div class="devsite-landing-row-item" description-position="bottom" > <a href="https://flutter.dev" data-category="Homepage Logo Garden" data-label="Flutter"> <div class="devsite-landing-row-item dgc-logo-garden-card" description-position="bottom"> <div class="devsite-landing-row-item-media"> <figure class="devsite-landing-row-item-custom-image"> <div class="devsite-landing-row-item-custom-image-icon-wrapper"> <div class="devsite-landing-row-item-custom-image-icon-container" size="medium"> <img class="devsite-landing-row-item-custom-image-icon" alt="Flutter logo" src="https://www.gstatic.com/images/branding/product/2x/flutter_64dp.png"> </div> </div> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <p>Flutter</p> <p>Build, test, and deploy beautiful web, mobile, desktop and embedded apps from one codebase.</p> </div> </div> </div> </div> </a> </div> <div class="devsite-landing-row-item" description-position="bottom" > <a href="https://ads.google.com/" data-category="Homepage Logo Garden" data-label="Google Ads"> <div class="devsite-landing-row-item dgc-logo-garden-card" description-position="bottom"> <div class="devsite-landing-row-item-media"> <figure class="devsite-landing-row-item-custom-image"> <div class="devsite-landing-row-item-custom-image-icon-wrapper"> <div class="devsite-landing-row-item-custom-image-icon-container" size="medium"> <img class="devsite-landing-row-item-custom-image-icon" alt="Google Ads logo" src="/static/homepage-assets/images/google-ads.svg"> </div> </div> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <p>Google Ads</p> <p>Promote your website, products, and app to the right users with Google Ads.</p> </div> </div> </div> </div> </a> </div> <div class="devsite-landing-row-item" description-position="bottom" > <a href="https://www.kaggle.com/" data-category="Homepage Logo Garden" data-label="Kaggle"> <div class="devsite-landing-row-item dgc-logo-garden-card" description-position="bottom"> <div class="devsite-landing-row-item-media"> <figure class="devsite-landing-row-item-custom-image"> <div class="devsite-landing-row-item-custom-image-icon-wrapper"> <div class="devsite-landing-row-item-custom-image-icon-container" size="medium"> <img class="devsite-landing-row-item-custom-image-icon" alt="Kaggle logo" src="/static/focus/images/kaggle.svg"> </div> </div> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <p>Kaggle</p> <p>A platform to share machine learning data sets, explore and build models, and compete in competitions.</p> </div> </div> </div> </div> </a> </div> <div class="devsite-landing-row-item" description-position="bottom" > <a href="https://angular.dev/" data-category="Homepage Logo Garden" data-label="Angular"> <div class="devsite-landing-row-item dgc-logo-garden-card" description-position="bottom"> <div class="devsite-landing-row-item-media"> <figure class="devsite-landing-row-item-custom-image"> <div class="devsite-landing-row-item-custom-image-icon-wrapper"> <div class="devsite-landing-row-item-custom-image-icon-container" size="medium"> <img class="devsite-landing-row-item-custom-image-icon" alt="Angular logo" src="/static/homepage-assets/images/angular_gradient.png"> </div> </div> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <p>Angular</p> <p>The web development framework for building the future.</p> </div> </div> </div> </div> </a> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-item-centered devsite-landing-row-100 dgc-logo-garden-cta" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-buttons"> <a href="https://developers.google.com/products" class="button button-primary " data-category="Homepage Logo Garden" data-label="View all developer products" >View all developer products</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards dgc-trending-news" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="trending-news" data-text="Trending news" tabindex="0"> Trending news </h2> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://gamedevsummit.withgoogle.com/" data-category="AI Trending News Card" data-label="Play your way at GDC" > <picture> <img alt="" src="https://developers.google.com/static/focus/images/gdc.png" srcset="https://developers.google.com/static/focus/images/gdc_36.png 36w,https://developers.google.com/static/focus/images/gdc_48.png 48w,https://developers.google.com/static/focus/images/gdc_72.png 72w,https://developers.google.com/static/focus/images/gdc_96.png 96w,https://developers.google.com/static/focus/images/gdc_480.png 480w,https://developers.google.com/static/focus/images/gdc_720.png 720w,https://developers.google.com/static/focus/images/gdc_856.png 856w,https://developers.google.com/static/focus/images/gdc_960.png 960w,https://developers.google.com/static/focus/images/gdc_1440.png 1440w,https://developers.google.com/static/focus/images/gdc_1920.png 1920w,https://developers.google.com/static/focus/images/gdc_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="play-your-way-at-gdc" data-text="Play your way at GDC " class="hide-from-toc no-link" tabindex="0"> <a href="https://gamedevsummit.withgoogle.com/" data-category="AI Trending News Card" data-label="Play your way at GDC" > Play your way at GDC </a> </h3> <div class="devsite-landing-row-item-description-content"> Build interactive agents with Gemini, supercharge your Android game with powerful APIs, and expand your PC gamer audience with Play's growth tools. Be the first to get our latest news from GDC. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://gamedevsummit.withgoogle.com/" class="button button-primary " data-category="AI Trending News Card" data-label="Play your way at GDC, Sign up for updates" >Sign up for updates</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://developer.android.com/studio" data-category="AI Trending News Card" data-label="Ladybug expands Gemini within Android Studio" > <picture> <img alt="" src="https://developers.google.com/static/focus/images/android-studio-ladybug.png" srcset="https://developers.google.com/static/focus/images/android-studio-ladybug_36.png 36w,https://developers.google.com/static/focus/images/android-studio-ladybug_48.png 48w,https://developers.google.com/static/focus/images/android-studio-ladybug_72.png 72w,https://developers.google.com/static/focus/images/android-studio-ladybug_96.png 96w,https://developers.google.com/static/focus/images/android-studio-ladybug_480.png 480w,https://developers.google.com/static/focus/images/android-studio-ladybug_720.png 720w,https://developers.google.com/static/focus/images/android-studio-ladybug_856.png 856w,https://developers.google.com/static/focus/images/android-studio-ladybug_960.png 960w,https://developers.google.com/static/focus/images/android-studio-ladybug_1440.png 1440w,https://developers.google.com/static/focus/images/android-studio-ladybug_1920.png 1920w,https://developers.google.com/static/focus/images/android-studio-ladybug_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="ladybug-expands-gemini-within-android-studio" data-text="Ladybug expands Gemini within Android Studio " class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.android.com/studio" data-category="AI Trending News Card" data-label="Ladybug expands Gemini within Android Studio" > Ladybug expands Gemini within Android Studio </a> </h3> <div class="devsite-landing-row-item-description-content"> In our biggest release since launch, Ladybug transforms Gemini into your new coding companion. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.android.com/studio" class="button button-primary " data-label="Ladybug expands Gemini within Android Studio, Learn more" data-category="AI Trending News Card" >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://developer.chrome.com/docs/devtools/ai-assistance/quickstart" data-category="Trending News Card" data-label="Explore AI assistance in Chrome DevTools" > <picture> <img alt="" src="https://developers.google.com/static/focus/images/ai-assistance.png" srcset="https://developers.google.com/static/focus/images/ai-assistance_36.png 36w,https://developers.google.com/static/focus/images/ai-assistance_48.png 48w,https://developers.google.com/static/focus/images/ai-assistance_72.png 72w,https://developers.google.com/static/focus/images/ai-assistance_96.png 96w,https://developers.google.com/static/focus/images/ai-assistance_480.png 480w,https://developers.google.com/static/focus/images/ai-assistance_720.png 720w,https://developers.google.com/static/focus/images/ai-assistance_856.png 856w,https://developers.google.com/static/focus/images/ai-assistance_960.png 960w,https://developers.google.com/static/focus/images/ai-assistance_1440.png 1440w,https://developers.google.com/static/focus/images/ai-assistance_1920.png 1920w,https://developers.google.com/static/focus/images/ai-assistance_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="explore-ai-assistance-in-chrome-devtools" data-text="Explore AI assistance in Chrome DevTools" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/devtools/ai-assistance/quickstart" data-category="Trending News Card" data-label="Explore AI assistance in Chrome DevTools" > Explore AI assistance in Chrome DevTools </a> </h3> <div class="devsite-landing-row-item-description-content"> Support your debugging workflow across styling, performance, sources, network, and more. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/devtools/ai-assistance/quickstart" class="button button-primary " data-label="Explore AI assistance in Chrome DevTools, Learn more" data-category="Trending News Card" >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-50 devsite-landing-row-hero devsite-landing-row-no-image-background android-spotlight" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media devsite-landing-row-item-media-left "> <figure class="devsite-landing-row-item-image"> <a href="https://ai.google.dev/" aria-label="Introducing Gemini 2.0" data-category="Mobile Android Promo Banner" data-label="Introducing Gemini 2.0" > <picture> <img alt="" src="https://developers.google.com/static/focus/images/gemini-2.png" srcset="https://developers.google.com/static/focus/images/gemini-2_36.png 36w,https://developers.google.com/static/focus/images/gemini-2_48.png 48w,https://developers.google.com/static/focus/images/gemini-2_72.png 72w,https://developers.google.com/static/focus/images/gemini-2_96.png 96w,https://developers.google.com/static/focus/images/gemini-2_480.png 480w,https://developers.google.com/static/focus/images/gemini-2_720.png 720w,https://developers.google.com/static/focus/images/gemini-2_856.png 856w,https://developers.google.com/static/focus/images/gemini-2_960.png 960w,https://developers.google.com/static/focus/images/gemini-2_1440.png 1440w,https://developers.google.com/static/focus/images/gemini-2_1920.png 1920w,https://developers.google.com/static/focus/images/gemini-2_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 708px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" " >What's new in AI</span> </div> <h3 id="introducing-gemini-20" data-text="Introducing Gemini 2.0" class="hide-from-toc no-link" tabindex="0"> <a href="https://ai.google.dev/" aria-label="Introducing Gemini 2.0" data-category="Mobile Android Promo Banner" data-label="Introducing Gemini 2.0" > Introducing Gemini 2.0 </a> </h3> <div class="devsite-landing-row-item-description-content"> Starting today, developers can test and explore Gemini 2.0 Flash via the Gemini API in Google AI Studio and Vertex AI. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://ai.google.dev/" class="button button-primary " data-label="Introducing Gemini 2.0, Learn more" data-category="Mobile Android Promo Banner" >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards dgc-events-learn-community" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://developers.google.com/events" aria-label="Find an event" data-category="Homepage Promo Banner" data-label="Find an event" > <picture> <img alt="" src="https://developers.google.com/static/homepage-assets/images/find-event.png" srcset="https://developers.google.com/static/homepage-assets/images/find-event_36.png 36w,https://developers.google.com/static/homepage-assets/images/find-event_48.png 48w,https://developers.google.com/static/homepage-assets/images/find-event_72.png 72w,https://developers.google.com/static/homepage-assets/images/find-event_96.png 96w,https://developers.google.com/static/homepage-assets/images/find-event_480.png 480w,https://developers.google.com/static/homepage-assets/images/find-event_720.png 720w,https://developers.google.com/static/homepage-assets/images/find-event_856.png 856w,https://developers.google.com/static/homepage-assets/images/find-event_960.png 960w,https://developers.google.com/static/homepage-assets/images/find-event_1440.png 1440w,https://developers.google.com/static/homepage-assets/images/find-event_1920.png 1920w,https://developers.google.com/static/homepage-assets/images/find-event_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="find-an-event-img-classfind-an-event-sticker-srcstatichomepage-assetsimagesfind-an-event-stickerpng" data-text="Find an event " class="hide-from-toc no-link" tabindex="0"> <a href="https://developers.google.com/events" aria-label="Find an event" data-category="Homepage Promo Banner" data-label="Find an event" > Find an event <img class="find-an-event-sticker" src="/static/homepage-assets/images/find-an-event-sticker.png"> </a> </h3> <div class="devsite-landing-row-item-description-content"> Grow your knowledge through online and in-person developer events. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developers.google.com/events" class="button button-primary " data-label="Find an event" data-category="Homepage Promo Banner" >View events</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://developers.google.com/learn" aria-label="Improve technical skills" data-category="Homepage Promo Banner" data-label="Improve technical skills" > <picture> <img alt="" src="https://developers.google.com/static/homepage-assets/images/improve-tech-skills.png" srcset="https://developers.google.com/static/homepage-assets/images/improve-tech-skills_36.png 36w,https://developers.google.com/static/homepage-assets/images/improve-tech-skills_48.png 48w,https://developers.google.com/static/homepage-assets/images/improve-tech-skills_72.png 72w,https://developers.google.com/static/homepage-assets/images/improve-tech-skills_96.png 96w,https://developers.google.com/static/homepage-assets/images/improve-tech-skills_480.png 480w,https://developers.google.com/static/homepage-assets/images/improve-tech-skills_720.png 720w,https://developers.google.com/static/homepage-assets/images/improve-tech-skills_856.png 856w,https://developers.google.com/static/homepage-assets/images/improve-tech-skills_960.png 960w,https://developers.google.com/static/homepage-assets/images/improve-tech-skills_1440.png 1440w,https://developers.google.com/static/homepage-assets/images/improve-tech-skills_1920.png 1920w,https://developers.google.com/static/homepage-assets/images/improve-tech-skills_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="improve-technical-skills-img-classimprove-skills-sticker-srcstatichomepage-assetsimagesimprove-skills-stickerpng" data-text="Improve technical skills " class="hide-from-toc no-link" tabindex="0"> <a href="https://developers.google.com/learn" aria-label="Improve technical skills" data-category="Homepage Promo Banner" data-label="Improve technical skills" > Improve technical skills <img class="improve-skills-sticker" src="/static/homepage-assets/images/improve-skills-sticker.png"> </a> </h3> <div class="devsite-landing-row-item-description-content"> Keep up with Google technology. Sharpen skills and master new ones. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developers.google.com/learn" class="button button-primary " data-label="Improve technical skills" data-category="Homepage Promo Banner" >Start learning</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://developers.google.com/community" aria-label="Explore communities" data-category="Homepage Promo Banner" data-label="Join a community" > <picture> <img alt="" src="https://developers.google.com/static/homepage-assets/images/join-a-community.png" srcset="https://developers.google.com/static/homepage-assets/images/join-a-community_36.png 36w,https://developers.google.com/static/homepage-assets/images/join-a-community_48.png 48w,https://developers.google.com/static/homepage-assets/images/join-a-community_72.png 72w,https://developers.google.com/static/homepage-assets/images/join-a-community_96.png 96w,https://developers.google.com/static/homepage-assets/images/join-a-community_480.png 480w,https://developers.google.com/static/homepage-assets/images/join-a-community_720.png 720w,https://developers.google.com/static/homepage-assets/images/join-a-community_856.png 856w,https://developers.google.com/static/homepage-assets/images/join-a-community_960.png 960w,https://developers.google.com/static/homepage-assets/images/join-a-community_1440.png 1440w,https://developers.google.com/static/homepage-assets/images/join-a-community_1920.png 1920w,https://developers.google.com/static/homepage-assets/images/join-a-community_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="join-a-community-img-classjoin-a-community-sticker-srcstatichomepage-assetsimagesjoin-a-community-stickerpng" data-text="Join a community " class="hide-from-toc no-link" tabindex="0"> <a href="https://developers.google.com/community" aria-label="Explore communities" data-category="Homepage Promo Banner" data-label="Join a community" > Join a community <img class="join-a-community-sticker" src="/static/homepage-assets/images/join-a-community-sticker.png"> </a> </h3> <div class="devsite-landing-row-item-description-content"> Meet a diverse network, no matter where you are on your developer journey. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developers.google.com/community" class="button button-primary " data-label="Join a community" data-category="Homepage Promo Banner" >Explore communities</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up devsite-landing-row-header-centered devsite-landing-row-large-headings devsite-landing-row-cards devsite-landing-row-no-image-background dgc-social-footer" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="follow-google-for-developers" data-text="Follow Google for Developers" tabindex="0"> Follow Google for Developers </h2> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://developers.google.com/static/homepage-assets/images/yt.svg" srcset="https://developers.google.com/static/homepage-assets/images/yt.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="youtube" data-text="YouTube" class="hide-from-toc no-link" tabindex="0"> YouTube </h3> <div class="devsite-landing-row-item-description-content"> <p>Subscribe to join a community of creative developers and learn the latest in Google technology.</p> </div> <div class="devsite-landing-row-item-buttons"> <a href="https://www.youtube.com/user/GoogleDevelopers" class="button gc-analytics-event " data-category="Social Footer Card" data-label="YouTube, Learn more" >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://developers.google.com/static/homepage-assets/images/ig.webp" srcset="https://developers.google.com/static/homepage-assets/images/ig.webp" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="instagram" data-text="Instagram" class="hide-from-toc no-link" tabindex="0"> Instagram </h3> <div class="devsite-landing-row-item-description-content"> <p>Follow and discover developer resources, community events, and inspirational stories.</p> </div> <div class="devsite-landing-row-item-buttons"> <a href="https://www.instagram.com/googlefordevs/" class="button gc-analytics-event " data-label="Instagram, Learn more" data-category="Social Footer Card" >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media dgc-social-li" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://developers.google.com/static/homepage-assets/images/li.png" srcset="https://developers.google.com/static/homepage-assets/images/li_36.png 36w,https://developers.google.com/static/homepage-assets/images/li_48.png 48w,https://developers.google.com/static/homepage-assets/images/li_72.png 72w,https://developers.google.com/static/homepage-assets/images/li_96.png 96w,https://developers.google.com/static/homepage-assets/images/li_480.png 480w,https://developers.google.com/static/homepage-assets/images/li_720.png 720w,https://developers.google.com/static/homepage-assets/images/li_856.png 856w,https://developers.google.com/static/homepage-assets/images/li_960.png 960w,https://developers.google.com/static/homepage-assets/images/li_1440.png 1440w,https://developers.google.com/static/homepage-assets/images/li_1920.png 1920w,https://developers.google.com/static/homepage-assets/images/li_2880.png 2880w" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="linkedin" data-text="LinkedIn" class="hide-from-toc no-link" tabindex="0"> LinkedIn </h3> <div class="devsite-landing-row-item-description-content"> <p>Join a community of creative developers and learn how to use the latest in technology. </p> </div> <div class="devsite-landing-row-item-buttons"> <a href="https://www.linkedin.com/showcase/googledevelopers/" class="button gc-analytics-event " data-label="LinkedIn, Learn more" data-category="Social Footer Card" >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://developers.google.com/static/homepage-assets/images/x.svg" srcset="https://developers.google.com/static/homepage-assets/images/x.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="x" data-text="X" class="hide-from-toc no-link" tabindex="0"> X </h3> <div class="devsite-landing-row-item-description-content"> <p>Join the conversation to discover the latest developer tools, resources, events, and announcements.</p> </div> <div class="devsite-landing-row-item-buttons"> <a href="https://twitter.com/googledevs" class="button gc-analytics-event " data-label="X, Learn more" data-category="Social Footer Card" >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <devsite-hats-survey class="nocontent" hats-id="5Djwt4Azw0iQ84LPiVd0QYQ4sHzc" listnr-id="5123748"></devsite-hats-survey> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Connect</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//googledevelopers.blogspot.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Blog </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.instagram.com/googlefordevs/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Instagram </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/googledevelopers/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//twitter.com/googledevs" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > X (Twitter) </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.youtube.com/user/GoogleDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > YouTube </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Programs</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/community" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Google Developer Groups </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/community/experts" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Google Developer Experts </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/community/accelerators" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Accelerators </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/womentechmakers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Women Techmakers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.techequitycollective.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Tech Equity Collective </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Developer consoles</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//console.developers.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Google API Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.cloud.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Google Cloud Platform Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//play.google.com/apps/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Google Play Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.firebase.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Firebase Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.actions.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Actions on Google Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//cast.google.com/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > Cast SDK Developer Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//chrome.google.com/webstore/developer/dashboard" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 7)" > Chrome Web Store Dashboard </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.home.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 8)" > Google Home Developer Console </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//ai.google.dev/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google AI Link" > Google AI </a> </li> <li class="devsite-footer-sites-item"> <a href="/products" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/terms/site-terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> <li class="devsite-footer-utility-item devsite-footer-utility-button"> <span class="devsite-footer-utility-description">Sign up for the Google for Developers newsletter</span> <a class="devsite-footer-utility-link gc-analytics-event" href="/newsletter/subscribe" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link" > Subscribe </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> <devsite-concierge data-info-panel data-ai-panel data-api-explorer-panel > </devsite-concierge> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[{"dimensions": {"dimension4": "Google for Developers", "dimension5": "en", "dimension1": "Signed out", "dimension11": false, "dimension3": false, "dimension6": "en"}, "gaid": "UA-24532603-1", "metrics": {"ratings_count": "metric2", "ratings_value": "metric1"}, "purpose": 1}, {"dimensions": {"dimension0": "39300012,39300531,39300515,39300523,39300241,39300490,39300579,39300191"}, "gaid": "", "metrics": {}, "purpose": 0}]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [{"id": "G-272J68FCRF", "purpose": 1}, {"id": "G-P65P8J8YWQ", "purpose": 0}], "ga4p": [{"id": "G-272J68FCRF", "purpose": 1}], "gtm": [], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Google for Developers", "signedIn": "False", "tenant": "developers", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": "39300012,39300531,39300463,39300515,39300523,39300483,39300505,39300241,39300490,39300579,39300191"}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="6LtYPgEXfm70nQS5TIZyuopC9Dwn7r"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/js/app_loader.js', '[1,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers","https://developers-dot-devsite-v2-prod.appspot.com",1,null,["/_pwa/developers/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/images/favicon-new.png","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/images/lockup-new.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developers.google.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Significatio__enable_by_tenant","Profiles__enable_join_program_group_endpoint","Profiles__enable_completequiz_endpoint","Profiles__enable_recognition_badges","DevPro__enable_developer_subscriptions","MiscFeatureFlags__enable_explain_this_code","Search__enable_ai_search_summaries","Cloud__enable_cloud_shell_fte_user_flow","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_project_variables","Search__enable_ai_eligibility_checks","Concierge__enable_pushui","Cloud__enable_free_trial_server_call","Profiles__enable_stripe_subscription_management","Search__enable_dynamic_content_confidential_banner","TpcFeatures__enable_unmirrored_page_left_nav","Profiles__enable_profile_collections","Profiles__enable_page_saving","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_public_developer_profiles","Concierge__enable_concierge","Profiles__enable_dashboard_curated_recommendations","EngEduTelemetry__enable_engedu_telemetry","Search__enable_page_map","Cloud__enable_cloud_facet_chat","Profiles__enable_complete_playlist_endpoint","Cloud__enable_llm_concierge_chat","BookNav__enable_tenant_cache_key","Profiles__enable_release_notes_notifications","Profiles__require_profile_eligibility_for_signin","Cloud__enable_legacy_calculator_redirect","Profiles__enable_awarding_url","Cloud__enable_cloud_dlp_service","Experiments__reqs_query_experiments","MiscFeatureFlags__emergency_css","Search__enable_suggestions_from_borg","MiscFeatureFlags__enable_variable_operator","MiscFeatureFlags__developers_footer_image","Analytics__enable_clearcut_logging","Concierge__enable_concierge_restricted","Search__enable_ai_search_summaries_restricted","DevPro__enable_cloud_innovators_plus","Cloud__enable_cloudx_experiment_ids","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__enable_view_transitions","Concierge__enable_key_takeaways","CloudShell__cloud_shell_button","CloudShell__cloud_code_overflow_menu","Profiles__enable_completecodelab_endpoint","Cloud__enable_cloud_shell","Cloud__enable_cloudx_ping"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.clients6.google.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.clients6.google.com",1,4,null,"https://developerprofiles-pa.clients6.google.com",[1,"developers","Google for Developers","developers.google.com",null,"developers-dot-devsite-v2-prod.appspot.com",null,null,[1,1,[1],null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1,20],"/recommendations/information"],null,null,null,[1,1,1],[1,1,null,1,1]],null,[null,null,null,null,null,null,"/images/lockup-new.svg","/images/touchicon-180-new.png",null,null,null,null,1,null,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme-new.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,14,15,20,22,23,29,32,36],null,[[null,null,null,[3,7,10,2,39,17,4,32,24,11,12,13,34,15,25],null,null,[1,[["docType","Choose a content type",[["Tutorial",null,null,null,null,null,null,null,null,"Tutorial"],["Guide",null,null,null,null,null,null,null,null,"Guide"],["Sample",null,null,null,null,null,null,null,null,"Sample"]]],["product","Choose a product",[["Android",null,null,null,null,null,null,null,null,"Android"],["ARCore",null,null,null,null,null,null,null,null,"ARCore"],["ChromeOS",null,null,null,null,null,null,null,null,"ChromeOS"],["Firebase",null,null,null,null,null,null,null,null,"Firebase"],["Flutter",null,null,null,null,null,null,null,null,"Flutter"],["Assistant",null,null,null,null,null,null,null,null,"Google Assistant"],["GoogleCloud",null,null,null,null,null,null,null,null,"Google Cloud"],["GoogleMapsPlatform",null,null,null,null,null,null,null,null,"Google Maps Platform"],["GooglePay",null,null,null,null,null,null,null,null,"Google Pay & Google Wallet"],["GooglePlay",null,null,null,null,null,null,null,null,"Google Play"],["Tensorflow",null,null,null,null,null,null,null,null,"TensorFlow"]]],["category","Choose a topic",[["AiAndMachineLearning",null,null,null,null,null,null,null,null,"AI and Machine Learning"],["Data",null,null,null,null,null,null,null,null,"Data"],["Enterprise",null,null,null,null,null,null,null,null,"Enterprise"],["Gaming",null,null,null,null,null,null,null,null,"Gaming"],["Mobile",null,null,null,null,null,null,null,null,"Mobile"],["Web",null,null,null,null,null,null,null,null,"Web"]]]]]],[1,1],null,1],[[["UA-24532603-1"],["UA-22084204-5"],null,null,["UA-24532603-5"],null,null,[["G-272J68FCRF"],null,null,[["G-272J68FCRF",2]]],[["UA-24532603-1",2]],null,[["UA-24532603-5",2]],null,1],[[11,8],[15,12],[3,2],[14,11],[5,4],[1,1],[6,5],[4,3],[13,10],[16,13],[12,9]],[[1,1],[2,2]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"developers.devsite.google"],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m",1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Google for Developers - from AI and Cloud to Mobile and Web