Android Developers Blog
width=device-width, height=device-height, minimum-scale=1.0, initial-scale=1.0, user-scalable=0' name='viewport'/>
<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>
<meta content='Fdm6m1f7LG-QAyDu0qnE_r6lNk42A1CWFBPRD6Y4WuM' name='google-site-verification'/>
<meta content='https://developer.android.com/images/social/android-developers.png' property='og:image'/>
<meta content='232px' property='og:image:width'/>
<meta content='232px' property='og:image:height'/>
<meta content='Android Developers Blog' property='og:title'/>
<meta content='News and insights on the Android platform, developer tools, and events.' property='og:description'/>
<meta content='en_US' property='og:locale'/>
<meta content='https://android-developers.googleblog.com/' property='og:url'/>
<meta content='Android Developers Blog' property='og:site_name'/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400italic,400,500,500italic,700,700italic' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
<link href='https://www.gstatic.com/devrel-devsite/prod/v37463d4834445c1e880de1e91d2f8fc2c6a0e86fca4aa6a7bdbb270b040181dc/android/css/app.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js' type='text/javascript'></script>
<script src='https://www.google.com/js/gweb/analytics/autotrack.js' type='text/javascript'></script>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>
<script type='text/javascript'>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-961555-37', 'auto');
ga('send', 'pageview');
</script>
<!-- End -->
<style id='page-skin-1' type='text/css'><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Google Sans, Noto Sans, Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Google Sans, Noto Sans, Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Google Sans, Noto Sans, Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%;
}
.featured__image img,
.adb-card__image-wrapper img {
width: 100%;
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Google Sans, Noto Sans, Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Google Sans, Noto Sans, Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #202124;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Google Sans, Noto Sans, Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Google Sans, Noto Sans, Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding-top: 48px;
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Google Sans, Noto Sans, Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Google Sans, Noto Sans, Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px !important;
color: black;
background-color: #C6FF00;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none;
height: 56px !important;
width: unset !important;
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #C6FF00;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id='template-skin-1' type='text/css'><!--
--></style>
<!-- start all head -->
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link href='https://android-developers.googleblog.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://android-developers.googleblog.com/' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="Android Developers Blog - Atom" href="https://android-developers.googleblog.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Android Developers Blog - RSS" href="https://android-developers.googleblog.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Android Developers Blog - Atom" href="https://www.blogger.com/feeds/6755709643044947179/posts/default" />
<!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->
<meta content=