Google Developers Indonesia Blog: Memperkenalkan Pemilih Emoji Jetpack: Cara Baru untuk Menambahkan Emoji ke Aplikasi Android Anda

Memperkenalkan Pemilih Emoji Jetpack: Cara Baru untuk Menambahkan Emoji ke Aplikasi Android Anda

09 August 2023

/** Blogger default styles **/ html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 { font-family: Roboto, sans-serif; } .plusfollowers h2.title, .post h2.title, .widget h2.title { font-family: Roboto, sans-serif; } pre, .post-content pre.prettyprint { background-color: #f7f7f7; border: 1px solid #ddd; margin: 0 0 1em 0; padding: 1em; overflow: auto; } pre, code { font-size: 9pt; line-height: 125%; font-family: monospace; } pre, code { color: #060; font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; } /* Styles for https://github.com/google/code-prettify */ .com { color: #060; } .kwd { color: #008; } .typ { color: #606; } .lit { color: #066; } .pun { color: #660; } .pln { color: #000; } .fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img { cursor: pointer; opacity: 0.54; } .twitter-custom, .gplus-share, .fb-custom { margin-right: 12px; } /** Blogger custom theme **/ .adb-header, .searchBox input { box-sizing: border-box; } .popout-nav { background-color: white; width: 280px; height: 100%; position: fixed; z-index: 6; left: -280px; transition: left 0.2s; } .popout-search { background-color: white; width: 280px; position: fixed; z-index: 6; right: -280px; transition: right 0.2s; top: 0; } .popout-search .widget { margin: 0; } .popout-search #BlogSearch2_form .popout-options { padding-right: 24px; width: calc(100% - 48px); } .dropdown-nav { display: none; background-color: white; width: 104px; position: fixed; padding: 4px 0px 3px 0px; z-index: 4; left: 352px; top: 176px; transition: top 0.2s; box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5); } .dropdown-options { align-items: center; display: flex; flex-wrap: wrap; width: 94px; height: 48px; padding-left: 10px; } .dropdown-options:hover { background-color: #f7f9fa; } .dropdown-options span { color: #80868b; } .popout-options { padding-right: 8px; padding-left: 24px; padding-top: 16px; padding-bottom: 15px; display: inline-block; width: calc(100% - 32px); border-top: 1px solid #ddd; font-size: 13px; font-weight: 700; color: #80868b !important; } .popout-options:last-of-type { border-bottom: 1px solid #ddd; } .popout-options:first-of-type { border-top: 0; } #close-popout { padding: 12px 12px 11px 20px; } #close-search-popout { padding: 12px 20px 11px 12px; text-align: right; } .popout-search-overlay{ display: none; opacity: 0; background-color: black; width: 100%; height: 100%; position: fixed; transition: opacity 0.2s; } .popout-overlay{ display: none; opacity: 0; background-color: black; width: 100%; height: 100%; position: fixed; z-index: 5; transition: opacity 0.2s; } html { background-color: #fff; font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } body { width: 100%; position: absolute; padding: 0; /* This ensures that the scroll bar is always present, which is needed */ /* because render happens after page load; otherwise the header */ /* would 'bounce' in-between states. */ min-height: 150%; } h2 { font-size: 130%; } h1, h2, h3, h4, h5 { line-height: 1.5em; margin-bottom: 1em; } html, h4, h5, h6 { font-size: 14px; } a, a:visited { color: #039be5; text-decoration: none; } pre code { display: block; } .cols-wrapper { margin-top: 56px; } .header-outer, .cols-wrapper { padding: 0 60px; } html, .header-inner a { color: #212121; color: rgba(0, 0, 0, .87); } /** Archive widget. **/ .BlogArchive { font-size: 13px; font-weight: normal; } .BlogArchive .widget- { display: none; } .BlogArchive h2, .Label h2 { color: #039be5; text-decoration: none; } /* Specificity needed here to override widget CSS defaults. */ /* Months */ .Label { font-size: 13px; font-weight: normal; } .sidebar-icon { display: inline-block; width: auto; vertical-align: middle; height: 24px; margin-right: 24px; } .sidebar-social-links { align-items: center; } .sidebar-social-links .android-logo, .android-logo { height: 48px; } .sidebar-social-links a:last-child img { margin-right: 0; } .Label .widget- { display: none; } .searchBox input { border: 1px solid #eee; color: #212121; color: rgba(0, 0, 0, .87); font-size: 14px; padding: 8px 8px 8px 40px; width: 100%; font-family: Android Euclid, Roboto, sans-serif; background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat; } .searchBox ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: rgba(0, 0, 0, .54); } .section { margin: 0; padding: 0; } #sidebar-top { border: 1px solid #eee; } #sidebar-top > div { margin: 16px 0; } /*main post*/ .post { margin-bottom: 30px; } #main .post .title { margin: 0; } #main .post .title a { color: #212121; color: rgba(0, 0, 0, .87); font-weight: normal; font-size: 24px; } .message, #main .post .post-header { margin: 0; padding: 0; } #main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption { color: #444; font-weight: 500; } #main .post .post-header .published { font-size: 11px; font-weight: bold; } .post-header .publishdate { font-size: 16px; font-weight: normal; color: #757575; color: rgba(0, 0, 0, .54); } #main .post .post-footer { font-size: 12px; padding-bottom: 21px; } .label-footer { margin-bottom: 12px; margin-top: 12px; } #main .post .post-header .published { margin-bottom: 16px; } .post .post- { color: #545454; color: rgba(0, 0, 0, .67); font-size: 16px; margin: 16px 0 36px 0; line-height: 24px; word-wrap: break-word; } .post-summary { display: none; } /* Override all post images/videos to left align. */ @media (max-width: 712px) { .post- img { max-width: 100%; height: auto; width: auto; } } .post- .tr-caption-container img { margin-bottom: 12px; } .post- iframe, .post- embed { margin-left: auto !important; margin-right: auto !important; max-width: 100%; } .post- .carousel-container { margin-bottom: 48px; } #main .post- b { font-weight: 500; } /* These are the main paragraph spacing tweaks. */ #main .post- br { : ''; display: block; padding: 4px; } .post-content .space { display: block; height: 8px; } .post-content iframe+.space, .post-content iframe+br { padding: 0 !important; } #main .post .jump-link { margin-bottom: 10px; } .post-content img, .post-content iframe { margin: 30px 0 20px 0; } .post-content > img:first-child, .post-content > iframe:first-child { margin-top: 0; } .col-right .section { padding: 0 16px; } #aside { background: #fff; border: 1px solid #eee; border-top: 0; z-index: 2; } #aside .widget { margin: 0; } #aside .widget h2, #ArchiveList .toggle+a.post-count-link { color: #212121; color: rgba(0, 0, 0, .87); font-weight: 400 !important; margin: 0; } #ArchiveList .toggle { float: right; } #ArchiveList .toggle .material-icons { padding-top: 4px; } #sidebar-top, #sidebar { background: #fff; } #sidebar .tab { cursor: pointer; } #sidebar .tab .arrow { display: inline-block; float: right; } #sidebar .tab .icon { display: inline-block; vertical-align: top; height: 24px; width: 24px; margin-right: 13px; margin-left: -1px; margin-top: 1px; color: #757575; color: rgba(0, 0, 0, .54); } #sidebar .widget-content > :first-child { padding-top: 8px; } #sidebar .active .tab .arrow { -ms-transform: rotate(180deg); transform: rotate(180deg); } #sidebar .arrow { color: #757575; color: rgba(0, 0, 0, .54); } #sidebar .widget h2 { font-size: 14px; line-height: 24px; display: inline-block; } #sidebar .widget .BlogArchive { padding-bottom: 8px; } #sidebar .widget { border-bottom: 1px solid #eee; box-shadow: 0px 1px 0 white; margin-bottom: 0; padding: 14px 0; min-height: 20px; } #sidebar .widget:last-child { border-bottom: none; box-shadow: none; margin-bottom: 0; } #sidebar ul { margin: 0; padding: 0; } #sidebar ul li { list-style: none; padding: 0; } #sidebar ul li a { line-height: 32px; } #sidebar ul ul ul li a { line-height: 24px; } #sidebar .archive { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC'); height: 24px; line-height: 24px; padding-left: 30px; } #sidebar .labels { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC'); height: 20px; line-height: 20px; padding-left: 30px; } #sidebar .rss a { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII='); } #sidebar .subscription a { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC'); } #sidebar-bottom { background: #f5f5f5; border-top: 1px solid #eee; } #sidebar-bottom .widget { border-bottom: 1px solid #e0e0e0; padding: 15px 0; text-align: center; } #sidebar-bottom > div:last-child { border-bottom: 0; } #sidebar-bottom .text { line-height: 20px; } /* Home, forward, and backward pagination. */ .blog-pager { padding-top: 10px; margin-top: 15px; text-align: right !important; } #blog-pager { padding: 40px 0 0; } #blog-pager a { display: inline-block; } .blog-pager i.disabled { opacity: 0.2 !important; } .blog-pager i { color: black; margin-left: 16px; opacity: 0.54; } .blog-pager i:hover, .blog-pager i:active { opacity: 0.87; } #blog-pager-older-link, #blog-pager-newer-link { float: none; } .gplus-profile { background-color: #fafafa; border: 1px solid #eee; overflow: hidden; width: 212px; } .gplus-profile-inner { margin-left: -1px; margin-top: -1px; } /* Sidebar follow buttons. */ .followgooglewrapper { padding: 12px 0 0 0; } .loading { visibility: hidden; } .detail-page .post-footer .cmt_iframe_holder { padding-top: 40px !important; } /* ADB */ .adb-hero-area { min-height: 104px; background-color: #073042; box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15); z-index: 5; position: fixed; width: 100%; } .adb-hero-logo { height: 80px; position: absolute; top: 12px; left: 16px; } .adb-footer-btm { display: flex; margin: 0 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-bottom: 40px; } .subscribe-btn { color: black; background-color: #3DDC84; border-radius: 100px; font: 500 16px/24px Android Euclid,Roboto,sans-serif; padding: 12px 24px; border: 0; } .adb-footer-info { align-items: center; display: flex; padding: 0; margin: 9px 0 0 -8px; font-size: 13px; } .footer-list { list-style: none; padding: 0 8px; } .subscribe-info { list-style: none; padding: 0 8px 0 0; font-size: 13px; color: black; } .footer-newsletter { display: flex; align-items: center; } .adb-header-inner { display: flex; align-items: center; } .adb-header { background-color: white; color: #fff; height: 48px; left: 0; overflow: hidden; padding: 36px 24px; right: 0; top: 104px; z-index: 4; display: flex; align-items: center; position: fixed; border-bottom: solid 1px #DADCE0; } .adb-shadow { margin-top: 48px; height: 1px; width: 100%; position: fixed; background: white; z-index: 2; box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15); } .adb-logo-box { display:inline; } .adb-burger-box { display: none; margin: 0 16px 0 0; } .adb-search-box { display: none; margin: 0 0 0 16px; } .adb-htag-box { display: flex; align-items: center; } .adb-header-tags { padding: 0 24px 0 0; } .adb-header-tags ~ .atb-header-tags { padding: 0 24px; } .adb-header-tags a { font-family: Android Euclid, Roboto, sans-serif; font-weight: 600; font-size: 16px; line-height: 20px; color: #5F6368; } .adb-header-tags a:hover { font-weight: 600; font-size: 16px; line-height: 20px; color: #073042; } .more-dropdown { display: none; } .dropdown-icon { transition: all 0.3s; } .adb-header-logo { display: inline-block; vertical-align: -11px; width: 134px; height: 32px; } .adb-header-title { color: #fff; display: inline-block; font-size: 20px; font-weight: normal; } .adb-header-links { border-left: 1px solid rgba(0, 0, 0, .1); display: block; left: 250px; list-style: none; margin: 0; padding: 12px 0 12px 18px; position: absolute; top: 0; } .adb-header-link-item { display: inline-block; } .adb-header-link, .adb-header-link:visited { color: #fff; display: inline-block; font-weight: 500; opacity: .7; padding: 12px 9px; text-transform: uppercase; vertical-align: 2px; } .adb-header-link:hover, .adb-header-link:focus { color: #fff; opacity: 1; } .adb-header-console, .adb-header-console:visited { border-radius: 3px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2); color: #fff; float: right; font-size: 14px; font-weight: 500; line-height: 28px; padding: 4px 10px; position: relative; text-transform: uppercase; transition: box-shadow .2s; z-index: 60; } .adb-header-console:hover { box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3); color: #fff; } .adb-header-console:focus { background-color: rgba(63, 81, 181, .1); color: #fff; } .adb-header-console-image { vertical-align: -5px; } .adb-hero { background-color: #dcedc8; margin-top: 64px; } .adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited { color: #414141; display: inline-block; font-weight: 500; margin: 25px 25px 0; } .adb-hero-inner { background-image: url('data:image/png;base64,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'); background-position: bottom right 70px; background-repeat: no-repeat; background-size: auto 100%; margin: 0 auto; max-width: 980px; padding: 0 60px; position: relative; } .adb-hero-back-icon { display: inline-block; margin-right: 5px; vertical-align: middle; } .adb-hero-title { font-size: 22px; line-height: 28px; padding: 24px 24px 0px 112px; } .adb-hero-title a { color: #FFFFFF; font-family: Android Euclid, Roboto, sans-serif; font-weight: 500; } .adb-hero-summary { font-size: 16px; line-height: 24px; padding: 8px 24px 8px 112px; } .adb-hero-summary a { color: rgba(255, 255, 255, 0.9); } .adb-hero-description { color: #6f7172; font-size: 16px; margin: 0; max-width: 440px; padding-bottom: 32px; } .adb-hero-search { position: absolute; top: 19.35%; right: 1.94%; } .adb-hero-search .searchBox input { border: 1px solid #80868B; border-radius: 4px; color: white; } .adb-hero-search .searchBox input::placeholder { color: #F1F3F4; font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: 0.5px; padding-left: 12px; } .adb-hero-link { position: absolute; right: 1.67%; top: 64.52%; } .adb-hero-link a { font-family: Android Euclid, Roboto, sans-serif; font-weight: 600; font-size: 16px; line-height: 20px; color: #3DDC84; letter-spacing: 1.4px; } .adb-hero-arrow { display: inline-flex; font-size: 24px; vertical-align: middle; } .adb-socials-box { display: flex; position: absolute; right: 1.67%; } .adb-socials-category, .adb-socials-divider { display: flex; align-items: center; } .adb-socials-divider { color: #DADCE0; font-size: 40px; font-weight: 100; margin: 0 20px; } .adb-socials-category img, .adb-footer-social-links img { height: 24px; } .adb-footer-social-links-img { margin-right: 20px; } .adb-hero-subscribe, .adb-hero-subscribe:visited { background-color: #90c653; color: #fff; display: inline-block; border-radius: 3px; margin: 25px 0 60px; padding: 13px 32px; text-transform: uppercase; } .adb-hero-subscribe:hover, .adb-hero-subscribe:focus { background-color: #333; } .adb-footer { margin: 32px auto 64px; } .adb-footer-more { border-bottom: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0; padding: 30px 0; } .adb-footer-more a { color: #000; display: inline-block; font-size: 20px; font-weight: 300; margin-right: 16px; } .adb-footer-social { float: right; margin-top: -62px; } .adb-footer-social a { background-color: #ccc; background-position: center; background-repeat: no-repeat; background-size: auto 16px; border-radius: 50%; display: inline-block; height: 36px; margin-left: 16px; transition: background-color .1s; width: 36px; } .adb-footer-social-youtube { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg'); } .adb-footer-social-youtube:hover { background-color: #f44336; } .adb-footer-social-gplus { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII='); } .adb-footer-social-gplus:hover { background-color: #f44336; } .adb-footer-social-twitter { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC'); } .adb-footer-social-twitter:hover { background-color: #55acee; } .adb-footer-social span { display: none; } .adb-footer-related { padding-top: 8px; } .adb-footer-related a { color: #999; font-size: 12px; white-space: nowrap; } .adb-footer-related a:not(:last-child)::after { content: '|'; cursor: default; margin: 0 7px 0 10px; } .adb-footer-section { margin: 48px auto; max-width: 700px; } .adb-footer-title { font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 1.5px; text-transform: uppercase; color: #3C4043; margin-bottom: 24px; } .adb-footer-columns { display: flex; justify-content: space-between; } .adb-other-blogs-title img { margin-right: 8px; vertical-align: -12px; } .adb-footer-social-label { display: flex !important; align-items: center; } .adb-footer-column a, .adb-footer-social-label, #footer-subscribe .tab h2 { color: #000; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0.25px; padding: .85em 0; -webkit-column-break-inside: avoid; break-inside: avoid-column; display: table; margin: 0; page-break-inside: avoid; } .adb-footer-btm a { color: #000; font-family: Android Euclid, Roboto, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0.25px; opacity: .7; transition: opacity .1s; -webkit-column-break-inside: avoid; break-inside: avoid-column; display: table; margin: 0; page-break-inside: avoid; } .adb-footer-column a { opacity: .7; transition: opacity .1s; } .adb-footer-column a:hover { opacity: 1; } .adb-footer-social-links { margin: 0 0 20px; } #footer-subscribe .widget { margin: 0; } #footer-subscribe .tab { display: flex; align-items: center; } #footer-subscribe .tab img { height: 16px; } .adb-label-view-more-toggle { cursor: pointer; } .adb-label-view-more-toggle::after { content: '\00e5c5'; float: right; font: 2em / .7 Material Icons; opacity: .6; } .adb-label-view-more-toggle.active::after { transform: rotate(180deg); } /** Desktop **/ @media (max-width: 900px) { .col-right { display: none; } .col-main { margin-right: 0; min-width: initial; } .cols-wrapper { min-width: initial; } .adb-hero-inner { background-image: none; } } /** ADB header breakpoint **/ @media (max-width: 768px) { .adb-header-links { display: none; } .dropdown-nav { display: none; } .adb-header { padding: 12px; text-align: center; } } @media (max-width: 1196px) { .breakpoint-hide { display:none; } .more-dropdown { height: 50px; display: flex; align-items: center; } } @media (max-width: 915px) { .adb-header { height: 0; margin: 0; padding: 0; display: none; } .adb-header-tags { display:none; } .more-dropdown { display:none; } .dropdown-nav { display: none; } .adb-hero-summary, .adb-hero-link, .adb-socials-category { display: none; } .adb-hero-title { padding-left: 152px; } .adb-hero-logo { height: 52px; top: 12px; left: 120px; } .adb-footer-section { margin: 0 auto; } .adb-footer-btm { margin: 0 24px 40px; } .adb-hero-area { min-height: 76px; } .adb-burger-box { display:inline; position: absolute; top: 17px; margin-left: 24px; font-size: 32px; color: white; } .adb-hero-title a{ margin-left: 40px; } } /** Tablet **/ @media (max-width: 712px) { .header-outer, .cols-wrapper { padding: 0 40px; } /* ADB */ .adb-hero-inner { padding: 0 40px; } .adb-hero-title { font-size: 16px; padding-left: 132px; } .adb-hero-logo { left: 100px; } .adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited { margin-left: 36px; } .adb-other-blogs-list { columns: auto; } .adb-other-blogs-title { font-size: 20px; } .adb-other-blogs-title img { height: auto; vertical-align: -6px; width: 32px; } .adb-footer-section { margin: 0 24px; } .adb-footer-more { padding-bottom: 75px; } .adb-footer-social { float: none; margin-bottom: 35px } .adb-footer-social .adb-footer-social-youtube { margin-left: 0; } } /** Small tablet **/ @media (max-width: 600px) { .header-inner .google-logo { top: 32px; margin-top: 0; } .header-inner .google-logo img { height: 56px; width: auto; /* height: auto; width: 188px; */ /* Override any optical adjustments at desktop size. */ top: 0 !important; } .header-left { left: 0; top: inherit; bottom: 24px; } .adb-footer-columns { display: block; } .adb-footer-column { margin-bottom: 48px; } .adb-footer-column a { opacity: 1; } .adb-footer-social-label { padding: 0; } .adb-footer-column .widget a { padding: 0; } .footer-newsletter { margin-top: 16px; } .subscribe-btn { width: 100%; } .adb-hero-search { display: none; } .adb-search-box { display:inline; position: absolute; top: 24px; right: 24px; font-size: 24px; color: white; } } /** Mobile **/ @media (max-width: 480px) { .header-outer, .cols-wrapper { padding: 0 16px; } .adb-hero-logo { height: 28px; top: 24px; left: 76px; } .adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited { margin-left: 16px; } .cols-wrapper { margin-top: 0; overflow-x: auto; } .post-header .publishdate, .post .post-content { font-size: 16px; } .post .post-content { line-height: 28px; margin-bottom: 30px; } .post { margin-top: 30px; } .byline-author { display: block; font-size: 12px; line-height: 24px; margin-top: 6px; } #main .post .title a { font-weight: 500; color: #4c4c4c; color: rgba(0, 0, 0, .70); } #main .post .post-header { padding-bottom: 12px; } #main .post .post-header .published { margin-bottom: -8px; margin-top: 3px; } .post .read-more { display: block; margin-top: 14px; } .post .tr-caption { font-size: 12px; } #main .post .title a { font-size: 20px; line-height: 30px; } .post-content iframe { /* iframe won't keep aspect ratio when scaled down. */ max-height: 240px; } .post-content .separator img, .post-content .tr-caption-container img { margin-left: -16px; max-width: 100%; } .post-content table { table-layout: fixed; width: 100%; } /** List page tweaks. **/ .list-page .post-original { display: none; } .list-page .post-summary { display: block; } .list-page .comment-container { display: none; } .list-page .label-footer { display: none; } .list-page #main .post .post-footer { border-bottom: 1px solid #eee; margin: -16px 0 0 0; padding: 0 0 20px 0; } .list-page .post .share { display: none; } /** Detail page tweaks. **/ .detail-page .post-footer .cmt_iframe_holder { padding-top: 32px !important; } .detail-page .label-footer { margin-bottom: 0; } .detail-page #main .post .post-footer { padding-bottom: 0; } .detail-page #comments { display: none; } /* ADB */ .adb-header-console { display: none; } .adb-hero-inner { padding: 0 16px; } .adb-hero-title { color: #4c4c4c; color: rgba(0, 0, 0, .70); font-weight: 500; line-height: 30px; padding-left: 80px; } } /* Fixed-position sidebar for larger screens */ @media screen and (min-height: 700px) and (min-width: 1100px) { .col-right .section { max-height: calc(100vh - 197px); overflow: auto; } .col-right.scroll-start { left: 50%; margin-left: 241px; position: fixed; top: 96px; } .col-right.scroll-end { bottom: 485px; position: absolute; top: auto; } } [data-about-pullquote], [data-is-preview], [data-about-syndication] { display: none; } #imgFull { display: block; margin: 10px auto; width: 90%; border: 0; padding: 0; } #imgHalf { display: block; margin: 10px auto; width: 50%; border: 0; padding: 0; } #flexParent { display: flex; width: 100%; justify-content: space-around; align-items: center; } #flexImg { width: 90%; margin: 0; padding: 0; border: 0; } #imgCaption { text-align: center; font-style: italic; font-size: 85%; margin: -5px 0 10px 0; padding: 0; border: 0; } #floatRight { float: right; width: 45%; margin: 5px 0 5px 5px; padding: 0; border: 0; } #floatLeft { float: left; width: 45%; margin: 5px 5px 5px 0; padding: 0; border: 0; } .loading { visibility: visible; }

Diposting oleh Lin Guo, Software Engineer

Penggunaan emoji dalam komunikasi semakin populer dalam beberapa tahun terakhir. Ikon kecil ini bisa digunakan untuk mengekspresikan berbagai macam emosi dan dapat menambahkan sentuhan personal ke dalam pesan. Namun, menambahkan emoji ke aplikasi Android Anda merupakan sebuah tantangan tersendiri. Di sinilah library pemilih Emoji hadir. Anda cukup menambahkan beberapa baris kode ke aplikasi, kemudian Anda bisa langsung menggunakan emoji. Ini adalah cara termudah untuk mulai menggunakan emoji, dan ini akan membuat aplikasi Anda lebih menyenangkan serta ekspresif.

Gambar bergerak penggunaan EmojiPicker di Google Pixel 6 Pro — **Gambar 1.** Pemilih Emoji

Beberapa fitur berguna yang disediakan oleh library
Emoji terbaru tanpa tofu (☐)

Setiap tahun, versi emoji baru dipublikasikan, dan kami akan mengupdate library secara berkala untuk menyediakan emoji baru ini. Ponsel kelas atas akan merender emoji terbaru ini tanpa masalah. Untuk ponsel kelas bawah, emoji terbaru mungkin ditampilkan sebagai kotak persegi kecil yang disebut tofu (☐). Library menjamin untuk mendeteksi dan menghapusnya. Ini memastikan library kompatibel di seluruh versi/perangkat Android.

UI yang Mulus

Library ini memiliki beberapa pengoptimalan untuk mengurangi latensi startup dan mempercepat pengalaman scrolling, seperti meng-cache emoji yang dapat dirender, menggambar emoji secara asinkron, dan pengoptimalan RecyclerView.

Personalisasi pengalaman inklusif

Pilihan pengguna bersifat persisten dalam library. Emoji yang baru dipilih akan ditampilkan di baris atas, sehingga memudahkan pengguna untuk menemukan dan membagikannya. Library juga menawarkan berbagai emoji yang mewakili orang dan budaya yang berbeda di panel varian. Jika pengguna memilih emoji dari salah satu panel variasi (Gambar 2), pilihan akan dipertahankan dan disetel sebagai default di panel utama.

Gambar yang menunjukkan berbagai karakter yang dapat dipilih di EmojiPicker — **Gambar 2.** Varian emoji

Mengintegrasikan pemilih emoji ke dalam aplikasi Anda dalam 3 langkah
Langkah 1: Impor library dalam build.gradle

dependencies {
   implementation "androidx.emoji2:emojipicker:$version"
}

Langkah 2: Inflate EmojiPickerView

Secara opsional, atur emojiGridColumns dan emojiGridRows berdasarkan ukuran yang diinginkan dari setiap sel emoji

Contoh yang menggunakan EmojiPickerView dalam XML

<androidx.emoji2.emojipicker.EmojiPickerView
    …
    app:emojiGridColumns="9" />

Pemilih emoji yang sangat sederhana sekarang ditampilkan di aplikasi Anda! Untuk langkah berikutnya, kami berasumsi Anda ingin melakukan sesuatu pada emoji yang dipilih.

Langkah 3: Memberikan pemroses untuk emoji yang dipilih

// a listener example
emojiPickerView.setOnEmojiPickedListener {
    findViewById<EditText>(R.id.edit_text).append(it.emoji)
}

Sekarang Anda memiliki pemilih emoji dasar yang berfungsi. Untuk menyesuaikannya lebih lanjut (mis., mengganti beberapa gaya atau memberikan perilaku yang berbeda untuk baris emoji terbaru), lihat api dan aplikasi contoh kami.

Jangan ragu untuk mengirimkan Laporan Bug atau Permintaan Fitur untuk membantu kami menyempurnakan library!

4 comments :

Maria Mugler22 April, 2024 22:25

Introducing Emoji Picker Jetpack, an innovative tool that enables Android developers to easily add emojis to their applications. With advanced features and an intuitive interface, this emoji picker provides a richer and more engaging user experience. By leveraging these new features, developers can enhance user interaction and engagement within their Android apps. https://www.softswiss.com/es/knowledge-base/starting-an-online-casino-what-do-you-need-to-know/
ReplyDelete
Replies
Gaston Bernhard01 November, 2024 19:10
Library ini memiliki beberapa pengoptimalan untuk mengurangi latensi startup dan mempercepat pengalaman scrolling, seperti meng-cache emoji yang dapat dirender, menggambar emoji secara asinkron, dan pengoptimalan RecyclerView. Merge Fruit
ReplyDelete
Replies
katyperry15 August, 2025 11:57
This comment has been removed by the author.
ReplyDelete
Replies
Robert_Kioski01 September, 2025 18:59
Senang sekali ada update emoji terbaru yang otomatis masuk lewat library ini. Bisa bikin aplikasi seperti game kreatif untuk anak-anak jadi lebih ekspresif.
ReplyDelete
Replies

Add comment

Memperkenalkan Pemilih Emoji Jetpack: Cara Baru untuk Menambahkan Emoji ke Aplikasi Android Anda

4 comments :

Labels

Archive