CINXE.COM
GitHub - skydoves/Balloon: :balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android.
<!DOCTYPE html> <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true" > <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="https://github.githubassets.com"> <link rel="dns-prefetch" href="https://avatars.githubusercontent.com"> <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> <link rel="preconnect" href="https://github.githubassets.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-74231a1f3bbb.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-8a995f0bacd4.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-f37fb7684b1f.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-9ac301c3ebe5.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-cd826e8636dc.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-f91b0f603451.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-83beb16e0ecf.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-6e122dab64fc.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-18119e682df0.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-225433424a87.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-cba26849680f.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-b6cb3703b934.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-ea73c9cb5377.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repository-4fce88777fa8.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/code-0210be90f4d3.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["contentful_lp_flex_features_actions","contentful_lp_flex_features_codespaces","contentful_lp_flex_features_code_review","contentful_lp_flex_features_code_search","contentful_lp_flex_features_discussions","contentful_lp_flex_features_issues","copilot_immersive_issue_preview","copilot_new_references_ui","copilot_chat_repo_custom_instructions_preview","copilot_chat_show_model_picker_on_retry","copilot_no_floating_button","copilot_topics_as_references","copilot_read_shared_conversation","copilot_duplicate_thread","dotcom_chat_client_side_skills","experimentation_azure_variant_endpoint","failbot_handle_non_errors","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","github_models_gateway_parse_params","github_models_o3_mini_streaming","insert_before_patch","issues_advanced_search_has_filter","issues_react_remove_placeholders","issues_react_blur_item_picker_on_close","issues_advanced_search_nested_ownership_filters","issues_dashboard_no_redirects","marketing_pages_search_explore_provider","primer_react_css_modules_ga","react_data_router_pull_requests","remove_child_patch","sample_network_conn_type","swp_enterprise_contact_form","site_copilot_pro_plus","site_proxima_australia_update","viewscreen_sandbox","issues_react_create_milestone","issues_react_cache_fix_workaround","lifecycle_label_name_updates","copilot_task_oriented_assistive_prompts","issue_types_prevent_private_type_creation","refresh_image_video_src","codespaces_prebuild_region_target_update","copilot_code_review_sign_up_closed"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-5bf663867709.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover_js-9da652f58479.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_arianotify-polyfill_ariaNotify-polyfill_js-node_modules_github_mi-3abb8f-46b9f4874d95.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-952d624642a1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-f04cb2a9fc8c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_primer_behaviors_dist_esm_index_mjs-0dbb79f97f8f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_selector-observer_dist_index_esm_js-f690fd9ae3d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_relative-time-element_dist_index_js-62d275b7ddd9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_text-expander-element_dist_index_js-78748950cb0c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_auto-complete-element_dist_index_js-node_modules_github_catalyst_-8e9f78-a90ac05d2469.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-b5f1d7-a1760ffda83d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_markdown-toolbar-element_dist_index_js-ceef33f593fa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_primer_view-co-c44a69-efa32db3a345.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-394f8eb34f19.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-0b7798be0424.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_braintree_browser-detection_dist_browser-detection_js-node_modules_githu-2906d7-2a07a295af40.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-be8cb88f481b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_morphdom_dist_morphdom-e-7c534c-a4a1922eb55f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_turbo_dist_turbo_es2017-esm_js-a03ee12d659a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-893f9f-b6294cf703b7.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-e3180fe3bcb3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_github_session-resume_-947061-e7a6c4a19f98.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-62f3e9c52ece.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_task-list_ts-app_assets_modules_github_sso_ts-ui_packages-900dde-768abe60b1f8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_sticky-scroll-into-view_ts-3e000c5d31a9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_ajax-error_ts-app_assets_modules_github_behaviors_include-d0d0a6-e7f74ee74d91.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_commenting_edit_ts-app_assets_modules_github_behaviors_ht-83c235-4bcbbbfbe1d4.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-4414ad8b510b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_catalyst_lib_index_js-f6223d90c7ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-global-01e85cd1be94.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_virtualized-list_es_index_js-node_modules_github_template-parts_lib_index_js-94dc7a2157c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-70450e-4b93df70b903.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_ref-selector_ts-52913063a0b9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/codespaces-b419a25ee02f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-3eebbd-0763620ad7bf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_decorators_js-node_modules_delegated-events_di-e161aa-9d41fb1b6c9e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_github_remote--3c9c82-b71ef90fbdc7.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/repositories-10217e4e5a53.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_github_catalyst_lib_inde-dbbea9-26cce2010167.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/code-menu-d6d3c94ee97e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-350730ea92ff.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-72be69cef469.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-1622bd1e542f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-cf2f2ab8dab4.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-41b1a8-555bc0cf9cab.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-9a233856b02c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-55fea94174bf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-53aa08c61b34.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.a490b7c9fa319e5cb069.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.a490b7c9fa319e5cb069.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <title>GitHub - skydoves/Balloon: :balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android.</title> <meta name="route-pattern" content="/:user_id/:repository" data-turbo-transient> <meta name="route-controller" content="files" data-turbo-transient> <meta name="route-action" content="disambiguate" data-turbo-transient> <meta name="current-catalog-service-hash" content="f3abb0cc802f3d7b95fc8762b94bdcb13bf39634c40c357301c4aa1d67a256fb"> <meta name="request-id" content="EC70:211885:84474D:9502EA:67F6259D" data-pjax-transient="true"/><meta name="html-safe-nonce" content="be729d24ac13e83f78d9643d204b13a049332b9f01ec819c9fb3b06404119ae8" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJFQzcwOjIxMTg4NTo4NDQ3NEQ6OTUwMkVBOjY3RjYyNTlEIiwidmlzaXRvcl9pZCI6IjgxMDc1ODE3ODg5ODY0MTg1ODkiLCJyZWdpb25fZWRnZSI6InNvdXRoZWFzdGFzaWEiLCJyZWdpb25fcmVuZGVyIjoic291dGhlYXN0YXNpYSJ9" data-pjax-transient="true"/><meta name="visitor-hmac" content="89eb834ea3408aeb81e9a4e8dbc41b980d24c10f89cc4dd22e0ce6783cd632df" data-pjax-transient="true"/> <meta name="hovercard-subject-tag" content="repository:196805860" data-turbo-transient> <meta name="github-keyboard-shortcuts" content="repository,copilot" data-turbo-transient="true" /> <meta name="selected-link" value="repo_source" data-turbo-transient> <link rel="assets" href="https://github.githubassets.com/"> <meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I"> <meta name="octolytics-url" content="https://collector.github.com/github/collect" /> <meta name="analytics-location" content="/<user-name>/<repo-name>" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content=":balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android. - skydoves/Balloon"> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub"> <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub"> <meta property="fb:app_id" content="1401488693436528"> <meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://github.com/skydoves/Balloon" /> <meta name="twitter:image" content="https://opengraph.githubassets.com/c7e2355ca5212f2ffe7e0afacea5d4cb2193e66b16eaab4f4c5b6ad84dbca3f9/skydoves/Balloon" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="GitHub - skydoves/Balloon: :balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android." /><meta name="twitter:description" content=":balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android. - skydoves/Balloon" /> <meta property="og:image" content="https://opengraph.githubassets.com/c7e2355ca5212f2ffe7e0afacea5d4cb2193e66b16eaab4f4c5b6ad84dbca3f9/skydoves/Balloon" /><meta property="og:image:alt" content=":balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android. - skydoves/Balloon" /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="600" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="GitHub - skydoves/Balloon: :balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android." /><meta property="og:url" content="https://github.com/skydoves/Balloon" /><meta property="og:description" content=":balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android. - skydoves/Balloon" /> <meta name="hostname" content="github.com"> <meta name="expected-hostname" content="github.com"> <meta http-equiv="x-pjax-version" content="fe109c1aad228d6e2c761f16c20e91bb8457e71a568383631a12df5280057763" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="e26f9f0ba624ee85cc7ac057d8faa8618a4f25a85eab052c33d018ac0f6b1a46" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="205838381d6e5f35c535dbb12458f905bc43e0b186c86bf75aabbd0c0f36537c" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="7bc19fb7b7e61562272d4e42faad9e2a473aa738eaae3ba22d3feee94c6a7c75" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <meta data-hydrostats="publish"> <meta name="go-import" content="github.com/skydoves/Balloon git https://github.com/skydoves/Balloon.git"> <meta name="octolytics-dimension-user_id" content="24237865" /><meta name="octolytics-dimension-user_login" content="skydoves" /><meta name="octolytics-dimension-repository_id" content="196805860" /><meta name="octolytics-dimension-repository_nwo" content="skydoves/Balloon" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="196805860" /><meta name="octolytics-dimension-repository_network_root_nwo" content="skydoves/Balloon" /> <link rel="canonical" href="https://github.com/skydoves/Balloon" data-turbo-transient> <meta name="turbo-body-classes" content="logged-out env-production page-responsive"> <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> <meta name="release" content="b44dc198bf9fde88aae8e9fdb8ee477deefa7ef4"> <link rel="mask-icon" href="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" color="#000000"> <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg" data-base-href="https://github.githubassets.com/favicons/favicon"> <meta name="theme-color" content="#1e2327"> <meta name="color-scheme" content="light dark" /> <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials"> </head> <body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div data-turbo-body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div class="position-relative header-wrapper js-header-wrapper "> <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a> <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full"> <span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span> </span> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ui-commands_ui-commands_ts-2d52c8e72e64.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/keyboard-shortcuts-dialog-2560f573c7ca.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.a490b7c9fa319e5cb069.module.css" /> <react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}</script> <div data-target="react-partial.reactRoot"></div> </react-partial> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-94fd67-4898d1bf4b51.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/sessions-45d6658f8b6b.js"></script> <header class="HeaderMktg header-logged-out js-details-container js-header Details f4 py-3" role="banner" data-is-top="true" data-color-mode=light data-light-theme=light data-dark-theme=dark> <h2 class="sr-only">Navigation Menu</h2> <button type="button" class="HeaderMktg-backdrop d-lg-none border-0 position-fixed top-0 left-0 width-full height-full js-details-target" aria-label="Toggle navigation"> <span class="d-none">Toggle navigation</span> </button> <div class="d-flex flex-column flex-lg-row flex-items-center px-3 px-md-4 px-lg-5 height-full position-relative z-1"> <div class="d-flex flex-justify-between flex-items-center width-full width-lg-auto"> <div class="flex-1"> <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="js-details-target js-nav-padding-recalculate js-header-menu-toggle Button--link Button--medium Button d-lg-none color-fg-inherit p-1"> <span class="Button-content"> <span class="Button-label"><div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div></span> </span> </button> </div> <a class="mr-lg-3 color-fg-inherit flex-order-2 js-prevent-focus-on-mobile-nav" href="/" aria-label="Homepage" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Logomark;ref_loc:Header"}"> <svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12 1C5.9225 1 1 5.9225 1 12C1 16.8675 4.14875 20.9787 8.52125 22.4362C9.07125 22.5325 9.2775 22.2025 9.2775 21.9137C9.2775 21.6525 9.26375 20.7862 9.26375 19.865C6.5 20.3737 5.785 19.1912 5.565 18.5725C5.44125 18.2562 4.905 17.28 4.4375 17.0187C4.0525 16.8125 3.5025 16.3037 4.42375 16.29C5.29 16.2762 5.90875 17.0875 6.115 17.4175C7.105 19.0812 8.68625 18.6137 9.31875 18.325C9.415 17.61 9.70375 17.1287 10.02 16.8537C7.5725 16.5787 5.015 15.63 5.015 11.4225C5.015 10.2262 5.44125 9.23625 6.1425 8.46625C6.0325 8.19125 5.6475 7.06375 6.2525 5.55125C6.2525 5.55125 7.17375 5.2625 9.2775 6.67875C10.1575 6.43125 11.0925 6.3075 12.0275 6.3075C12.9625 6.3075 13.8975 6.43125 14.7775 6.67875C16.8813 5.24875 17.8025 5.55125 17.8025 5.55125C18.4075 7.06375 18.0225 8.19125 17.9125 8.46625C18.6138 9.23625 19.04 10.2125 19.04 11.4225C19.04 15.6437 16.4688 16.5787 14.0213 16.8537C14.42 17.1975 14.7638 17.8575 14.7638 18.8887C14.7638 20.36 14.75 21.5425 14.75 21.9137C14.75 22.2025 14.9563 22.5462 15.5063 22.4362C19.8513 20.9787 23 16.8537 23 12C23 5.9225 18.0775 1 12 1Z"></path> </svg> </a> <div class="flex-1 flex-order-2 text-right"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fskydoves%2FBalloon" class="HeaderMenu-link HeaderMenu-button d-inline-flex d-lg-none flex-order-1 f5 no-underline border color-border-default rounded-2 px-2 py-1 color-fg-inherit js-prevent-focus-on-mobile-nav" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/skydoves/Balloon","user_id":null}}" data-hydro-click-hmac="59fb741164f227fddc37ba9b3a8a8ea93464f77dbdb1b709a65dece4b705a45f" data-analytics-event="{"category":"Marketing nav","action":"click to Sign in","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> </div> <div class="HeaderMenu js-header-menu height-fit position-lg-relative d-lg-flex flex-column flex-auto top-0"> <div class="HeaderMenu-wrapper d-flex flex-column flex-self-start flex-lg-row flex-auto rounded rounded-lg-0"> <nav class="HeaderMenu-nav" aria-label="Global"> <ul class="d-lg-flex list-style-none"> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Product <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"product","tag":"link","label":"github_copilot_link_product_navbar"}" href="https://github.com/features/copilot"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Write better code with AI </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_advanced_security","context":"product","tag":"link","label":"github_advanced_security_link_product_navbar"}" href="https://github.com/security/advanced-security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Advanced Security</div> Find and fix vulnerabilities </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"actions","context":"product","tag":"link","label":"actions_link_product_navbar"}" href="https://github.com/features/actions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-workflow color-fg-subtle mr-3"> <path d="M1 3a2 2 0 0 1 2-2h6.5a2 2 0 0 1 2 2v6.5a2 2 0 0 1-2 2H7v4.063C7 16.355 7.644 17 8.438 17H12.5v-2.5a2 2 0 0 1 2-2H21a2 2 0 0 1 2 2V21a2 2 0 0 1-2 2h-6.5a2 2 0 0 1-2-2v-2.5H8.437A2.939 2.939 0 0 1 5.5 15.562V11.5H3a2 2 0 0 1-2-2Zm2-.5a.5.5 0 0 0-.5.5v6.5a.5.5 0 0 0 .5.5h6.5a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5ZM14.5 14a.5.5 0 0 0-.5.5V21a.5.5 0 0 0 .5.5H21a.5.5 0 0 0 .5-.5v-6.5a.5.5 0 0 0-.5-.5Z"></path> </svg> <div> <div class="color-fg-default h4">Actions</div> Automate any workflow </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"codespaces","context":"product","tag":"link","label":"codespaces_link_product_navbar"}" href="https://github.com/features/codespaces"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-codespaces color-fg-subtle mr-3"> <path d="M3.5 3.75C3.5 2.784 4.284 2 5.25 2h13.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 18.75 13H5.25a1.75 1.75 0 0 1-1.75-1.75Zm-2 12c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v4a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75ZM5.25 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h13.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Zm-2 12a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25Z"></path><path d="M10 17.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> <div> <div class="color-fg-default h4">Codespaces</div> Instant dev environments </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"issues","context":"product","tag":"link","label":"issues_link_product_navbar"}" href="https://github.com/features/issues"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-issue-opened color-fg-subtle mr-3"> <path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Zm9.5 2a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 14Z"></path> </svg> <div> <div class="color-fg-default h4">Issues</div> Plan and track work </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"code_review","context":"product","tag":"link","label":"code_review_link_product_navbar"}" href="https://github.com/features/code-review"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-review color-fg-subtle mr-3"> <path d="M10.3 6.74a.75.75 0 0 1-.04 1.06l-2.908 2.7 2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M1.5 4.25c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v12.5a1.75 1.75 0 0 1-1.75 1.75h-9.69l-3.573 3.573A1.458 1.458 0 0 1 5 21.043V18.5H3.25a1.75 1.75 0 0 1-1.75-1.75ZM3.25 4a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 .75.75v3.19l3.72-3.72a.749.749 0 0 1 .53-.22h10a.25.25 0 0 0 .25-.25V4.25a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Review</div> Manage code changes </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"discussions","context":"product","tag":"link","label":"discussions_link_product_navbar"}" href="https://github.com/features/discussions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Discussions</div> Collaborate outside of code </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"code_search","context":"product","tag":"link","label":"code_search_link_product_navbar"}" href="https://github.com/features/code-search"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-square color-fg-subtle mr-3"> <path d="M10.3 8.24a.75.75 0 0 1-.04 1.06L7.352 12l2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M2 3.75C2 2.784 2.784 2 3.75 2h16.5c.966 0 1.75.784 1.75 1.75v16.5A1.75 1.75 0 0 1 20.25 22H3.75A1.75 1.75 0 0 1 2 20.25Zm1.75-.25a.25.25 0 0 0-.25.25v16.5c0 .138.112.25.25.25h16.5a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Search</div> Find more, search less </div> </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="product-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="product-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"all_features","context":"product","tag":"link","label":"all_features_link_product_navbar"}" href="https://github.com/features"> All features </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"documentation","context":"product","tag":"link","label":"documentation_link_product_navbar"}" href="https://docs.github.com"> Documentation <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"github_skills","context":"product","tag":"link","label":"github_skills_link_product_navbar"}" href="https://skills.github.com"> GitHub Skills <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"blog","context":"product","tag":"link","label":"blog_link_product_navbar"}" href="https://github.blog"> Blog <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Solutions <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 pb-lg-3 mb-3 mb-lg-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-company-size-heading">By company size</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-company-size-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"enterprises","context":"solutions","tag":"link","label":"enterprises_link_solutions_navbar"}" href="https://github.com/enterprise"> Enterprises </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"small_and_medium_teams","context":"solutions","tag":"link","label":"small_and_medium_teams_link_solutions_navbar"}" href="https://github.com/team"> Small and medium teams </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"startups","context":"solutions","tag":"link","label":"startups_link_solutions_navbar"}" href="https://github.com/enterprise/startups"> Startups </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"nonprofits","context":"solutions","tag":"link","label":"nonprofits_link_solutions_navbar"}" href="/solutions/industry/nonprofits"> Nonprofits </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-use-case-heading">By use case</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-use-case-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devsecops","context":"solutions","tag":"link","label":"devsecops_link_solutions_navbar"}" href="/solutions/use-case/devsecops"> DevSecOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"solutions","tag":"link","label":"devops_link_solutions_navbar"}" href="/solutions/use-case/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ci_cd","context":"solutions","tag":"link","label":"ci_cd_link_solutions_navbar"}" href="/solutions/use-case/ci-cd"> CI/CD </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_use_cases","context":"solutions","tag":"link","label":"view_all_use_cases_link_solutions_navbar"}" href="/solutions/use-case"> View all use cases </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-industry-heading">By industry</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-industry-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"healthcare","context":"solutions","tag":"link","label":"healthcare_link_solutions_navbar"}" href="/solutions/industry/healthcare"> Healthcare </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"financial_services","context":"solutions","tag":"link","label":"financial_services_link_solutions_navbar"}" href="/solutions/industry/financial-services"> Financial services </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"manufacturing","context":"solutions","tag":"link","label":"manufacturing_link_solutions_navbar"}" href="/solutions/industry/manufacturing"> Manufacturing </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"government","context":"solutions","tag":"link","label":"government_link_solutions_navbar"}" href="/solutions/industry/government"> Government </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_industries","context":"solutions","tag":"link","label":"view_all_industries_link_solutions_navbar"}" href="/solutions/industry"> View all industries </a></li> </ul> </div> </div> <div class="HeaderMenu-trailing-link rounded-bottom-2 flex-shrink-0 mt-lg-4 px-lg-4 py-4 py-lg-3 f5 text-semibold"> <a href="/solutions"> View all solutions <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-right HeaderMenu-trailing-link-icon"> <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path> </svg> </a> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Resources <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-topics-heading">Topics</span> <ul class="list-style-none f5" aria-labelledby="resources-topics-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ai","context":"resources","tag":"link","label":"ai_link_resources_navbar"}" href="/resources/articles/ai"> AI </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"resources","tag":"link","label":"devops_link_resources_navbar"}" href="/resources/articles/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"security","context":"resources","tag":"link","label":"security_link_resources_navbar"}" href="/resources/articles/security"> Security </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"software_development","context":"resources","tag":"link","label":"software_development_link_resources_navbar"}" href="/resources/articles/software-development"> Software Development </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all","context":"resources","tag":"link","label":"view_all_link_resources_navbar"}" href="/resources/articles"> View all </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="resources-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"learning_pathways","context":"resources","tag":"link","label":"learning_pathways_link_resources_navbar"}" href="https://resources.github.com/learn/pathways"> Learning Pathways <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"events_amp_webinars","context":"resources","tag":"link","label":"events_amp_webinars_link_resources_navbar"}" href="https://resources.github.com"> Events & Webinars <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ebooks_amp_whitepapers","context":"resources","tag":"link","label":"ebooks_amp_whitepapers_link_resources_navbar"}" href="https://github.com/resources/whitepapers"> Ebooks & Whitepapers </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"customer_stories","context":"resources","tag":"link","label":"customer_stories_link_resources_navbar"}" href="https://github.com/customer-stories"> Customer Stories </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"partners","context":"resources","tag":"link","label":"partners_link_resources_navbar"}" href="https://partner.github.com"> Partners <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"executive_insights","context":"resources","tag":"link","label":"executive_insights_link_resources_navbar"}" href="https://github.com/solutions/executive-insights"> Executive Insights </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Open Source <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"github_sponsors","context":"open_source","tag":"link","label":"github_sponsors_link_open_source_navbar"}" href="/sponsors"> <div> <div class="color-fg-default h4">GitHub Sponsors</div> Fund open source developers </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"the_readme_project","context":"open_source","tag":"link","label":"the_readme_project_link_open_source_navbar"}" href="https://github.com/readme"> <div> <div class="color-fg-default h4">The ReadME Project</div> GitHub community articles </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="open-source-repositories-heading">Repositories</span> <ul class="list-style-none f5" aria-labelledby="open-source-repositories-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"topics","context":"open_source","tag":"link","label":"topics_link_open_source_navbar"}" href="https://github.com/topics"> Topics </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"trending","context":"open_source","tag":"link","label":"trending_link_open_source_navbar"}" href="https://github.com/trending"> Trending </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"collections","context":"open_source","tag":"link","label":"collections_link_open_source_navbar"}" href="https://github.com/collections"> Collections </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Enterprise <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"enterprise_platform","context":"enterprise","tag":"link","label":"enterprise_platform_link_enterprise_navbar"}" href="/enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-stack color-fg-subtle mr-3"> <path d="M11.063 1.456a1.749 1.749 0 0 1 1.874 0l8.383 5.316a1.751 1.751 0 0 1 0 2.956l-8.383 5.316a1.749 1.749 0 0 1-1.874 0L2.68 9.728a1.751 1.751 0 0 1 0-2.956Zm1.071 1.267a.25.25 0 0 0-.268 0L3.483 8.039a.25.25 0 0 0 0 .422l8.383 5.316a.25.25 0 0 0 .268 0l8.383-5.316a.25.25 0 0 0 0-.422Z"></path><path d="M1.867 12.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path><path d="M1.867 16.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path> </svg> <div> <div class="color-fg-default h4">Enterprise platform</div> AI-powered developer platform </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="enterprise-available-add-ons-heading">Available add-ons</span> <ul class="list-style-none f5" aria-labelledby="enterprise-available-add-ons-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_advanced_security","context":"enterprise","tag":"link","label":"github_advanced_security_link_enterprise_navbar"}" href="https://github.com/security/advanced-security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Advanced Security</div> Enterprise-grade security features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"copilot_for_business","context":"enterprise","tag":"link","label":"copilot_for_business_link_enterprise_navbar"}" href="/features/copilot/copilot-business"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">Copilot for business</div> Enterprise-grade AI features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"premium_support","context":"enterprise","tag":"link","label":"premium_support_link_enterprise_navbar"}" href="/premium-support"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Premium Support</div> Enterprise-grade 24/7 support </div> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <a class="HeaderMenu-link no-underline px-0 px-lg-2 py-3 py-lg-2 d-block d-lg-inline-block" data-analytics-event="{"location":"navbar","action":"pricing","context":"global","tag":"link","label":"pricing_link_global_navbar"}" href="https://github.com/pricing">Pricing</a> </li> </ul> </nav> <div class="d-flex flex-column flex-lg-row width-full flex-justify-end flex-lg-items-center text-center mt-3 mt-lg-0 text-lg-left ml-lg-3"> <qbsearch-input class="search-input" data-scope="repo:skydoves/Balloon" data-custom-scopes-path="/search/custom_scopes" data-delete-custom-scopes-csrf="1t8CHSf_03Y-2dvEPhF86eHdCuZvnPbLQBz568U9c40IhLoFUU2-PNqZR8AICTHs8e429dwrytwTgAzlAhaSmg" data-max-custom-scopes="10" data-header-redesign-enabled="false" data-initial-value="" data-blackbird-suggestions-path="/search/suggestions" data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations" data-current-repository="skydoves/Balloon" data-current-org="" data-current-owner="skydoves" data-logged-in="false" data-copilot-chat-enabled="false" data-nl-search-enabled="false" data-retain-scroll-position="true"> <div class="search-input-container search-with-dialog position-relative d-flex flex-row flex-items-center mr-4 rounded" data-action="click:qbsearch-input#searchInputContainerClicked" > <button type="button" class="header-search-button placeholder input-button form-control d-flex flex-1 flex-self-stretch flex-items-center no-wrap width-full py-0 pl-2 pr-0 text-left border-0 box-shadow-none" data-target="qbsearch-input.inputButton" aria-label="Search or jump to…" aria-haspopup="dialog" placeholder="Search or jump to..." data-hotkey=s,/ autocapitalize="off" data-analytics-event="{"location":"navbar","action":"searchbar","context":"global","tag":"input","label":"searchbar_input_global_navbar"}" data-action="click:qbsearch-input#handleExpand" > <div class="mr-2 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </div> <span class="flex-1" data-target="qbsearch-input.inputButtonText">Search or jump to...</span> <div class="d-flex" data-target="qbsearch-input.hotkeyIndicator"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" aria-hidden="true" class="mr-1"><path fill="none" stroke="#979A9C" opacity=".4" d="M3.5.5h12c1.7 0 3 1.3 3 3v13c0 1.7-1.3 3-3 3h-12c-1.7 0-3-1.3-3-3v-13c0-1.7 1.3-3 3-3z"></path><path fill="#979A9C" d="M11.8 6L8 15.1h-.9L10.8 6h1z"></path></svg> </div> </button> <input type="hidden" name="type" class="js-site-search-type-field"> <div class="Overlay--hidden " data-modal-dialog-overlay> <modal-dialog data-action="close:qbsearch-input#handleClose cancel:qbsearch-input#handleClose" data-target="qbsearch-input.searchSuggestionsDialog" role="dialog" id="search-suggestions-dialog" aria-modal="true" aria-labelledby="search-suggestions-dialog-header" data-view-component="true" class="Overlay Overlay--width-large Overlay--height-auto"> <h1 id="search-suggestions-dialog-header" class="sr-only">Search code, repositories, users, issues, pull requests...</h1> <div class="Overlay-body Overlay-body--paddingNone"> <div data-view-component="true"> <div class="search-suggestions position-fixed width-full color-shadow-large border color-fg-default color-bg-default overflow-hidden d-flex flex-column query-builder-container" style="border-radius: 12px;" data-target="qbsearch-input.queryBuilderContainer" hidden > <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="query-builder-test-form" action="" accept-charset="UTF-8" method="get"> <query-builder data-target="qbsearch-input.queryBuilder" id="query-builder-query-builder-test" data-filter-key=":" data-view-component="true" class="QueryBuilder search-query-builder"> <div class="FormControl FormControl--fullWidth"> <label id="query-builder-test-label" for="query-builder-test" class="FormControl-label sr-only"> Search </label> <div class="QueryBuilder-StyledInput width-fit " data-target="query-builder.styledInput" > <span id="query-builder-test-leadingvisual-wrap" class="FormControl-input-leadingVisualWrap QueryBuilder-leadingVisualWrap"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </span> <div data-target="query-builder.styledInputContainer" class="QueryBuilder-StyledInputContainer"> <div aria-hidden="true" class="QueryBuilder-StyledInputContent" data-target="query-builder.styledInputContent" ></div> <div class="QueryBuilder-InputWrapper"> <div aria-hidden="true" class="QueryBuilder-Sizer" data-target="query-builder.sizer"></div> <input id="query-builder-test" name="query-builder-test" value="" autocomplete="off" type="text" role="combobox" spellcheck="false" aria-expanded="false" aria-describedby="validation-d1b30df6-7754-4d8c-a70e-01dbd165a69d" data-target="query-builder.input" data-action=" input:query-builder#inputChange blur:query-builder#inputBlur keydown:query-builder#inputKeydown focus:query-builder#inputFocus " data-view-component="true" class="FormControl-input QueryBuilder-Input FormControl-medium" /> </div> </div> <span class="sr-only" id="query-builder-test-clear">Clear</span> <button role="button" id="query-builder-test-clear-button" aria-labelledby="query-builder-test-clear query-builder-test-label" data-target="query-builder.clearButton" data-action=" click:query-builder#clear focus:query-builder#clearButtonFocus blur:query-builder#clearButtonBlur " variant="small" hidden="hidden" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium mr-1 px-2 py-0 d-flex flex-items-center rounded-1 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x-circle-fill Button-visual"> <path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path> </svg> </button> </div> <template id="search-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </template> <template id="code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="file-code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-code"> <path d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0 1 14.25 15h-9a.75.75 0 0 1 0-1.5h9a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 10 4.25V1.5H5.75a.25.25 0 0 0-.25.25v2.5a.75.75 0 0 1-1.5 0Zm1.72 4.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.47-1.47-1.47-1.47a.75.75 0 0 1 0-1.06ZM3.28 7.78 1.81 9.25l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Zm8.22-6.218V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path> </svg> </template> <template id="history-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-history"> <path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path> </svg> </template> <template id="repo-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> </template> <template id="bookmark-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bookmark"> <path d="M3 2.75C3 1.784 3.784 1 4.75 1h6.5c.966 0 1.75.784 1.75 1.75v11.5a.75.75 0 0 1-1.227.579L8 11.722l-3.773 3.107A.751.751 0 0 1 3 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.91l3.023-2.489a.75.75 0 0 1 .954 0l3.023 2.49V2.75a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="plus-circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plus-circle"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7.25-3.25v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> </template> <template id="trash-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-trash"> <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path> </svg> </template> <template id="team-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people"> <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path> </svg> </template> <template id="project-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-project"> <path d="M1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0ZM1.5 1.75v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25ZM11.75 3a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75Zm-8.25.75a.75.75 0 0 1 1.5 0v5.5a.75.75 0 0 1-1.5 0ZM8 3a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 3Z"></path> </svg> </template> <template id="pencil-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil"> <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path> </svg> </template> <template id="copilot-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot"> <path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z"></path><path d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="copilot-error-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot-error"> <path d="M16 11.24c0 .112-.072.274-.21.467L13 9.688V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-.198 0-.388-.009-.571-.029L6.833 5.226a4.01 4.01 0 0 0 .17-.782c.117-.935-.037-1.395-.241-1.614-.193-.206-.637-.413-1.682-.297-.683.076-1.115.231-1.395.415l-1.257-.91c.579-.564 1.413-.877 2.485-.996 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095Zm-5.083-8.707c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Zm2.511 11.074c-1.393.776-3.272 1.428-5.43 1.428-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.18-.455-.241-.963-.252-1.475L.31 4.107A.747.747 0 0 1 0 3.509V3.49a.748.748 0 0 1 .625-.73c.156-.026.306.047.435.139l14.667 10.578a.592.592 0 0 1 .227.264.752.752 0 0 1 .046.249v.022a.75.75 0 0 1-1.19.596Zm-1.367-.991L5.635 7.964a5.128 5.128 0 0 1-.889.073c-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433 1.539 0 3.089-.505 4.063-.934Z"></path> </svg> </template> <template id="workflow-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-workflow"> <path d="M0 1.75C0 .784.784 0 1.75 0h3.5C6.216 0 7 .784 7 1.75v3.5A1.75 1.75 0 0 1 5.25 7H4v4a1 1 0 0 0 1 1h4v-1.25C9 9.784 9.784 9 10.75 9h3.5c.966 0 1.75.784 1.75 1.75v3.5A1.75 1.75 0 0 1 14.25 16h-3.5A1.75 1.75 0 0 1 9 14.25v-.75H5A2.5 2.5 0 0 1 2.5 11V7h-.75A1.75 1.75 0 0 1 0 5.25Zm1.75-.25a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Zm9 9a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="book-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book"> <path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path> </svg> </template> <template id="code-review-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-review"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 13H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25v-8.5C0 1.784.784 1 1.75 1ZM1.5 2.75v8.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm5.28 1.72a.75.75 0 0 1 0 1.06L5.31 7l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.75.75 0 0 1 1.06 0Zm2.44 0a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.69 7 9.22 5.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="codespaces-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-codespaces"> <path d="M0 11.25c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v3A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm2-9.5C2 .784 2.784 0 3.75 0h8.5C13.216 0 14 .784 14 1.75v5a1.75 1.75 0 0 1-1.75 1.75h-8.5A1.75 1.75 0 0 1 2 6.75Zm1.75-.25a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5a.25.25 0 0 0-.25-.25Zm-2 9.5a.25.25 0 0 0-.25.25v3c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-3a.25.25 0 0 0-.25-.25Z"></path><path d="M7 12.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> </template> <template id="comment-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment"> <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="comment-discussion-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> </template> <template id="organization-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-organization"> <path d="M1.75 16A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 0 0 .25-.25V8.285a.25.25 0 0 0-.111-.208l-1.055-.703a.749.749 0 1 1 .832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0 1 14.25 16h-3.5a.766.766 0 0 1-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 0 1-.75-.75V14h-1v1.25a.75.75 0 0 1-.75.75Zm-.25-1.75c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3.75 6h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 3.75A.75.75 0 0 1 3.75 3h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 3.75Zm4 3A.75.75 0 0 1 7.75 6h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 7 6.75ZM7.75 3h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 9.75A.75.75 0 0 1 3.75 9h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 9.75ZM7.75 9h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="rocket-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-rocket"> <path d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.752 8.752 0 0 1-2.564 6.186l-.458.459c-.314.314-.641.616-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.749.749 0 0 1-1.11-.418l-.954-3.102a1.214 1.214 0 0 1-.145-.125L3.754 9.816a1.218 1.218 0 0 1-.124-.145L.528 8.717a.749.749 0 0 1-.418-1.11l1.71-2.774A1.748 1.748 0 0 1 3.31 4h3.204c.288-.338.59-.665.904-.979l.459-.458A8.749 8.749 0 0 1 14.064 0ZM8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.249 7.249 0 0 0-5.125 2.123ZM3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.234.234 0 0 1-.201-.064.234.234 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12Zm6.94-3.935c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </template> <template id="shield-check-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield-check"> <path d="m8.533.133 5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68a1.748 1.748 0 0 1 1.066 0Zm-.61 1.429.001.001-5.25 1.68a.251.251 0 0 0-.174.237V7c0 1.36.275 2.666 1.057 3.859.784 1.194 2.121 2.342 4.366 3.298a.196.196 0 0 0 .154 0c2.245-.957 3.582-2.103 4.366-3.297C13.225 9.666 13.5 8.358 13.5 7V3.48a.25.25 0 0 0-.174-.238l-5.25-1.68a.25.25 0 0 0-.153 0ZM11.28 6.28l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.97-2.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="heart-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-heart"> <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path> </svg> </template> <template id="server-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-server"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v4c0 .372-.116.717-.314 1 .198.283.314.628.314 1v4a1.75 1.75 0 0 1-1.75 1.75H1.75A1.75 1.75 0 0 1 0 12.75v-4c0-.358.109-.707.314-1a1.739 1.739 0 0 1-.314-1v-4C0 1.784.784 1 1.75 1ZM1.5 2.75v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm.25 5.75a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25ZM7 4.75A.75.75 0 0 1 7.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 7 4.75ZM7.75 10h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM3 4.75A.75.75 0 0 1 3.75 4h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 4.75ZM3.75 10h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="globe-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-globe"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM5.78 8.75a9.64 9.64 0 0 0 1.363 4.177c.255.426.542.832.857 1.215.245-.296.551-.705.857-1.215A9.64 9.64 0 0 0 10.22 8.75Zm4.44-1.5a9.64 9.64 0 0 0-1.363-4.177c-.307-.51-.612-.919-.857-1.215a9.927 9.927 0 0 0-.857 1.215A9.64 9.64 0 0 0 5.78 7.25Zm-5.944 1.5H1.543a6.507 6.507 0 0 0 4.666 5.5c-.123-.181-.24-.365-.352-.552-.715-1.192-1.437-2.874-1.581-4.948Zm-2.733-1.5h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.507 6.507 0 0 0-4.666 5.5Zm10.181 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.507 6.507 0 0 0 4.666-5.5Zm2.733-1.5a6.507 6.507 0 0 0-4.666-5.5c.123.181.24.365.353.552.714 1.192 1.436 2.874 1.58 4.948Z"></path> </svg> </template> <template id="issue-opened-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </template> <template id="device-mobile-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-mobile"> <path d="M3.75 0h8.5C13.216 0 14 .784 14 1.75v12.5A1.75 1.75 0 0 1 12.25 16h-8.5A1.75 1.75 0 0 1 2 14.25V1.75C2 .784 2.784 0 3.75 0ZM3.5 1.75v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM8 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path> </svg> </template> <template id="package-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-package"> <path d="m8.878.392 5.25 3.045c.54.314.872.89.872 1.514v6.098a1.75 1.75 0 0 1-.872 1.514l-5.25 3.045a1.75 1.75 0 0 1-1.756 0l-5.25-3.045A1.75 1.75 0 0 1 1 11.049V4.951c0-.624.332-1.201.872-1.514L7.122.392a1.75 1.75 0 0 1 1.756 0ZM7.875 1.69l-4.63 2.685L8 7.133l4.755-2.758-4.63-2.685a.248.248 0 0 0-.25 0ZM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432Zm6.25 8.271 4.625-2.683a.25.25 0 0 0 .125-.216V5.677L8.75 8.432Z"></path> </svg> </template> <template id="credit-card-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-credit-card"> <path d="M10.75 9a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5Z"></path><path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25ZM14.5 6.5h-13v5.75c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Zm0-2.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25V5h13Z"></path> </svg> </template> <template id="play-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </template> <template id="gift-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-gift"> <path d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"></path> </svg> </template> <template id="code-square-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-square"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="device-desktop-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-desktop"> <path d="M14.25 1c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.752.752 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5C0 1.784.784 1 1.75 1ZM1.75 2.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25ZM9.018 12H6.982a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5Z"></path> </svg> </template> <div class="position-relative"> <ul role="listbox" class="ActionListWrap QueryBuilder-ListWrap" aria-label="Suggestions" data-action=" combobox-commit:query-builder#comboboxCommit mousedown:query-builder#resultsMousedown " data-target="query-builder.resultsList" data-persist-list=false id="query-builder-test-results" ></ul> </div> <div class="FormControl-inlineValidation" id="validation-d1b30df6-7754-4d8c-a70e-01dbd165a69d" hidden="hidden"> <span class="FormControl-inlineValidation--visual"> <svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg> </span> <span></span> </div> </div> <div data-target="query-builder.screenReaderFeedback" aria-live="polite" aria-atomic="true" class="sr-only"></div> </query-builder></form> <div class="d-flex flex-row color-fg-muted px-3 text-small color-bg-default search-feedback-prompt"> <a target="_blank" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax" data-view-component="true" class="Link color-fg-accent text-normal ml-2">Search syntax tips</a> <div class="d-flex flex-1"></div> </div> </div> </div> </div> </modal-dialog></div> </div> <div data-action="click:qbsearch-input#retract" class="dark-backdrop position-fixed" hidden data-target="qbsearch-input.darkBackdrop"></div> <div class="color-fg-default"> <dialog-helper> <dialog data-target="qbsearch-input.feedbackDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="feedback-dialog" aria-modal="true" aria-labelledby="feedback-dialog-title" aria-describedby="feedback-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="feedback-dialog-title"> Provide feedback </h1> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="feedback-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="feedback-dialog-title"> <div data-view-component="true" class="Overlay-body"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="code-search-feedback-form" data-turbo="false" action="/search/feedback" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="eyTFp1OVEmhq9m9SiMeuTAQ2P+7oFVQsdsqz/itm2nkQg7xB+mPsEgS41OPRV8zTptAvbxLpBmp6Ser7mXIfUw==" /> <p>We read every piece of feedback, and take your input very seriously.</p> <textarea name="feedback" class="form-control width-full mb-2" style="height: 120px" id="feedback"></textarea> <input name="include_email" id="include_email" aria-label="Include my email address so I can be contacted" class="form-control mr-2" type="checkbox"> <label for="include_email" style="font-weight: normal">Include my email address so I can be contacted</label> </form></div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd"> <button data-close-dialog-id="feedback-dialog" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="code-search-feedback-form" data-action="click:qbsearch-input#submitFeedback" type="submit" data-view-component="true" class="btn-primary btn"> Submit feedback </button> </div> </dialog></dialog-helper> <custom-scopes data-target="qbsearch-input.customScopesManager"> <dialog-helper> <dialog data-target="custom-scopes.customScopesModalDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="custom-scopes-dialog" aria-modal="true" aria-labelledby="custom-scopes-dialog-title" aria-describedby="custom-scopes-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header Overlay-header--divided"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="custom-scopes-dialog-title"> Saved searches </h1> <h2 id="custom-scopes-dialog-description" class="Overlay-description">Use saved searches to filter your results more quickly</h2> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="custom-scopes-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="custom-scopes-dialog-title"> <div data-view-component="true" class="Overlay-body"> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <div hidden class="create-custom-scope-form" data-target="custom-scopes.createCustomScopeForm"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="custom-scopes-dialog-form" data-turbo="false" action="/search/custom_scopes" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="B2kM38DiXAT70XKKdKpzKHApxFJRH/Mq6706IT8cuyzPjRAFXJpSguIbybjSYfw+td4Ll56iJF/7Y9klf8bRIA==" /> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <input type="hidden" id="custom_scope_id" name="custom_scope_id" data-target="custom-scopes.customScopesIdField"> <div class="form-group"> <label for="custom_scope_name">Name</label> <auto-check src="/search/custom_scopes/check_name" required only-validate-on-blur="false"> <input type="text" name="custom_scope_name" id="custom_scope_name" data-target="custom-scopes.customScopesNameField" class="form-control" autocomplete="off" placeholder="github-ruby" required maxlength="50"> <input type="hidden" data-csrf="true" value="7QPpQ/ujM5YTsfxA5jGYJ4QkTwLcdnqneRPmj6MUOepbMf7nd+NKYMBsvOKGejlL7wXbakfIf6KNGbYwUfYCXA==" /> </auto-check> </div> <div class="form-group"> <label for="custom_scope_query">Query</label> <input type="text" name="custom_scope_query" id="custom_scope_query" data-target="custom-scopes.customScopesQueryField" class="form-control" autocomplete="off" placeholder="(repo:mona/a OR repo:mona/b) AND lang:python" required maxlength="500"> </div> <p class="text-small color-fg-muted"> To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>. </p> </form> </div> <div data-target="custom-scopes.manageCustomScopesForm"> <div data-target="custom-scopes.list"></div> </div> </div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd Overlay-footer--divided"> <button data-action="click:custom-scopes#customScopesCancel" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="custom-scopes-dialog-form" data-action="click:custom-scopes#customScopesSubmit" data-target="custom-scopes.customScopesSubmitButton" type="submit" data-view-component="true" class="btn-primary btn"> Create saved search </button> </div> </dialog></dialog-helper> </custom-scopes> </div> </qbsearch-input> <div class="position-relative HeaderMenu-link-wrap d-lg-inline-block"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fskydoves%2FBalloon" class="HeaderMenu-link HeaderMenu-link--sign-in HeaderMenu-button flex-shrink-0 no-underline d-none d-lg-inline-flex border border-lg-0 rounded rounded-lg-0 px-2 py-1" style="margin-left: 12px;" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/skydoves/Balloon","user_id":null}}" data-hydro-click-hmac="59fb741164f227fddc37ba9b3a8a8ea93464f77dbdb1b709a65dece4b705a45f" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> <a href="/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E&source=header-repo&source_repo=skydoves%2FBalloon" class="HeaderMenu-link HeaderMenu-link--sign-up HeaderMenu-button flex-shrink-0 d-flex d-lg-inline-flex no-underline border color-border-default rounded px-2 py-1" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/skydoves/Balloon","user_id":null}}" data-hydro-click-hmac="59fb741164f227fddc37ba9b3a8a8ea93464f77dbdb1b709a65dece4b705a45f" data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>;ref_cta:Sign up;ref_loc:header logged out"}" > Sign up </a> <button type="button" class="sr-only js-header-menu-focus-trap d-block d-lg-none">Reseting focus</button> </div> </div> </div> </div> </header> <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-switched" hidden>You switched accounts on another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <button id="icon-button-9c90a227-d492-4445-b059-f11c05479b14" aria-labelledby="tooltip-2680c92f-e2cf-4898-986e-6a57c07dc805" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button><tool-tip id="tooltip-2680c92f-e2cf-4898-986e-6a57c07dc805" for="icon-button-9c90a227-d492-4445-b059-f11c05479b14" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip> </div> </div> <div id="start-of-content" class="show-on-focus"></div> <div id="js-flash-container" class="flash-container" data-turbo-replace> <template class="js-flash-template"> <div class="flash flash-full {{ className }}"> <div > <button autofocus class="flash-close js-flash-close" type="button" aria-label="Dismiss this message"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div aria-atomic="true" role="alert" class="js-flash-alert"> <div>{{ message }}</div> </div> </div> </div> </template> </div> <div class="application-main " data-commit-hovercards-enabled data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled data-project-hovercards-enabled > <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class=""> <main id="js-repo-pjax-container" > <div id="repository-container-header" class="pt-3 hide-full-screen" style="background-color: var(--page-header-bgColor, var(--color-page-header-bg));" data-turbo-replace> <div class="d-flex flex-nowrap flex-justify-end mb-3 px-3 px-lg-5" style="gap: 1rem;"> <div class="flex-auto min-width-0 width-fit"> <div class=" d-flex flex-wrap flex-items-center wb-break-word f3 text-normal"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo color-fg-muted mr-2"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> <span class="author flex-self-stretch" itemprop="author"> <a class="url fn" rel="author" data-hovercard-type="user" data-hovercard-url="/users/skydoves/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/skydoves"> skydoves </a> </span> <span class="mx-1 flex-self-stretch color-fg-muted">/</span> <strong itemprop="name" class="mr-2 flex-self-stretch"> <a data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/skydoves/Balloon">Balloon</a> </strong> <span></span><span class="Label Label--secondary v-align-middle mr-1">Public</span> </div> </div> <div id="repository-details-container" class="flex-shrink-0" data-turbo-replace style="max-width: 70%;"> <ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;"> <li> <include-fragment src="/skydoves/Balloon/sponsor_button"></include-fragment> </li> <li> <a href="/login?return_to=%2Fskydoves%2FBalloon" rel="nofollow" id="repository-details-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/skydoves/Balloon","user_id":null}}" data-hydro-click-hmac="daa3cfa1cce78083318044b3eae899656039c4c8881645e33d117015caa72b74" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path> </svg>Notifications </a> <tool-tip id="tooltip-68e2f332-062b-4287-b362-20a89ec3f6e0" for="repository-details-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip> </li> <li> <a icon="repo-forked" id="fork-button" href="/login?return_to=%2Fskydoves%2FBalloon" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":196805860,"auth_type":"LOG_IN","originating_url":"https://github.com/skydoves/Balloon","user_id":null}}" data-hydro-click-hmac="a16c9a4267d45c923a73b4dc35f8719ad0330edf712e217237f9ec9c33535fe9" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg>Fork <span id="repo-network-counter" data-pjax-replace="true" data-turbo-replace="true" title="298" data-view-component="true" class="Counter">298</span> </a> </li> <li> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fskydoves%2FBalloon" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":196805860,"auth_type":"LOG_IN","originating_url":"https://github.com/skydoves/Balloon","user_id":null}}" data-hydro-click-hmac="440786cedf95e8f954b238ce47182529ed4f87a81636dbd006c09b42749ac7e3" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg><span data-view-component="true" class="d-inline"> Star </span> <span id="repo-stars-counter-star" aria-label="3808 users starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="3,808" data-view-component="true" class="Counter js-social-count">3.8k</span> </a></div> </li> </ul> </div> </div> <div id="responsive-meta-container" data-turbo-replace> <div class="d-block d-md-none mb-2 px-3 px-md-4 px-lg-5"> <p class="f4 mb-3 "> 🎈 Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android. </p> <div class="mb-2 d-flex flex-items-center Link--secondary"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link flex-shrink-0 mr-2"> <path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path> </svg> <span class="flex-auto min-width-0 css-truncate css-truncate-target width-fit"> <a title="https://skydoves.github.io/Balloon/" role="link" target="_blank" class="text-bold" rel="noopener noreferrer" href="https://skydoves.github.io/Balloon/">skydoves.github.io/Balloon/</a> </span> </div> <h3 class="sr-only">License</h3> <div class="mb-2"> <a href="/skydoves/Balloon/blob/main/LICENSE" class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:license"}" > <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-law mr-2"> <path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path> </svg> Apache-2.0 license </a> </div> <div class="mb-3"> <a class="Link--secondary no-underline mr-3" href="/skydoves/Balloon/stargazers"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star mr-1"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> <span class="text-bold">3.8k</span> stars </a> <a class="Link--secondary no-underline mr-3" href="/skydoves/Balloon/forks"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-1"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg> <span class="text-bold">298</span> forks </a> <a class="Link--secondary no-underline mr-3 d-inline-block" href="/skydoves/Balloon/branches"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-branch mr-1"> <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path> </svg> <span>Branches</span> </a> <a class="Link--secondary no-underline d-inline-block" href="/skydoves/Balloon/tags"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-tag mr-1"> <path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path> </svg> <span>Tags</span> </a> <a class="Link--secondary no-underline d-inline-block" href="/skydoves/Balloon/activity"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pulse mr-1"> <path d="M6 2c.306 0 .582.187.696.471L10 10.731l1.304-3.26A.751.751 0 0 1 12 7h3.25a.75.75 0 0 1 0 1.5h-2.742l-1.812 4.528a.751.751 0 0 1-1.392 0L6 4.77 4.696 8.03A.75.75 0 0 1 4 8.5H.75a.75.75 0 0 1 0-1.5h2.742l1.812-4.529A.751.751 0 0 1 6 2Z"></path> </svg> <span>Activity</span> </a> </div> <div class="d-flex flex-wrap gap-2"> <div class="flex-1"> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fskydoves%2FBalloon" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":196805860,"auth_type":"LOG_IN","originating_url":"https://github.com/skydoves/Balloon","user_id":null}}" data-hydro-click-hmac="440786cedf95e8f954b238ce47182529ed4f87a81636dbd006c09b42749ac7e3" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn btn-block"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg><span data-view-component="true" class="d-inline"> Star </span> </a></div> </div> <div class="flex-1"> <a href="/login?return_to=%2Fskydoves%2FBalloon" rel="nofollow" id="files-overview-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/skydoves/Balloon","user_id":null}}" data-hydro-click-hmac="daa3cfa1cce78083318044b3eae899656039c4c8881645e33d117015caa72b74" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn btn-block"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path> </svg>Notifications </a> <tool-tip id="tooltip-43508ea6-43ae-4a4c-9cc4-a6d13b5c6290" for="files-overview-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip> </div> <span> </span> </div> </div> </div> <nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 px-md-4 px-lg-5"> <ul data-view-component="true" class="UnderlineNav-body list-style-none"> <li data-view-component="true" class="d-inline-flex"> <a id="code-tab" href="/skydoves/Balloon" data-tab-item="i0code-tab" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments repo_attestations /skydoves/Balloon" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g c" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Code","target":"UNDERLINE_NAV.TAB"}" aria-current="page" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item selected"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> <span data-content="Code">Code</span> <span id="code-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="issues-tab" href="/skydoves/Balloon/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /skydoves/Balloon/issues" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g i" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Issues","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> <span data-content="Issues">Issues</span> <span id="issues-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="20" data-view-component="true" class="Counter">20</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="pull-requests-tab" href="/skydoves/Balloon/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /skydoves/Balloon/pulls" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g p" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Pull requests","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> <span data-content="Pull requests">Pull requests</span> <span id="pull-requests-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="discussions-tab" href="/skydoves/Balloon/discussions" data-tab-item="i3discussions-tab" data-selected-links="repo_discussions /skydoves/Balloon/discussions" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g g" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Discussions","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> <span data-content="Discussions">Discussions</span> <span id="discussions-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="actions-tab" href="/skydoves/Balloon/actions" data-tab-item="i4actions-tab" data-selected-links="repo_actions /skydoves/Balloon/actions" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g a" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Actions","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> <span data-content="Actions">Actions</span> <span id="actions-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="security-tab" href="/skydoves/Balloon/security" data-tab-item="i5security-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /skydoves/Balloon/security" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g s" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Security","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span data-content="Security">Security</span> <include-fragment src="/skydoves/Balloon/security/overall-count" accept="text/fragment+html"></include-fragment> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="insights-tab" href="/skydoves/Balloon/pulse" data-tab-item="i6insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /skydoves/Balloon/pulse" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Insights","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> <span data-content="Insights">Insights</span> <span id="insights-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> </ul> <div style="visibility:hidden;" data-view-component="true" class="UnderlineNav-actions js-responsive-underlinenav-overflow position-absolute pr-3 pr-md-4 pr-lg-5 right-0"> <action-menu data-select-variant="none" data-view-component="true"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-0e581a1a-547d-4b1d-a3f8-c2bb9fba6d06-button" popovertarget="action-menu-0e581a1a-547d-4b1d-a3f8-c2bb9fba6d06-overlay" aria-controls="action-menu-0e581a1a-547d-4b1d-a3f8-c2bb9fba6d06-list" aria-haspopup="true" aria-labelledby="tooltip-37ded462-29bd-4f18-9bc3-c9cdae3f5525" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium UnderlineNav-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-37ded462-29bd-4f18-9bc3-c9cdae3f5525" for="action-menu-0e581a1a-547d-4b1d-a3f8-c2bb9fba6d06-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Additional navigation options</tool-tip> <anchored-position data-target="action-menu.overlay" id="action-menu-0e581a1a-547d-4b1d-a3f8-c2bb9fba6d06-overlay" anchor="action-menu-0e581a1a-547d-4b1d-a3f8-c2bb9fba6d06-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-0e581a1a-547d-4b1d-a3f8-c2bb9fba6d06-button" id="action-menu-0e581a1a-547d-4b1d-a3f8-c2bb9fba6d06-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li hidden="hidden" data-menu-item="i0code-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-1179d45e-1153-4351-a814-d95891b8d418" href="/skydoves/Balloon" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Code </span> </a> </li> <li hidden="hidden" data-menu-item="i1issues-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-f6dcc8ca-6db6-46ad-8984-0f1c0caa7ac7" href="/skydoves/Balloon/issues" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Issues </span> </a> </li> <li hidden="hidden" data-menu-item="i2pull-requests-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-1aadd232-afdc-4f8b-8efc-bc25318362a9" href="/skydoves/Balloon/pulls" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Pull requests </span> </a> </li> <li hidden="hidden" data-menu-item="i3discussions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-04b99f63-10e3-47b8-9e11-8613c2b31913" href="/skydoves/Balloon/discussions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Discussions </span> </a> </li> <li hidden="hidden" data-menu-item="i4actions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-7301e593-2783-467f-a647-a60a068806d1" href="/skydoves/Balloon/actions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Actions </span> </a> </li> <li hidden="hidden" data-menu-item="i5security-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-f00deedb-b775-4e3c-b3ee-7b201fe15253" href="/skydoves/Balloon/security" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Security </span> </a> </li> <li hidden="hidden" data-menu-item="i6insights-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-39957949-d606-4ecf-9acc-0397d17261bc" href="/skydoves/Balloon/pulse" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Insights </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu></div> </nav> </div> <turbo-frame id="repo-content-turbo-frame" target="_top" data-turbo-action="advance" class=""> <div id="repo-content-pjax-container" class="repository-content " > <h1 class='sr-only'>skydoves/Balloon</h1> <div class="clearfix container-xl px-md-4 px-lg-5 px-3"> <div> <div style="max-width: 100%" data-view-component="true" class="Layout Layout--flowRow-until-md react-repos-overview-margin Layout--sidebarPosition-end Layout--sidebarPosition-flowRow-end"> <div data-view-component="true" class="Layout-main"> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dompurify_dist_purify_es_mjs-dd1d3ea6a436.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_tanstack_query-core_build_modern_queryObserver_js-node_modules_tanstack_-defd52-843b41414e0e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_aria-live_aria-live_ts-ui_packages_history_history_ts-ui_packages_promise-with-re-01dc80-b13b6c1d97b0.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_paths_index_ts-8a20a6d3af54.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ref-selector_RefSelector_tsx-7496afc3784d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_commit-attribution_index_ts-ui_packages_commit-checks-status_index_ts-ui_packages-762eaa-bac5b6fc3f70.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_code-view-shared_hooks_use-canonical-object_ts-ui_packages_code-view-shared_hooks-c2dbff-923a12b3d018.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/repos-overview-60297eccc5de.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.a490b7c9fa319e5cb069.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repos-overview.0ee7cac3ab511a65d9f9.module.css" /> <react-partial partial-name="repos-overview" data-ssr="true" data-attempted-ssr="true" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"initialPayload":{"allShortcutsEnabled":false,"path":"/","repo":{"id":196805860,"defaultBranch":"main","name":"Balloon","ownerLogin":"skydoves","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2019-07-14T07:14:32.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/24237865?v=4","public":true,"private":false,"isOrgOwned":false},"currentUser":null,"refInfo":{"name":"main","listCacheKey":"v0:1744180971.0","canEdit":false,"refType":"branch","currentOid":"849b2f337ada347997bdbb581e1335fabf6aa6c3"},"tree":{"items":[{"name":".github","path":".github","contentType":"directory"},{"name":"app","path":"app","contentType":"directory"},{"name":"balloon-compose","path":"balloon-compose","contentType":"directory"},{"name":"balloon","path":"balloon","contentType":"directory"},{"name":"benchmark-app","path":"benchmark-app","contentType":"directory"},{"name":"benchmark","path":"benchmark","contentType":"directory"},{"name":"buildSrc","path":"buildSrc","contentType":"directory"},{"name":"gradle","path":"gradle","contentType":"directory"},{"name":"scripts","path":"scripts","contentType":"directory"},{"name":"spotless","path":"spotless","contentType":"directory"},{"name":".editorconfig","path":".editorconfig","contentType":"file"},{"name":".gitignore","path":".gitignore","contentType":"file"},{"name":"CODE_OF_CONDUCT.md","path":"CODE_OF_CONDUCT.md","contentType":"file"},{"name":"CONTRIBUTING.md","path":"CONTRIBUTING.md","contentType":"file"},{"name":"LICENSE","path":"LICENSE","contentType":"file"},{"name":"README.md","path":"README.md","contentType":"file"},{"name":"build.gradle.kts","path":"build.gradle.kts","contentType":"file"},{"name":"gradle.properties","path":"gradle.properties","contentType":"file"},{"name":"gradlew","path":"gradlew","contentType":"file"},{"name":"gradlew.bat","path":"gradlew.bat","contentType":"file"},{"name":"renovate.json","path":"renovate.json","contentType":"file"},{"name":"settings.gradle.kts","path":"settings.gradle.kts","contentType":"file"},{"name":"usecases.md","path":"usecases.md","contentType":"file"}],"templateDirectorySuggestionUrl":null,"readme":null,"totalCount":23,"showBranchInfobar":false},"fileTree":null,"fileTreeProcessingTime":null,"foldersToFetch":[],"treeExpanded":false,"symbolsExpanded":false,"isOverview":true,"overview":{"banners":{"shouldRecommendReadme":false,"isPersonalRepo":false,"showUseActionBanner":false,"actionSlug":null,"actionId":null,"showProtectBranchBanner":false,"publishBannersInfo":{"dismissActionNoticePath":"/settings/dismiss-notice/publish_action_from_repo","releasePath":"/skydoves/Balloon/releases/new?marketplace=true","showPublishActionBanner":false},"interactionLimitBanner":null,"showInvitationBanner":false,"inviterName":null,"actionsMigrationBannerInfo":{"releaseTags":[],"showImmutableActionsMigrationBanner":false,"initialMigrationStatus":null}},"codeButton":{"contactPath":"/contact","isEnterprise":false,"local":{"protocolInfo":{"httpAvailable":true,"sshAvailable":null,"httpUrl":"https://github.com/skydoves/Balloon.git","showCloneWarning":null,"sshUrl":null,"sshCertificatesRequired":null,"sshCertificatesAvailable":null,"ghCliUrl":"gh repo clone skydoves/Balloon","defaultProtocol":"http","newSshKeyUrl":"/settings/ssh/new","setProtocolPath":"/users/set_protocol"},"platformInfo":{"cloneUrl":"https://desktop.github.com","showVisualStudioCloneButton":false,"visualStudioCloneUrl":"https://windows.github.com","showXcodeCloneButton":false,"xcodeCloneUrl":"xcode://clone?repo=https%3A%2F%2Fgithub.com%2Fskydoves%2FBalloon","zipballUrl":"/skydoves/Balloon/archive/refs/heads/main.zip"}},"newCodespacePath":"/codespaces/new?hide_repo_select=true\u0026repo=196805860"},"popovers":{"rename":null,"renamedParentRepo":null},"commitCount":"1,258","overviewFiles":[{"displayName":"README.md","repoName":"Balloon","refName":"main","path":"README.md","preferredFileType":"readme","tabName":"README","richText":"\u003carticle class=\"markdown-body entry-content container-lg\" itemprop=\"text\"\u003e\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 align=\"center\" tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBalloon\u003c/h1\u003e\u003ca id=\"user-content-balloon\" class=\"anchor\" aria-label=\"Permalink: Balloon\" href=\"#balloon\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr\u003e\n\u003cp align=\"center\" dir=\"auto\"\u003e\n🎈 Modernized and sophisticated tooltips, fully customizable with an arrow and animations on Android.\n\u003c/p\u003e\n\u003cbr\u003e\n\u003cp align=\"center\" dir=\"auto\"\u003e\n \u003ca href=\"https://devlibrary.withgoogle.com/products/android/repos/skydoves-Balloon\" rel=\"nofollow\"\u003e\u003cimg alt=\"Google\" src=\"https://camo.githubusercontent.com/12a1493a411554fb96c76c8a07d0cf5e21b61c5eb735b7a6edb2b7274691b67f/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f676f6f676c652d6465766c69622e737667\" data-canonical-src=\"https://skydoves.github.io/badges/google-devlib.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n \u003ca href=\"https://twitter.com/googledevs/status/1476223093773418502\" rel=\"nofollow\"\u003e\u003cimg alt=\"Twitter\" src=\"https://camo.githubusercontent.com/9f4210a9b2f359fcf7035ae3c8e068bb227d299277386682ffeffc5ef07d0bc2/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f747769747465722d646576656c6f706572732e737667\" data-canonical-src=\"https://skydoves.github.io/badges/twitter-developers.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n \u003ca href=\"https://www.linkedin.com/feed/update/urn:li:activity:6881990083344519168/\" rel=\"nofollow\"\u003e\u003cimg alt=\"LinkedIn\" src=\"https://camo.githubusercontent.com/027bd2909a0e37fa942a3874268c790ce8f65302fec4a7c26b2297e6af2c4189/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f6c696e6b6564696e2d646576656c6f706572732e737667\" data-canonical-src=\"https://skydoves.github.io/badges/linkedin-developers.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n \u003ca href=\"https://github.com/doveletter\"\u003e\u003cimg alt=\"Profile\" src=\"https://camo.githubusercontent.com/8962bec0853c79ed136da2abc7f428ba252234264bde61bcffa56823a4acde71/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f646f76652d6c65747465722e737667\" data-canonical-src=\"https://skydoves.github.io/badges/dove-letter.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003cbr\u003e\n \u003ca href=\"https://opensource.org/licenses/Apache-2.0\" rel=\"nofollow\"\u003e\u003cimg alt=\"License\" src=\"https://camo.githubusercontent.com/859a1a0bc85ce8bbd7a730a274fec5c9e77c4726ffdf6aa762a78685e26033a4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d417061636865253230322e302d626c75652e737667\" data-canonical-src=\"https://img.shields.io/badge/License-Apache%202.0-blue.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n \u003ca href=\"https://android-arsenal.com/api?level=21\" rel=\"nofollow\"\u003e\u003cimg alt=\"API\" src=\"https://camo.githubusercontent.com/56b60a6c198b13ce8a3efe333b3a88af611a8059eb5995fb977cd5eb3be1ed3e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4150492d32312532422d627269676874677265656e2e7376673f7374796c653d666c6174\" data-canonical-src=\"https://img.shields.io/badge/API-21%2B-brightgreen.svg?style=flat\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n \u003ca href=\"https://github.com/skydoves/Balloon/actions\"\u003e\u003cimg alt=\"Build Status\" src=\"https://github.com/skydoves/Balloon/workflows/Android%20CI/badge.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n \u003ca href=\"https://medium.com/swlh/a-lightweight-tooltip-popup-for-android-ef9484a992d7\" rel=\"nofollow\"\u003e\u003cimg alt=\"Medium\" src=\"https://camo.githubusercontent.com/c1fb38e43d61feff2617453e868453449cba05145bd180c095e5dc4bc26d17c5/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f53746f72792d4d656469756d2e737667\" data-canonical-src=\"https://skydoves.github.io/badges/Story-Medium.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n \u003ca href=\"https://github.com/skydoves\"\u003e\u003cimg alt=\"Profile\" src=\"https://camo.githubusercontent.com/5d731d9f614226d3cb8469af9b5d66977d92d20264bf16930debf855761ff9a3/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f736b79646f7665732e737667\" data-canonical-src=\"https://skydoves.github.io/badges/skydoves.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n \u003ca href=\"https://skydoves.github.io/libraries/balloon/html/balloon/com.skydoves.balloon/index.html\" rel=\"nofollow\"\u003e\u003cimg alt=\"Dokka\" src=\"https://camo.githubusercontent.com/1a835fe6c487aa0f617523a6734d9f07814403ee86e4ccf3398f368f512fd0d4/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f646f6b6b612d62616c6c6f6f6e2e737667\" data-canonical-src=\"https://skydoves.github.io/badges/dokka-balloon.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003c/p\u003e \u003cbr\u003e\n\u003cp align=\"center\" dir=\"auto\"\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/61194943-f9d70380-a6ff-11e9-807f-ba1ca8126f8a.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/61194943-f9d70380-a6ff-11e9-807f-ba1ca8126f8a.gif\" width=\"280\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/61225579-d346b600-a75b-11e9-84f8-3c06047b5003.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/61225579-d346b600-a75b-11e9-84f8-3c06047b5003.gif\" width=\"280\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/148673977-dba2e44c-c2fb-4fb4-a648-e26e8541e865.png\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/148673977-dba2e44c-c2fb-4fb4-a648-e26e8541e865.png\" width=\"252\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eWho's using Balloon?\u003c/h2\u003e\u003ca id=\"user-content-whos-using-balloon\" class=\"anchor\" aria-label=\"Permalink: Who's using Balloon?\" href=\"#whos-using-balloon\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e👉 \u003ca href=\"/skydoves/Balloon/blob/main/usecases.md\"\u003eCheck out who's using Balloon\u003c/a\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eBalloon hits \u003cstrong\u003e+500,000 downloads every month\u003c/strong\u003e around the globe! 🎈\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/196018576-a9c87534-81a2-4618-8519-0024b67964bf.png\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/196018576-a9c87534-81a2-4618-8519-0024b67964bf.png\" alt=\"globe\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/210227682-cbc03479-8625-4213-b907-4f15217f91ba.png\"\u003e\u003cimg align=\"right\" width=\"130px\" src=\"https://user-images.githubusercontent.com/24237865/210227682-cbc03479-8625-4213-b907-4f15217f91ba.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBalloon in Jetpack Compose\u003c/h2\u003e\u003ca id=\"user-content-balloon-in-jetpack-compose\" class=\"anchor\" aria-label=\"Permalink: Balloon in Jetpack Compose\" href=\"#balloon-in-jetpack-compose\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf you want to use Balloon in your Jetpack Compose project, check out the \u003cstrong\u003e\u003ca href=\"https://github.com/skydoves/Balloon#balloon-in-jetpack-compose-1\"\u003eBalloon in Jetpack Compose\u003c/a\u003e\u003c/strong\u003e guidelines. You can also check out the blog post \u003cstrong\u003e\u003ca href=\"https://medium.com/@skydoves/tooltips-for-jetpack-compose-improve-user-experience-to-the-next-level-68791ab8e07f\" rel=\"nofollow\"\u003eTooltips for Jetpack Compose: Improve User Experience to the Next Level\u003c/a\u003e\u003c/strong\u003e for more details.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eIncluding in your project\u003c/h2\u003e\u003ca id=\"user-content-including-in-your-project\" class=\"anchor\" aria-label=\"Permalink: Including in your project\" href=\"#including-in-your-project\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22balloon%22\" rel=\"nofollow\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/919434e291d5302987630dbf6339eabd3d1b487631afff35de260bd01531c0a1/68747470733a2f2f696d672e736869656c64732e696f2f6d6176656e2d63656e7472616c2f762f636f6d2e6769746875622e736b79646f7665732f62616c6c6f6f6e2e7376673f6c6162656c3d4d6176656e25323043656e7472616c\" alt=\"Maven Central\" data-canonical-src=\"https://img.shields.io/maven-central/v/com.github.skydoves/balloon.svg?label=Maven%20Central\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eGradle\u003c/h3\u003e\u003ca id=\"user-content-gradle\" class=\"anchor\" aria-label=\"Permalink: Gradle\" href=\"#gradle\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAdd the dependency below to your \u003cstrong\u003emodule\u003c/strong\u003e's \u003ccode\u003ebuild.gradle\u003c/code\u003e file:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"dependencies {\n implementation(\u0026quot;com.github.skydoves:balloon:1.6.12\u0026quot;)\n}\"\u003e\u003cpre\u003edependencies {\n implementation(\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecom.github.skydoves:balloon:1.6.12\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eHow to Use\u003c/h2\u003e\u003ca id=\"user-content-how-to-use\" class=\"anchor\" aria-label=\"Permalink: How to Use\" href=\"#how-to-use\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBalloon supports both Kotlin and Java projects, so you can reference it by your language.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCreate Balloon with Kotlin\u003c/h3\u003e\u003ca id=\"user-content-create-balloon-with-kotlin\" class=\"anchor\" aria-label=\"Permalink: Create Balloon with Kotlin\" href=\"#create-balloon-with-kotlin\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can create an instance of the Balloon with the \u003ccode\u003eBalloon.Builder\u003c/code\u003e class.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"val balloon = Balloon.Builder(context)\n .setWidthRatio(1.0f)\n .setHeight(BalloonSizeSpec.WRAP)\n .setText(\u0026quot;Edit your profile here!\u0026quot;)\n .setTextColorResource(R.color.white_87)\n .setTextSize(15f)\n .setIconDrawableResource(R.drawable.ic_edit)\n .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)\n .setArrowSize(10)\n .setArrowPosition(0.5f)\n .setPadding(12)\n .setCornerRadius(8f)\n .setBackgroundColorResource(R.color.skyBlue)\n .setBalloonAnimation(BalloonAnimation.ELASTIC)\n .setLifecycleOwner(lifecycle)\n .build()\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e balloon \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBuilder\u003c/span\u003e(context)\n .setWidthRatio(\u003cspan class=\"pl-c1\"\u003e1.0f\u003c/span\u003e)\n .setHeight(\u003cspan class=\"pl-en\"\u003eBalloonSizeSpec\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eWRAP\u003c/span\u003e)\n .setText(\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eEdit your profile here!\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n .setTextColorResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.white_87)\n .setTextSize(\u003cspan class=\"pl-c1\"\u003e15f\u003c/span\u003e)\n .setIconDrawableResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.drawable.ic_edit)\n .setArrowPositionRules(\u003cspan class=\"pl-en\"\u003eArrowPositionRules\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eALIGN_ANCHOR\u003c/span\u003e)\n .setArrowSize(\u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e)\n .setArrowPosition(\u003cspan class=\"pl-c1\"\u003e0.5f\u003c/span\u003e)\n .setPadding(\u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e)\n .setCornerRadius(\u003cspan class=\"pl-c1\"\u003e8f\u003c/span\u003e)\n .setBackgroundColorResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.skyBlue)\n .setBalloonAnimation(\u003cspan class=\"pl-en\"\u003eBalloonAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eELASTIC\u003c/span\u003e)\n .setLifecycleOwner(lifecycle)\n .build()\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCreate Balloon with Kotlin DSL\u003c/h3\u003e\u003ca id=\"user-content-create-balloon-with-kotlin-dsl\" class=\"anchor\" aria-label=\"Permalink: Create Balloon with Kotlin DSL\" href=\"#create-balloon-with-kotlin-dsl\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can also create an instance of the Balloon with the Kotlin DSL.\u003c/p\u003e\n\u003cdetails\u003e\n \u003csummary\u003eKeep reading for more details\u003c/summary\u003e\n\u003cp dir=\"auto\"\u003eYou can create an instance of the Balloon with \u003ccode\u003ecreateBalloon\u003c/code\u003e as the example below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"val balloon = createBalloon(context) {\n setWidthRatio(1.0f)\n setHeight(BalloonSizeSpec.WRAP)\n setText(\u0026quot;Edit your profile here!\u0026quot;)\n setTextColorResource(R.color.white_87)\n setTextSize(15f)\n setIconDrawableResource(R.drawable.ic_edit)\n setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)\n setArrowSize(10)\n setArrowPosition(0.5f)\n setPadding(12)\n setCornerRadius(8f)\n setBackgroundColorResource(R.color.skyBlue)\n setBalloonAnimation(BalloonAnimation.ELASTIC)\n setLifecycleOwner(lifecycle)\n build()\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e balloon \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e createBalloon(context) {\n setWidthRatio(\u003cspan class=\"pl-c1\"\u003e1.0f\u003c/span\u003e)\n setHeight(\u003cspan class=\"pl-en\"\u003eBalloonSizeSpec\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eWRAP\u003c/span\u003e)\n setText(\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eEdit your profile here!\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n setTextColorResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.white_87)\n setTextSize(\u003cspan class=\"pl-c1\"\u003e15f\u003c/span\u003e)\n setIconDrawableResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.drawable.ic_edit)\n setArrowPositionRules(\u003cspan class=\"pl-en\"\u003eArrowPositionRules\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eALIGN_ANCHOR\u003c/span\u003e)\n setArrowSize(\u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e)\n setArrowPosition(\u003cspan class=\"pl-c1\"\u003e0.5f\u003c/span\u003e)\n setPadding(\u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e)\n setCornerRadius(\u003cspan class=\"pl-c1\"\u003e8f\u003c/span\u003e)\n setBackgroundColorResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.skyBlue)\n setBalloonAnimation(\u003cspan class=\"pl-en\"\u003eBalloonAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eELASTIC\u003c/span\u003e)\n setLifecycleOwner(lifecycle)\n build()\n}\u003c/pre\u003e\u003c/div\u003e\n\u003c/details\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCreate Balloon with Java\u003c/h3\u003e\u003ca id=\"user-content-create-balloon-with-java\" class=\"anchor\" aria-label=\"Permalink: Create Balloon with Java\" href=\"#create-balloon-with-java\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can create an instance of the Balloon with Java by using the \u003ccode\u003eBalloon.Builder\u003c/code\u003e class.\u003c/p\u003e\n\u003cdetails\u003e\n \u003csummary\u003eKeep reading for more details\u003c/summary\u003e\n\u003cp dir=\"auto\"\u003eYou can create an instance of the Balloon as the following example below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-java notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Balloon balloon = new Balloon.Builder(context)\n .setArrowSize(10)\n .setArrowOrientation(ArrowOrientation.TOP)\n .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)\n .setArrowPosition(0.5f)\n .setWidth(BalloonSizeSpec.WRAP)\n .setHeight(65)\n .setTextSize(15f)\n .setCornerRadius(4f)\n .setAlpha(0.9f)\n .setText(\u0026quot;You can access your profile from now on.\u0026quot;)\n .setTextColor(ContextCompat.getColor(context, R.color.white_93))\n .setTextIsHtml(true)\n .setIconDrawable(ContextCompat.getDrawable(context, R.drawable.ic_profile))\n .setBackgroundColor(ContextCompat.getColor(context, R.color.colorPrimary))\n .setOnBalloonClickListener(onBalloonClickListener)\n .setBalloonAnimation(BalloonAnimation.FADE)\n .setLifecycleOwner(lifecycleOwner)\n .build();\"\u003e\u003cpre\u003e\u003cspan class=\"pl-smi\"\u003eBalloon\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eballoon\u003c/span\u003e = \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003eBalloon\u003c/span\u003e.\u003cspan class=\"pl-smi\"\u003eBuilder\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003econtext\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetArrowSize\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetArrowOrientation\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003eArrowOrientation\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003eTOP\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetArrowPositionRules\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003eArrowPositionRules\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003eALIGN_ANCHOR\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetArrowPosition\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e0.5f\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetWidth\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003eBalloonSizeSpec\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003eWRAP\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetHeight\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e65\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetTextSize\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e15f\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetCornerRadius\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e4f\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetAlpha\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e0.9f\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetText\u003c/span\u003e(\u003cspan class=\"pl-s\"\u003e\"You can access your profile from now on.\"\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetTextColor\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003eContextCompat\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003egetColor\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003econtext\u003c/span\u003e, \u003cspan class=\"pl-smi\"\u003eR\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003ecolor\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003ewhite_93\u003c/span\u003e))\n .\u003cspan class=\"pl-en\"\u003esetTextIsHtml\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetIconDrawable\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003eContextCompat\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003egetDrawable\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003econtext\u003c/span\u003e, \u003cspan class=\"pl-smi\"\u003eR\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003edrawable\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003eic_profile\u003c/span\u003e))\n .\u003cspan class=\"pl-en\"\u003esetBackgroundColor\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003eContextCompat\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003egetColor\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003econtext\u003c/span\u003e, \u003cspan class=\"pl-smi\"\u003eR\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003ecolor\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003ecolorPrimary\u003c/span\u003e))\n .\u003cspan class=\"pl-en\"\u003esetOnBalloonClickListener\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003eonBalloonClickListener\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetBalloonAnimation\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003eBalloonAnimation\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003eFADE\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetLifecycleOwner\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003elifecycleOwner\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003ebuild\u003c/span\u003e();\u003c/pre\u003e\u003c/div\u003e\n\u003c/details\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eShow up Balloon\u003c/h3\u003e\u003ca id=\"user-content-show-up-balloon\" class=\"anchor\" aria-label=\"Permalink: Show up Balloon\" href=\"#show-up-balloon\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can show up the Balloon using the functions below. If we use \u003ccode\u003eshowAlign__\u003c/code\u003e method, we can show up the Balloon based on alignments (\u003cstrong\u003etop, bottom, right, left\u003c/strong\u003e). Also, we can adjust specific positions of the Balloon by using \u003ccode\u003ex-Offset\u003c/code\u003e and \u003ccode\u003ey-Offset\u003c/code\u003e parameters. \u003cbr\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"balloon.showAlignTop(anchor: View) // shows the balloon on an anchor view as the top alignment.\nballoon.showAlignTop(anchor: View, xOff: Int, yOff: Int) // shows top alignment with x-off and y-off.\nballoon.showAlignBottom(anchor: View) // shows the balloon on an anchor view as the bottom alignment.\nballoon.showAlignBottom(anchor: View, xOff: Int, yOff: Int) // shows bottom alignment with x-off and y-off.\nballoon.showAlignEnd(anchor: View) // shows the balloon on an anchor view as the end alignment.\nballoon.showAlignEnd(anchor: View, xOff: Int, yOff: Int) // shows end alignment with x-off and y-off.\nballoon.showAlignStart(anchor: View) // shows the balloon on an anchor view as the start alignment.\nballoon.showAlignStart(anchor: View, xOff: Int, yOff: Int) // shows start alignment with x-off and y-off.\nballoon.showAsDropDown(anchor: View) // shows the balloon as a dropdown without any alignments.\nballoon.showAsDropDown(anchor: View, xOff: Int, yOff: Int) // shows no alignments with x-off and y-off.\nballoon.showAtCenter(anchor: View, xOff: Int, yOff: Int, centerAlign: BalloonCenterAlign.TOP)\n// shows the balloon over the anchor view (overlap) as the center aligns.\"\u003e\u003cpre\u003eballoon.showAlignTop(anchor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eView\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows the balloon on an anchor view as the top alignment.\u003c/span\u003e\nballoon.showAlignTop(anchor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eView\u003c/span\u003e, xOff\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eInt\u003c/span\u003e, yOff\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eInt\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows top alignment with x-off and y-off.\u003c/span\u003e\nballoon.showAlignBottom(anchor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eView\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows the balloon on an anchor view as the bottom alignment.\u003c/span\u003e\nballoon.showAlignBottom(anchor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eView\u003c/span\u003e, xOff\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eInt\u003c/span\u003e, yOff\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eInt\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows bottom alignment with x-off and y-off.\u003c/span\u003e\nballoon.showAlignEnd(anchor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eView\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows the balloon on an anchor view as the end alignment.\u003c/span\u003e\nballoon.showAlignEnd(anchor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eView\u003c/span\u003e, xOff\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eInt\u003c/span\u003e, yOff\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eInt\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows end alignment with x-off and y-off.\u003c/span\u003e\nballoon.showAlignStart(anchor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eView\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows the balloon on an anchor view as the start alignment.\u003c/span\u003e\nballoon.showAlignStart(anchor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eView\u003c/span\u003e, xOff\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eInt\u003c/span\u003e, yOff\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eInt\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows start alignment with x-off and y-off.\u003c/span\u003e\nballoon.showAsDropDown(anchor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eView\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows the balloon as a dropdown without any alignments.\u003c/span\u003e\nballoon.showAsDropDown(anchor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eView\u003c/span\u003e, xOff\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eInt\u003c/span\u003e, yOff\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eInt\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows no alignments with x-off and y-off.\u003c/span\u003e\nballoon.showAtCenter(anchor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eView\u003c/span\u003e, xOff\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eInt\u003c/span\u003e, yOff\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eInt\u003c/span\u003e, centerAlign\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eBalloonCenterAlign\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eTOP\u003c/span\u003e)\n\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows the balloon over the anchor view (overlap) as the center aligns.\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAlso, We can show up the Balloon with Kotlin extensions.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"myButton.showAlignTop(balloon)\"\u003e\u003cpre\u003emyButton.showAlignTop(balloon)\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDismiss Balloon\u003c/h3\u003e\u003ca id=\"user-content-dismiss-balloon\" class=\"anchor\" aria-label=\"Permalink: Dismiss Balloon\" href=\"#dismiss-balloon\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can dismiss the Balloon by using the \u003ccode\u003eBalloon.dismiss()\u003c/code\u003e method.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"balloon.dismiss()\nballoon.dismissWithDelay(1000L) // dismisses 1000 milliseconds later when the popup is shown\"\u003e\u003cpre\u003eballoon.dismiss()\nballoon.dismissWithDelay(\u003cspan class=\"pl-c1\"\u003e1000L\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e dismisses 1000 milliseconds later when the popup is shown\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can dismiss automatically with delay after the Balloon is showing up with the \u003ccode\u003esetAutoDismissDuration\u003c/code\u003e method..\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Balloon.Builder(context)\n // dismisses automatically 1000 milliseconds later when the popup is shown.\n .setAutoDismissDuration(1000L)\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBuilder\u003c/span\u003e(context)\n \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e dismisses automatically 1000 milliseconds later when the popup is shown.\u003c/span\u003e\n .setAutoDismissDuration(\u003cspan class=\"pl-c1\"\u003e1000L\u003c/span\u003e)\n \u003cspan class=\"pl-k\"\u003e..\u003c/span\u003e.\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eShow up Balloon Sequentially\u003c/h3\u003e\u003ca id=\"user-content-show-up-balloon-sequentially\" class=\"anchor\" aria-label=\"Permalink: Show up Balloon Sequentially\" href=\"#show-up-balloon-sequentially\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can show up a couple of Balloons sequentially with the \u003ccode\u003erelayShow__\u003c/code\u003e and \u003ccode\u003eawait__\u003c/code\u003e methods.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"customListBalloon\n .relayShowAlignBottom(customProfileBalloon, circleImageView) // relay to customListBalloon\n .relayShowAlignTop(customTagBalloon, bottomNavigationView, 130, 0) // relay to customProfileBalloon\n\n// show sequentially customListBalloon-customProfileBalloon-customTagBalloon\ncustomListBalloon.showAlignBottom(anchorView)\"\u003e\u003cpre\u003ecustomListBalloon\n .relayShowAlignBottom(customProfileBalloon, circleImageView) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e relay to customListBalloon\u003c/span\u003e\n .relayShowAlignTop(customTagBalloon, bottomNavigationView, \u003cspan class=\"pl-c1\"\u003e130\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e relay to customProfileBalloon\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e show sequentially customListBalloon-customProfileBalloon-customTagBalloon\u003c/span\u003e\ncustomListBalloon.showAlignBottom(anchorView)\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"coroutineScope.launch {\n customListBalloon.awaitAlignBottom(anchorView)\n customProfileBalloon.awaitAlignBottom(circleImageView, 0, 0)\n customTagBalloon.awaitAlignTop(bottomNavigationView, 130, 0)\n}\"\u003e\u003cpre\u003ecoroutineScope.launch {\n customListBalloon.awaitAlignBottom(anchorView)\n customProfileBalloon.awaitAlignBottom(circleImageView, \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e)\n customTagBalloon.awaitAlignTop(bottomNavigationView, \u003cspan class=\"pl-c1\"\u003e130\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e)\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eNote: The \u003ccode\u003erelayShow__\u003c/code\u003e and \u003ccode\u003eawait__\u003c/code\u003e methods overwrite the \u003ccode\u003esetOnDismissListener\u003c/code\u003e internally, so you can't use the \u003ccode\u003esetOnDismissListener\u003c/code\u003e at the same time.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eParallel Displaying\u003c/h4\u003e\u003ca id=\"user-content-parallel-displaying\" class=\"anchor\" aria-label=\"Permalink: Parallel Displaying\" href=\"#parallel-displaying\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can show multiple balloons at the same with sequential behaviour.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"lifecycleScope.launch {\n // shows balloons at the same time\n awaitBalloons {\n // dismissing of any balloon dismisses all of them. Default behaviour\n dismissSequentially = false\n\n textView.alignTop(balloonAlignTop)\n textView.alignStart(balloonAlignStart)\n textView.alignEnd(balloonAlignEnd)\n textView.alignBottom(balloonAlignBottom)\n }\n\n // shows another group after dismissing the previous group.\n awaitBalloons {\n dismissSequentially = true // balloons dismissed individually\n\n imageView.alignTop(balloonAlignTop)\n imageView.alignStart(balloonAlignStart)\n imageView.alignEnd(balloonAlignEnd)\n imageView.alignBottom(balloonAlignBottom)\n }\n}\"\u003e\u003cpre\u003elifecycleScope.launch {\n \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows balloons at the same time\u003c/span\u003e\n awaitBalloons {\n \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e dismissing of any balloon dismisses all of them. Default behaviour\u003c/span\u003e\n dismissSequentially \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e\n\n textView.alignTop(balloonAlignTop)\n textView.alignStart(balloonAlignStart)\n textView.alignEnd(balloonAlignEnd)\n textView.alignBottom(balloonAlignBottom)\n }\n\n \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e shows another group after dismissing the previous group.\u003c/span\u003e\n awaitBalloons {\n dismissSequentially \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e balloons dismissed individually\u003c/span\u003e\n\n imageView.alignTop(balloonAlignTop)\n imageView.alignStart(balloonAlignStart)\n imageView.alignEnd(balloonAlignEnd)\n imageView.alignBottom(balloonAlignBottom)\n }\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eNote: The methods inside \u003ccode\u003eawaitBalloons\u003c/code\u003e are \u003ccode\u003eatCenter\u003c/code\u003e, \u003ccode\u003easDropdown\u003c/code\u003e, \u003ccode\u003ealignTop\u003c/code\u003e and etc. Don't confuse with \u003ccode\u003eshow__\u003c/code\u003e and \u003ccode\u003eawait__\u003c/code\u003e methods.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eWidth and height\u003c/h3\u003e\u003ca id=\"user-content-width-and-height\" class=\"anchor\" aria-label=\"Permalink: Width and height\" href=\"#width-and-height\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can adjust specific width and height sizes of Balloon with the below builder methods. If we don't set any specific sizes of the width and height of the Balloon, the size of the Balloon will be decided by the content.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eSpecific size\u003c/h4\u003e\u003ca id=\"user-content-specific-size\" class=\"anchor\" aria-label=\"Permalink: Specific size\" href=\"#specific-size\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can set specific sizes of the Balloon regardless size of the contents.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"balloon.setWidth(220) // sets 220dp width size.\nballoon.setHeight(160) // sets 160dp height size.\"\u003e\u003cpre\u003eballoon.setWidth(\u003cspan class=\"pl-c1\"\u003e220\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets 220dp width size.\u003c/span\u003e\nballoon.setHeight(\u003cspan class=\"pl-c1\"\u003e160\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets 160dp height size.\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eWrap Content Sizes\u003c/h4\u003e\u003ca id=\"user-content-wrap-content-sizes\" class=\"anchor\" aria-label=\"Permalink: Wrap Content Sizes\" href=\"#wrap-content-sizes\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can set dynamic sizes of Balloon, which depends on sizes of the internal content.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"balloon.setWidth(BalloonSizeSpec.WRAP) // sets width size depending on the content's size.\nballoon.setHeight(BalloonSizeSpec.WRAP) // sets height size depending on the content's size.\"\u003e\u003cpre\u003eballoon.setWidth(\u003cspan class=\"pl-en\"\u003eBalloonSizeSpec\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eWRAP\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets width size depending on the content's size.\u003c/span\u003e\nballoon.setHeight(\u003cspan class=\"pl-en\"\u003eBalloonSizeSpec\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eWRAP\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets height size depending on the content's size.\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDepending on Screen Size\u003c/h4\u003e\u003ca id=\"user-content-depending-on-screen-size\" class=\"anchor\" aria-label=\"Permalink: Depending on Screen Size\" href=\"#depending-on-screen-size\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAlso, we can set the width size depending on the ratio of the screen's size (horizontal).\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"balloon.setWidthRatio(0.5f) // sets width as 50% of the horizontal screen's size.\"\u003e\u003cpre\u003eballoon.setWidthRatio(\u003cspan class=\"pl-c1\"\u003e0.5f\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets width as 50% of the horizontal screen's size.\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003ePadding\u003c/h3\u003e\u003ca id=\"user-content-padding\" class=\"anchor\" aria-label=\"Permalink: Padding\" href=\"#padding\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBalloon wraps contents. We can adjust the content size of the Balloon by adding paddings on the content like.\u003cbr\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"balloon.setPadding(6) // sets 6dp padding to all directions (left-top-right-bottom)\nballoon.setPaddingLeft(8) // sets 8dp padding to content's left.\nballoon.setPaddingTop(12) // sets 12dp padding to content's top.\"\u003e\u003cpre\u003eballoon.setPadding(\u003cspan class=\"pl-c1\"\u003e6\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets 6dp padding to all directions (left-top-right-bottom)\u003c/span\u003e\nballoon.setPaddingLeft(\u003cspan class=\"pl-c1\"\u003e8\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets 8dp padding to content's left.\u003c/span\u003e\nballoon.setPaddingTop(\u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets 12dp padding to content's top.\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eMargin\u003c/h3\u003e\u003ca id=\"user-content-margin\" class=\"anchor\" aria-label=\"Permalink: Margin\" href=\"#margin\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf the location of the balloon according to the anchor would be located at the boundaries on the screen,\u003cbr\u003e\nthe balloon will be stick to the end of the screen. In this case, we can give horizontal margins to the balloon.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".setMargin(12) // sets the margin on the balloon all directions.\n.setMarginLeft(14) // sets the left margin on the balloon.\n.setMarginRight(14) // sets the right margin on the balloon.\"\u003e\u003cpre\u003e.setMargin(\u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets the margin on the balloon all directions.\u003c/span\u003e\n.setMarginLeft(\u003cspan class=\"pl-c1\"\u003e14\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets the left margin on the balloon.\u003c/span\u003e\n.setMarginRight(\u003cspan class=\"pl-c1\"\u003e14\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets the right margin on the balloon.\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eAuto-sized text\u003c/h3\u003e\u003ca id=\"user-content-auto-sized-text\" class=\"anchor\" aria-label=\"Permalink: Auto-sized text\" href=\"#auto-sized-text\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can set auto-sized text based on the balloon's window size, specifying minimum and maximum text sizes, as shown in the example below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".setTextSize(15f)\n.setMinAutoSizeTextSize(14f)\n.setMaxAutoSizeTextSize(18f)\n.setEnableAutoSized(true)\"\u003e\u003cpre\u003e.setTextSize(\u003cspan class=\"pl-c1\"\u003e15f\u003c/span\u003e)\n.setMinAutoSizeTextSize(\u003cspan class=\"pl-c1\"\u003e14f\u003c/span\u003e)\n.setMaxAutoSizeTextSize(\u003cspan class=\"pl-c1\"\u003e18f\u003c/span\u003e)\n.setEnableAutoSized(\u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e)\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eNote: Ensure that the maximum auto text size is set to a value higher than the minimum auto text size.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eArrow Composition\u003c/h3\u003e\u003ca id=\"user-content-arrow-composition\" class=\"anchor\" aria-label=\"Permalink: Arrow Composition\" href=\"#arrow-composition\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can customize the arrow on the Balloon with various methods. For more details, check out the \u003ca href=\"https://skydoves.github.io/libraries/balloon/html/balloon/com.skydoves.balloon/-balloon/-builder/index.html\" rel=\"nofollow\"\u003eBalloon.Builder\u003c/a\u003e.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".setIsVisibleArrow(true) // sets the visibility of the arrow.\n.setArrowSize(10) // sets the arrow size.\n.setArrowSize(BalloonSizeSpec.WRAP) // sets arrow size depending on the original resources' size.\n.setArrowPosition(0.8f) // sets the arrow position using the popup size's ratio (0 ~ 1.0)\n.setArrowOrientation(ArrowOrientation.TOP) // sets the arrow orientation. top, bottom, left, right\n.setArrowDrawable(ContextCompat.getDrawable(context, R.drawable.arrow)) // sets the arrow drawable.\"\u003e\u003cpre\u003e.setIsVisibleArrow(\u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets the visibility of the arrow.\u003c/span\u003e\n.setArrowSize(\u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets the arrow size.\u003c/span\u003e\n.setArrowSize(\u003cspan class=\"pl-en\"\u003eBalloonSizeSpec\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eWRAP\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets arrow size depending on the original resources' size.\u003c/span\u003e\n.setArrowPosition(\u003cspan class=\"pl-c1\"\u003e0.8f\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets the arrow position using the popup size's ratio (0 ~ 1.0)\u003c/span\u003e\n.setArrowOrientation(\u003cspan class=\"pl-en\"\u003eArrowOrientation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eTOP\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets the arrow orientation. top, bottom, left, right\u003c/span\u003e\n.setArrowDrawable(\u003cspan class=\"pl-en\"\u003eContextCompat\u003c/span\u003e.getDrawable(context, \u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.drawable.arrow)) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets the arrow drawable.\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eArrowPositionRules\u003c/h4\u003e\u003ca id=\"user-content-arrowpositionrules\" class=\"anchor\" aria-label=\"Permalink: ArrowPositionRules\" href=\"#arrowpositionrules\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can decide the position of the arrow depending on the aligning rules with the \u003ccode\u003eArrowPositionRules\u003c/code\u003e.\u003cbr\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// Align the arrow position depending on an anchor.\n// if `arrowPosition` is 0.5, the arrow will be located in the middle of an anchor.\n.setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)\n\n// Align the arrow position depending on the balloon popup body.\n// if `arrowPosition` is 0.5, he arrow will be located in the middle of the tooltip.\n.setArrowPositionRules(ArrowPositionRules.ALIGN_BALLOON) // default\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e Align the arrow position depending on an anchor.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e if `arrowPosition` is 0.5, the arrow will be located in the middle of an anchor.\u003c/span\u003e\n.setArrowPositionRules(\u003cspan class=\"pl-en\"\u003eArrowPositionRules\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eALIGN_ANCHOR\u003c/span\u003e)\n\n\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e Align the arrow position depending on the balloon popup body.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e if `arrowPosition` is 0.5, he arrow will be located in the middle of the tooltip.\u003c/span\u003e\n.setArrowPositionRules(\u003cspan class=\"pl-en\"\u003eArrowPositionRules\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eALIGN_BALLOON\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e default\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eArrowOrientationRules\u003c/h4\u003e\u003ca id=\"user-content-arroworientationrules\" class=\"anchor\" aria-label=\"Permalink: ArrowOrientationRules\" href=\"#arroworientationrules\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can decide the orientation of the arrow depending on the aligning rules with the \u003ccode\u003eArrowOrientationRules\u003c/code\u003e.\u003cbr\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// Align depending on the position of an anchor.\n// For example, `arrowOrientation` is ArrowOrientation.TOP and\n// we want to show up the balloon under an anchor using the `Balloon.showAlignBottom`.\n// However, if there is not enough free space to place the tooltip at the bottom of the anchor,\n// tooltips will be placed top of the anchor and the orientation of the arrow will be `ArrowOrientation.BOTTOM`.\n.setArrowOrientationRules(ArrowOrientationRules.ALIGN_ANCHOR) // default\n\n// Align to fixed ArrowOrientation value.\n.setArrowOrientationRules(ArrowOrientationRules.ALIGN_FIXED)\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e Align depending on the position of an anchor.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e For example, `arrowOrientation` is ArrowOrientation.TOP and\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e we want to show up the balloon under an anchor using the `Balloon.showAlignBottom`.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e However, if there is not enough free space to place the tooltip at the bottom of the anchor,\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e tooltips will be placed top of the anchor and the orientation of the arrow will be `ArrowOrientation.BOTTOM`.\u003c/span\u003e\n.setArrowOrientationRules(\u003cspan class=\"pl-en\"\u003eArrowOrientationRules\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eALIGN_ANCHOR\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e default\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e Align to fixed ArrowOrientation value.\u003c/span\u003e\n.setArrowOrientationRules(\u003cspan class=\"pl-en\"\u003eArrowOrientationRules\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eALIGN_FIXED\u003c/span\u003e)\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBelow previews are shows examples of \u003ccode\u003esetArrowOrientation\u003c/code\u003e and \u003ccode\u003esetArrowPosition\u003c/code\u003e methods. \u003cbr\u003e\nThe \u003ccode\u003esetArrowPosition\u003c/code\u003e measures the Balloon's size and sets the arrow's position with the ratio value.\u003c/p\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth align=\"center\"\u003eOrientation: BOTTOM\u003cbr\u003e Position: 0.62\u003cbr\u003e showAlignTop\u003c/th\u003e\n\u003cth align=\"center\"\u003eOrientation: TOP\u003cbr\u003e Position : 0.5\u003cbr\u003e showAlignBottom\u003c/th\u003e\n\u003cth align=\"center\"\u003eOrientation: START\u003cbr\u003e Position: 0.5\u003cbr\u003e showAlignStart\u003c/th\u003e\n\u003cth align=\"center\"\u003eOrientation: END\u003cbr\u003e Position: 0.5\u003cbr\u003e showAlignEnd\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/61320410-55120e80-a844-11e9-9af6-cae49b8897e7.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/61320410-55120e80-a844-11e9-9af6-cae49b8897e7.gif\" align=\"center\" width=\"100%\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/61320412-55120e80-a844-11e9-9ca9-81375707886e.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/61320412-55120e80-a844-11e9-9ca9-81375707886e.gif\" align=\"center\" width=\"100%\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/61320415-55aaa500-a844-11e9-874f-ca44be02aace.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/61320415-55aaa500-a844-11e9-874f-ca44be02aace.gif\" align=\"center\" width=\"100%\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/61320416-55aaa500-a844-11e9-9aa1-53e409ca63fb.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/61320416-55aaa500-a844-11e9-9aa1-53e409ca63fb.gif\" align=\"center\" width=\"100%\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eText Composition\u003c/h3\u003e\u003ca id=\"user-content-text-composition\" class=\"anchor\" aria-label=\"Permalink: Text Composition\" href=\"#text-composition\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can customize the text on the Balloon.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".setText(\u0026quot;You can edit your profile now!\u0026quot;)\n.setTextSize(15f)\n.setTextTypeface(Typeface.BOLD)\n.setTextColorResource(R.color.colorAccent))\n.setTextGravity(Gravity.START)\"\u003e\u003cpre\u003e.setText(\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eYou can edit your profile now!\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n.setTextSize(\u003cspan class=\"pl-c1\"\u003e15f\u003c/span\u003e)\n.setTextTypeface(\u003cspan class=\"pl-en\"\u003eTypeface\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBOLD\u003c/span\u003e)\n.setTextColorResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.colorAccent))\n.setTextGravity(\u003cspan class=\"pl-en\"\u003eGravity\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eSTART\u003c/span\u003e)\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf your text includes HTML tags, you can render the text by enabling HTML option with \u003ccode\u003esetTextIsHtml\u003c/code\u003e method.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-java notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".setTextIsHtml(true)\"\u003e\u003cpre\u003e.\u003cspan class=\"pl-en\"\u003esetTextIsHtml\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e)\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis method will parse the text with the \u003ccode\u003eHtml.fromHtml(text)\u003c/code\u003e internally.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eTextForm\u003c/h3\u003e\u003ca id=\"user-content-textform\" class=\"anchor\" aria-label=\"Permalink: TextForm\" href=\"#textform\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ccode\u003eTextForm\u003c/code\u003e has some attributes for \u003ccode\u003eTextView\u003c/code\u003e to customize the text of the Balloon. You can create the \u003ccode\u003eTextForm\u003c/code\u003e instance and reuse it on multiple Balloons.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"val textForm = TextForm.Builder(context)\n .setText(\u0026quot;Edit you profile here!\u0026quot;)\n .setTextColorResource(R.color.white_87)\n .setTextSize(14f)\n .setTextTypeface(Typeface.BOLD)\n .build()\n\nval balloon = Balloon.Builder(context)\n .setTextForm(textForm)\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e textForm \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eTextForm\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBuilder\u003c/span\u003e(context)\n .setText(\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eEdit you profile here!\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n .setTextColorResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.white_87)\n .setTextSize(\u003cspan class=\"pl-c1\"\u003e14f\u003c/span\u003e)\n .setTextTypeface(\u003cspan class=\"pl-en\"\u003eTypeface\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBOLD\u003c/span\u003e)\n .build()\n\n\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e balloon \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBuilder\u003c/span\u003e(context)\n .setTextForm(textForm)\n \u003cspan class=\"pl-k\"\u003e..\u003c/span\u003e.\u003c/pre\u003e\u003c/div\u003e\n\u003cdetails\u003e\n \u003csummary\u003eCreate TextForm with Kotlin DSL\u003c/summary\u003e\n\u003cp dir=\"auto\"\u003eYou can create an instance of the \u003ccode\u003eTextForm\u003c/code\u003e with Kotlin DSL as the example below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"val textForm = textForm(context) {\n setText(\u0026quot;Edit you profile here!\u0026quot;)\n setTextColorResource(R.color.white_87)\n setTextSize(14f)\n setTextTypeface(Typeface.BOLD)\n}\n\nval balloon = Balloon.Builder(context)\n .setTextForm(textForm)\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e textForm \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e textForm(context) {\n setText(\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eEdit you profile here!\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n setTextColorResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.white_87)\n setTextSize(\u003cspan class=\"pl-c1\"\u003e14f\u003c/span\u003e)\n setTextTypeface(\u003cspan class=\"pl-en\"\u003eTypeface\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBOLD\u003c/span\u003e)\n}\n\n\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e balloon \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBuilder\u003c/span\u003e(context)\n .setTextForm(textForm)\n \u003cspan class=\"pl-k\"\u003e..\u003c/span\u003e.\u003c/pre\u003e\u003c/div\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\n \u003csummary\u003eCreate TextForm with Java\u003c/summary\u003e\n\u003cp dir=\"auto\"\u003eYou can create an instance of the \u003ccode\u003eTextForm\u003c/code\u003e with Java as the example below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-java notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"TextForm textForm = new TextForm.Builder(context)\n .setText(\u0026quot;Edit you profile here!\u0026quot;)\n .setTextColorResource(R.color.white_87)\n .setTextSize(14f)\n .setTextTypeface(Typeface.BOLD)\n .build();\n\nBalloon balloon = new Balloon.Builder(context)\n .setTextForm(textForm)\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-smi\"\u003eTextForm\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etextForm\u003c/span\u003e = \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003eTextForm\u003c/span\u003e.\u003cspan class=\"pl-smi\"\u003eBuilder\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003econtext\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetText\u003c/span\u003e(\u003cspan class=\"pl-s\"\u003e\"Edit you profile here!\"\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetTextColorResource\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003eR\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003ecolor\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003ewhite_87\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetTextSize\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e14f\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetTextTypeface\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003eTypeface\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003eBOLD\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003ebuild\u003c/span\u003e();\n\n\u003cspan class=\"pl-smi\"\u003eBalloon\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eballoon\u003c/span\u003e = \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003eBalloon\u003c/span\u003e.\u003cspan class=\"pl-smi\"\u003eBuilder\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003econtext\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetTextForm\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003etextForm\u003c/span\u003e)\n ...\u003c/pre\u003e\u003c/div\u003e\n\u003c/details\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eIcon Composition\u003c/h3\u003e\u003ca id=\"user-content-icon-composition\" class=\"anchor\" aria-label=\"Permalink: Icon Composition\" href=\"#icon-composition\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can customize the icon on the balloon.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-java notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".setIconSpace(10) // sets right margin of the icon.\n.setIconSize(20) // sets size of the icon.\n.setIconDrawable(ContextCompat.getDrawable(context, R.drawable.ic_edit)) // sets a drawable resource.\"\u003e\u003cpre\u003e.\u003cspan class=\"pl-en\"\u003esetIconSpace\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e// sets right margin of the icon.\u003c/span\u003e\n.\u003cspan class=\"pl-en\"\u003esetIconSize\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e// sets size of the icon.\u003c/span\u003e\n.\u003cspan class=\"pl-en\"\u003esetIconDrawable\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003eContextCompat\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003egetDrawable\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003econtext\u003c/span\u003e, \u003cspan class=\"pl-smi\"\u003eR\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003edrawable\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003eic_edit\u003c/span\u003e)) \u003cspan class=\"pl-c\"\u003e// sets a drawable resource.\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eIconForm\u003c/h3\u003e\u003ca id=\"user-content-iconform\" class=\"anchor\" aria-label=\"Permalink: IconForm\" href=\"#iconform\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ccode\u003eIconForm\u003c/code\u003e has some attributes for \u003ccode\u003eImageView\u003c/code\u003e to customize the icon of the Balloon. You can create the \u003ccode\u003eIconForm\u003c/code\u003e instance and reuse it on multiple Balloons.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"val iconForm = IconForm.Builder(context)\n .setDrawable(ContextCompat.getDrawable(context, R.drawable.arrow))\n .setIconColor(ContextCompat.getColor(context, R.color.skyblue))\n .setIconSize(20)\n .setIconSize(12)\n .build()\n\nval balloon = Balloon.Builder(context)\n .setIconForm(iconForm)\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e iconForm \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eIconForm\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBuilder\u003c/span\u003e(context)\n .setDrawable(\u003cspan class=\"pl-en\"\u003eContextCompat\u003c/span\u003e.getDrawable(context, \u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.drawable.arrow))\n .setIconColor(\u003cspan class=\"pl-en\"\u003eContextCompat\u003c/span\u003e.getColor(context, \u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.skyblue))\n .setIconSize(\u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e)\n .setIconSize(\u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e)\n .build()\n\n\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e balloon \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBuilder\u003c/span\u003e(context)\n .setIconForm(iconForm)\n \u003cspan class=\"pl-k\"\u003e..\u003c/span\u003e.\u003c/pre\u003e\u003c/div\u003e\n\u003cdetails\u003e\n \u003csummary\u003eCreate IconForm with Kotlin DSL\u003c/summary\u003e\n\u003cp dir=\"auto\"\u003eYou can create an instance of the \u003ccode\u003eIconForm\u003c/code\u003e with Kotlin DSL as the example below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"val iconForm = iconForm(context) {\n setDrawable(ContextCompat.getDrawable(context, R.drawable.arrow))\n setIconColor(ContextCompat.getColor(context, R.color.skyblue))\n setIconSize(20)\n setIconSize(12)\n}\n\nval balloon = Balloon.Builder(context)\n .setIconForm(iconForm)\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e iconForm \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e iconForm(context) {\n setDrawable(\u003cspan class=\"pl-en\"\u003eContextCompat\u003c/span\u003e.getDrawable(context, \u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.drawable.arrow))\n setIconColor(\u003cspan class=\"pl-en\"\u003eContextCompat\u003c/span\u003e.getColor(context, \u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.skyblue))\n setIconSize(\u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e)\n setIconSize(\u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e)\n}\n\n\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e balloon \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBuilder\u003c/span\u003e(context)\n .setIconForm(iconForm)\n \u003cspan class=\"pl-k\"\u003e..\u003c/span\u003e.\u003c/pre\u003e\u003c/div\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\n \u003csummary\u003eCreate IconForm with Java\u003c/summary\u003e\n\u003cp dir=\"auto\"\u003eYou can create an instance of the \u003ccode\u003eIconForm\u003c/code\u003e with Java as the example below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-java notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"IconForm iconForm = new IconForm.Builder(context)\n .setDrawable(ContextCompat.getDrawable(context, R.drawable.arrow))\n .setIconColor(ContextCompat.getColor(context, R.color.skyblue))\n .setIconSize(20)\n .setIconSize(12)\n .build();\n\nBalloon balloon = new Balloon.Builder(context)\n .setIconForm(iconForm)\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-smi\"\u003eIconForm\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eiconForm\u003c/span\u003e = \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003eIconForm\u003c/span\u003e.\u003cspan class=\"pl-smi\"\u003eBuilder\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003econtext\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetDrawable\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003eContextCompat\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003egetDrawable\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003econtext\u003c/span\u003e, \u003cspan class=\"pl-smi\"\u003eR\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003edrawable\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003earrow\u003c/span\u003e))\n .\u003cspan class=\"pl-en\"\u003esetIconColor\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003eContextCompat\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003egetColor\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003econtext\u003c/span\u003e, \u003cspan class=\"pl-smi\"\u003eR\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003ecolor\u003c/span\u003e.\u003cspan class=\"pl-s1\"\u003eskyblue\u003c/span\u003e))\n .\u003cspan class=\"pl-en\"\u003esetIconSize\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetIconSize\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003ebuild\u003c/span\u003e();\n\n\u003cspan class=\"pl-smi\"\u003eBalloon\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eballoon\u003c/span\u003e = \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003eBalloon\u003c/span\u003e.\u003cspan class=\"pl-smi\"\u003eBuilder\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003econtext\u003c/span\u003e)\n .\u003cspan class=\"pl-en\"\u003esetIconForm\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003eiconForm\u003c/span\u003e)\n ...\u003c/pre\u003e\u003c/div\u003e\n\u003c/details\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eOnBalloonClickListener, OnBalloonDismissListener, OnBalloonOutsideTouchListener\u003c/h3\u003e\u003ca id=\"user-content-onballoonclicklistener-onballoondismisslistener-onballoonoutsidetouchlistener\" class=\"anchor\" aria-label=\"Permalink: OnBalloonClickListener, OnBalloonDismissListener, OnBalloonOutsideTouchListener\" href=\"#onballoonclicklistener-onballoondismisslistener-onballoonoutsidetouchlistener\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can listen to if the Balloon is clicked, dismissed, and touched outside with the below listeners.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".setOnBalloonClickListener { Toast.makeText(context, \u0026quot;clicked\u0026quot;, Toast.LENGTH_SHORT).show() }\n.setOnBalloonDismissListener { Toast.makeText(context, \u0026quot;dismissed\u0026quot;, Toast.LENGTH_SHORT).show() }\n.setOnBalloonOutsideTouchListener { Toast.makeText(context, \u0026quot;touched outside\u0026quot;, Toast.LENGTH_SHORT).show() }\"\u003e\u003cpre\u003e.setOnBalloonClickListener { \u003cspan class=\"pl-en\"\u003eToast\u003c/span\u003e.makeText(context, \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eclicked\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e, \u003cspan class=\"pl-en\"\u003eToast\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eLENGTH_SHORT\u003c/span\u003e).show() }\n.setOnBalloonDismissListener { \u003cspan class=\"pl-en\"\u003eToast\u003c/span\u003e.makeText(context, \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003edismissed\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e, \u003cspan class=\"pl-en\"\u003eToast\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eLENGTH_SHORT\u003c/span\u003e).show() }\n.setOnBalloonOutsideTouchListener { \u003cspan class=\"pl-en\"\u003eToast\u003c/span\u003e.makeText(context, \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003etouched outside\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e, \u003cspan class=\"pl-en\"\u003eToast\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eLENGTH_SHORT\u003c/span\u003e).show() }\u003c/pre\u003e\u003c/div\u003e\n\u003cdetails\u003e\n \u003csummary\u003eSet Listeners with Java\u003c/summary\u003e\n\u003cp dir=\"auto\"\u003eYou can set listeners with Java as the example below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-java notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"balloon.setOnBalloonClickListener(new OnBalloonClickListener() {\n @Override\n public void onBalloonClick() {\n // doSomething;\n }\n});\n\nballoon.setOnBalloonDismissListener(new OnBalloonDismissListener() {\n @Override\n public void onBalloonDismiss() {\n // doSomething;\n }\n});\n\nballoon.setOnBalloonOutsideTouchListener(new OnBalloonOutsideTouchListener() {\n @Override\n public void onBalloonOutsideTouch() {\n // doSomething;\n }\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eballoon\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003esetOnBalloonClickListener\u003c/span\u003e(\u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003eOnBalloonClickListener\u003c/span\u003e() {\n \u003cspan class=\"pl-c1\"\u003e@\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eOverride\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003epublic\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003evoid\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eonBalloonClick\u003c/span\u003e() {\n \u003cspan class=\"pl-c\"\u003e// doSomething;\u003c/span\u003e\n }\n});\n\n\u003cspan class=\"pl-s1\"\u003eballoon\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003esetOnBalloonDismissListener\u003c/span\u003e(\u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003eOnBalloonDismissListener\u003c/span\u003e() {\n \u003cspan class=\"pl-c1\"\u003e@\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eOverride\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003epublic\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003evoid\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eonBalloonDismiss\u003c/span\u003e() {\n \u003cspan class=\"pl-c\"\u003e// doSomething;\u003c/span\u003e\n }\n});\n\n\u003cspan class=\"pl-s1\"\u003eballoon\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003esetOnBalloonOutsideTouchListener\u003c/span\u003e(\u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003eOnBalloonOutsideTouchListener\u003c/span\u003e() {\n \u003cspan class=\"pl-c1\"\u003e@\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eOverride\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003epublic\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003evoid\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eonBalloonOutsideTouch\u003c/span\u003e() {\n \u003cspan class=\"pl-c\"\u003e// doSomething;\u003c/span\u003e\n }\n});\u003c/pre\u003e\u003c/div\u003e\n\u003c/details\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCustom Balloon Layout\u003c/h3\u003e\u003ca id=\"user-content-custom-balloon-layout\" class=\"anchor\" aria-label=\"Permalink: Custom Balloon Layout\" href=\"#custom-balloon-layout\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can fully customize the layout of the Balloon with the method below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".setLayout(R.layout.my_balloon_layout)\"\u003e\u003cpre\u003e.setLayout(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.layout.my_balloon_layout)\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can build the Balloon with your own layout as the following example:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/61226019-aba41d80-a75c-11e9-9362-52e4742244b5.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/61226019-aba41d80-a75c-11e9-9362-52e4742244b5.gif\" align=\"right\" width=\"310px\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eFirst, create your XML layout file like \u003ccode\u003elayout_custom_profile\u003c/code\u003e on your taste and set it on the with \u003ccode\u003esetLayout\u003c/code\u003e method.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"val balloon = Balloon.Builder(context)\n .setLayout(R.layout.layout_custom_profile)\n .setArrowSize(10)\n .setArrowOrientation(ArrowOrientation.TOP)\n .setArrowPosition(0.5f)\n .setWidthRatio(0.55f)\n .setHeight(250)\n .setCornerRadius(4f)\n .setBackgroundColor(ContextCompat.getColor(this, R.color.black))\n .setBalloonAnimation(BalloonAnimation.CIRCULAR)\n .setLifecycleOwner(lifecycleOwner)\n .build()\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e balloon \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBuilder\u003c/span\u003e(context)\n .setLayout(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.layout.layout_custom_profile)\n .setArrowSize(\u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e)\n .setArrowOrientation(\u003cspan class=\"pl-en\"\u003eArrowOrientation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eTOP\u003c/span\u003e)\n .setArrowPosition(\u003cspan class=\"pl-c1\"\u003e0.5f\u003c/span\u003e)\n .setWidthRatio(\u003cspan class=\"pl-c1\"\u003e0.55f\u003c/span\u003e)\n .setHeight(\u003cspan class=\"pl-c1\"\u003e250\u003c/span\u003e)\n .setCornerRadius(\u003cspan class=\"pl-c1\"\u003e4f\u003c/span\u003e)\n .setBackgroundColor(\u003cspan class=\"pl-en\"\u003eContextCompat\u003c/span\u003e.getColor(\u003cspan class=\"pl-c1\"\u003ethis\u003c/span\u003e, \u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.black))\n .setBalloonAnimation(\u003cspan class=\"pl-en\"\u003eBalloonAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eCIRCULAR\u003c/span\u003e)\n .setLifecycleOwner(lifecycleOwner)\n .build()\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThat's all. If you need to get Views or need some interactions, you can get your custom layout with the \u003ccode\u003egetContentView()\u003c/code\u003e method from your instance of the Balloon.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"val button: Button =\n balloon.getContentView().findViewById(R.id.button_edit)\nbutton.setOnClickListener {\n Toast.makeText(context, \u0026quot;Edit\u0026quot;, Toast.LENGTH_SHORT).show()\n balloon.dismiss()\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e button\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eButton\u003c/span\u003e \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e\n balloon.getContentView().findViewById(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.id.button_edit)\nbutton.setOnClickListener {\n \u003cspan class=\"pl-en\"\u003eToast\u003c/span\u003e.makeText(context, \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eEdit\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e, \u003cspan class=\"pl-en\"\u003eToast\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eLENGTH_SHORT\u003c/span\u003e).show()\n balloon.dismiss()\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003ePersistence\u003c/h3\u003e\u003ca id=\"user-content-persistence\" class=\"anchor\" aria-label=\"Permalink: Persistence\" href=\"#persistence\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf you want to show up the Balloon only once or a specific number of times, you can implement it as the following example:\u003cbr\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"balloon.setPreferenceName(\u0026quot;MyBalloon\u0026quot;) // sets preference name of the Balloon.\nballoon.setShowCounts(3) // show-up three of times the popup. the default value is 1.\nballoon.runIfReachedShowCounts {\n // do something after the preference showing counts is reached the goal.\n }\"\u003e\u003cpre\u003eballoon.setPreferenceName(\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eMyBalloon\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets preference name of the Balloon.\u003c/span\u003e\nballoon.setShowCounts(\u003cspan class=\"pl-c1\"\u003e3\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e show-up three of times the popup. the default value is 1.\u003c/span\u003e\nballoon.runIfReachedShowCounts {\n \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e do something after the preference showing counts is reached the goal.\u003c/span\u003e\n }\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAlso, you can clear all persisted preferences with the method below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"balloon.clearAllPreferences()\"\u003e\u003cpre\u003eballoon.clearAllPreferences()\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eAvoid Memory leak\u003c/h3\u003e\u003ca id=\"user-content-avoid-memory-leak\" class=\"anchor\" aria-label=\"Permalink: Avoid Memory leak\" href=\"#avoid-memory-leak\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eDialog, PopupWindow etc, can have memory leak issues if not dismissed before the activity or fragment is destroyed.\u003cbr\u003e\nBut Lifecycles are now integrated with the Support Library since Architecture Components 1.0 Stable was released.\u003cbr\u003e\nSo we can solve the memory leak issue very easily like the below.\u003cbr\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eJust use \u003ccode\u003esetLifecycleOwner\u003c/code\u003e method. Then the \u003ccode\u003edismiss()\u003c/code\u003e method will be called automatically before your activity or fragment would be destroyed.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".setLifecycleOwner(lifecycleOwner)\"\u003e\u003cpre\u003e.setLifecycleOwner(lifecycleOwner)\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eLazy initialization\u003c/h3\u003e\u003ca id=\"user-content-lazy-initialization\" class=\"anchor\" aria-label=\"Permalink: Lazy initialization\" href=\"#lazy-initialization\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can initialize a property of the Balloon lazily with the \u003ccode\u003eballoon()\u003c/code\u003e extension and \u003ccode\u003eBalloon.Factory\u003c/code\u003e abstract class.\u003cbr\u003e\nThe \u003ccode\u003eballoon()\u003c/code\u003e extension keyword can be used on your \u003ccode\u003eActivity\u003c/code\u003e, \u003ccode\u003eFragment\u003c/code\u003e, and \u003ccode\u003eView\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eBefore\u003c/strong\u003e\u003cbr\u003e\n\u003ccode\u003eCustomActivity.kt\u003c/code\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"class CustomActivity : AppCompatActivity() {\n private val profileBalloon by lazy { BalloonUtils.getProfileBalloon(context = this, lifecycleOwner = this) }\n\n // ...\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eclass\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eCustomActivity\u003c/span\u003e : \u003cspan class=\"pl-en\"\u003eAppCompatActivity\u003c/span\u003e() {\n \u003cspan class=\"pl-k\"\u003eprivate\u003c/span\u003e \u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e profileBalloon by lazy { \u003cspan class=\"pl-en\"\u003eBalloonUtils\u003c/span\u003e.getProfileBalloon(context \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ethis\u003c/span\u003e, lifecycleOwner \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ethis\u003c/span\u003e) }\n\n \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e ...\u003c/span\u003e\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eAfter\u003c/strong\u003e\u003cbr\u003e\n\u003ccode\u003eCustomActivity.kt\u003c/code\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"class CustomActivity : AppCompatActivity() {\n private val profileBalloon by balloon\u0026lt;ProfileBalloonFactory\u0026gt;()\n\n // ...\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eclass\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eCustomActivity\u003c/span\u003e : \u003cspan class=\"pl-en\"\u003eAppCompatActivity\u003c/span\u003e() {\n \u003cspan class=\"pl-k\"\u003eprivate\u003c/span\u003e \u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e profileBalloon by balloon\u0026lt;\u003cspan class=\"pl-en\"\u003eProfileBalloonFactory\u003c/span\u003e\u0026gt;()\n\n \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e ...\u003c/span\u003e\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe should create a class which extends \u003ccode\u003eBalloon.Factory\u003c/code\u003e.\u003cbr\u003e\nAn implementation class of the factory must have a default(non-argument) constructor. \u003cbr\u003e\u003cbr\u003e\n\u003ccode\u003eProfileBalloonFactory.kt\u003c/code\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"class ProfileBalloonFactory : Balloon.Factory() {\n\n override fun create(context: Context, lifecycle: LifecycleOwner): Balloon {\n return createBalloon(context) {\n setLayout(R.layout.layout_custom_profile)\n setArrowSize(10)\n setArrowOrientation(ArrowOrientation.TOP)\n setArrowPosition(0.5f)\n setWidthRatio(0.55f)\n setHeight(250)\n setCornerRadius(4f)\n setBackgroundColor(ContextCompat.getColor(context, R.color.background900))\n setBalloonAnimation(BalloonAnimation.CIRCULAR)\n setLifecycleOwner(lifecycle)\n }\n }\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eclass\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eProfileBalloonFactory\u003c/span\u003e : \u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eFactory\u003c/span\u003e() {\n\n \u003cspan class=\"pl-k\"\u003eoverride\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efun\u003c/span\u003e \u003cspan class=\"pl-en\"\u003ecreate\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003econtext\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eContext\u003c/span\u003e, \u003cspan class=\"pl-smi\"\u003elifecycle\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eLifecycleOwner\u003c/span\u003e): \u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e {\n \u003cspan class=\"pl-k\"\u003ereturn\u003c/span\u003e createBalloon(context) {\n setLayout(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.layout.layout_custom_profile)\n setArrowSize(\u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e)\n setArrowOrientation(\u003cspan class=\"pl-en\"\u003eArrowOrientation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eTOP\u003c/span\u003e)\n setArrowPosition(\u003cspan class=\"pl-c1\"\u003e0.5f\u003c/span\u003e)\n setWidthRatio(\u003cspan class=\"pl-c1\"\u003e0.55f\u003c/span\u003e)\n setHeight(\u003cspan class=\"pl-c1\"\u003e250\u003c/span\u003e)\n setCornerRadius(\u003cspan class=\"pl-c1\"\u003e4f\u003c/span\u003e)\n setBackgroundColor(\u003cspan class=\"pl-en\"\u003eContextCompat\u003c/span\u003e.getColor(context, \u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.background900))\n setBalloonAnimation(\u003cspan class=\"pl-en\"\u003eBalloonAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eCIRCULAR\u003c/span\u003e)\n setLifecycleOwner(lifecycle)\n }\n }\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBalloonOverlay\u003c/h3\u003e\u003ca id=\"user-content-balloonoverlay\" class=\"anchor\" aria-label=\"Permalink: BalloonOverlay\" href=\"#balloonoverlay\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can show up an overlay over the whole screen except an anchor view.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"balloon.setIsVisibleOverlay(true) // sets the visibility of the overlay for highlighting an anchor.\nballoon.setOverlayColorResource(R.color.overlay) // background color of the overlay using a color resource.\nballoon.setOverlayPadding(6f) // sets a padding value of the overlay shape internally.\nballoon.setOverlayPaddingColorResource(R.color.colorPrimary) // sets color of the overlay padding using a color resource.\nballoon.setBalloonOverlayAnimation(BalloonOverlayAnimation.FADE) // default is fade.\nballoon.setDismissWhenOverlayClicked(false) // disable dismissing the balloon when the overlay is clicked.\"\u003e\u003cpre\u003eballoon.setIsVisibleOverlay(\u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets the visibility of the overlay for highlighting an anchor.\u003c/span\u003e\nballoon.setOverlayColorResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.overlay) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e background color of the overlay using a color resource.\u003c/span\u003e\nballoon.setOverlayPadding(\u003cspan class=\"pl-c1\"\u003e6f\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets a padding value of the overlay shape internally.\u003c/span\u003e\nballoon.setOverlayPaddingColorResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.colorPrimary) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets color of the overlay padding using a color resource.\u003c/span\u003e\nballoon.setBalloonOverlayAnimation(\u003cspan class=\"pl-en\"\u003eBalloonOverlayAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eFADE\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e default is fade.\u003c/span\u003e\nballoon.setDismissWhenOverlayClicked(\u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e disable dismissing the balloon when the overlay is clicked.\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can change the shape of the highlighting using the \u003ccode\u003e.setOverlayShape\u003c/code\u003e method.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"balloon.setOverlayShape(BalloonOverlayOval) // default shape\nballoon.setOverlayShape(BalloonOverlayRect)\nballoon.setOverlayShape(BalloonOverlayCircle(radius = 36f))\nballoon.setOverlayShape(BalloonOverlayRoundRect(12f, 12f))\"\u003e\u003cpre\u003eballoon.setOverlayShape(\u003cspan class=\"pl-en\"\u003eBalloonOverlayOval\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e default shape\u003c/span\u003e\nballoon.setOverlayShape(\u003cspan class=\"pl-en\"\u003eBalloonOverlayRect\u003c/span\u003e)\nballoon.setOverlayShape(\u003cspan class=\"pl-en\"\u003eBalloonOverlayCircle\u003c/span\u003e(radius \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e36f\u003c/span\u003e))\nballoon.setOverlayShape(\u003cspan class=\"pl-en\"\u003eBalloonOverlayRoundRect\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e12f\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e12f\u003c/span\u003e))\u003c/pre\u003e\u003c/div\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth align=\"center\"\u003eOVAL\u003c/th\u003e\n\u003cth align=\"center\"\u003eCIRCLE\u003c/th\u003e\n\u003cth align=\"center\"\u003eRECT\u003c/th\u003e\n\u003cth align=\"center\"\u003eROUNDRECT\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/96139366-c7870800-0f39-11eb-9542-e98eac7ef193.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/96139366-c7870800-0f39-11eb-9542-e98eac7ef193.gif\" align=\"center\" width=\"280px\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/96138448-c0abc580-0f38-11eb-92e6-daf2f8266a3e.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/96138448-c0abc580-0f38-11eb-92e6-daf2f8266a3e.gif\" align=\"center\" width=\"280px\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/96139358-c524ae00-0f39-11eb-82ff-90a4a734e076.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/96139358-c524ae00-0f39-11eb-82ff-90a4a734e076.gif\" align=\"center\" width=\"280px\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/96138463-c3a6b600-0f38-11eb-8a2d-57cf96c4190c.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/96138463-c3a6b600-0f38-11eb-8a2d-57cf96c4190c.gif\" align=\"center\" width=\"280px\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003eAlso, we can set the specific position of the overlay shape with the method below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"balloon.setOverlayPosition(Point(x, y)) // sets a specific position of the overlay shape.\"\u003e\u003cpre\u003eballoon.setOverlayPosition(\u003cspan class=\"pl-en\"\u003ePoint\u003c/span\u003e(x, y)) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e sets a specific position of the overlay shape.\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBalloonAnimation\u003c/h3\u003e\u003ca id=\"user-content-balloonanimation\" class=\"anchor\" aria-label=\"Permalink: BalloonAnimation\" href=\"#balloonanimation\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can implement popup animations while showing and dismissing.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"BalloonAnimation.NONE\nBalloonAnimation.FADE\nBalloonAnimation.OVERSHOOT\nBalloonAnimation.ELASTIC\nBalloonAnimation.CIRCULAR\"\u003e\u003cpre\u003e\u003cspan class=\"pl-en\"\u003eBalloonAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eNONE\u003c/span\u003e\n\u003cspan class=\"pl-en\"\u003eBalloonAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eFADE\u003c/span\u003e\n\u003cspan class=\"pl-en\"\u003eBalloonAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eOVERSHOOT\u003c/span\u003e\n\u003cspan class=\"pl-en\"\u003eBalloonAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eELASTIC\u003c/span\u003e\n\u003cspan class=\"pl-en\"\u003eBalloonAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eCIRCULAR\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth align=\"center\"\u003eFADE\u003c/th\u003e\n\u003cth align=\"center\"\u003eOVERSHOOT\u003c/th\u003e\n\u003cth align=\"center\"\u003eELASTIC\u003c/th\u003e\n\u003cth align=\"center\"\u003eCIRCULAR\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/74601168-6115c580-50de-11ea-817b-a334f33b6f96.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/74601168-6115c580-50de-11ea-817b-a334f33b6f96.gif\" align=\"center\" width=\"100%\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/74601171-6410b600-50de-11ea-9ba0-5634e11f148a.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/74601171-6410b600-50de-11ea-9ba0-5634e11f148a.gif\" align=\"center\" width=\"100%\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/74601170-63781f80-50de-11ea-8db4-93f1dd1291fc.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/74601170-63781f80-50de-11ea-8db4-93f1dd1291fc.gif\" align=\"center\" width=\"100%\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/74607359-b6bc9300-511b-11ea-978b-23bcc4399dce.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/74607359-b6bc9300-511b-11ea-978b-23bcc4399dce.gif\" align=\"center\" width=\"100%\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBalloonHighlightAnimation\u003c/h3\u003e\u003ca id=\"user-content-balloonhighlightanimation\" class=\"anchor\" aria-label=\"Permalink: BalloonHighlightAnimation\" href=\"#balloonhighlightanimation\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can give a repeated dynamic animations to the Balloon while it's showing up. The animation would work differently by the position of the arrow.\u003c/p\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth align=\"center\"\u003eHEARTBEAT\u003c/th\u003e\n\u003cth align=\"center\"\u003eSHAKE\u003c/th\u003e\n\u003cth align=\"center\"\u003eBREATH\u003c/th\u003e\n\u003cth align=\"center\"\u003eROTATE\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/135755074-6a9c87fc-55b2-460e-b34e-0b6808684a97.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/135755074-6a9c87fc-55b2-460e-b34e-0b6808684a97.gif\" align=\"center\" width=\"100%\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/135755077-02eeddbe-95fe-49ee-ad22-1f15879e84f1.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/135755077-02eeddbe-95fe-49ee-ad22-1f15879e84f1.gif\" align=\"center\" width=\"100%\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/135755079-29ed8cd8-92fe-4b2a-8671-b3522999c551.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/135755079-29ed8cd8-92fe-4b2a-8671-b3522999c551.gif\" align=\"center\" width=\"100%\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/135755080-36dc7c8b-063a-442b-bcbd-bc000e92f9ac.gif\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/24237865/135755080-36dc7c8b-063a-442b-bcbd-bc000e92f9ac.gif\" align=\"center\" width=\"100%\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"BalloonHighlightAnimation.NONE\nBalloonHighlightAnimation.HEARTBEAT\nBalloonHighlightAnimation.SHAKE\nBalloonHighlightAnimation.BREATH\nBalloonHighlightAnimation.ROTATE\n\n.setBalloonHighlightAnimation(BalloonHighlightAnimation.SHAKE)\"\u003e\u003cpre\u003e\u003cspan class=\"pl-en\"\u003eBalloonHighlightAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eNONE\u003c/span\u003e\n\u003cspan class=\"pl-en\"\u003eBalloonHighlightAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eHEARTBEAT\u003c/span\u003e\n\u003cspan class=\"pl-en\"\u003eBalloonHighlightAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eSHAKE\u003c/span\u003e\n\u003cspan class=\"pl-en\"\u003eBalloonHighlightAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBREATH\u003c/span\u003e\n\u003cspan class=\"pl-en\"\u003eBalloonHighlightAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eROTATE\u003c/span\u003e\n\n.setBalloonHighlightAnimation(\u003cspan class=\"pl-en\"\u003eBalloonHighlightAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eSHAKE\u003c/span\u003e)\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWe can implement the rotate animation like the example below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".setBalloonHighlightAnimation(BalloonHighlightAnimation.ROTATE)\n.setBalloonRotationAnimation(\n BalloonRotateAnimation.Builder().setLoops(2).setSpeeds(2500).setTurns(INFINITE).build())\"\u003e\u003cpre\u003e.setBalloonHighlightAnimation(\u003cspan class=\"pl-en\"\u003eBalloonHighlightAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eROTATE\u003c/span\u003e)\n.setBalloonRotationAnimation(\n \u003cspan class=\"pl-en\"\u003eBalloonRotateAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBuilder\u003c/span\u003e().setLoops(\u003cspan class=\"pl-c1\"\u003e2\u003c/span\u003e).setSpeeds(\u003cspan class=\"pl-c1\"\u003e2500\u003c/span\u003e).setTurns(\u003cspan class=\"pl-en\"\u003eINFINITE\u003c/span\u003e).build())\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBalloon builder methods\u003c/h2\u003e\u003ca id=\"user-content-balloon-builder-methods\" class=\"anchor\" aria-label=\"Permalink: Balloon builder methods\" href=\"#balloon-builder-methods\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eFor more details, you can check out the documentations below:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://skydoves.github.io/Balloon/balloon/com.skydoves.balloon/-balloon/index.html\" rel=\"nofollow\"\u003eBalloon documentations\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://skydoves.github.io/Balloon/balloon/com.skydoves.balloon/-balloon/-builder/index.html\" rel=\"nofollow\"\u003eBuilder documentations\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/24237865/210227682-cbc03479-8625-4213-b907-4f15217f91ba.png\"\u003e\u003cimg align=\"right\" width=\"130px\" src=\"https://user-images.githubusercontent.com/24237865/210227682-cbc03479-8625-4213-b907-4f15217f91ba.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBalloon in Jetpack Compose\u003c/h2\u003e\u003ca id=\"user-content-balloon-in-jetpack-compose-1\" class=\"anchor\" aria-label=\"Permalink: Balloon in Jetpack Compose\" href=\"#balloon-in-jetpack-compose-1\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBalloon allows you to display tooltips in Jetpack Compose easily.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22balloon%22\" rel=\"nofollow\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/919434e291d5302987630dbf6339eabd3d1b487631afff35de260bd01531c0a1/68747470733a2f2f696d672e736869656c64732e696f2f6d6176656e2d63656e7472616c2f762f636f6d2e6769746875622e736b79646f7665732f62616c6c6f6f6e2e7376673f6c6162656c3d4d6176656e25323043656e7472616c\" alt=\"Maven Central\" data-canonical-src=\"https://img.shields.io/maven-central/v/com.github.skydoves/balloon.svg?label=Maven%20Central\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAdd the dependency below to your \u003cstrong\u003emodule\u003c/strong\u003e's \u003ccode\u003ebuild.gradle\u003c/code\u003e file:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-groovy-gradle notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"dependencies {\n implementation(\u0026quot;com.github.skydoves:balloon-compose:$version\u0026quot;)\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-en\"\u003edependencies\u003c/span\u003e {\n implementation(\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecom.github.skydoves:balloon-compose:\u003cspan class=\"pl-smi\"\u003e$v\u003cspan class=\"pl-smi\"\u003eersion\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBalloon Composable\u003c/h3\u003e\u003ca id=\"user-content-balloon-composable\" class=\"anchor\" aria-label=\"Permalink: Balloon Composable\" href=\"#balloon-composable\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can create and display tooltips using the \u003ccode\u003eBalloon\u003c/code\u003e composable function along with the \u003ccode\u003erememberBalloonBuilder\u003c/code\u003e, as demonstrated in the following example:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// create and remember a builder of Balloon.\nval builder = rememberBalloonBuilder {\n setArrowSize(10)\n setArrowPosition(0.5f)\n setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)\n setWidth(BalloonSizeSpec.WRAP)\n setHeight(BalloonSizeSpec.WRAP)\n setPadding(12)\n setMarginHorizontal(12)\n setCornerRadius(8f)\n setBackgroundColorResource(R.color.skyBlue)\n setBalloonAnimation(BalloonAnimation.ELASTIC)\n}\n\nBalloon(\n modifier = Modifier.align(Alignment.Center),\n builder = builder,\n balloonContent = {\n Text(text = \u0026quot;Now you can edit your profile!\u0026quot;)\n }\n) { balloonWindow -\u0026gt;\n Button(\n modifier = Modifier.size(120.dp, 75.dp),\n onClick = {\n balloonWindow.showAlignTop() // display your balloon.\n }\n ) {\n Text(text = \u0026quot;showAlignTop\u0026quot;)\n }\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e create and remember a builder of Balloon.\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e builder \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e rememberBalloonBuilder {\n setArrowSize(\u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e)\n setArrowPosition(\u003cspan class=\"pl-c1\"\u003e0.5f\u003c/span\u003e)\n setArrowPositionRules(\u003cspan class=\"pl-en\"\u003eArrowPositionRules\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eALIGN_ANCHOR\u003c/span\u003e)\n setWidth(\u003cspan class=\"pl-en\"\u003eBalloonSizeSpec\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eWRAP\u003c/span\u003e)\n setHeight(\u003cspan class=\"pl-en\"\u003eBalloonSizeSpec\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eWRAP\u003c/span\u003e)\n setPadding(\u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e)\n setMarginHorizontal(\u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e)\n setCornerRadius(\u003cspan class=\"pl-c1\"\u003e8f\u003c/span\u003e)\n setBackgroundColorResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.color.skyBlue)\n setBalloonAnimation(\u003cspan class=\"pl-en\"\u003eBalloonAnimation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eELASTIC\u003c/span\u003e)\n}\n\n\u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e(\n modifier \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eModifier\u003c/span\u003e.align(\u003cspan class=\"pl-en\"\u003eAlignment\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eCenter\u003c/span\u003e),\n builder \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e builder,\n balloonContent \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e {\n \u003cspan class=\"pl-en\"\u003eText\u003c/span\u003e(text \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eNow you can edit your profile!\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n }\n) { balloonWindow \u003cspan class=\"pl-k\"\u003e-\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003eButton\u003c/span\u003e(\n modifier \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eModifier\u003c/span\u003e.size(\u003cspan class=\"pl-c1\"\u003e120\u003c/span\u003e.dp, \u003cspan class=\"pl-c1\"\u003e75\u003c/span\u003e.dp),\n onClick \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e {\n balloonWindow.showAlignTop() \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e display your balloon.\u003c/span\u003e\n }\n ) {\n \u003cspan class=\"pl-en\"\u003eText\u003c/span\u003e(text \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eshowAlignTop\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n }\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBalloonWindow\u003c/h3\u003e\u003ca id=\"user-content-balloonwindow\" class=\"anchor\" aria-label=\"Permalink: BalloonWindow\" href=\"#balloonwindow\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ccode\u003eBalloonWindow\u003c/code\u003e is an interface defining all executable behaviors for a balloon's window, including showing, dismissing, updating, and setting up listeners. You can obtain an instance of \u003ccode\u003eBalloonWindow\u003c/code\u003e within the \u003ccode\u003econtent\u003c/code\u003e parameter of the \u003ccode\u003eBalloon\u003c/code\u003e composable function, as illustrated in the example below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Balloon(\n ..\n) { balloonWindow -\u0026gt;\n Button(\n modifier = Modifier.size(120.dp, 75.dp),\n onClick = {\n balloonWindow.showAtCenter() // display your balloon.\n }\n ) {\n Text(text = \u0026quot;showAtCenter\u0026quot;)\n }\n}\n\nBalloon(\n builder = builder,\n balloonContent = null\n) { balloonWindow -\u0026gt;\n ..\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e(\n \u003cspan class=\"pl-k\"\u003e..\u003c/span\u003e\n) { balloonWindow \u003cspan class=\"pl-k\"\u003e-\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003eButton\u003c/span\u003e(\n modifier \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eModifier\u003c/span\u003e.size(\u003cspan class=\"pl-c1\"\u003e120\u003c/span\u003e.dp, \u003cspan class=\"pl-c1\"\u003e75\u003c/span\u003e.dp),\n onClick \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e {\n balloonWindow.showAtCenter() \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e display your balloon.\u003c/span\u003e\n }\n ) {\n \u003cspan class=\"pl-en\"\u003eText\u003c/span\u003e(text \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eshowAtCenter\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n }\n}\n\n\u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e(\n builder \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e builder,\n balloonContent \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003enull\u003c/span\u003e\n) { balloonWindow \u003cspan class=\"pl-k\"\u003e-\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003e..\u003c/span\u003e\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can also acquire the \u003ccode\u003eBalloonWindow\u003c/code\u003e by utilizing the \u003ccode\u003eonBalloonWindowInitialized\u003c/code\u003e lambda parameter in the \u003ccode\u003eBalloon\u003c/code\u003e composable. This parameter will be invoked just once when the \u003ccode\u003eBalloonWindow\u003c/code\u003e is fully prepared and ready for use:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var balloonWindow: BalloonWindow? by remember { mutableStateOf(null) }\n\nBalloon(\n builder = builder,\n onBalloonWindowInitialized = { balloonWindow = it },\n balloonContent = {\n Text(text = \u0026quot;Now you can edit your profile!\u0026quot;)\n },\n) {\n Button(\n modifier = Modifier.size(160.dp, 60.dp),\n onClick = { balloonWindow?.showAlignTop() },\n ) {\n Text(text = \u0026quot;showAlignTop\u0026quot;)\n }\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e balloonWindow\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eBalloonWindow\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e by remember { mutableStateOf(\u003cspan class=\"pl-c1\"\u003enull\u003c/span\u003e) }\n\n\u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e(\n builder \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e builder,\n onBalloonWindowInitialized \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e { balloonWindow \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e it },\n balloonContent \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e {\n \u003cspan class=\"pl-en\"\u003eText\u003c/span\u003e(text \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eNow you can edit your profile!\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n },\n) {\n \u003cspan class=\"pl-en\"\u003eButton\u003c/span\u003e(\n modifier \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eModifier\u003c/span\u003e.size(\u003cspan class=\"pl-c1\"\u003e160\u003c/span\u003e.dp, \u003cspan class=\"pl-c1\"\u003e60\u003c/span\u003e.dp),\n onClick \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e { balloonWindow?.showAlignTop() },\n ) {\n \u003cspan class=\"pl-en\"\u003eText\u003c/span\u003e(text \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eshowAlignTop\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n }\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe \u003ccode\u003eonBalloonWindowInitialized\u003c/code\u003e lambda paramter is useful when you need to hold an instance of the \u003ccode\u003eBalloonWindow\u003c/code\u003e as a state, and utilize it out of the \u003ccode\u003eBalloon\u003c/code\u003e composable function.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eAuto-Display Balloon on Layout Ready\u003c/h3\u003e\u003ca id=\"user-content-auto-display-balloon-on-layout-ready\" class=\"anchor\" aria-label=\"Permalink: Auto-Display Balloon on Layout Ready\" href=\"#auto-display-balloon-on-layout-ready\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eTo automatically show a Balloon when your layout is drawn, a common requirement in numerous applications, you can use the \u003ccode\u003eonComposedAnchor\u003c/code\u003e parameter within the \u003ccode\u003eBalloon\u003c/code\u003e composable function.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var balloonWindow: BalloonWindow? by remember { mutableStateOf(null) }\n\nBalloon(\n builder = builder,\n onBalloonWindowInitialized = { balloonWindow = it },\n onComposedAnchor = { balloonWindow?.showAlignTop() },\n balloonContent = {\n Text(text = \u0026quot;Now you can edit your profile!\u0026quot;)\n },\n) {\n Button(\n modifier = Modifier.size(160.dp, 60.dp),\n onClick = { balloonWindow?.showAlignTop() },\n ) {\n Text(text = \u0026quot;showAlignTop\u0026quot;)\n }\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e balloonWindow\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eBalloonWindow\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e by remember { mutableStateOf(\u003cspan class=\"pl-c1\"\u003enull\u003c/span\u003e) }\n\n\u003cspan class=\"pl-en\"\u003eBalloon\u003c/span\u003e(\n builder \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e builder,\n onBalloonWindowInitialized \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e { balloonWindow \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e it },\n onComposedAnchor \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e { balloonWindow?.showAlignTop() },\n balloonContent \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e {\n \u003cspan class=\"pl-en\"\u003eText\u003c/span\u003e(text \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eNow you can edit your profile!\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n },\n) {\n \u003cspan class=\"pl-en\"\u003eButton\u003c/span\u003e(\n modifier \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eModifier\u003c/span\u003e.size(\u003cspan class=\"pl-c1\"\u003e160\u003c/span\u003e.dp, \u003cspan class=\"pl-c1\"\u003e60\u003c/span\u003e.dp),\n onClick \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e { balloonWindow?.showAlignTop() },\n ) {\n \u003cspan class=\"pl-en\"\u003eText\u003c/span\u003e(text \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eshowAlignTop\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n }\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAs you can see in the example above, you can use \u003ccode\u003eonComposedAnchor\u003c/code\u003e with the \u003ccode\u003eonBalloonWindowInitialized\u003c/code\u003e lambda to obtain the \u003ccode\u003eBalloonWindow\u003c/code\u003e and display your balloon sequentially after rendering your composable layout.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCompose Extensions\u003c/h3\u003e\u003ca id=\"user-content-compose-extensions\" class=\"anchor\" aria-label=\"Permalink: Compose Extensions\" href=\"#compose-extensions\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe \u003ccode\u003eballoon-compose\u003c/code\u003e package provides useful compose extensions, such as setting a color with \u003ccode\u003eandroidx.compose.ui.graphics.Color\u003c/code\u003e like the below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-kotlin notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"val builder = rememberBalloonBuilder {\n setText(\u0026quot;Now you can edit your profile!\u0026quot;)\n setArrowSize(10)\n setWidthRatio(1.0f)\n setHeight(BalloonSizeSpec.WRAP)\n setArrowOrientation(ArrowOrientation.BOTTOM)\n setArrowPosition(0.5f)\n setPadding(12)\n setMarginHorizontal(12)\n setTextSize(15f)\n setCornerRadius(8f)\n setTextColor(Color.White) // set text color with compose color.\n setBackgroundColor(Color.White) // set background color with compose color.\n setIconDrawableResource(R.drawable.ic_edit)\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eval\u003c/span\u003e builder \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e rememberBalloonBuilder {\n setText(\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eNow you can edit your profile!\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e)\n setArrowSize(\u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e)\n setWidthRatio(\u003cspan class=\"pl-c1\"\u003e1.0f\u003c/span\u003e)\n setHeight(\u003cspan class=\"pl-en\"\u003eBalloonSizeSpec\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eWRAP\u003c/span\u003e)\n setArrowOrientation(\u003cspan class=\"pl-en\"\u003eArrowOrientation\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eBOTTOM\u003c/span\u003e)\n setArrowPosition(\u003cspan class=\"pl-c1\"\u003e0.5f\u003c/span\u003e)\n setPadding(\u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e)\n setMarginHorizontal(\u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e)\n setTextSize(\u003cspan class=\"pl-c1\"\u003e15f\u003c/span\u003e)\n setCornerRadius(\u003cspan class=\"pl-c1\"\u003e8f\u003c/span\u003e)\n setTextColor(\u003cspan class=\"pl-en\"\u003eColor\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eWhite\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e set text color with compose color.\u003c/span\u003e\n setBackgroundColor(\u003cspan class=\"pl-en\"\u003eColor\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eWhite\u003c/span\u003e) \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e set background color with compose color.\u003c/span\u003e\n setIconDrawableResource(\u003cspan class=\"pl-en\"\u003eR\u003c/span\u003e.drawable.ic_edit)\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eNote\u003c/strong\u003e: If you want to use the default form of balloon (icon + text), you should pass a null value to the \u003ccode\u003eballoonContent\u003c/code\u003e parameter of your Balloon composable.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eFind this library useful? ❤️\u003c/h2\u003e\u003ca id=\"user-content-find-this-library-useful-heart\" class=\"anchor\" aria-label=\"Permalink: Find this library useful? :heart:\" href=\"#find-this-library-useful-heart\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eSupport it by joining \u003cstrong\u003e\u003ca href=\"https://github.com/skydoves/balloon/stargazers\"\u003estargazers\u003c/a\u003e\u003c/strong\u003e for this repository. ⭐ \u003cbr\u003e\nAlso, \u003cstrong\u003e\u003ca href=\"https://github.com/skydoves\"\u003efollow me\u003c/a\u003e\u003c/strong\u003e on GitHub for my next creations! 🤩\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eLicense\u003c/h1\u003e\u003ca id=\"user-content-license\" class=\"anchor\" aria-label=\"Permalink: License\" href=\"#license\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-text-xml notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Copyright 2019 skydoves (Jaewoong Eum)\n\nLicensed under the Apache License, Version 2.0 (the \u0026quot;License\u0026quot;);\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \u0026quot;AS IS\u0026quot; BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\"\u003e\u003cpre\u003eCopyright 2019 skydoves (Jaewoong Eum)\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\u003c/pre\u003e\u003c/div\u003e\n\u003c/article\u003e","loaded":true,"timedOut":false,"errorMessage":null,"headerInfo":{"toc":[{"level":1,"text":"Balloon","anchor":"balloon","htmlText":"Balloon"},{"level":2,"text":"Who's using Balloon?","anchor":"whos-using-balloon","htmlText":"Who's using Balloon?"},{"level":2,"text":"Balloon in Jetpack Compose","anchor":"balloon-in-jetpack-compose","htmlText":"Balloon in Jetpack Compose"},{"level":2,"text":"Including in your project","anchor":"including-in-your-project","htmlText":"Including in your project"},{"level":3,"text":"Gradle","anchor":"gradle","htmlText":"Gradle"},{"level":2,"text":"How to Use","anchor":"how-to-use","htmlText":"How to Use"},{"level":3,"text":"Create Balloon with Kotlin","anchor":"create-balloon-with-kotlin","htmlText":"Create Balloon with Kotlin"},{"level":3,"text":"Create Balloon with Kotlin DSL","anchor":"create-balloon-with-kotlin-dsl","htmlText":"Create Balloon with Kotlin DSL"},{"level":3,"text":"Create Balloon with Java","anchor":"create-balloon-with-java","htmlText":"Create Balloon with Java"},{"level":3,"text":"Show up Balloon","anchor":"show-up-balloon","htmlText":"Show up Balloon"},{"level":3,"text":"Dismiss Balloon","anchor":"dismiss-balloon","htmlText":"Dismiss Balloon"},{"level":3,"text":"Show up Balloon Sequentially","anchor":"show-up-balloon-sequentially","htmlText":"Show up Balloon Sequentially"},{"level":4,"text":"Parallel Displaying","anchor":"parallel-displaying","htmlText":"Parallel Displaying"},{"level":3,"text":"Width and height","anchor":"width-and-height","htmlText":"Width and height"},{"level":4,"text":"Specific size","anchor":"specific-size","htmlText":"Specific size"},{"level":4,"text":"Wrap Content Sizes","anchor":"wrap-content-sizes","htmlText":"Wrap Content Sizes"},{"level":4,"text":"Depending on Screen Size","anchor":"depending-on-screen-size","htmlText":"Depending on Screen Size"},{"level":3,"text":"Padding","anchor":"padding","htmlText":"Padding"},{"level":3,"text":"Margin","anchor":"margin","htmlText":"Margin"},{"level":3,"text":"Auto-sized text","anchor":"auto-sized-text","htmlText":"Auto-sized text"},{"level":3,"text":"Arrow Composition","anchor":"arrow-composition","htmlText":"Arrow Composition"},{"level":4,"text":"ArrowPositionRules","anchor":"arrowpositionrules","htmlText":"ArrowPositionRules"},{"level":4,"text":"ArrowOrientationRules","anchor":"arroworientationrules","htmlText":"ArrowOrientationRules"},{"level":3,"text":"Text Composition","anchor":"text-composition","htmlText":"Text Composition"},{"level":3,"text":"TextForm","anchor":"textform","htmlText":"TextForm"},{"level":3,"text":"Icon Composition","anchor":"icon-composition","htmlText":"Icon Composition"},{"level":3,"text":"IconForm","anchor":"iconform","htmlText":"IconForm"},{"level":3,"text":"OnBalloonClickListener, OnBalloonDismissListener, OnBalloonOutsideTouchListener","anchor":"onballoonclicklistener-onballoondismisslistener-onballoonoutsidetouchlistener","htmlText":"OnBalloonClickListener, OnBalloonDismissListener, OnBalloonOutsideTouchListener"},{"level":3,"text":"Custom Balloon Layout","anchor":"custom-balloon-layout","htmlText":"Custom Balloon Layout"},{"level":3,"text":"Persistence","anchor":"persistence","htmlText":"Persistence"},{"level":3,"text":"Avoid Memory leak","anchor":"avoid-memory-leak","htmlText":"Avoid Memory leak"},{"level":3,"text":"Lazy initialization","anchor":"lazy-initialization","htmlText":"Lazy initialization"},{"level":3,"text":"BalloonOverlay","anchor":"balloonoverlay","htmlText":"BalloonOverlay"},{"level":3,"text":"BalloonAnimation","anchor":"balloonanimation","htmlText":"BalloonAnimation"},{"level":3,"text":"BalloonHighlightAnimation","anchor":"balloonhighlightanimation","htmlText":"BalloonHighlightAnimation"},{"level":2,"text":"Balloon builder methods","anchor":"balloon-builder-methods","htmlText":"Balloon builder methods"},{"level":2,"text":"Balloon in Jetpack Compose","anchor":"balloon-in-jetpack-compose-1","htmlText":"Balloon in Jetpack Compose"},{"level":3,"text":"Balloon Composable","anchor":"balloon-composable","htmlText":"Balloon Composable"},{"level":3,"text":"BalloonWindow","anchor":"balloonwindow","htmlText":"BalloonWindow"},{"level":3,"text":"Auto-Display Balloon on Layout Ready","anchor":"auto-display-balloon-on-layout-ready","htmlText":"Auto-Display Balloon on Layout Ready"},{"level":3,"text":"Compose Extensions","anchor":"compose-extensions","htmlText":"Compose Extensions"},{"level":2,"text":"Find this library useful? :heart:","anchor":"find-this-library-useful-heart","htmlText":"Find this library useful? ❤️"},{"level":1,"text":"License","anchor":"license","htmlText":"License"}],"siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fskydoves%2FBalloon"}},{"displayName":"CODE_OF_CONDUCT.md","repoName":"Balloon","refName":"main","path":"CODE_OF_CONDUCT.md","preferredFileType":"code_of_conduct","tabName":"Code of conduct","richText":null,"loaded":false,"timedOut":false,"errorMessage":null,"headerInfo":{"toc":null,"siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fskydoves%2FBalloon"}},{"displayName":"LICENSE","repoName":"Balloon","refName":"main","path":"LICENSE","preferredFileType":"license","tabName":"Apache-2.0","richText":null,"loaded":false,"timedOut":false,"errorMessage":null,"headerInfo":{"toc":null,"siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fskydoves%2FBalloon"}}],"overviewFilesProcessingTime":0}},"appPayload":{"helpUrl":"https://docs.github.com","findFileWorkerPath":"/assets-cdn/worker/find-file-worker-7d7eb7c71814.js","findInFileWorkerPath":"/assets-cdn/worker/find-in-file-worker-708ec8ade250.js","githubDevUrl":null,"enabled_features":{"copilot_workspace":null,"code_nav_ui_events":false,"overview_shared_code_dropdown_button":true,"react_blob_overlay":false,"accessible_code_button":true,"github_models_repo_integration":false}}}}</script> <div data-target="react-partial.reactRoot"><style data-styled="true" data-styled-version="5.3.11">.iVEunk{margin-top:16px;margin-bottom:16px;}/*!sc*/ .jzuOtQ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-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;}/*!sc*/ .bGojzy{margin-bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:16px;}/*!sc*/ .iNSVHo{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;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding-bottom:16px;padding-top:8px;}/*!sc*/ .bVgnfw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;}/*!sc*/ @media screen and (max-width:320px){.bVgnfw{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}}/*!sc*/ .CEgMp{position:relative;}/*!sc*/ @media screen and (max-width:380px){.CEgMp .ref-selector-button-text-container{max-width:80px;}}/*!sc*/ @media screen and (max-width:320px){.CEgMp{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}.CEgMp .overview-ref-selector{width:100%;}.CEgMp .overview-ref-selector > span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}.CEgMp .overview-ref-selector > span > span[data-component="text"]{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}}/*!sc*/ .gMOVLe[data-size="medium"]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:0;}/*!sc*/ .gMOVLe[data-size="medium"] svg{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gMOVLe[data-size="medium"] > span{width:inherit;}/*!sc*/ .gUkoLg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}/*!sc*/ .bZBlpz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}/*!sc*/ .lhTYNA{margin-right:4px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .ffLUq{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/*!sc*/ .bmcJak{min-width:0;}/*!sc*/ .fLXEGX{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (max-width:1079px){.fLXEGX{display:none;}}/*!sc*/ .lmSMZJ[data-size="medium"]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));padding-left:4px;padding-right:4px;}/*!sc*/ .lmSMZJ[data-size="medium"] span[data-component="leadingVisual"]{margin-right:4px !important;}/*!sc*/ .dqfxud{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:1080px){.dqfxud{display:none;}}/*!sc*/ @media screen and (max-width:543px){.dqfxud{display:none;}}/*!sc*/ .fGwBZA[data-size="medium"][data-no-visuals]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .jxTzTd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;gap:8px;}/*!sc*/ .gqqBXN{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:8px;}/*!sc*/ @media screen and (max-width:543px){.gqqBXN{display:none;}}/*!sc*/ .dzXgxt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (max-width:1011px){.dzXgxt{display:none;}}/*!sc*/ .iWFGlI{margin-left:8px;margin-right:8px;margin:0;}/*!sc*/ .vcvyP{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:160px;}/*!sc*/ .YUPas{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:1012px){.YUPas{display:none;}}/*!sc*/ .izFOf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:544px){.izFOf{display:none;}}/*!sc*/ .vIPPs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;}/*!sc*/ .fdROMU{width:100%;border-collapse:separate;border-spacing:0;border:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;table-layout:fixed;overflow:unset;}/*!sc*/ .jGKpsv{height:0px;line-height:0px;}/*!sc*/ .jGKpsv tr{height:0px;font-size:0px;}/*!sc*/ .jdgHnn{padding:16px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:12px;text-align:left;height:40px;}/*!sc*/ .jdgHnn th{padding-left:16px;background-color:var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));}/*!sc*/ .bQivRW{width:100%;border-top-left-radius:6px;}/*!sc*/ @media screen and (min-width:544px){.bQivRW{display:none;}}/*!sc*/ .ldkMIO{width:40%;border-top-left-radius:6px;}/*!sc*/ @media screen and (max-width:543px){.ldkMIO{display:none;}}/*!sc*/ .jMbWeI{text-align:right;padding-right:16px;width:136px;border-top-right-radius:6px;}/*!sc*/ .gpqjiB{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:12px;height:40px;}/*!sc*/ .dzCJzi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;min-width:273px;padding:8px;}/*!sc*/ @media screen and (min-width:544px){.dzCJzi{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}}/*!sc*/ .eNCcrz{text-align:center;vertical-align:center;height:40px;border-top:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));}/*!sc*/ .bHTcCe{border-top:1px solid var(--borderColor-default,var(--color-border-default));cursor:pointer;}/*!sc*/ .csrIcr{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;gap:16px;}/*!sc*/ .bUQNHB{border:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}/*!sc*/ @media screen and (max-width:543px){.bUQNHB{margin-left:-16px;margin-right:-16px;max-width:calc(100% + 32px);}}/*!sc*/ @media screen and (min-width:544px){.bUQNHB{max-width:100%;}}/*!sc*/ .jPdcfu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:1px solid;border-bottom-color:var(--borderColor-default,var(--color-border-default,#d0d7de));-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-right:8px;position:-webkit-sticky;position:sticky;top:0;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));z-index:1;border-top-left-radius:6px;border-top-right-radius:6px;}/*!sc*/ .iphEWz{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;border-bottom:none;max-width:100%;padding-left:8px;padding-right:8px;}/*!sc*/ .hUCRAk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .cwoBXV[data-size="medium"]{color:var(--fgColor-muted,var(--color-fg-subtle,#6e7781));padding-left:8px;padding-right:8px;}/*!sc*/ .QkQOb{padding:32px;overflow:auto;}/*!sc*/ data-styled.g1[id="Box-sc-g0xbh4-0"]{content:"iVEunk,jzuOtQ,bGojzy,iNSVHo,bVgnfw,CEgMp,gMOVLe,gUkoLg,bZBlpz,lhTYNA,ffLUq,bmcJak,fLXEGX,lmSMZJ,dqfxud,fGwBZA,jxTzTd,gqqBXN,dzXgxt,iWFGlI,vcvyP,YUPas,izFOf,vIPPs,fdROMU,jGKpsv,jdgHnn,bQivRW,ldkMIO,jMbWeI,gpqjiB,dzCJzi,eNCcrz,bHTcCe,csrIcr,bUQNHB,jPdcfu,iphEWz,hUCRAk,cwoBXV,QkQOb,"}/*!sc*/ .brGdpi{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}/*!sc*/ data-styled.g5[id="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0"]{content:"brGdpi,"}/*!sc*/ .hWlpPn{position:relative;display:inline-block;}/*!sc*/ .hWlpPn::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:subpixel-antialiased;color:var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff)));text-align:center;-webkit-text-decoration:none;text-decoration:none;text-shadow:none;text-transform:none;-webkit-letter-spacing:normal;-moz-letter-spacing:normal;-ms-letter-spacing:normal;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)));border-radius:6px;opacity:0;}/*!sc*/ @-webkit-keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ @keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ .hWlpPn:hover::after,.hWlpPn:active::after,.hWlpPn:focus::after,.hWlpPn:focus-within::after{display:inline-block;-webkit-text-decoration:none;text-decoration:none;-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .hWlpPn.tooltipped-no-delay:hover::after,.hWlpPn.tooltipped-no-delay:active::after,.hWlpPn.tooltipped-no-delay:focus::after,.hWlpPn.tooltipped-no-delay:focus-within::after{-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .hWlpPn.tooltipped-multiline:hover::after,.hWlpPn.tooltipped-multiline:active::after,.hWlpPn.tooltipped-multiline:focus::after,.hWlpPn.tooltipped-multiline:focus-within::after{display:table-cell;}/*!sc*/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-se::after,.hWlpPn.tooltipped-sw::after{top:100%;right:50%;margin-top:6px;}/*!sc*/ .hWlpPn.tooltipped-se::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .hWlpPn.tooltipped-sw::after{margin-right:-16px;}/*!sc*/ .hWlpPn.tooltipped-n::after,.hWlpPn.tooltipped-ne::after,.hWlpPn.tooltipped-nw::after{right:50%;bottom:100%;margin-bottom:6px;}/*!sc*/ .hWlpPn.tooltipped-ne::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .hWlpPn.tooltipped-nw::after{margin-right:-16px;}/*!sc*/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-n::after{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}/*!sc*/ .hWlpPn.tooltipped-w::after{right:100%;bottom:50%;margin-right:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .hWlpPn.tooltipped-e::after{bottom:50%;left:100%;margin-left:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .hWlpPn.tooltipped-multiline::after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}/*!sc*/ .hWlpPn.tooltipped-multiline.tooltipped-s::after,.hWlpPn.tooltipped-multiline.tooltipped-n::after{right:auto;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}/*!sc*/ .hWlpPn.tooltipped-multiline.tooltipped-w::after,.hWlpPn.tooltipped-multiline.tooltipped-e::after{right:100%;}/*!sc*/ .hWlpPn.tooltipped-align-right-2::after{right:0;margin-right:0;}/*!sc*/ .hWlpPn.tooltipped-align-left-2::after{left:0;margin-left:0;}/*!sc*/ data-styled.g16[id="Tooltip__TooltipBase-sc-17tf59c-0"]{content:"hWlpPn,"}/*!sc*/ .liVpTx{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap;max-width:125px;}/*!sc*/ data-styled.g18[id="Truncate__StyledTruncate-sc-23o1d2-0"]{content:"liVpTx,"}/*!sc*/ </style> <!-- --> <!-- --> <div class="Box-sc-g0xbh4-0 iVEunk"><div class="Box-sc-g0xbh4-0 jzuOtQ"><div class="Box-sc-g0xbh4-0 bGojzy"></div></div><div class="Box-sc-g0xbh4-0 iNSVHo"><div class="Box-sc-g0xbh4-0 bVgnfw"><div class="Box-sc-g0xbh4-0 CEgMp"><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-label="main branch" data-testid="anchor-button" class="Box-sc-g0xbh4-0 gMOVLe prc-Button-ButtonBase-c50BI overview-ref-selector width-full" data-loading="false" data-size="medium" data-variant="default" aria-describedby="branch-picker-repos-header-ref-selector-loading-announcement" id="branch-picker-repos-header-ref-selector"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg prc-Button-ButtonContent-HKbr-"><span data-component="text" class="prc-Button-Label-pTQ3x"><div class="Box-sc-g0xbh4-0 bZBlpz"><div class="Box-sc-g0xbh4-0 lhTYNA"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></div><div class="Box-sc-g0xbh4-0 ffLUq ref-selector-button-text-container"><span class="Box-sc-g0xbh4-0 bmcJak prc-Text-Text-0ima0"> <!-- -->main</span></div></div></span><span data-component="trailingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><button hidden="" data-hotkey-scope="read-only-cursor-text-area"></button></div><div class="Box-sc-g0xbh4-0 fLXEGX"><a style="--button-color:fg.muted" type="button" href="/skydoves/Balloon/branches" class="Box-sc-g0xbh4-0 lmSMZJ prc-Button-ButtonBase-c50BI" data-loading="false" data-size="medium" data-variant="invisible" aria-describedby=":Rclab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></span><span data-component="text" class="prc-Button-Label-pTQ3x">Branches</span></span></a><a style="--button-color:fg.muted" type="button" href="/skydoves/Balloon/tags" class="Box-sc-g0xbh4-0 lmSMZJ prc-Button-ButtonBase-c50BI" data-loading="false" data-size="medium" data-variant="invisible" aria-describedby=":Rklab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-tag" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path></svg></span><span data-component="text" class="prc-Button-Label-pTQ3x">Tags</span></span></a></div><div class="Box-sc-g0xbh4-0 dqfxud"><a style="--button-color:fg.muted" type="button" aria-label="Go to Branches page" href="/skydoves/Balloon/branches" class="Box-sc-g0xbh4-0 fGwBZA prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-describedby=":Relab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></a><a style="--button-color:fg.muted" type="button" aria-label="Go to Tags page" href="/skydoves/Balloon/tags" class="Box-sc-g0xbh4-0 fGwBZA prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-describedby=":Rmlab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-tag" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path></svg></a></div></div><div class="Box-sc-g0xbh4-0 jxTzTd"><div class="Box-sc-g0xbh4-0 gqqBXN"><div class="Box-sc-g0xbh4-0 dzXgxt"><!--$--><div class="Box-sc-g0xbh4-0 iWFGlI"><span class="Box-sc-g0xbh4-0 vcvyP TextInput-wrapper prc-components-TextInputWrapper-i1ofR prc-components-TextInputBaseWrapper-ueK9q" data-leading-visual="true" data-trailing-visual="true" aria-busy="false"><span class="TextInput-icon" id=":R2j5ab:" aria-hidden="true"><svg aria-hidden="true" focusable="false" class="octicon octicon-search" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path></svg></span><input type="text" aria-label="Go to file" role="combobox" aria-controls="file-results-list" aria-expanded="false" aria-haspopup="dialog" autoCorrect="off" spellcheck="false" placeholder="Go to file" aria-describedby=":R2j5ab: :R2j5abH1:" data-component="input" class="prc-components-Input-Ic-y8" value=""/><span class="TextInput-icon" id=":R2j5abH1:" aria-hidden="true"></span></span></div><!--/$--></div><div class="Box-sc-g0xbh4-0 YUPas"><button type="button" class="prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="default" aria-describedby=":Rr5ab:-loading-announcement"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="text" class="prc-Button-Label-pTQ3x">Go to file</span></span></button></div><div class="react-directory-add-file-icon"></div><div class="react-directory-remove-file-icon"></div></div><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" class="prc-Button-ButtonBase-c50BI" data-loading="false" data-size="medium" data-variant="primary" aria-describedby=":R55ab:-loading-announcement" id=":R55ab:"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-code hide-sm" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path></svg></span><span data-component="text" class="prc-Button-Label-pTQ3x">Code</span><span data-component="trailingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><div class="Box-sc-g0xbh4-0 izFOf"><button data-component="IconButton" type="button" aria-label="Open more actions menu" aria-haspopup="true" aria-expanded="false" tabindex="0" class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="default" aria-describedby=":R75ab:-loading-announcement" id=":R75ab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg></button></div></div></div><div class="Box-sc-g0xbh4-0 vIPPs"><div data-hpc="true"><button hidden="" data-testid="focus-next-element-button" data-hotkey="j"></button><button hidden="" data-testid="focus-previous-element-button" data-hotkey="k"></button><h2 class="sr-only ScreenReaderHeading-module__userSelectNone--vW4Cq prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading" id="folders-and-files">Folders and files</h2><table aria-labelledby="folders-and-files" class="Box-sc-g0xbh4-0 fdROMU"><thead class="Box-sc-g0xbh4-0 jGKpsv"><tr class="Box-sc-g0xbh4-0 jdgHnn"><th colSpan="2" class="Box-sc-g0xbh4-0 bQivRW"><span class="text-bold">Name</span></th><th colSpan="1" class="Box-sc-g0xbh4-0 ldkMIO"><span class="text-bold">Name</span></th><th class="hide-sm"><div title="Last commit message" class="Truncate__StyledTruncate-sc-23o1d2-0 liVpTx width-fit"><span class="text-bold">Last commit message</span></div></th><th colSpan="1" class="Box-sc-g0xbh4-0 jMbWeI"><div title="Last commit date" class="Truncate__StyledTruncate-sc-23o1d2-0 liVpTx width-fit"><span class="text-bold">Last commit date</span></div></th></tr></thead><tbody><tr class="Box-sc-g0xbh4-0 gpqjiB"><td colSpan="3" class="bgColor-muted p-1 rounded-top-2"><div class="Box-sc-g0xbh4-0 dzCJzi"><h2 class="sr-only ScreenReaderHeading-module__userSelectNone--vW4Cq prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">Latest commit</h2><div style="width:120px" class="Skeleton Skeleton--text" data-testid="loading"> </div><div class="d-flex flex-shrink-0 gap-2"><div data-testid="latest-commit-details" class="d-none d-sm-flex flex-items-center"></div><div class="d-flex gap-2"><h2 class="sr-only ScreenReaderHeading-module__userSelectNone--vW4Cq prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">History</h2><a href="/skydoves/Balloon/commits/main/" class="prc-Button-ButtonBase-c50BI d-none d-lg-flex LinkButton-module__code-view-link-button--xvCGA flex-items-center fgColor-default" data-loading="false" data-size="small" data-variant="invisible" aria-describedby=":Raqj8pab:-loading-announcement"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path></svg></span><span data-component="text" class="prc-Button-Label-pTQ3x"><span class="fgColor-default">1,258 Commits</span></span></span></a><div class="d-sm-none"></div><div class="d-flex d-lg-none"><span role="tooltip" aria-label="1,258 Commits" id="history-icon-button-tooltip" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-n"><a href="/skydoves/Balloon/commits/main/" class="prc-Button-ButtonBase-c50BI LinkButton-module__code-view-link-button--xvCGA flex-items-center fgColor-default" data-loading="false" data-size="small" data-variant="invisible" aria-describedby=":R1iqj8pab:-loading-announcement history-icon-button-tooltip"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path></svg></span></span></a></span></div></div></div></div></td></tr><tr class="react-directory-row undefined" id="folder-row-0"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".github" aria-label=".github, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/.github">.github</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".github" aria-label=".github, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/.github">.github</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-1"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="app" aria-label="app, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/app">app</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="app" aria-label="app, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/app">app</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-2"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="balloon-compose" aria-label="balloon-compose, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/balloon-compose">balloon-compose</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="balloon-compose" aria-label="balloon-compose, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/balloon-compose">balloon-compose</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-3"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="balloon" aria-label="balloon, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/balloon">balloon</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="balloon" aria-label="balloon, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/balloon">balloon</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-4"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="benchmark-app" aria-label="benchmark-app, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/benchmark-app">benchmark-app</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="benchmark-app" aria-label="benchmark-app, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/benchmark-app">benchmark-app</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-5"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="benchmark" aria-label="benchmark, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/benchmark">benchmark</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="benchmark" aria-label="benchmark, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/benchmark">benchmark</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-6"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="buildSrc" aria-label="buildSrc, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/buildSrc">buildSrc</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="buildSrc" aria-label="buildSrc, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/buildSrc">buildSrc</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-7"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gradle" aria-label="gradle, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/gradle">gradle</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gradle" aria-label="gradle, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/gradle">gradle</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-8"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="scripts" aria-label="scripts, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/scripts">scripts</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="scripts" aria-label="scripts, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/scripts">scripts</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-9"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="spotless" aria-label="spotless, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/spotless">spotless</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file-directory-fill icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="spotless" aria-label="spotless, (Directory)" class="Link--primary" href="/skydoves/Balloon/tree/main/spotless">spotless</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-10"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".editorconfig" aria-label=".editorconfig, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/.editorconfig">.editorconfig</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".editorconfig" aria-label=".editorconfig, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/.editorconfig">.editorconfig</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-11"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".gitignore" aria-label=".gitignore, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/.gitignore">.gitignore</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".gitignore" aria-label=".gitignore, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/.gitignore">.gitignore</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-12"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="CODE_OF_CONDUCT.md" aria-label="CODE_OF_CONDUCT.md, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/CODE_OF_CONDUCT.md">CODE_OF_CONDUCT.md</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="CODE_OF_CONDUCT.md" aria-label="CODE_OF_CONDUCT.md, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/CODE_OF_CONDUCT.md">CODE_OF_CONDUCT.md</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-13"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="CONTRIBUTING.md" aria-label="CONTRIBUTING.md, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/CONTRIBUTING.md">CONTRIBUTING.md</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="CONTRIBUTING.md" aria-label="CONTRIBUTING.md, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/CONTRIBUTING.md">CONTRIBUTING.md</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-14"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="LICENSE" aria-label="LICENSE, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/LICENSE">LICENSE</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="LICENSE" aria-label="LICENSE, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/LICENSE">LICENSE</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-15"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="README.md" aria-label="README.md, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/README.md">README.md</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="README.md" aria-label="README.md, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/README.md">README.md</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-16"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="build.gradle.kts" aria-label="build.gradle.kts, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/build.gradle.kts">build.gradle.kts</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="build.gradle.kts" aria-label="build.gradle.kts, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/build.gradle.kts">build.gradle.kts</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-17"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gradle.properties" aria-label="gradle.properties, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/gradle.properties">gradle.properties</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gradle.properties" aria-label="gradle.properties, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/gradle.properties">gradle.properties</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-18"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gradlew" aria-label="gradlew, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/gradlew">gradlew</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gradlew" aria-label="gradlew, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/gradlew">gradlew</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-19"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gradlew.bat" aria-label="gradlew.bat, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/gradlew.bat">gradlew.bat</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gradlew.bat" aria-label="gradlew.bat, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/gradlew.bat">gradlew.bat</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-20"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="renovate.json" aria-label="renovate.json, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/renovate.json">renovate.json</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="renovate.json" aria-label="renovate.json, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/renovate.json">renovate.json</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-21"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="settings.gradle.kts" aria-label="settings.gradle.kts, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/settings.gradle.kts">settings.gradle.kts</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="settings.gradle.kts" aria-label="settings.gradle.kts, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/settings.gradle.kts">settings.gradle.kts</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-22"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="usecases.md" aria-label="usecases.md, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/usecases.md">usecases.md</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="octicon octicon-file color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="usecases.md" aria-label="usecases.md, (File)" class="Link--primary" href="/skydoves/Balloon/blob/main/usecases.md">usecases.md</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="Box-sc-g0xbh4-0 eNCcrz show-for-mobile" data-testid="view-all-files-row"><td colSpan="3" class="Box-sc-g0xbh4-0 bHTcCe"><div><button class="prc-Link-Link-85e08">View all files</button></div></td></tr></tbody></table></div><div class="Box-sc-g0xbh4-0 csrIcr"><div class="Box-sc-g0xbh4-0 bUQNHB"><div itemscope="" itemType="https://schema.org/abstract" class="Box-sc-g0xbh4-0 jPdcfu"><h2 class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 brGdpi">Repository files navigation</h2><nav class="Box-sc-g0xbh4-0 iphEWz prc-components-UnderlineWrapper-oOh5J" aria-label="Repository files"><ul class="prc-components-UnderlineItemList-b23Hf" role="list"><li class="Box-sc-g0xbh4-0 hUCRAk"><a class="prc-components-UnderlineItem-lJsg-" href="#" aria-current="page"><span data-component="icon"><svg aria-hidden="true" focusable="false" class="octicon octicon-book" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path></svg></span><span data-component="text" data-content="README">README</span></a></li><li class="Box-sc-g0xbh4-0 hUCRAk"><a class="prc-components-UnderlineItem-lJsg-" href="#"><span data-component="icon"><svg aria-hidden="true" focusable="false" class="octicon octicon-code-of-conduct" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M8.048 2.241c.964-.709 2.079-1.238 3.325-1.241a4.616 4.616 0 0 1 3.282 1.355c.41.408.757.86.996 1.428.238.568.348 1.206.347 1.968 0 2.193-1.505 4.254-3.081 5.862-1.496 1.526-3.213 2.796-4.249 3.563l-.22.163a.749.749 0 0 1-.895 0l-.221-.163c-1.036-.767-2.753-2.037-4.249-3.563C1.51 10.008.007 7.952.002 5.762a4.614 4.614 0 0 1 1.353-3.407C3.123.585 6.223.537 8.048 2.24Zm-1.153.983c-1.25-1.033-3.321-.967-4.48.191a3.115 3.115 0 0 0-.913 2.335c0 1.556 1.109 3.24 2.652 4.813C5.463 11.898 6.96 13.032 8 13.805c.353-.262.758-.565 1.191-.905l-1.326-1.223a.75.75 0 0 1 1.018-1.102l1.48 1.366c.328-.281.659-.577.984-.887L9.99 9.802a.75.75 0 1 1 1.019-1.103l1.384 1.28c.295-.329.566-.661.81-.995L12.92 8.7l-1.167-1.168c-.674-.671-1.78-.664-2.474.03-.268.269-.538.537-.802.797-.893.882-2.319.843-3.185-.032-.346-.35-.693-.697-1.043-1.047a.75.75 0 0 1-.04-1.016c.162-.191.336-.401.52-.623.62-.748 1.356-1.637 2.166-2.417Zm7.112 4.442c.313-.65.491-1.293.491-1.916v-.001c0-.614-.088-1.045-.23-1.385-.143-.339-.357-.633-.673-.949a3.111 3.111 0 0 0-2.218-.915c-1.092.003-2.165.627-3.226 1.602-.823.755-1.554 1.637-2.228 2.45l-.127.154.562.566a.755.755 0 0 0 1.066.02l.794-.79c1.258-1.258 3.312-1.31 4.594-.032.396.394.792.791 1.173 1.173Z"></path></svg></span><span data-component="text" data-content="Code of conduct">Code of conduct</span></a></li><li class="Box-sc-g0xbh4-0 hUCRAk"><a class="prc-components-UnderlineItem-lJsg-" href="#"><span data-component="icon"><svg aria-hidden="true" focusable="false" class="octicon octicon-law" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path></svg></span><span data-component="text" data-content="Apache-2.0 license">Apache-2.0 license</span></a></li></ul></nav><button style="--button-color:fg.subtle" type="button" aria-label="Outline" aria-haspopup="true" aria-expanded="false" tabindex="0" class="Box-sc-g0xbh4-0 cwoBXV prc-Button-ButtonBase-c50BI" data-loading="false" data-size="medium" data-variant="invisible" aria-describedby=":Rr9ab:-loading-announcement" id=":Rr9ab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-list-unordered" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M5.75 2.5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5ZM2 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-6a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM2 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg></button></div><div class="Box-sc-g0xbh4-0 QkQOb js-snippet-clipboard-copy-unpositioned undefined" data-hpc="true"><article class="markdown-body entry-content container-lg" itemprop="text"><div class="markdown-heading" dir="auto"><h1 align="center" tabindex="-1" class="heading-element" dir="auto">Balloon</h1><a id="user-content-balloon" class="anchor" aria-label="Permalink: Balloon" href="#balloon"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div><br> <p align="center" dir="auto"> 🎈 Modernized and sophisticated tooltips, fully customizable with an arrow and animations on Android. </p> <br> <p align="center" dir="auto"> <a href="https://devlibrary.withgoogle.com/products/android/repos/skydoves-Balloon" rel="nofollow"><img alt="Google" src="https://camo.githubusercontent.com/12a1493a411554fb96c76c8a07d0cf5e21b61c5eb735b7a6edb2b7274691b67f/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f676f6f676c652d6465766c69622e737667" data-canonical-src="https://skydoves.github.io/badges/google-devlib.svg" style="max-width: 100%;"></a> <a href="https://twitter.com/googledevs/status/1476223093773418502" rel="nofollow"><img alt="Twitter" src="https://camo.githubusercontent.com/9f4210a9b2f359fcf7035ae3c8e068bb227d299277386682ffeffc5ef07d0bc2/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f747769747465722d646576656c6f706572732e737667" data-canonical-src="https://skydoves.github.io/badges/twitter-developers.svg" style="max-width: 100%;"></a> <a href="https://www.linkedin.com/feed/update/urn:li:activity:6881990083344519168/" rel="nofollow"><img alt="LinkedIn" src="https://camo.githubusercontent.com/027bd2909a0e37fa942a3874268c790ce8f65302fec4a7c26b2297e6af2c4189/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f6c696e6b6564696e2d646576656c6f706572732e737667" data-canonical-src="https://skydoves.github.io/badges/linkedin-developers.svg" style="max-width: 100%;"></a> <a href="https://github.com/doveletter"><img alt="Profile" src="https://camo.githubusercontent.com/8962bec0853c79ed136da2abc7f428ba252234264bde61bcffa56823a4acde71/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f646f76652d6c65747465722e737667" data-canonical-src="https://skydoves.github.io/badges/dove-letter.svg" style="max-width: 100%;"></a><br> <a href="https://opensource.org/licenses/Apache-2.0" rel="nofollow"><img alt="License" src="https://camo.githubusercontent.com/859a1a0bc85ce8bbd7a730a274fec5c9e77c4726ffdf6aa762a78685e26033a4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d417061636865253230322e302d626c75652e737667" data-canonical-src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" style="max-width: 100%;"></a> <a href="https://android-arsenal.com/api?level=21" rel="nofollow"><img alt="API" src="https://camo.githubusercontent.com/56b60a6c198b13ce8a3efe333b3a88af611a8059eb5995fb977cd5eb3be1ed3e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4150492d32312532422d627269676874677265656e2e7376673f7374796c653d666c6174" data-canonical-src="https://img.shields.io/badge/API-21%2B-brightgreen.svg?style=flat" style="max-width: 100%;"></a> <a href="https://github.com/skydoves/Balloon/actions"><img alt="Build Status" src="https://github.com/skydoves/Balloon/workflows/Android%20CI/badge.svg" style="max-width: 100%;"></a> <a href="https://medium.com/swlh/a-lightweight-tooltip-popup-for-android-ef9484a992d7" rel="nofollow"><img alt="Medium" src="https://camo.githubusercontent.com/c1fb38e43d61feff2617453e868453449cba05145bd180c095e5dc4bc26d17c5/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f53746f72792d4d656469756d2e737667" data-canonical-src="https://skydoves.github.io/badges/Story-Medium.svg" style="max-width: 100%;"></a> <a href="https://github.com/skydoves"><img alt="Profile" src="https://camo.githubusercontent.com/5d731d9f614226d3cb8469af9b5d66977d92d20264bf16930debf855761ff9a3/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f736b79646f7665732e737667" data-canonical-src="https://skydoves.github.io/badges/skydoves.svg" style="max-width: 100%;"></a> <a href="https://skydoves.github.io/libraries/balloon/html/balloon/com.skydoves.balloon/index.html" rel="nofollow"><img alt="Dokka" src="https://camo.githubusercontent.com/1a835fe6c487aa0f617523a6734d9f07814403ee86e4ccf3398f368f512fd0d4/68747470733a2f2f736b79646f7665732e6769746875622e696f2f6261646765732f646f6b6b612d62616c6c6f6f6e2e737667" data-canonical-src="https://skydoves.github.io/badges/dokka-balloon.svg" style="max-width: 100%;"></a> </p> <br> <p align="center" dir="auto"> <a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/61194943-f9d70380-a6ff-11e9-807f-ba1ca8126f8a.gif"><img src="https://user-images.githubusercontent.com/24237865/61194943-f9d70380-a6ff-11e9-807f-ba1ca8126f8a.gif" width="280" data-animated-image="" style="max-width: 100%;"></a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/61225579-d346b600-a75b-11e9-84f8-3c06047b5003.gif"><img src="https://user-images.githubusercontent.com/24237865/61225579-d346b600-a75b-11e9-84f8-3c06047b5003.gif" width="280" data-animated-image="" style="max-width: 100%;"></a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/148673977-dba2e44c-c2fb-4fb4-a648-e26e8541e865.png"><img src="https://user-images.githubusercontent.com/24237865/148673977-dba2e44c-c2fb-4fb4-a648-e26e8541e865.png" width="252" style="max-width: 100%;"></a> </p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Who's using Balloon?</h2><a id="user-content-whos-using-balloon" class="anchor" aria-label="Permalink: Who's using Balloon?" href="#whos-using-balloon"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><strong>👉 <a href="/skydoves/Balloon/blob/main/usecases.md">Check out who's using Balloon</a></strong></p> <p dir="auto">Balloon hits <strong>+500,000 downloads every month</strong> around the globe! 🎈</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/196018576-a9c87534-81a2-4618-8519-0024b67964bf.png"><img src="https://user-images.githubusercontent.com/24237865/196018576-a9c87534-81a2-4618-8519-0024b67964bf.png" alt="globe" style="max-width: 100%;"></a></p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/210227682-cbc03479-8625-4213-b907-4f15217f91ba.png"><img align="right" width="130px" src="https://user-images.githubusercontent.com/24237865/210227682-cbc03479-8625-4213-b907-4f15217f91ba.png" style="max-width: 100%;"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Balloon in Jetpack Compose</h2><a id="user-content-balloon-in-jetpack-compose" class="anchor" aria-label="Permalink: Balloon in Jetpack Compose" href="#balloon-in-jetpack-compose"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If you want to use Balloon in your Jetpack Compose project, check out the <strong><a href="https://github.com/skydoves/Balloon#balloon-in-jetpack-compose-1">Balloon in Jetpack Compose</a></strong> guidelines. You can also check out the blog post <strong><a href="https://medium.com/@skydoves/tooltips-for-jetpack-compose-improve-user-experience-to-the-next-level-68791ab8e07f" rel="nofollow">Tooltips for Jetpack Compose: Improve User Experience to the Next Level</a></strong> for more details.</p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Including in your project</h2><a id="user-content-including-in-your-project" class="anchor" aria-label="Permalink: Including in your project" href="#including-in-your-project"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><a href="https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22balloon%22" rel="nofollow"><img src="https://camo.githubusercontent.com/919434e291d5302987630dbf6339eabd3d1b487631afff35de260bd01531c0a1/68747470733a2f2f696d672e736869656c64732e696f2f6d6176656e2d63656e7472616c2f762f636f6d2e6769746875622e736b79646f7665732f62616c6c6f6f6e2e7376673f6c6162656c3d4d6176656e25323043656e7472616c" alt="Maven Central" data-canonical-src="https://img.shields.io/maven-central/v/com.github.skydoves/balloon.svg?label=Maven%20Central" style="max-width: 100%;"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Gradle</h3><a id="user-content-gradle" class="anchor" aria-label="Permalink: Gradle" href="#gradle"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Add the dependency below to your <strong>module</strong>'s <code>build.gradle</code> file:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="dependencies { implementation("com.github.skydoves:balloon:1.6.12") }"><pre>dependencies { implementation(<span class="pl-s"><span class="pl-pds">"</span>com.github.skydoves:balloon:1.6.12<span class="pl-pds">"</span></span>) }</pre></div> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">How to Use</h2><a id="user-content-how-to-use" class="anchor" aria-label="Permalink: How to Use" href="#how-to-use"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Balloon supports both Kotlin and Java projects, so you can reference it by your language.</p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Create Balloon with Kotlin</h3><a id="user-content-create-balloon-with-kotlin" class="anchor" aria-label="Permalink: Create Balloon with Kotlin" href="#create-balloon-with-kotlin"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can create an instance of the Balloon with the <code>Balloon.Builder</code> class.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="val balloon = Balloon.Builder(context) .setWidthRatio(1.0f) .setHeight(BalloonSizeSpec.WRAP) .setText("Edit your profile here!") .setTextColorResource(R.color.white_87) .setTextSize(15f) .setIconDrawableResource(R.drawable.ic_edit) .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR) .setArrowSize(10) .setArrowPosition(0.5f) .setPadding(12) .setCornerRadius(8f) .setBackgroundColorResource(R.color.skyBlue) .setBalloonAnimation(BalloonAnimation.ELASTIC) .setLifecycleOwner(lifecycle) .build()"><pre><span class="pl-k">val</span> balloon <span class="pl-k">=</span> <span class="pl-en">Balloon</span>.<span class="pl-en">Builder</span>(context) .setWidthRatio(<span class="pl-c1">1.0f</span>) .setHeight(<span class="pl-en">BalloonSizeSpec</span>.<span class="pl-en">WRAP</span>) .setText(<span class="pl-s"><span class="pl-pds">"</span>Edit your profile here!<span class="pl-pds">"</span></span>) .setTextColorResource(<span class="pl-en">R</span>.color.white_87) .setTextSize(<span class="pl-c1">15f</span>) .setIconDrawableResource(<span class="pl-en">R</span>.drawable.ic_edit) .setArrowPositionRules(<span class="pl-en">ArrowPositionRules</span>.<span class="pl-en">ALIGN_ANCHOR</span>) .setArrowSize(<span class="pl-c1">10</span>) .setArrowPosition(<span class="pl-c1">0.5f</span>) .setPadding(<span class="pl-c1">12</span>) .setCornerRadius(<span class="pl-c1">8f</span>) .setBackgroundColorResource(<span class="pl-en">R</span>.color.skyBlue) .setBalloonAnimation(<span class="pl-en">BalloonAnimation</span>.<span class="pl-en">ELASTIC</span>) .setLifecycleOwner(lifecycle) .build()</pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Create Balloon with Kotlin DSL</h3><a id="user-content-create-balloon-with-kotlin-dsl" class="anchor" aria-label="Permalink: Create Balloon with Kotlin DSL" href="#create-balloon-with-kotlin-dsl"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can also create an instance of the Balloon with the Kotlin DSL.</p> <details> <summary>Keep reading for more details</summary> <p dir="auto">You can create an instance of the Balloon with <code>createBalloon</code> as the example below:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="val balloon = createBalloon(context) { setWidthRatio(1.0f) setHeight(BalloonSizeSpec.WRAP) setText("Edit your profile here!") setTextColorResource(R.color.white_87) setTextSize(15f) setIconDrawableResource(R.drawable.ic_edit) setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR) setArrowSize(10) setArrowPosition(0.5f) setPadding(12) setCornerRadius(8f) setBackgroundColorResource(R.color.skyBlue) setBalloonAnimation(BalloonAnimation.ELASTIC) setLifecycleOwner(lifecycle) build() }"><pre><span class="pl-k">val</span> balloon <span class="pl-k">=</span> createBalloon(context) { setWidthRatio(<span class="pl-c1">1.0f</span>) setHeight(<span class="pl-en">BalloonSizeSpec</span>.<span class="pl-en">WRAP</span>) setText(<span class="pl-s"><span class="pl-pds">"</span>Edit your profile here!<span class="pl-pds">"</span></span>) setTextColorResource(<span class="pl-en">R</span>.color.white_87) setTextSize(<span class="pl-c1">15f</span>) setIconDrawableResource(<span class="pl-en">R</span>.drawable.ic_edit) setArrowPositionRules(<span class="pl-en">ArrowPositionRules</span>.<span class="pl-en">ALIGN_ANCHOR</span>) setArrowSize(<span class="pl-c1">10</span>) setArrowPosition(<span class="pl-c1">0.5f</span>) setPadding(<span class="pl-c1">12</span>) setCornerRadius(<span class="pl-c1">8f</span>) setBackgroundColorResource(<span class="pl-en">R</span>.color.skyBlue) setBalloonAnimation(<span class="pl-en">BalloonAnimation</span>.<span class="pl-en">ELASTIC</span>) setLifecycleOwner(lifecycle) build() }</pre></div> </details> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Create Balloon with Java</h3><a id="user-content-create-balloon-with-java" class="anchor" aria-label="Permalink: Create Balloon with Java" href="#create-balloon-with-java"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You can create an instance of the Balloon with Java by using the <code>Balloon.Builder</code> class.</p> <details> <summary>Keep reading for more details</summary> <p dir="auto">You can create an instance of the Balloon as the following example below:</p> <div class="highlight highlight-source-java notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Balloon balloon = new Balloon.Builder(context) .setArrowSize(10) .setArrowOrientation(ArrowOrientation.TOP) .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR) .setArrowPosition(0.5f) .setWidth(BalloonSizeSpec.WRAP) .setHeight(65) .setTextSize(15f) .setCornerRadius(4f) .setAlpha(0.9f) .setText("You can access your profile from now on.") .setTextColor(ContextCompat.getColor(context, R.color.white_93)) .setTextIsHtml(true) .setIconDrawable(ContextCompat.getDrawable(context, R.drawable.ic_profile)) .setBackgroundColor(ContextCompat.getColor(context, R.color.colorPrimary)) .setOnBalloonClickListener(onBalloonClickListener) .setBalloonAnimation(BalloonAnimation.FADE) .setLifecycleOwner(lifecycleOwner) .build();"><pre><span class="pl-smi">Balloon</span> <span class="pl-s1">balloon</span> = <span class="pl-k">new</span> <span class="pl-smi">Balloon</span>.<span class="pl-smi">Builder</span>(<span class="pl-s1">context</span>) .<span class="pl-en">setArrowSize</span>(<span class="pl-c1">10</span>) .<span class="pl-en">setArrowOrientation</span>(<span class="pl-smi">ArrowOrientation</span>.<span class="pl-c1">TOP</span>) .<span class="pl-en">setArrowPositionRules</span>(<span class="pl-smi">ArrowPositionRules</span>.<span class="pl-c1">ALIGN_ANCHOR</span>) .<span class="pl-en">setArrowPosition</span>(<span class="pl-c1">0.5f</span>) .<span class="pl-en">setWidth</span>(<span class="pl-smi">BalloonSizeSpec</span>.<span class="pl-c1">WRAP</span>) .<span class="pl-en">setHeight</span>(<span class="pl-c1">65</span>) .<span class="pl-en">setTextSize</span>(<span class="pl-c1">15f</span>) .<span class="pl-en">setCornerRadius</span>(<span class="pl-c1">4f</span>) .<span class="pl-en">setAlpha</span>(<span class="pl-c1">0.9f</span>) .<span class="pl-en">setText</span>(<span class="pl-s">"You can access your profile from now on."</span>) .<span class="pl-en">setTextColor</span>(<span class="pl-smi">ContextCompat</span>.<span class="pl-en">getColor</span>(<span class="pl-s1">context</span>, <span class="pl-smi">R</span>.<span class="pl-s1">color</span>.<span class="pl-s1">white_93</span>)) .<span class="pl-en">setTextIsHtml</span>(<span class="pl-c1">true</span>) .<span class="pl-en">setIconDrawable</span>(<span class="pl-smi">ContextCompat</span>.<span class="pl-en">getDrawable</span>(<span class="pl-s1">context</span>, <span class="pl-smi">R</span>.<span class="pl-s1">drawable</span>.<span class="pl-s1">ic_profile</span>)) .<span class="pl-en">setBackgroundColor</span>(<span class="pl-smi">ContextCompat</span>.<span class="pl-en">getColor</span>(<span class="pl-s1">context</span>, <span class="pl-smi">R</span>.<span class="pl-s1">color</span>.<span class="pl-s1">colorPrimary</span>)) .<span class="pl-en">setOnBalloonClickListener</span>(<span class="pl-s1">onBalloonClickListener</span>) .<span class="pl-en">setBalloonAnimation</span>(<span class="pl-smi">BalloonAnimation</span>.<span class="pl-c1">FADE</span>) .<span class="pl-en">setLifecycleOwner</span>(<span class="pl-s1">lifecycleOwner</span>) .<span class="pl-en">build</span>();</pre></div> </details> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Show up Balloon</h3><a id="user-content-show-up-balloon" class="anchor" aria-label="Permalink: Show up Balloon" href="#show-up-balloon"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can show up the Balloon using the functions below. If we use <code>showAlign__</code> method, we can show up the Balloon based on alignments (<strong>top, bottom, right, left</strong>). Also, we can adjust specific positions of the Balloon by using <code>x-Offset</code> and <code>y-Offset</code> parameters. <br></p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="balloon.showAlignTop(anchor: View) // shows the balloon on an anchor view as the top alignment. balloon.showAlignTop(anchor: View, xOff: Int, yOff: Int) // shows top alignment with x-off and y-off. balloon.showAlignBottom(anchor: View) // shows the balloon on an anchor view as the bottom alignment. balloon.showAlignBottom(anchor: View, xOff: Int, yOff: Int) // shows bottom alignment with x-off and y-off. balloon.showAlignEnd(anchor: View) // shows the balloon on an anchor view as the end alignment. balloon.showAlignEnd(anchor: View, xOff: Int, yOff: Int) // shows end alignment with x-off and y-off. balloon.showAlignStart(anchor: View) // shows the balloon on an anchor view as the start alignment. balloon.showAlignStart(anchor: View, xOff: Int, yOff: Int) // shows start alignment with x-off and y-off. balloon.showAsDropDown(anchor: View) // shows the balloon as a dropdown without any alignments. balloon.showAsDropDown(anchor: View, xOff: Int, yOff: Int) // shows no alignments with x-off and y-off. balloon.showAtCenter(anchor: View, xOff: Int, yOff: Int, centerAlign: BalloonCenterAlign.TOP) // shows the balloon over the anchor view (overlap) as the center aligns."><pre>balloon.showAlignTop(anchor<span class="pl-k">:</span> <span class="pl-en">View</span>) <span class="pl-c"><span class="pl-c">//</span> shows the balloon on an anchor view as the top alignment.</span> balloon.showAlignTop(anchor<span class="pl-k">:</span> <span class="pl-en">View</span>, xOff<span class="pl-k">:</span> <span class="pl-c1">Int</span>, yOff<span class="pl-k">:</span> <span class="pl-c1">Int</span>) <span class="pl-c"><span class="pl-c">//</span> shows top alignment with x-off and y-off.</span> balloon.showAlignBottom(anchor<span class="pl-k">:</span> <span class="pl-en">View</span>) <span class="pl-c"><span class="pl-c">//</span> shows the balloon on an anchor view as the bottom alignment.</span> balloon.showAlignBottom(anchor<span class="pl-k">:</span> <span class="pl-en">View</span>, xOff<span class="pl-k">:</span> <span class="pl-c1">Int</span>, yOff<span class="pl-k">:</span> <span class="pl-c1">Int</span>) <span class="pl-c"><span class="pl-c">//</span> shows bottom alignment with x-off and y-off.</span> balloon.showAlignEnd(anchor<span class="pl-k">:</span> <span class="pl-en">View</span>) <span class="pl-c"><span class="pl-c">//</span> shows the balloon on an anchor view as the end alignment.</span> balloon.showAlignEnd(anchor<span class="pl-k">:</span> <span class="pl-en">View</span>, xOff<span class="pl-k">:</span> <span class="pl-c1">Int</span>, yOff<span class="pl-k">:</span> <span class="pl-c1">Int</span>) <span class="pl-c"><span class="pl-c">//</span> shows end alignment with x-off and y-off.</span> balloon.showAlignStart(anchor<span class="pl-k">:</span> <span class="pl-en">View</span>) <span class="pl-c"><span class="pl-c">//</span> shows the balloon on an anchor view as the start alignment.</span> balloon.showAlignStart(anchor<span class="pl-k">:</span> <span class="pl-en">View</span>, xOff<span class="pl-k">:</span> <span class="pl-c1">Int</span>, yOff<span class="pl-k">:</span> <span class="pl-c1">Int</span>) <span class="pl-c"><span class="pl-c">//</span> shows start alignment with x-off and y-off.</span> balloon.showAsDropDown(anchor<span class="pl-k">:</span> <span class="pl-en">View</span>) <span class="pl-c"><span class="pl-c">//</span> shows the balloon as a dropdown without any alignments.</span> balloon.showAsDropDown(anchor<span class="pl-k">:</span> <span class="pl-en">View</span>, xOff<span class="pl-k">:</span> <span class="pl-c1">Int</span>, yOff<span class="pl-k">:</span> <span class="pl-c1">Int</span>) <span class="pl-c"><span class="pl-c">//</span> shows no alignments with x-off and y-off.</span> balloon.showAtCenter(anchor<span class="pl-k">:</span> <span class="pl-en">View</span>, xOff<span class="pl-k">:</span> <span class="pl-c1">Int</span>, yOff<span class="pl-k">:</span> <span class="pl-c1">Int</span>, centerAlign<span class="pl-k">:</span> <span class="pl-en">BalloonCenterAlign</span>.<span class="pl-en">TOP</span>) <span class="pl-c"><span class="pl-c">//</span> shows the balloon over the anchor view (overlap) as the center aligns.</span></pre></div> <p dir="auto">Also, We can show up the Balloon with Kotlin extensions.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="myButton.showAlignTop(balloon)"><pre>myButton.showAlignTop(balloon)</pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Dismiss Balloon</h3><a id="user-content-dismiss-balloon" class="anchor" aria-label="Permalink: Dismiss Balloon" href="#dismiss-balloon"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can dismiss the Balloon by using the <code>Balloon.dismiss()</code> method.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="balloon.dismiss() balloon.dismissWithDelay(1000L) // dismisses 1000 milliseconds later when the popup is shown"><pre>balloon.dismiss() balloon.dismissWithDelay(<span class="pl-c1">1000L</span>) <span class="pl-c"><span class="pl-c">//</span> dismisses 1000 milliseconds later when the popup is shown</span></pre></div> <p dir="auto">We can dismiss automatically with delay after the Balloon is showing up with the <code>setAutoDismissDuration</code> method..</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Balloon.Builder(context) // dismisses automatically 1000 milliseconds later when the popup is shown. .setAutoDismissDuration(1000L) ..."><pre><span class="pl-en">Balloon</span>.<span class="pl-en">Builder</span>(context) <span class="pl-c"><span class="pl-c">//</span> dismisses automatically 1000 milliseconds later when the popup is shown.</span> .setAutoDismissDuration(<span class="pl-c1">1000L</span>) <span class="pl-k">..</span>.</pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Show up Balloon Sequentially</h3><a id="user-content-show-up-balloon-sequentially" class="anchor" aria-label="Permalink: Show up Balloon Sequentially" href="#show-up-balloon-sequentially"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can show up a couple of Balloons sequentially with the <code>relayShow__</code> and <code>await__</code> methods.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="customListBalloon .relayShowAlignBottom(customProfileBalloon, circleImageView) // relay to customListBalloon .relayShowAlignTop(customTagBalloon, bottomNavigationView, 130, 0) // relay to customProfileBalloon // show sequentially customListBalloon-customProfileBalloon-customTagBalloon customListBalloon.showAlignBottom(anchorView)"><pre>customListBalloon .relayShowAlignBottom(customProfileBalloon, circleImageView) <span class="pl-c"><span class="pl-c">//</span> relay to customListBalloon</span> .relayShowAlignTop(customTagBalloon, bottomNavigationView, <span class="pl-c1">130</span>, <span class="pl-c1">0</span>) <span class="pl-c"><span class="pl-c">//</span> relay to customProfileBalloon</span> <span class="pl-c"><span class="pl-c">//</span> show sequentially customListBalloon-customProfileBalloon-customTagBalloon</span> customListBalloon.showAlignBottom(anchorView)</pre></div> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="coroutineScope.launch { customListBalloon.awaitAlignBottom(anchorView) customProfileBalloon.awaitAlignBottom(circleImageView, 0, 0) customTagBalloon.awaitAlignTop(bottomNavigationView, 130, 0) }"><pre>coroutineScope.launch { customListBalloon.awaitAlignBottom(anchorView) customProfileBalloon.awaitAlignBottom(circleImageView, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>) customTagBalloon.awaitAlignTop(bottomNavigationView, <span class="pl-c1">130</span>, <span class="pl-c1">0</span>) }</pre></div> <blockquote> <p dir="auto">Note: The <code>relayShow__</code> and <code>await__</code> methods overwrite the <code>setOnDismissListener</code> internally, so you can't use the <code>setOnDismissListener</code> at the same time.</p> </blockquote> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Parallel Displaying</h4><a id="user-content-parallel-displaying" class="anchor" aria-label="Permalink: Parallel Displaying" href="#parallel-displaying"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can show multiple balloons at the same with sequential behaviour.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="lifecycleScope.launch { // shows balloons at the same time awaitBalloons { // dismissing of any balloon dismisses all of them. Default behaviour dismissSequentially = false textView.alignTop(balloonAlignTop) textView.alignStart(balloonAlignStart) textView.alignEnd(balloonAlignEnd) textView.alignBottom(balloonAlignBottom) } // shows another group after dismissing the previous group. awaitBalloons { dismissSequentially = true // balloons dismissed individually imageView.alignTop(balloonAlignTop) imageView.alignStart(balloonAlignStart) imageView.alignEnd(balloonAlignEnd) imageView.alignBottom(balloonAlignBottom) } }"><pre>lifecycleScope.launch { <span class="pl-c"><span class="pl-c">//</span> shows balloons at the same time</span> awaitBalloons { <span class="pl-c"><span class="pl-c">//</span> dismissing of any balloon dismisses all of them. Default behaviour</span> dismissSequentially <span class="pl-k">=</span> <span class="pl-c1">false</span> textView.alignTop(balloonAlignTop) textView.alignStart(balloonAlignStart) textView.alignEnd(balloonAlignEnd) textView.alignBottom(balloonAlignBottom) } <span class="pl-c"><span class="pl-c">//</span> shows another group after dismissing the previous group.</span> awaitBalloons { dismissSequentially <span class="pl-k">=</span> <span class="pl-c1">true</span> <span class="pl-c"><span class="pl-c">//</span> balloons dismissed individually</span> imageView.alignTop(balloonAlignTop) imageView.alignStart(balloonAlignStart) imageView.alignEnd(balloonAlignEnd) imageView.alignBottom(balloonAlignBottom) } }</pre></div> <blockquote> <p dir="auto">Note: The methods inside <code>awaitBalloons</code> are <code>atCenter</code>, <code>asDropdown</code>, <code>alignTop</code> and etc. Don't confuse with <code>show__</code> and <code>await__</code> methods.</p> </blockquote> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Width and height</h3><a id="user-content-width-and-height" class="anchor" aria-label="Permalink: Width and height" href="#width-and-height"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can adjust specific width and height sizes of Balloon with the below builder methods. If we don't set any specific sizes of the width and height of the Balloon, the size of the Balloon will be decided by the content.</p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Specific size</h4><a id="user-content-specific-size" class="anchor" aria-label="Permalink: Specific size" href="#specific-size"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can set specific sizes of the Balloon regardless size of the contents.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="balloon.setWidth(220) // sets 220dp width size. balloon.setHeight(160) // sets 160dp height size."><pre>balloon.setWidth(<span class="pl-c1">220</span>) <span class="pl-c"><span class="pl-c">//</span> sets 220dp width size.</span> balloon.setHeight(<span class="pl-c1">160</span>) <span class="pl-c"><span class="pl-c">//</span> sets 160dp height size.</span></pre></div> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Wrap Content Sizes</h4><a id="user-content-wrap-content-sizes" class="anchor" aria-label="Permalink: Wrap Content Sizes" href="#wrap-content-sizes"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can set dynamic sizes of Balloon, which depends on sizes of the internal content.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="balloon.setWidth(BalloonSizeSpec.WRAP) // sets width size depending on the content's size. balloon.setHeight(BalloonSizeSpec.WRAP) // sets height size depending on the content's size."><pre>balloon.setWidth(<span class="pl-en">BalloonSizeSpec</span>.<span class="pl-en">WRAP</span>) <span class="pl-c"><span class="pl-c">//</span> sets width size depending on the content's size.</span> balloon.setHeight(<span class="pl-en">BalloonSizeSpec</span>.<span class="pl-en">WRAP</span>) <span class="pl-c"><span class="pl-c">//</span> sets height size depending on the content's size.</span></pre></div> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Depending on Screen Size</h4><a id="user-content-depending-on-screen-size" class="anchor" aria-label="Permalink: Depending on Screen Size" href="#depending-on-screen-size"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Also, we can set the width size depending on the ratio of the screen's size (horizontal).</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="balloon.setWidthRatio(0.5f) // sets width as 50% of the horizontal screen's size."><pre>balloon.setWidthRatio(<span class="pl-c1">0.5f</span>) <span class="pl-c"><span class="pl-c">//</span> sets width as 50% of the horizontal screen's size.</span></pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Padding</h3><a id="user-content-padding" class="anchor" aria-label="Permalink: Padding" href="#padding"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Balloon wraps contents. We can adjust the content size of the Balloon by adding paddings on the content like.<br></p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="balloon.setPadding(6) // sets 6dp padding to all directions (left-top-right-bottom) balloon.setPaddingLeft(8) // sets 8dp padding to content's left. balloon.setPaddingTop(12) // sets 12dp padding to content's top."><pre>balloon.setPadding(<span class="pl-c1">6</span>) <span class="pl-c"><span class="pl-c">//</span> sets 6dp padding to all directions (left-top-right-bottom)</span> balloon.setPaddingLeft(<span class="pl-c1">8</span>) <span class="pl-c"><span class="pl-c">//</span> sets 8dp padding to content's left.</span> balloon.setPaddingTop(<span class="pl-c1">12</span>) <span class="pl-c"><span class="pl-c">//</span> sets 12dp padding to content's top.</span></pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Margin</h3><a id="user-content-margin" class="anchor" aria-label="Permalink: Margin" href="#margin"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If the location of the balloon according to the anchor would be located at the boundaries on the screen,<br> the balloon will be stick to the end of the screen. In this case, we can give horizontal margins to the balloon.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".setMargin(12) // sets the margin on the balloon all directions. .setMarginLeft(14) // sets the left margin on the balloon. .setMarginRight(14) // sets the right margin on the balloon."><pre>.setMargin(<span class="pl-c1">12</span>) <span class="pl-c"><span class="pl-c">//</span> sets the margin on the balloon all directions.</span> .setMarginLeft(<span class="pl-c1">14</span>) <span class="pl-c"><span class="pl-c">//</span> sets the left margin on the balloon.</span> .setMarginRight(<span class="pl-c1">14</span>) <span class="pl-c"><span class="pl-c">//</span> sets the right margin on the balloon.</span></pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Auto-sized text</h3><a id="user-content-auto-sized-text" class="anchor" aria-label="Permalink: Auto-sized text" href="#auto-sized-text"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You can set auto-sized text based on the balloon's window size, specifying minimum and maximum text sizes, as shown in the example below:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".setTextSize(15f) .setMinAutoSizeTextSize(14f) .setMaxAutoSizeTextSize(18f) .setEnableAutoSized(true)"><pre>.setTextSize(<span class="pl-c1">15f</span>) .setMinAutoSizeTextSize(<span class="pl-c1">14f</span>) .setMaxAutoSizeTextSize(<span class="pl-c1">18f</span>) .setEnableAutoSized(<span class="pl-c1">true</span>)</pre></div> <blockquote> <p dir="auto">Note: Ensure that the maximum auto text size is set to a value higher than the minimum auto text size.</p> </blockquote> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Arrow Composition</h3><a id="user-content-arrow-composition" class="anchor" aria-label="Permalink: Arrow Composition" href="#arrow-composition"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can customize the arrow on the Balloon with various methods. For more details, check out the <a href="https://skydoves.github.io/libraries/balloon/html/balloon/com.skydoves.balloon/-balloon/-builder/index.html" rel="nofollow">Balloon.Builder</a>.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".setIsVisibleArrow(true) // sets the visibility of the arrow. .setArrowSize(10) // sets the arrow size. .setArrowSize(BalloonSizeSpec.WRAP) // sets arrow size depending on the original resources' size. .setArrowPosition(0.8f) // sets the arrow position using the popup size's ratio (0 ~ 1.0) .setArrowOrientation(ArrowOrientation.TOP) // sets the arrow orientation. top, bottom, left, right .setArrowDrawable(ContextCompat.getDrawable(context, R.drawable.arrow)) // sets the arrow drawable."><pre>.setIsVisibleArrow(<span class="pl-c1">true</span>) <span class="pl-c"><span class="pl-c">//</span> sets the visibility of the arrow.</span> .setArrowSize(<span class="pl-c1">10</span>) <span class="pl-c"><span class="pl-c">//</span> sets the arrow size.</span> .setArrowSize(<span class="pl-en">BalloonSizeSpec</span>.<span class="pl-en">WRAP</span>) <span class="pl-c"><span class="pl-c">//</span> sets arrow size depending on the original resources' size.</span> .setArrowPosition(<span class="pl-c1">0.8f</span>) <span class="pl-c"><span class="pl-c">//</span> sets the arrow position using the popup size's ratio (0 ~ 1.0)</span> .setArrowOrientation(<span class="pl-en">ArrowOrientation</span>.<span class="pl-en">TOP</span>) <span class="pl-c"><span class="pl-c">//</span> sets the arrow orientation. top, bottom, left, right</span> .setArrowDrawable(<span class="pl-en">ContextCompat</span>.getDrawable(context, <span class="pl-en">R</span>.drawable.arrow)) <span class="pl-c"><span class="pl-c">//</span> sets the arrow drawable.</span></pre></div> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">ArrowPositionRules</h4><a id="user-content-arrowpositionrules" class="anchor" aria-label="Permalink: ArrowPositionRules" href="#arrowpositionrules"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can decide the position of the arrow depending on the aligning rules with the <code>ArrowPositionRules</code>.<br></p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Align the arrow position depending on an anchor. // if `arrowPosition` is 0.5, the arrow will be located in the middle of an anchor. .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR) // Align the arrow position depending on the balloon popup body. // if `arrowPosition` is 0.5, he arrow will be located in the middle of the tooltip. .setArrowPositionRules(ArrowPositionRules.ALIGN_BALLOON) // default"><pre><span class="pl-c"><span class="pl-c">//</span> Align the arrow position depending on an anchor.</span> <span class="pl-c"><span class="pl-c">//</span> if `arrowPosition` is 0.5, the arrow will be located in the middle of an anchor.</span> .setArrowPositionRules(<span class="pl-en">ArrowPositionRules</span>.<span class="pl-en">ALIGN_ANCHOR</span>) <span class="pl-c"><span class="pl-c">//</span> Align the arrow position depending on the balloon popup body.</span> <span class="pl-c"><span class="pl-c">//</span> if `arrowPosition` is 0.5, he arrow will be located in the middle of the tooltip.</span> .setArrowPositionRules(<span class="pl-en">ArrowPositionRules</span>.<span class="pl-en">ALIGN_BALLOON</span>) <span class="pl-c"><span class="pl-c">//</span> default</span></pre></div> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">ArrowOrientationRules</h4><a id="user-content-arroworientationrules" class="anchor" aria-label="Permalink: ArrowOrientationRules" href="#arroworientationrules"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can decide the orientation of the arrow depending on the aligning rules with the <code>ArrowOrientationRules</code>.<br></p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Align depending on the position of an anchor. // For example, `arrowOrientation` is ArrowOrientation.TOP and // we want to show up the balloon under an anchor using the `Balloon.showAlignBottom`. // However, if there is not enough free space to place the tooltip at the bottom of the anchor, // tooltips will be placed top of the anchor and the orientation of the arrow will be `ArrowOrientation.BOTTOM`. .setArrowOrientationRules(ArrowOrientationRules.ALIGN_ANCHOR) // default // Align to fixed ArrowOrientation value. .setArrowOrientationRules(ArrowOrientationRules.ALIGN_FIXED)"><pre><span class="pl-c"><span class="pl-c">//</span> Align depending on the position of an anchor.</span> <span class="pl-c"><span class="pl-c">//</span> For example, `arrowOrientation` is ArrowOrientation.TOP and</span> <span class="pl-c"><span class="pl-c">//</span> we want to show up the balloon under an anchor using the `Balloon.showAlignBottom`.</span> <span class="pl-c"><span class="pl-c">//</span> However, if there is not enough free space to place the tooltip at the bottom of the anchor,</span> <span class="pl-c"><span class="pl-c">//</span> tooltips will be placed top of the anchor and the orientation of the arrow will be `ArrowOrientation.BOTTOM`.</span> .setArrowOrientationRules(<span class="pl-en">ArrowOrientationRules</span>.<span class="pl-en">ALIGN_ANCHOR</span>) <span class="pl-c"><span class="pl-c">//</span> default</span> <span class="pl-c"><span class="pl-c">//</span> Align to fixed ArrowOrientation value.</span> .setArrowOrientationRules(<span class="pl-en">ArrowOrientationRules</span>.<span class="pl-en">ALIGN_FIXED</span>)</pre></div> <p dir="auto">Below previews are shows examples of <code>setArrowOrientation</code> and <code>setArrowPosition</code> methods. <br> The <code>setArrowPosition</code> measures the Balloon's size and sets the arrow's position with the ratio value.</p> <markdown-accessiblity-table><table> <thead> <tr> <th align="center">Orientation: BOTTOM<br> Position: 0.62<br> showAlignTop</th> <th align="center">Orientation: TOP<br> Position : 0.5<br> showAlignBottom</th> <th align="center">Orientation: START<br> Position: 0.5<br> showAlignStart</th> <th align="center">Orientation: END<br> Position: 0.5<br> showAlignEnd</th> </tr> </thead> <tbody> <tr> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/61320410-55120e80-a844-11e9-9af6-cae49b8897e7.gif"><img src="https://user-images.githubusercontent.com/24237865/61320410-55120e80-a844-11e9-9af6-cae49b8897e7.gif" align="center" width="100%" data-animated-image="" style="max-width: 100%;"></a></td> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/61320412-55120e80-a844-11e9-9ca9-81375707886e.gif"><img src="https://user-images.githubusercontent.com/24237865/61320412-55120e80-a844-11e9-9ca9-81375707886e.gif" align="center" width="100%" data-animated-image="" style="max-width: 100%;"></a></td> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/61320415-55aaa500-a844-11e9-874f-ca44be02aace.gif"><img src="https://user-images.githubusercontent.com/24237865/61320415-55aaa500-a844-11e9-874f-ca44be02aace.gif" align="center" width="100%" data-animated-image="" style="max-width: 100%;"></a></td> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/61320416-55aaa500-a844-11e9-9aa1-53e409ca63fb.gif"><img src="https://user-images.githubusercontent.com/24237865/61320416-55aaa500-a844-11e9-9aa1-53e409ca63fb.gif" align="center" width="100%" data-animated-image="" style="max-width: 100%;"></a></td> </tr> </tbody> </table></markdown-accessiblity-table> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Text Composition</h3><a id="user-content-text-composition" class="anchor" aria-label="Permalink: Text Composition" href="#text-composition"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can customize the text on the Balloon.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".setText("You can edit your profile now!") .setTextSize(15f) .setTextTypeface(Typeface.BOLD) .setTextColorResource(R.color.colorAccent)) .setTextGravity(Gravity.START)"><pre>.setText(<span class="pl-s"><span class="pl-pds">"</span>You can edit your profile now!<span class="pl-pds">"</span></span>) .setTextSize(<span class="pl-c1">15f</span>) .setTextTypeface(<span class="pl-en">Typeface</span>.<span class="pl-en">BOLD</span>) .setTextColorResource(<span class="pl-en">R</span>.color.colorAccent)) .setTextGravity(<span class="pl-en">Gravity</span>.<span class="pl-en">START</span>)</pre></div> <p dir="auto">If your text includes HTML tags, you can render the text by enabling HTML option with <code>setTextIsHtml</code> method.</p> <div class="highlight highlight-source-java notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".setTextIsHtml(true)"><pre>.<span class="pl-en">setTextIsHtml</span>(<span class="pl-c1">true</span>)</pre></div> <p dir="auto">This method will parse the text with the <code>Html.fromHtml(text)</code> internally.</p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">TextForm</h3><a id="user-content-textform" class="anchor" aria-label="Permalink: TextForm" href="#textform"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><code>TextForm</code> has some attributes for <code>TextView</code> to customize the text of the Balloon. You can create the <code>TextForm</code> instance and reuse it on multiple Balloons.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="val textForm = TextForm.Builder(context) .setText("Edit you profile here!") .setTextColorResource(R.color.white_87) .setTextSize(14f) .setTextTypeface(Typeface.BOLD) .build() val balloon = Balloon.Builder(context) .setTextForm(textForm) ..."><pre><span class="pl-k">val</span> textForm <span class="pl-k">=</span> <span class="pl-en">TextForm</span>.<span class="pl-en">Builder</span>(context) .setText(<span class="pl-s"><span class="pl-pds">"</span>Edit you profile here!<span class="pl-pds">"</span></span>) .setTextColorResource(<span class="pl-en">R</span>.color.white_87) .setTextSize(<span class="pl-c1">14f</span>) .setTextTypeface(<span class="pl-en">Typeface</span>.<span class="pl-en">BOLD</span>) .build() <span class="pl-k">val</span> balloon <span class="pl-k">=</span> <span class="pl-en">Balloon</span>.<span class="pl-en">Builder</span>(context) .setTextForm(textForm) <span class="pl-k">..</span>.</pre></div> <details> <summary>Create TextForm with Kotlin DSL</summary> <p dir="auto">You can create an instance of the <code>TextForm</code> with Kotlin DSL as the example below:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="val textForm = textForm(context) { setText("Edit you profile here!") setTextColorResource(R.color.white_87) setTextSize(14f) setTextTypeface(Typeface.BOLD) } val balloon = Balloon.Builder(context) .setTextForm(textForm) ..."><pre><span class="pl-k">val</span> textForm <span class="pl-k">=</span> textForm(context) { setText(<span class="pl-s"><span class="pl-pds">"</span>Edit you profile here!<span class="pl-pds">"</span></span>) setTextColorResource(<span class="pl-en">R</span>.color.white_87) setTextSize(<span class="pl-c1">14f</span>) setTextTypeface(<span class="pl-en">Typeface</span>.<span class="pl-en">BOLD</span>) } <span class="pl-k">val</span> balloon <span class="pl-k">=</span> <span class="pl-en">Balloon</span>.<span class="pl-en">Builder</span>(context) .setTextForm(textForm) <span class="pl-k">..</span>.</pre></div> </details> <details> <summary>Create TextForm with Java</summary> <p dir="auto">You can create an instance of the <code>TextForm</code> with Java as the example below:</p> <div class="highlight highlight-source-java notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="TextForm textForm = new TextForm.Builder(context) .setText("Edit you profile here!") .setTextColorResource(R.color.white_87) .setTextSize(14f) .setTextTypeface(Typeface.BOLD) .build(); Balloon balloon = new Balloon.Builder(context) .setTextForm(textForm) ..."><pre><span class="pl-smi">TextForm</span> <span class="pl-s1">textForm</span> = <span class="pl-k">new</span> <span class="pl-smi">TextForm</span>.<span class="pl-smi">Builder</span>(<span class="pl-s1">context</span>) .<span class="pl-en">setText</span>(<span class="pl-s">"Edit you profile here!"</span>) .<span class="pl-en">setTextColorResource</span>(<span class="pl-smi">R</span>.<span class="pl-s1">color</span>.<span class="pl-s1">white_87</span>) .<span class="pl-en">setTextSize</span>(<span class="pl-c1">14f</span>) .<span class="pl-en">setTextTypeface</span>(<span class="pl-smi">Typeface</span>.<span class="pl-c1">BOLD</span>) .<span class="pl-en">build</span>(); <span class="pl-smi">Balloon</span> <span class="pl-s1">balloon</span> = <span class="pl-k">new</span> <span class="pl-smi">Balloon</span>.<span class="pl-smi">Builder</span>(<span class="pl-s1">context</span>) .<span class="pl-en">setTextForm</span>(<span class="pl-s1">textForm</span>) ...</pre></div> </details> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Icon Composition</h3><a id="user-content-icon-composition" class="anchor" aria-label="Permalink: Icon Composition" href="#icon-composition"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can customize the icon on the balloon.</p> <div class="highlight highlight-source-java notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".setIconSpace(10) // sets right margin of the icon. .setIconSize(20) // sets size of the icon. .setIconDrawable(ContextCompat.getDrawable(context, R.drawable.ic_edit)) // sets a drawable resource."><pre>.<span class="pl-en">setIconSpace</span>(<span class="pl-c1">10</span>) <span class="pl-c">// sets right margin of the icon.</span> .<span class="pl-en">setIconSize</span>(<span class="pl-c1">20</span>) <span class="pl-c">// sets size of the icon.</span> .<span class="pl-en">setIconDrawable</span>(<span class="pl-smi">ContextCompat</span>.<span class="pl-en">getDrawable</span>(<span class="pl-s1">context</span>, <span class="pl-smi">R</span>.<span class="pl-s1">drawable</span>.<span class="pl-s1">ic_edit</span>)) <span class="pl-c">// sets a drawable resource.</span></pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">IconForm</h3><a id="user-content-iconform" class="anchor" aria-label="Permalink: IconForm" href="#iconform"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><code>IconForm</code> has some attributes for <code>ImageView</code> to customize the icon of the Balloon. You can create the <code>IconForm</code> instance and reuse it on multiple Balloons.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="val iconForm = IconForm.Builder(context) .setDrawable(ContextCompat.getDrawable(context, R.drawable.arrow)) .setIconColor(ContextCompat.getColor(context, R.color.skyblue)) .setIconSize(20) .setIconSize(12) .build() val balloon = Balloon.Builder(context) .setIconForm(iconForm) ..."><pre><span class="pl-k">val</span> iconForm <span class="pl-k">=</span> <span class="pl-en">IconForm</span>.<span class="pl-en">Builder</span>(context) .setDrawable(<span class="pl-en">ContextCompat</span>.getDrawable(context, <span class="pl-en">R</span>.drawable.arrow)) .setIconColor(<span class="pl-en">ContextCompat</span>.getColor(context, <span class="pl-en">R</span>.color.skyblue)) .setIconSize(<span class="pl-c1">20</span>) .setIconSize(<span class="pl-c1">12</span>) .build() <span class="pl-k">val</span> balloon <span class="pl-k">=</span> <span class="pl-en">Balloon</span>.<span class="pl-en">Builder</span>(context) .setIconForm(iconForm) <span class="pl-k">..</span>.</pre></div> <details> <summary>Create IconForm with Kotlin DSL</summary> <p dir="auto">You can create an instance of the <code>IconForm</code> with Kotlin DSL as the example below:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="val iconForm = iconForm(context) { setDrawable(ContextCompat.getDrawable(context, R.drawable.arrow)) setIconColor(ContextCompat.getColor(context, R.color.skyblue)) setIconSize(20) setIconSize(12) } val balloon = Balloon.Builder(context) .setIconForm(iconForm) ..."><pre><span class="pl-k">val</span> iconForm <span class="pl-k">=</span> iconForm(context) { setDrawable(<span class="pl-en">ContextCompat</span>.getDrawable(context, <span class="pl-en">R</span>.drawable.arrow)) setIconColor(<span class="pl-en">ContextCompat</span>.getColor(context, <span class="pl-en">R</span>.color.skyblue)) setIconSize(<span class="pl-c1">20</span>) setIconSize(<span class="pl-c1">12</span>) } <span class="pl-k">val</span> balloon <span class="pl-k">=</span> <span class="pl-en">Balloon</span>.<span class="pl-en">Builder</span>(context) .setIconForm(iconForm) <span class="pl-k">..</span>.</pre></div> </details> <details> <summary>Create IconForm with Java</summary> <p dir="auto">You can create an instance of the <code>IconForm</code> with Java as the example below:</p> <div class="highlight highlight-source-java notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="IconForm iconForm = new IconForm.Builder(context) .setDrawable(ContextCompat.getDrawable(context, R.drawable.arrow)) .setIconColor(ContextCompat.getColor(context, R.color.skyblue)) .setIconSize(20) .setIconSize(12) .build(); Balloon balloon = new Balloon.Builder(context) .setIconForm(iconForm) ..."><pre><span class="pl-smi">IconForm</span> <span class="pl-s1">iconForm</span> = <span class="pl-k">new</span> <span class="pl-smi">IconForm</span>.<span class="pl-smi">Builder</span>(<span class="pl-s1">context</span>) .<span class="pl-en">setDrawable</span>(<span class="pl-smi">ContextCompat</span>.<span class="pl-en">getDrawable</span>(<span class="pl-s1">context</span>, <span class="pl-smi">R</span>.<span class="pl-s1">drawable</span>.<span class="pl-s1">arrow</span>)) .<span class="pl-en">setIconColor</span>(<span class="pl-smi">ContextCompat</span>.<span class="pl-en">getColor</span>(<span class="pl-s1">context</span>, <span class="pl-smi">R</span>.<span class="pl-s1">color</span>.<span class="pl-s1">skyblue</span>)) .<span class="pl-en">setIconSize</span>(<span class="pl-c1">20</span>) .<span class="pl-en">setIconSize</span>(<span class="pl-c1">12</span>) .<span class="pl-en">build</span>(); <span class="pl-smi">Balloon</span> <span class="pl-s1">balloon</span> = <span class="pl-k">new</span> <span class="pl-smi">Balloon</span>.<span class="pl-smi">Builder</span>(<span class="pl-s1">context</span>) .<span class="pl-en">setIconForm</span>(<span class="pl-s1">iconForm</span>) ...</pre></div> </details> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">OnBalloonClickListener, OnBalloonDismissListener, OnBalloonOutsideTouchListener</h3><a id="user-content-onballoonclicklistener-onballoondismisslistener-onballoonoutsidetouchlistener" class="anchor" aria-label="Permalink: OnBalloonClickListener, OnBalloonDismissListener, OnBalloonOutsideTouchListener" href="#onballoonclicklistener-onballoondismisslistener-onballoonoutsidetouchlistener"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can listen to if the Balloon is clicked, dismissed, and touched outside with the below listeners.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".setOnBalloonClickListener { Toast.makeText(context, "clicked", Toast.LENGTH_SHORT).show() } .setOnBalloonDismissListener { Toast.makeText(context, "dismissed", Toast.LENGTH_SHORT).show() } .setOnBalloonOutsideTouchListener { Toast.makeText(context, "touched outside", Toast.LENGTH_SHORT).show() }"><pre>.setOnBalloonClickListener { <span class="pl-en">Toast</span>.makeText(context, <span class="pl-s"><span class="pl-pds">"</span>clicked<span class="pl-pds">"</span></span>, <span class="pl-en">Toast</span>.<span class="pl-en">LENGTH_SHORT</span>).show() } .setOnBalloonDismissListener { <span class="pl-en">Toast</span>.makeText(context, <span class="pl-s"><span class="pl-pds">"</span>dismissed<span class="pl-pds">"</span></span>, <span class="pl-en">Toast</span>.<span class="pl-en">LENGTH_SHORT</span>).show() } .setOnBalloonOutsideTouchListener { <span class="pl-en">Toast</span>.makeText(context, <span class="pl-s"><span class="pl-pds">"</span>touched outside<span class="pl-pds">"</span></span>, <span class="pl-en">Toast</span>.<span class="pl-en">LENGTH_SHORT</span>).show() }</pre></div> <details> <summary>Set Listeners with Java</summary> <p dir="auto">You can set listeners with Java as the example below:</p> <div class="highlight highlight-source-java notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="balloon.setOnBalloonClickListener(new OnBalloonClickListener() { @Override public void onBalloonClick() { // doSomething; } }); balloon.setOnBalloonDismissListener(new OnBalloonDismissListener() { @Override public void onBalloonDismiss() { // doSomething; } }); balloon.setOnBalloonOutsideTouchListener(new OnBalloonOutsideTouchListener() { @Override public void onBalloonOutsideTouch() { // doSomething; } });"><pre><span class="pl-s1">balloon</span>.<span class="pl-en">setOnBalloonClickListener</span>(<span class="pl-k">new</span> <span class="pl-smi">OnBalloonClickListener</span>() { <span class="pl-c1">@</span><span class="pl-c1">Override</span> <span class="pl-k">public</span> <span class="pl-smi">void</span> <span class="pl-en">onBalloonClick</span>() { <span class="pl-c">// doSomething;</span> } }); <span class="pl-s1">balloon</span>.<span class="pl-en">setOnBalloonDismissListener</span>(<span class="pl-k">new</span> <span class="pl-smi">OnBalloonDismissListener</span>() { <span class="pl-c1">@</span><span class="pl-c1">Override</span> <span class="pl-k">public</span> <span class="pl-smi">void</span> <span class="pl-en">onBalloonDismiss</span>() { <span class="pl-c">// doSomething;</span> } }); <span class="pl-s1">balloon</span>.<span class="pl-en">setOnBalloonOutsideTouchListener</span>(<span class="pl-k">new</span> <span class="pl-smi">OnBalloonOutsideTouchListener</span>() { <span class="pl-c1">@</span><span class="pl-c1">Override</span> <span class="pl-k">public</span> <span class="pl-smi">void</span> <span class="pl-en">onBalloonOutsideTouch</span>() { <span class="pl-c">// doSomething;</span> } });</pre></div> </details> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Custom Balloon Layout</h3><a id="user-content-custom-balloon-layout" class="anchor" aria-label="Permalink: Custom Balloon Layout" href="#custom-balloon-layout"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You can fully customize the layout of the Balloon with the method below:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".setLayout(R.layout.my_balloon_layout)"><pre>.setLayout(<span class="pl-en">R</span>.layout.my_balloon_layout)</pre></div> <p dir="auto">You can build the Balloon with your own layout as the following example:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/61226019-aba41d80-a75c-11e9-9362-52e4742244b5.gif"><img src="https://user-images.githubusercontent.com/24237865/61226019-aba41d80-a75c-11e9-9362-52e4742244b5.gif" align="right" width="310px" data-animated-image="" style="max-width: 100%;"></a></p> <p dir="auto">First, create your XML layout file like <code>layout_custom_profile</code> on your taste and set it on the with <code>setLayout</code> method.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="val balloon = Balloon.Builder(context) .setLayout(R.layout.layout_custom_profile) .setArrowSize(10) .setArrowOrientation(ArrowOrientation.TOP) .setArrowPosition(0.5f) .setWidthRatio(0.55f) .setHeight(250) .setCornerRadius(4f) .setBackgroundColor(ContextCompat.getColor(this, R.color.black)) .setBalloonAnimation(BalloonAnimation.CIRCULAR) .setLifecycleOwner(lifecycleOwner) .build()"><pre><span class="pl-k">val</span> balloon <span class="pl-k">=</span> <span class="pl-en">Balloon</span>.<span class="pl-en">Builder</span>(context) .setLayout(<span class="pl-en">R</span>.layout.layout_custom_profile) .setArrowSize(<span class="pl-c1">10</span>) .setArrowOrientation(<span class="pl-en">ArrowOrientation</span>.<span class="pl-en">TOP</span>) .setArrowPosition(<span class="pl-c1">0.5f</span>) .setWidthRatio(<span class="pl-c1">0.55f</span>) .setHeight(<span class="pl-c1">250</span>) .setCornerRadius(<span class="pl-c1">4f</span>) .setBackgroundColor(<span class="pl-en">ContextCompat</span>.getColor(<span class="pl-c1">this</span>, <span class="pl-en">R</span>.color.black)) .setBalloonAnimation(<span class="pl-en">BalloonAnimation</span>.<span class="pl-en">CIRCULAR</span>) .setLifecycleOwner(lifecycleOwner) .build()</pre></div> <p dir="auto">That's all. If you need to get Views or need some interactions, you can get your custom layout with the <code>getContentView()</code> method from your instance of the Balloon.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="val button: Button = balloon.getContentView().findViewById(R.id.button_edit) button.setOnClickListener { Toast.makeText(context, "Edit", Toast.LENGTH_SHORT).show() balloon.dismiss() }"><pre><span class="pl-k">val</span> button<span class="pl-k">:</span> <span class="pl-en">Button</span> <span class="pl-k">=</span> balloon.getContentView().findViewById(<span class="pl-en">R</span>.id.button_edit) button.setOnClickListener { <span class="pl-en">Toast</span>.makeText(context, <span class="pl-s"><span class="pl-pds">"</span>Edit<span class="pl-pds">"</span></span>, <span class="pl-en">Toast</span>.<span class="pl-en">LENGTH_SHORT</span>).show() balloon.dismiss() }</pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Persistence</h3><a id="user-content-persistence" class="anchor" aria-label="Permalink: Persistence" href="#persistence"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If you want to show up the Balloon only once or a specific number of times, you can implement it as the following example:<br></p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="balloon.setPreferenceName("MyBalloon") // sets preference name of the Balloon. balloon.setShowCounts(3) // show-up three of times the popup. the default value is 1. balloon.runIfReachedShowCounts { // do something after the preference showing counts is reached the goal. }"><pre>balloon.setPreferenceName(<span class="pl-s"><span class="pl-pds">"</span>MyBalloon<span class="pl-pds">"</span></span>) <span class="pl-c"><span class="pl-c">//</span> sets preference name of the Balloon.</span> balloon.setShowCounts(<span class="pl-c1">3</span>) <span class="pl-c"><span class="pl-c">//</span> show-up three of times the popup. the default value is 1.</span> balloon.runIfReachedShowCounts { <span class="pl-c"><span class="pl-c">//</span> do something after the preference showing counts is reached the goal.</span> }</pre></div> <p dir="auto">Also, you can clear all persisted preferences with the method below:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="balloon.clearAllPreferences()"><pre>balloon.clearAllPreferences()</pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Avoid Memory leak</h3><a id="user-content-avoid-memory-leak" class="anchor" aria-label="Permalink: Avoid Memory leak" href="#avoid-memory-leak"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Dialog, PopupWindow etc, can have memory leak issues if not dismissed before the activity or fragment is destroyed.<br> But Lifecycles are now integrated with the Support Library since Architecture Components 1.0 Stable was released.<br> So we can solve the memory leak issue very easily like the below.<br></p> <p dir="auto">Just use <code>setLifecycleOwner</code> method. Then the <code>dismiss()</code> method will be called automatically before your activity or fragment would be destroyed.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".setLifecycleOwner(lifecycleOwner)"><pre>.setLifecycleOwner(lifecycleOwner)</pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Lazy initialization</h3><a id="user-content-lazy-initialization" class="anchor" aria-label="Permalink: Lazy initialization" href="#lazy-initialization"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You can initialize a property of the Balloon lazily with the <code>balloon()</code> extension and <code>Balloon.Factory</code> abstract class.<br> The <code>balloon()</code> extension keyword can be used on your <code>Activity</code>, <code>Fragment</code>, and <code>View</code>.</p> <p dir="auto"><strong>Before</strong><br> <code>CustomActivity.kt</code></p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class CustomActivity : AppCompatActivity() { private val profileBalloon by lazy { BalloonUtils.getProfileBalloon(context = this, lifecycleOwner = this) } // ... }"><pre><span class="pl-k">class</span> <span class="pl-en">CustomActivity</span> : <span class="pl-en">AppCompatActivity</span>() { <span class="pl-k">private</span> <span class="pl-k">val</span> profileBalloon by lazy { <span class="pl-en">BalloonUtils</span>.getProfileBalloon(context <span class="pl-k">=</span> <span class="pl-c1">this</span>, lifecycleOwner <span class="pl-k">=</span> <span class="pl-c1">this</span>) } <span class="pl-c"><span class="pl-c">//</span> ...</span> }</pre></div> <p dir="auto"><strong>After</strong><br> <code>CustomActivity.kt</code></p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class CustomActivity : AppCompatActivity() { private val profileBalloon by balloon<ProfileBalloonFactory>() // ... }"><pre><span class="pl-k">class</span> <span class="pl-en">CustomActivity</span> : <span class="pl-en">AppCompatActivity</span>() { <span class="pl-k">private</span> <span class="pl-k">val</span> profileBalloon by balloon<<span class="pl-en">ProfileBalloonFactory</span>>() <span class="pl-c"><span class="pl-c">//</span> ...</span> }</pre></div> <p dir="auto">We should create a class which extends <code>Balloon.Factory</code>.<br> An implementation class of the factory must have a default(non-argument) constructor. <br><br> <code>ProfileBalloonFactory.kt</code></p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class ProfileBalloonFactory : Balloon.Factory() { override fun create(context: Context, lifecycle: LifecycleOwner): Balloon { return createBalloon(context) { setLayout(R.layout.layout_custom_profile) setArrowSize(10) setArrowOrientation(ArrowOrientation.TOP) setArrowPosition(0.5f) setWidthRatio(0.55f) setHeight(250) setCornerRadius(4f) setBackgroundColor(ContextCompat.getColor(context, R.color.background900)) setBalloonAnimation(BalloonAnimation.CIRCULAR) setLifecycleOwner(lifecycle) } } }"><pre><span class="pl-k">class</span> <span class="pl-en">ProfileBalloonFactory</span> : <span class="pl-en">Balloon</span>.<span class="pl-en">Factory</span>() { <span class="pl-k">override</span> <span class="pl-k">fun</span> <span class="pl-en">create</span>(<span class="pl-smi">context</span><span class="pl-k">:</span> <span class="pl-en">Context</span>, <span class="pl-smi">lifecycle</span><span class="pl-k">:</span> <span class="pl-en">LifecycleOwner</span>): <span class="pl-en">Balloon</span> { <span class="pl-k">return</span> createBalloon(context) { setLayout(<span class="pl-en">R</span>.layout.layout_custom_profile) setArrowSize(<span class="pl-c1">10</span>) setArrowOrientation(<span class="pl-en">ArrowOrientation</span>.<span class="pl-en">TOP</span>) setArrowPosition(<span class="pl-c1">0.5f</span>) setWidthRatio(<span class="pl-c1">0.55f</span>) setHeight(<span class="pl-c1">250</span>) setCornerRadius(<span class="pl-c1">4f</span>) setBackgroundColor(<span class="pl-en">ContextCompat</span>.getColor(context, <span class="pl-en">R</span>.color.background900)) setBalloonAnimation(<span class="pl-en">BalloonAnimation</span>.<span class="pl-en">CIRCULAR</span>) setLifecycleOwner(lifecycle) } } }</pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">BalloonOverlay</h3><a id="user-content-balloonoverlay" class="anchor" aria-label="Permalink: BalloonOverlay" href="#balloonoverlay"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can show up an overlay over the whole screen except an anchor view.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="balloon.setIsVisibleOverlay(true) // sets the visibility of the overlay for highlighting an anchor. balloon.setOverlayColorResource(R.color.overlay) // background color of the overlay using a color resource. balloon.setOverlayPadding(6f) // sets a padding value of the overlay shape internally. balloon.setOverlayPaddingColorResource(R.color.colorPrimary) // sets color of the overlay padding using a color resource. balloon.setBalloonOverlayAnimation(BalloonOverlayAnimation.FADE) // default is fade. balloon.setDismissWhenOverlayClicked(false) // disable dismissing the balloon when the overlay is clicked."><pre>balloon.setIsVisibleOverlay(<span class="pl-c1">true</span>) <span class="pl-c"><span class="pl-c">//</span> sets the visibility of the overlay for highlighting an anchor.</span> balloon.setOverlayColorResource(<span class="pl-en">R</span>.color.overlay) <span class="pl-c"><span class="pl-c">//</span> background color of the overlay using a color resource.</span> balloon.setOverlayPadding(<span class="pl-c1">6f</span>) <span class="pl-c"><span class="pl-c">//</span> sets a padding value of the overlay shape internally.</span> balloon.setOverlayPaddingColorResource(<span class="pl-en">R</span>.color.colorPrimary) <span class="pl-c"><span class="pl-c">//</span> sets color of the overlay padding using a color resource.</span> balloon.setBalloonOverlayAnimation(<span class="pl-en">BalloonOverlayAnimation</span>.<span class="pl-en">FADE</span>) <span class="pl-c"><span class="pl-c">//</span> default is fade.</span> balloon.setDismissWhenOverlayClicked(<span class="pl-c1">false</span>) <span class="pl-c"><span class="pl-c">//</span> disable dismissing the balloon when the overlay is clicked.</span></pre></div> <p dir="auto">We can change the shape of the highlighting using the <code>.setOverlayShape</code> method.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="balloon.setOverlayShape(BalloonOverlayOval) // default shape balloon.setOverlayShape(BalloonOverlayRect) balloon.setOverlayShape(BalloonOverlayCircle(radius = 36f)) balloon.setOverlayShape(BalloonOverlayRoundRect(12f, 12f))"><pre>balloon.setOverlayShape(<span class="pl-en">BalloonOverlayOval</span>) <span class="pl-c"><span class="pl-c">//</span> default shape</span> balloon.setOverlayShape(<span class="pl-en">BalloonOverlayRect</span>) balloon.setOverlayShape(<span class="pl-en">BalloonOverlayCircle</span>(radius <span class="pl-k">=</span> <span class="pl-c1">36f</span>)) balloon.setOverlayShape(<span class="pl-en">BalloonOverlayRoundRect</span>(<span class="pl-c1">12f</span>, <span class="pl-c1">12f</span>))</pre></div> <markdown-accessiblity-table><table> <thead> <tr> <th align="center">OVAL</th> <th align="center">CIRCLE</th> <th align="center">RECT</th> <th align="center">ROUNDRECT</th> </tr> </thead> <tbody> <tr> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/96139366-c7870800-0f39-11eb-9542-e98eac7ef193.gif"><img src="https://user-images.githubusercontent.com/24237865/96139366-c7870800-0f39-11eb-9542-e98eac7ef193.gif" align="center" width="280px" data-animated-image="" style="max-width: 100%;"></a></td> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/96138448-c0abc580-0f38-11eb-92e6-daf2f8266a3e.gif"><img src="https://user-images.githubusercontent.com/24237865/96138448-c0abc580-0f38-11eb-92e6-daf2f8266a3e.gif" align="center" width="280px" data-animated-image="" style="max-width: 100%;"></a></td> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/96139358-c524ae00-0f39-11eb-82ff-90a4a734e076.gif"><img src="https://user-images.githubusercontent.com/24237865/96139358-c524ae00-0f39-11eb-82ff-90a4a734e076.gif" align="center" width="280px" data-animated-image="" style="max-width: 100%;"></a></td> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/96138463-c3a6b600-0f38-11eb-8a2d-57cf96c4190c.gif"><img src="https://user-images.githubusercontent.com/24237865/96138463-c3a6b600-0f38-11eb-8a2d-57cf96c4190c.gif" align="center" width="280px" data-animated-image="" style="max-width: 100%;"></a></td> </tr> </tbody> </table></markdown-accessiblity-table> <p dir="auto">Also, we can set the specific position of the overlay shape with the method below:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="balloon.setOverlayPosition(Point(x, y)) // sets a specific position of the overlay shape."><pre>balloon.setOverlayPosition(<span class="pl-en">Point</span>(x, y)) <span class="pl-c"><span class="pl-c">//</span> sets a specific position of the overlay shape.</span></pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">BalloonAnimation</h3><a id="user-content-balloonanimation" class="anchor" aria-label="Permalink: BalloonAnimation" href="#balloonanimation"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can implement popup animations while showing and dismissing.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="BalloonAnimation.NONE BalloonAnimation.FADE BalloonAnimation.OVERSHOOT BalloonAnimation.ELASTIC BalloonAnimation.CIRCULAR"><pre><span class="pl-en">BalloonAnimation</span>.<span class="pl-en">NONE</span> <span class="pl-en">BalloonAnimation</span>.<span class="pl-en">FADE</span> <span class="pl-en">BalloonAnimation</span>.<span class="pl-en">OVERSHOOT</span> <span class="pl-en">BalloonAnimation</span>.<span class="pl-en">ELASTIC</span> <span class="pl-en">BalloonAnimation</span>.<span class="pl-en">CIRCULAR</span></pre></div> <markdown-accessiblity-table><table> <thead> <tr> <th align="center">FADE</th> <th align="center">OVERSHOOT</th> <th align="center">ELASTIC</th> <th align="center">CIRCULAR</th> </tr> </thead> <tbody> <tr> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/74601168-6115c580-50de-11ea-817b-a334f33b6f96.gif"><img src="https://user-images.githubusercontent.com/24237865/74601168-6115c580-50de-11ea-817b-a334f33b6f96.gif" align="center" width="100%" data-animated-image="" style="max-width: 100%;"></a></td> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/74601171-6410b600-50de-11ea-9ba0-5634e11f148a.gif"><img src="https://user-images.githubusercontent.com/24237865/74601171-6410b600-50de-11ea-9ba0-5634e11f148a.gif" align="center" width="100%" data-animated-image="" style="max-width: 100%;"></a></td> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/74601170-63781f80-50de-11ea-8db4-93f1dd1291fc.gif"><img src="https://user-images.githubusercontent.com/24237865/74601170-63781f80-50de-11ea-8db4-93f1dd1291fc.gif" align="center" width="100%" data-animated-image="" style="max-width: 100%;"></a></td> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/74607359-b6bc9300-511b-11ea-978b-23bcc4399dce.gif"><img src="https://user-images.githubusercontent.com/24237865/74607359-b6bc9300-511b-11ea-978b-23bcc4399dce.gif" align="center" width="100%" data-animated-image="" style="max-width: 100%;"></a></td> </tr> </tbody> </table></markdown-accessiblity-table> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">BalloonHighlightAnimation</h3><a id="user-content-balloonhighlightanimation" class="anchor" aria-label="Permalink: BalloonHighlightAnimation" href="#balloonhighlightanimation"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">We can give a repeated dynamic animations to the Balloon while it's showing up. The animation would work differently by the position of the arrow.</p> <markdown-accessiblity-table><table> <thead> <tr> <th align="center">HEARTBEAT</th> <th align="center">SHAKE</th> <th align="center">BREATH</th> <th align="center">ROTATE</th> </tr> </thead> <tbody> <tr> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/135755074-6a9c87fc-55b2-460e-b34e-0b6808684a97.gif"><img src="https://user-images.githubusercontent.com/24237865/135755074-6a9c87fc-55b2-460e-b34e-0b6808684a97.gif" align="center" width="100%" data-animated-image="" style="max-width: 100%;"></a></td> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/135755077-02eeddbe-95fe-49ee-ad22-1f15879e84f1.gif"><img src="https://user-images.githubusercontent.com/24237865/135755077-02eeddbe-95fe-49ee-ad22-1f15879e84f1.gif" align="center" width="100%" data-animated-image="" style="max-width: 100%;"></a></td> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/135755079-29ed8cd8-92fe-4b2a-8671-b3522999c551.gif"><img src="https://user-images.githubusercontent.com/24237865/135755079-29ed8cd8-92fe-4b2a-8671-b3522999c551.gif" align="center" width="100%" data-animated-image="" style="max-width: 100%;"></a></td> <td align="center"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/135755080-36dc7c8b-063a-442b-bcbd-bc000e92f9ac.gif"><img src="https://user-images.githubusercontent.com/24237865/135755080-36dc7c8b-063a-442b-bcbd-bc000e92f9ac.gif" align="center" width="100%" data-animated-image="" style="max-width: 100%;"></a></td> </tr> </tbody> </table></markdown-accessiblity-table> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="BalloonHighlightAnimation.NONE BalloonHighlightAnimation.HEARTBEAT BalloonHighlightAnimation.SHAKE BalloonHighlightAnimation.BREATH BalloonHighlightAnimation.ROTATE .setBalloonHighlightAnimation(BalloonHighlightAnimation.SHAKE)"><pre><span class="pl-en">BalloonHighlightAnimation</span>.<span class="pl-en">NONE</span> <span class="pl-en">BalloonHighlightAnimation</span>.<span class="pl-en">HEARTBEAT</span> <span class="pl-en">BalloonHighlightAnimation</span>.<span class="pl-en">SHAKE</span> <span class="pl-en">BalloonHighlightAnimation</span>.<span class="pl-en">BREATH</span> <span class="pl-en">BalloonHighlightAnimation</span>.<span class="pl-en">ROTATE</span> .setBalloonHighlightAnimation(<span class="pl-en">BalloonHighlightAnimation</span>.<span class="pl-en">SHAKE</span>)</pre></div> <p dir="auto">We can implement the rotate animation like the example below:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".setBalloonHighlightAnimation(BalloonHighlightAnimation.ROTATE) .setBalloonRotationAnimation( BalloonRotateAnimation.Builder().setLoops(2).setSpeeds(2500).setTurns(INFINITE).build())"><pre>.setBalloonHighlightAnimation(<span class="pl-en">BalloonHighlightAnimation</span>.<span class="pl-en">ROTATE</span>) .setBalloonRotationAnimation( <span class="pl-en">BalloonRotateAnimation</span>.<span class="pl-en">Builder</span>().setLoops(<span class="pl-c1">2</span>).setSpeeds(<span class="pl-c1">2500</span>).setTurns(<span class="pl-en">INFINITE</span>).build())</pre></div> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Balloon builder methods</h2><a id="user-content-balloon-builder-methods" class="anchor" aria-label="Permalink: Balloon builder methods" href="#balloon-builder-methods"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">For more details, you can check out the documentations below:</p> <ul dir="auto"> <li><a href="https://skydoves.github.io/Balloon/balloon/com.skydoves.balloon/-balloon/index.html" rel="nofollow">Balloon documentations</a></li> <li><a href="https://skydoves.github.io/Balloon/balloon/com.skydoves.balloon/-balloon/-builder/index.html" rel="nofollow">Builder documentations</a></li> </ul> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24237865/210227682-cbc03479-8625-4213-b907-4f15217f91ba.png"><img align="right" width="130px" src="https://user-images.githubusercontent.com/24237865/210227682-cbc03479-8625-4213-b907-4f15217f91ba.png" style="max-width: 100%;"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Balloon in Jetpack Compose</h2><a id="user-content-balloon-in-jetpack-compose-1" class="anchor" aria-label="Permalink: Balloon in Jetpack Compose" href="#balloon-in-jetpack-compose-1"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Balloon allows you to display tooltips in Jetpack Compose easily.</p> <p dir="auto"><a href="https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22balloon%22" rel="nofollow"><img src="https://camo.githubusercontent.com/919434e291d5302987630dbf6339eabd3d1b487631afff35de260bd01531c0a1/68747470733a2f2f696d672e736869656c64732e696f2f6d6176656e2d63656e7472616c2f762f636f6d2e6769746875622e736b79646f7665732f62616c6c6f6f6e2e7376673f6c6162656c3d4d6176656e25323043656e7472616c" alt="Maven Central" data-canonical-src="https://img.shields.io/maven-central/v/com.github.skydoves/balloon.svg?label=Maven%20Central" style="max-width: 100%;"></a></p> <p dir="auto">Add the dependency below to your <strong>module</strong>'s <code>build.gradle</code> file:</p> <div class="highlight highlight-source-groovy-gradle notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="dependencies { implementation("com.github.skydoves:balloon-compose:$version") }"><pre><span class="pl-en">dependencies</span> { implementation(<span class="pl-s"><span class="pl-pds">"</span>com.github.skydoves:balloon-compose:<span class="pl-smi">$v<span class="pl-smi">ersion</span></span><span class="pl-pds">"</span></span>) }</pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Balloon Composable</h3><a id="user-content-balloon-composable" class="anchor" aria-label="Permalink: Balloon Composable" href="#balloon-composable"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You can create and display tooltips using the <code>Balloon</code> composable function along with the <code>rememberBalloonBuilder</code>, as demonstrated in the following example:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// create and remember a builder of Balloon. val builder = rememberBalloonBuilder { setArrowSize(10) setArrowPosition(0.5f) setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR) setWidth(BalloonSizeSpec.WRAP) setHeight(BalloonSizeSpec.WRAP) setPadding(12) setMarginHorizontal(12) setCornerRadius(8f) setBackgroundColorResource(R.color.skyBlue) setBalloonAnimation(BalloonAnimation.ELASTIC) } Balloon( modifier = Modifier.align(Alignment.Center), builder = builder, balloonContent = { Text(text = "Now you can edit your profile!") } ) { balloonWindow -> Button( modifier = Modifier.size(120.dp, 75.dp), onClick = { balloonWindow.showAlignTop() // display your balloon. } ) { Text(text = "showAlignTop") } }"><pre><span class="pl-c"><span class="pl-c">//</span> create and remember a builder of Balloon.</span> <span class="pl-k">val</span> builder <span class="pl-k">=</span> rememberBalloonBuilder { setArrowSize(<span class="pl-c1">10</span>) setArrowPosition(<span class="pl-c1">0.5f</span>) setArrowPositionRules(<span class="pl-en">ArrowPositionRules</span>.<span class="pl-en">ALIGN_ANCHOR</span>) setWidth(<span class="pl-en">BalloonSizeSpec</span>.<span class="pl-en">WRAP</span>) setHeight(<span class="pl-en">BalloonSizeSpec</span>.<span class="pl-en">WRAP</span>) setPadding(<span class="pl-c1">12</span>) setMarginHorizontal(<span class="pl-c1">12</span>) setCornerRadius(<span class="pl-c1">8f</span>) setBackgroundColorResource(<span class="pl-en">R</span>.color.skyBlue) setBalloonAnimation(<span class="pl-en">BalloonAnimation</span>.<span class="pl-en">ELASTIC</span>) } <span class="pl-en">Balloon</span>( modifier <span class="pl-k">=</span> <span class="pl-en">Modifier</span>.align(<span class="pl-en">Alignment</span>.<span class="pl-en">Center</span>), builder <span class="pl-k">=</span> builder, balloonContent <span class="pl-k">=</span> { <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Now you can edit your profile!<span class="pl-pds">"</span></span>) } ) { balloonWindow <span class="pl-k">-></span> <span class="pl-en">Button</span>( modifier <span class="pl-k">=</span> <span class="pl-en">Modifier</span>.size(<span class="pl-c1">120</span>.dp, <span class="pl-c1">75</span>.dp), onClick <span class="pl-k">=</span> { balloonWindow.showAlignTop() <span class="pl-c"><span class="pl-c">//</span> display your balloon.</span> } ) { <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>showAlignTop<span class="pl-pds">"</span></span>) } }</pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">BalloonWindow</h3><a id="user-content-balloonwindow" class="anchor" aria-label="Permalink: BalloonWindow" href="#balloonwindow"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><code>BalloonWindow</code> is an interface defining all executable behaviors for a balloon's window, including showing, dismissing, updating, and setting up listeners. You can obtain an instance of <code>BalloonWindow</code> within the <code>content</code> parameter of the <code>Balloon</code> composable function, as illustrated in the example below:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Balloon( .. ) { balloonWindow -> Button( modifier = Modifier.size(120.dp, 75.dp), onClick = { balloonWindow.showAtCenter() // display your balloon. } ) { Text(text = "showAtCenter") } } Balloon( builder = builder, balloonContent = null ) { balloonWindow -> .. }"><pre><span class="pl-en">Balloon</span>( <span class="pl-k">..</span> ) { balloonWindow <span class="pl-k">-></span> <span class="pl-en">Button</span>( modifier <span class="pl-k">=</span> <span class="pl-en">Modifier</span>.size(<span class="pl-c1">120</span>.dp, <span class="pl-c1">75</span>.dp), onClick <span class="pl-k">=</span> { balloonWindow.showAtCenter() <span class="pl-c"><span class="pl-c">//</span> display your balloon.</span> } ) { <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>showAtCenter<span class="pl-pds">"</span></span>) } } <span class="pl-en">Balloon</span>( builder <span class="pl-k">=</span> builder, balloonContent <span class="pl-k">=</span> <span class="pl-c1">null</span> ) { balloonWindow <span class="pl-k">-></span> <span class="pl-k">..</span> }</pre></div> <p dir="auto">You can also acquire the <code>BalloonWindow</code> by utilizing the <code>onBalloonWindowInitialized</code> lambda parameter in the <code>Balloon</code> composable. This parameter will be invoked just once when the <code>BalloonWindow</code> is fully prepared and ready for use:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var balloonWindow: BalloonWindow? by remember { mutableStateOf(null) } Balloon( builder = builder, onBalloonWindowInitialized = { balloonWindow = it }, balloonContent = { Text(text = "Now you can edit your profile!") }, ) { Button( modifier = Modifier.size(160.dp, 60.dp), onClick = { balloonWindow?.showAlignTop() }, ) { Text(text = "showAlignTop") } }"><pre><span class="pl-k">var</span> balloonWindow<span class="pl-k">:</span> <span class="pl-en">BalloonWindow</span><span class="pl-k">?</span> by remember { mutableStateOf(<span class="pl-c1">null</span>) } <span class="pl-en">Balloon</span>( builder <span class="pl-k">=</span> builder, onBalloonWindowInitialized <span class="pl-k">=</span> { balloonWindow <span class="pl-k">=</span> it }, balloonContent <span class="pl-k">=</span> { <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Now you can edit your profile!<span class="pl-pds">"</span></span>) }, ) { <span class="pl-en">Button</span>( modifier <span class="pl-k">=</span> <span class="pl-en">Modifier</span>.size(<span class="pl-c1">160</span>.dp, <span class="pl-c1">60</span>.dp), onClick <span class="pl-k">=</span> { balloonWindow?.showAlignTop() }, ) { <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>showAlignTop<span class="pl-pds">"</span></span>) } }</pre></div> <p dir="auto">The <code>onBalloonWindowInitialized</code> lambda paramter is useful when you need to hold an instance of the <code>BalloonWindow</code> as a state, and utilize it out of the <code>Balloon</code> composable function.</p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Auto-Display Balloon on Layout Ready</h3><a id="user-content-auto-display-balloon-on-layout-ready" class="anchor" aria-label="Permalink: Auto-Display Balloon on Layout Ready" href="#auto-display-balloon-on-layout-ready"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">To automatically show a Balloon when your layout is drawn, a common requirement in numerous applications, you can use the <code>onComposedAnchor</code> parameter within the <code>Balloon</code> composable function.</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var balloonWindow: BalloonWindow? by remember { mutableStateOf(null) } Balloon( builder = builder, onBalloonWindowInitialized = { balloonWindow = it }, onComposedAnchor = { balloonWindow?.showAlignTop() }, balloonContent = { Text(text = "Now you can edit your profile!") }, ) { Button( modifier = Modifier.size(160.dp, 60.dp), onClick = { balloonWindow?.showAlignTop() }, ) { Text(text = "showAlignTop") } }"><pre><span class="pl-k">var</span> balloonWindow<span class="pl-k">:</span> <span class="pl-en">BalloonWindow</span><span class="pl-k">?</span> by remember { mutableStateOf(<span class="pl-c1">null</span>) } <span class="pl-en">Balloon</span>( builder <span class="pl-k">=</span> builder, onBalloonWindowInitialized <span class="pl-k">=</span> { balloonWindow <span class="pl-k">=</span> it }, onComposedAnchor <span class="pl-k">=</span> { balloonWindow?.showAlignTop() }, balloonContent <span class="pl-k">=</span> { <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Now you can edit your profile!<span class="pl-pds">"</span></span>) }, ) { <span class="pl-en">Button</span>( modifier <span class="pl-k">=</span> <span class="pl-en">Modifier</span>.size(<span class="pl-c1">160</span>.dp, <span class="pl-c1">60</span>.dp), onClick <span class="pl-k">=</span> { balloonWindow?.showAlignTop() }, ) { <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>showAlignTop<span class="pl-pds">"</span></span>) } }</pre></div> <p dir="auto">As you can see in the example above, you can use <code>onComposedAnchor</code> with the <code>onBalloonWindowInitialized</code> lambda to obtain the <code>BalloonWindow</code> and display your balloon sequentially after rendering your composable layout.</p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Compose Extensions</h3><a id="user-content-compose-extensions" class="anchor" aria-label="Permalink: Compose Extensions" href="#compose-extensions"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The <code>balloon-compose</code> package provides useful compose extensions, such as setting a color with <code>androidx.compose.ui.graphics.Color</code> like the below:</p> <div class="highlight highlight-source-kotlin notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="val builder = rememberBalloonBuilder { setText("Now you can edit your profile!") setArrowSize(10) setWidthRatio(1.0f) setHeight(BalloonSizeSpec.WRAP) setArrowOrientation(ArrowOrientation.BOTTOM) setArrowPosition(0.5f) setPadding(12) setMarginHorizontal(12) setTextSize(15f) setCornerRadius(8f) setTextColor(Color.White) // set text color with compose color. setBackgroundColor(Color.White) // set background color with compose color. setIconDrawableResource(R.drawable.ic_edit) }"><pre><span class="pl-k">val</span> builder <span class="pl-k">=</span> rememberBalloonBuilder { setText(<span class="pl-s"><span class="pl-pds">"</span>Now you can edit your profile!<span class="pl-pds">"</span></span>) setArrowSize(<span class="pl-c1">10</span>) setWidthRatio(<span class="pl-c1">1.0f</span>) setHeight(<span class="pl-en">BalloonSizeSpec</span>.<span class="pl-en">WRAP</span>) setArrowOrientation(<span class="pl-en">ArrowOrientation</span>.<span class="pl-en">BOTTOM</span>) setArrowPosition(<span class="pl-c1">0.5f</span>) setPadding(<span class="pl-c1">12</span>) setMarginHorizontal(<span class="pl-c1">12</span>) setTextSize(<span class="pl-c1">15f</span>) setCornerRadius(<span class="pl-c1">8f</span>) setTextColor(<span class="pl-en">Color</span>.<span class="pl-en">White</span>) <span class="pl-c"><span class="pl-c">//</span> set text color with compose color.</span> setBackgroundColor(<span class="pl-en">Color</span>.<span class="pl-en">White</span>) <span class="pl-c"><span class="pl-c">//</span> set background color with compose color.</span> setIconDrawableResource(<span class="pl-en">R</span>.drawable.ic_edit) }</pre></div> <blockquote> <p dir="auto"><strong>Note</strong>: If you want to use the default form of balloon (icon + text), you should pass a null value to the <code>balloonContent</code> parameter of your Balloon composable.</p> </blockquote> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Find this library useful? ❤️</h2><a id="user-content-find-this-library-useful-heart" class="anchor" aria-label="Permalink: Find this library useful? :heart:" href="#find-this-library-useful-heart"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Support it by joining <strong><a href="https://github.com/skydoves/balloon/stargazers">stargazers</a></strong> for this repository. ⭐ <br> Also, <strong><a href="https://github.com/skydoves">follow me</a></strong> on GitHub for my next creations! 🤩</p> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">License</h1><a id="user-content-license" class="anchor" aria-label="Permalink: License" href="#license"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="highlight highlight-text-xml notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Copyright 2019 skydoves (Jaewoong Eum) Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License."><pre>Copyright 2019 skydoves (Jaewoong Eum) Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.</pre></div> </article></div></div></div></div></div> <!-- --> <!-- --> <script type="application/json" id="__PRIMER_DATA_:R0:__">{"resolvedServerColorMode":"day"}</script></div> </react-partial> <input type="hidden" data-csrf="true" value="eGLQ6pRnxaNnyvGA3tpaHOdGKHTt+IfFFa+MJSiW5DjNPQs2wYXr/GLFUq5tSNWvDt2PJo7XfqpIAJG1rvJZMQ==" /> </div> <div data-view-component="true" class="Layout-sidebar"> <div class="BorderGrid about-margin" data-pjax> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <div class="hide-sm hide-md"> <h2 class="mb-3 h4">About</h2> <p class="f4 my-3"> 🎈 Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android. </p> <div class="my-3 d-flex flex-items-center"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link flex-shrink-0 mr-2"> <path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path> </svg> <span class="flex-auto min-width-0 css-truncate css-truncate-target width-fit"> <a title="https://skydoves.github.io/Balloon/" role="link" target="_blank" rel="noopener noreferrer nofollow" class="text-bold" href="https://skydoves.github.io/Balloon/">skydoves.github.io/Balloon/</a> </span> </div> <h3 class="sr-only">Topics</h3> <div class="my-3"> <div class="f6"> <a href="/topics/tooltips" title="Topic: tooltips" data-view-component="true" class="topic-tag topic-tag-link"> tooltips </a> <a href="/topics/android" title="Topic: android" data-view-component="true" class="topic-tag topic-tag-link"> android </a> <a href="/topics/kotlin" title="Topic: kotlin" data-view-component="true" class="topic-tag topic-tag-link"> kotlin </a> <a href="/topics/animation" title="Topic: animation" data-view-component="true" class="topic-tag topic-tag-link"> animation </a> <a href="/topics/dsl" title="Topic: dsl" data-view-component="true" class="topic-tag topic-tag-link"> dsl </a> <a href="/topics/tooltip" title="Topic: tooltip" data-view-component="true" class="topic-tag topic-tag-link"> tooltip </a> <a href="/topics/android-library" title="Topic: android-library" data-view-component="true" class="topic-tag topic-tag-link"> android-library </a> <a href="/topics/popup" title="Topic: popup" data-view-component="true" class="topic-tag topic-tag-link"> popup </a> <a href="/topics/android-ui" title="Topic: android-ui" data-view-component="true" class="topic-tag topic-tag-link"> android-ui </a> <a href="/topics/compose" title="Topic: compose" data-view-component="true" class="topic-tag topic-tag-link"> compose </a> <a href="/topics/balloon" title="Topic: balloon" data-view-component="true" class="topic-tag topic-tag-link"> balloon </a> <a href="/topics/skydoves" title="Topic: skydoves" data-view-component="true" class="topic-tag topic-tag-link"> skydoves </a> <a href="/topics/jetpack-compose" title="Topic: jetpack-compose" data-view-component="true" class="topic-tag topic-tag-link"> jetpack-compose </a> </div> </div> <h3 class="sr-only">Resources</h3> <div class="mt-2"> <a class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:readme"}" href="#readme-ov-file"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book mr-2"> <path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path> </svg> Readme </a> </div> <h3 class="sr-only">License</h3> <div class="mt-2"> <a href="#Apache-2.0-1-ov-file" class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:license"}" > <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-law mr-2"> <path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path> </svg> Apache-2.0 license </a> </div> <h3 class="sr-only">Code of conduct</h3> <div class="mt-2"> <a href="#coc-ov-file" class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:code of conduct"}" > <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-of-conduct mr-2"> <path d="M8.048 2.241c.964-.709 2.079-1.238 3.325-1.241a4.616 4.616 0 0 1 3.282 1.355c.41.408.757.86.996 1.428.238.568.348 1.206.347 1.968 0 2.193-1.505 4.254-3.081 5.862-1.496 1.526-3.213 2.796-4.249 3.563l-.22.163a.749.749 0 0 1-.895 0l-.221-.163c-1.036-.767-2.753-2.037-4.249-3.563C1.51 10.008.007 7.952.002 5.762a4.614 4.614 0 0 1 1.353-3.407C3.123.585 6.223.537 8.048 2.24Zm-1.153.983c-1.25-1.033-3.321-.967-4.48.191a3.115 3.115 0 0 0-.913 2.335c0 1.556 1.109 3.24 2.652 4.813C5.463 11.898 6.96 13.032 8 13.805c.353-.262.758-.565 1.191-.905l-1.326-1.223a.75.75 0 0 1 1.018-1.102l1.48 1.366c.328-.281.659-.577.984-.887L9.99 9.802a.75.75 0 1 1 1.019-1.103l1.384 1.28c.295-.329.566-.661.81-.995L12.92 8.7l-1.167-1.168c-.674-.671-1.78-.664-2.474.03-.268.269-.538.537-.802.797-.893.882-2.319.843-3.185-.032-.346-.35-.693-.697-1.043-1.047a.75.75 0 0 1-.04-1.016c.162-.191.336-.401.52-.623.62-.748 1.356-1.637 2.166-2.417Zm7.112 4.442c.313-.65.491-1.293.491-1.916v-.001c0-.614-.088-1.045-.23-1.385-.143-.339-.357-.633-.673-.949a3.111 3.111 0 0 0-2.218-.915c-1.092.003-2.165.627-3.226 1.602-.823.755-1.554 1.637-2.228 2.45l-.127.154.562.566a.755.755 0 0 0 1.066.02l.794-.79c1.258-1.258 3.312-1.31 4.594-.032.396.394.792.791 1.173 1.173Z"></path> </svg> Code of conduct </a> </div> <include-fragment src="/skydoves/Balloon/hovercards/citation/sidebar_partial?tree_name=main"> </include-fragment> <div class="mt-2"> <a href="/skydoves/Balloon/activity" data-view-component="true" class="Link Link--muted"><svg text="gray" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pulse mr-2"> <path d="M6 2c.306 0 .582.187.696.471L10 10.731l1.304-3.26A.751.751 0 0 1 12 7h3.25a.75.75 0 0 1 0 1.5h-2.742l-1.812 4.528a.751.751 0 0 1-1.392 0L6 4.77 4.696 8.03A.75.75 0 0 1 4 8.5H.75a.75.75 0 0 1 0-1.5h2.742l1.812-4.529A.751.751 0 0 1 6 2Z"></path> </svg> <span class="color-fg-muted">Activity</span></a> </div> <h3 class="sr-only">Stars</h3> <div class="mt-2"> <a href="/skydoves/Balloon/stargazers" data-view-component="true" class="Link Link--muted"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> <strong>3.8k</strong> stars</a> </div> <h3 class="sr-only">Watchers</h3> <div class="mt-2"> <a href="/skydoves/Balloon/watchers" data-view-component="true" class="Link Link--muted"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-eye mr-2"> <path d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"></path> </svg> <strong>29</strong> watching</a> </div> <h3 class="sr-only">Forks</h3> <div class="mt-2"> <a href="/skydoves/Balloon/forks" data-view-component="true" class="Link Link--muted"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg> <strong>298</strong> forks</a> </div> <div class="mt-2"> <a class="Link--muted" href="/contact/report-content?content_url=https%3A%2F%2Fgithub.com%2Fskydoves%2FBalloon&report=skydoves+%28user%29"> Report repository </a> </div> </div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame"> <a href="/skydoves/Balloon/releases" data-view-component="true" class="Link--primary no-underline Link">Releases <span title="67" data-view-component="true" class="Counter">67</span></a></h2> <a class="Link--primary d-flex no-underline" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/skydoves/Balloon/releases/tag/1.6.12"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-tag flex-shrink-0 mt-1 color-fg-success"> <path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path> </svg> <div class="ml-2 min-width-0"> <div class="d-flex"> <span class="css-truncate css-truncate-target text-bold mr-2" style="max-width: none;">1.6.12</span> <span title="Label: Latest" data-view-component="true" class="Label Label--success flex-shrink-0"> Latest </span> </div> <div class="text-small color-fg-muted"><relative-time datetime="2025-01-29T06:12:27Z" class="no-wrap">Jan 29, 2025</relative-time></div> </div> </a> <div data-view-component="true" class="mt-3"> <a text="small" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/skydoves/Balloon/releases" data-view-component="true" class="Link">+ 66 releases</a></div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3">Sponsor this project</h2> <include-fragment src="/skydoves/Balloon/sponsors_list?block_button=false&current_repository=Balloon" aria-busy="true" aria-label="Loading sponsorable links"> <ul class="list-style-none"> <li class="mb-2 d-flex"> <div class="Skeleton avatar avatar-user mr-2" style="width:32px;height:32px;"></div> <div class="Skeleton Skeleton--text flex-1 flex-self-center f4"> </div> </li> </ul> </include-fragment> <ul class="list-style-none"> <li class="mb-2 d-flex"> <span class="mr-2 d-flex flex-items-center flex-justify-center" style="min-width:32px;height:32px;"> <svg class="octicon octicon-link color-fg-muted" alt="custom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </span> <span class="flex-self-center flex-auto min-width-0 css-truncate css-truncate-target width-fit"> <a target="_blank" data-ga-click="Dashboard, click, Nav menu - item:org-profile context:organization" data-hydro-click="{"event_type":"sponsors.repo_funding_links_link_click","payload":{"platform":{"platform_type":"CUSTOM","platform_url":"https://www.paypal.me/skydoves"},"platforms":[{"platform_type":"GITHUB","platform_url":"https://github.com/skydoves"},{"platform_type":"CUSTOM","platform_url":"https://www.paypal.me/skydoves"},{"platform_type":"CUSTOM","platform_url":"https://www.buymeacoffee.com/skydoves"}],"repo_id":196805860,"owner_id":24237865,"user_id":null,"originating_url":"https://github.com/skydoves/Balloon"}}" data-hydro-click-hmac="db46839f93e3f96e8ac8d6094d2eb22b30367530e21fc823bc7eb11b909140c4" rel="noopener noreferrer" href="https://www.paypal.me/skydoves">https://www.paypal.me/skydoves</a> </span> </li> <li class="mb-2 d-flex"> <span class="mr-2 d-flex flex-items-center flex-justify-center" style="min-width:32px;height:32px;"> <svg class="octicon octicon-link color-fg-muted" alt="custom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </span> <span class="flex-self-center flex-auto min-width-0 css-truncate css-truncate-target width-fit"> <a target="_blank" data-ga-click="Dashboard, click, Nav menu - item:org-profile context:organization" data-hydro-click="{"event_type":"sponsors.repo_funding_links_link_click","payload":{"platform":{"platform_type":"CUSTOM","platform_url":"https://www.buymeacoffee.com/skydoves"},"platforms":[{"platform_type":"GITHUB","platform_url":"https://github.com/skydoves"},{"platform_type":"CUSTOM","platform_url":"https://www.paypal.me/skydoves"},{"platform_type":"CUSTOM","platform_url":"https://www.buymeacoffee.com/skydoves"}],"repo_id":196805860,"owner_id":24237865,"user_id":null,"originating_url":"https://github.com/skydoves/Balloon"}}" data-hydro-click-hmac="405b81cb0b65e6dd180e03701872bf3ff14972a6a5cf5fd34ed75fee272f572f" rel="noopener noreferrer" href="https://www.buymeacoffee.com/skydoves">https://www.buymeacoffee.com/skydoves</a> </span> </li> </ul> <div class="text-small mt-3"> <a href="/sponsors">Learn more about GitHub Sponsors</a> </div> </div> </div> <div class="BorderGrid-row" hidden> <div class="BorderGrid-cell"> <include-fragment src="/skydoves/Balloon/used_by_list" accept="text/fragment+html"> </include-fragment> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3"> <a href="/skydoves/Balloon/graphs/contributors" data-view-component="true" class="Link--primary no-underline Link d-flex flex-items-center">Contributors <span title="28" data-view-component="true" class="Counter ml-1">28</span></a></h2> <ul class="list-style-none d-flex flex-wrap mb-n2"> <li class="mb-2 mr-2" > <a href="https://github.com/skydoves" class="" data-hovercard-type="user" data-hovercard-url="/users/skydoves/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/24237865?s=64&v=4" alt="@skydoves" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/apps/renovate" class="" > <img src="https://avatars.githubusercontent.com/in/2740?s=64&v=4" alt="@renovate[bot]" size="32" height="32" width="32" data-view-component="true" class="avatar" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/JoePaul" class="" data-hovercard-type="user" data-hovercard-url="/users/JoePaul/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/36191409?s=64&v=4" alt="@JoePaul" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/heckfyxe" class="" data-hovercard-type="user" data-hovercard-url="/users/heckfyxe/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/42282701?s=64&v=4" alt="@heckfyxe" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/svrlopatrik" class="" data-hovercard-type="user" data-hovercard-url="/users/svrlopatrik/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/36796141?s=64&v=4" alt="@svrlopatrik" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/jimmithy" class="" data-hovercard-type="user" data-hovercard-url="/users/jimmithy/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/1126762?s=64&v=4" alt="@jimmithy" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/yosef-khaled" class="" data-hovercard-type="user" data-hovercard-url="/users/yosef-khaled/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/43723521?s=64&v=4" alt="@yosef-khaled" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/nkhar" class="" data-hovercard-type="user" data-hovercard-url="/users/nkhar/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/16717094?s=64&v=4" alt="@nkhar" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/itsnitish22" class="" data-hovercard-type="user" data-hovercard-url="/users/itsnitish22/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/73310532?s=64&v=4" alt="@itsnitish22" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/vitkhudenko" class="" data-hovercard-type="user" data-hovercard-url="/users/vitkhudenko/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/198951?s=64&v=4" alt="@vitkhudenko" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/DavidEdwards" class="" data-hovercard-type="user" data-hovercard-url="/users/DavidEdwards/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/1585923?s=64&v=4" alt="@DavidEdwards" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/Waboodoo" class="" data-hovercard-type="user" data-hovercard-url="/users/Waboodoo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/2445563?s=64&v=4" alt="@Waboodoo" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/kiwiandroiddev" class="" data-hovercard-type="user" data-hovercard-url="/users/kiwiandroiddev/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/5158190?s=64&v=4" alt="@kiwiandroiddev" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/jonasskold" class="" data-hovercard-type="user" data-hovercard-url="/users/jonasskold/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/5492721?s=64&v=4" alt="@jonasskold" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> </ul> <div data-view-component="true" class="mt-3"> <a text="small" href="/skydoves/Balloon/graphs/contributors" data-view-component="true" class="Link--inTextBlock Link">+ 14 contributors</a></div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3">Languages</h2> <div class="mb-2"> <span data-view-component="true" class="Progress"> <span style="background-color:#A97BFF !important;;width: 100.0%;" itemprop="keywords" data-view-component="true" class="Progress-item color-bg-success-emphasis"></span> </span></div> <ul class="list-style-none"> <li class="d-inline"> <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/skydoves/Balloon/search?l=kotlin" data-ga-click="Repository, language stats search click, location:repo overview"> <svg style="color:#A97BFF;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill mr-2"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> <span class="color-fg-default text-bold mr-1">Kotlin</span> <span>100.0%</span> </a> </li> </ul> </div> </div> </div> </div> </div></div> </div> </div> </turbo-frame> </main> </div> </div> <footer class="footer pt-8 pb-6 f6 color-fg-muted p-responsive" role="contentinfo" > <h2 class='sr-only'>Footer</h2> <div class="d-flex flex-justify-center flex-items-center flex-column-reverse flex-lg-row flex-wrap flex-lg-nowrap"> <div class="d-flex flex-items-center flex-shrink-0 mx-2"> <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://github.com"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12 1C5.9225 1 1 5.9225 1 12C1 16.8675 4.14875 20.9787 8.52125 22.4362C9.07125 22.5325 9.2775 22.2025 9.2775 21.9137C9.2775 21.6525 9.26375 20.7862 9.26375 19.865C6.5 20.3737 5.785 19.1912 5.565 18.5725C5.44125 18.2562 4.905 17.28 4.4375 17.0187C4.0525 16.8125 3.5025 16.3037 4.42375 16.29C5.29 16.2762 5.90875 17.0875 6.115 17.4175C7.105 19.0812 8.68625 18.6137 9.31875 18.325C9.415 17.61 9.70375 17.1287 10.02 16.8537C7.5725 16.5787 5.015 15.63 5.015 11.4225C5.015 10.2262 5.44125 9.23625 6.1425 8.46625C6.0325 8.19125 5.6475 7.06375 6.2525 5.55125C6.2525 5.55125 7.17375 5.2625 9.2775 6.67875C10.1575 6.43125 11.0925 6.3075 12.0275 6.3075C12.9625 6.3075 13.8975 6.43125 14.7775 6.67875C16.8813 5.24875 17.8025 5.55125 17.8025 5.55125C18.4075 7.06375 18.0225 8.19125 17.9125 8.46625C18.6138 9.23625 19.04 10.2125 19.04 11.4225C19.04 15.6437 16.4688 16.5787 14.0213 16.8537C14.42 17.1975 14.7638 17.8575 14.7638 18.8887C14.7638 20.36 14.75 21.5425 14.75 21.9137C14.75 22.2025 14.9563 22.5462 15.5063 22.4362C19.8513 20.9787 23 16.8537 23 12C23 5.9225 18.0775 1 12 1Z"></path> </svg> </a> <span> © 2025 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3> <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading"> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a> </li> <li class="mx-2" > <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"cookies","context":"subfooter","tag":"link","label":"cookies_link_subfooter_footer"}" > Manage cookies </button> </cookie-consent-link> </li> <li class="mx-2"> <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"dont_share_info","context":"subfooter","tag":"link","label":"dont_share_info_link_subfooter_footer"}" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999" data-initial-cookie-consent-allowed="" data-cookie-consent-required="false"></ghcc-consent> <div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> You can’t perform that action at this time. </div> <template id="site-details-dialog"> <details class="details-reset details-overlay details-overlay-dark lh-default color-fg-default hx_rsm" open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal"> <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div class="octocat-spinner my-6 js-details-dialog-spinner"></div> </details-dialog> </details> </template> <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;"> <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;"> </div> </div> <template id="snippet-clipboard-copy-button"> <div class="zeroclipboard-container position-absolute right-0 top-0"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div class="zeroclipboard-container"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn btn-invisible js-clipboard-copy m-2 p-0 d-flex flex-justify-center flex-items-center" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div> </body> </html>