{"id":13644976,"url":"https://github.com/cpiz/BubbleView","last_synced_at":"2025-04-21T11:32:21.977Z","repository":{"id":43573317,"uuid":"59846541","full_name":"cpiz/BubbleView","owner":"cpiz","description":"A control/container with an arrow for Android, which can be fully customized by code or XML layout file.","archived":false,"fork":false,"pushed_at":"2023-03-09T18:15:33.000Z","size":2610,"stargazers_count":985,"open_issues_count":5,"forks_count":120,"subscribers_count":25,"default_branch":"master","last_synced_at":"2024-08-02T01:24:21.920Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cpiz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-05-27T15:58:13.000Z","updated_at":"2024-07-28T20:03:05.000Z","dependencies_parsed_at":"2024-01-14T11:19:16.857Z","dependency_job_id":"8fa6ed30-bb82-4b35-8799-525e81ce7b77","html_url":"https://github.com/cpiz/BubbleView","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cpiz%2FBubbleView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cpiz%2FBubbleView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cpiz%2FBubbleView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cpiz%2FBubbleView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cpiz","download_url":"https://codeload.github.com/cpiz/BubbleView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223860255,"owners_count":17215656,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T01:02:22.652Z","updated_at":"2025-04-21T11:32:21.949Z","avatar_url":"https://github.com/cpiz.png","language":"Java","readme":"# BubbleView for Android\n\n[![build](https://travis-ci.org/cpiz/BubbleView.svg?branch=master)](https://travis-ci.org/cpiz/BubbleView) [ ![Download](https://api.bintray.com/packages/cpiz/maven/bubbleview/images/download.svg)](https://bintray.com/cpiz/maven/bubbleview/_latestVersion) [![build](https://jitpack.io/v/cpiz/BubbleView.svg)](https://jitpack.io/#cpiz/BubbleView)\n\n\n[中文版README](README_CN.md)\n\nBubbleView is a control/container with an arrow for Android, which can be fully customized by code or XML layout file.\n\n* Arrow direction: up, down, left, right or none\n* Should arrow auto point to its target\n* Customizable arrow properties: size and location\n* Customizable bubble properties: color, padding, borders and corner radius\n* Bubble can be plain text view(BubbleTextView) or layout container(BubbleXxxLayout)\n\nDownload\n--------\nAdd `jcenter()` to your project-level `build.gradle`\n```\nallprojects {\n    repositories {\n        jcenter()\n    }\n}\n```\n\nAdd `compile 'com.cpiz.bubbleview:bubbleview:{X.Y.Z}'` to your module-level `build.gradle`(see X.Y.Z in [Releases](https://github.com/cpiz/BubbleView/releases))\n```\ndependencies {\n    ...\n    compile 'com.cpiz.bubbleview:bubbleview:{X.Y.Z}'\n}\n```\n\nSpecify the direction of arrow\n-------\nYou can use app:bb_arrowDirection attribute to specify the direction of arrow. Its value can be: Left, Up, Right, Down or None. Arrow will be placed in the middle of the corresponding edge of bubble.\n\n![Specify the direction of arrow](./screenshots/1.png)\n\n```XML\n\u003ccom.cpiz.android.bubbleview.BubbleTextView\n    android:id=\"@+id/bb1\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    android:layout_centerVertical=\"true\"\n    android:layout_toLeftOf=\"@id/iv1\"\n    android:padding=\"6dp\"\n    android:text=\"ArrowRight\"\n    android:textColor=\"@android:color/white\"\n    app:bb_arrowDirection=\"Right\"\n    app:bb_cornerRadius=\"4dp\"/\u003e\n```\n\nPoint arrow to a specific target\n-------\nYou can use app:bb_arrowTo attribute to specify the id of target view. The direction of arrow will be calculated automatically and it will point to the center of target.\n\n![Point arrow to specific target](screenshots/2.png)\n\n```XML\n\u003cRelativeLayout\n    android:id=\"@+id/group2\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"180dp\"\n    android:layout_marginBottom=\"30dp\"\n    android:background=\"#bdc3c7\"\n    android:padding=\"10dp\"\u003e\n\n    \u003cImageView\n        android:id=\"@+id/iv2\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_centerHorizontal=\"true\"\n        android:layout_centerVertical=\"true\"\n        android:layout_margin=\"4dp\"\n        android:src=\"@android:drawable/ic_btn_speak_now\"\n        android:tint=\"#FFFFFF\"/\u003e\n\n    \u003ccom.cpiz.android.bubbleview.BubbleTextView\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignTop=\"@id/iv2\"\n        android:layout_toLeftOf=\"@id/iv2\"\n        android:padding=\"6dp\"\n        android:text=\"Get your apps ready for Android 6.0 Marshmallow! \"\n        android:textColor=\"@android:color/white\"\n        app:bb_arrowTo=\"@id/iv2\"/\u003e\n\u003c/RelativeLayout\u003e\n```\n\nCustomize style\n-------\n![Customize style](./screenshots/3.png)\n\n```XML\n\u003ccom.cpiz.android.bubbleview.BubbleTextView\n    android:id=\"@+id/big4\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    android:layout_below=\"@+id/big2\"\n    android:layout_margin=\"4dp\"\n    android:layout_toRightOf=\"@id/big3\"\n    android:padding=\"30dp\"\n    android:text=\"WithBorder\"\n    android:textColor=\"@android:color/white\"\n    app:bb_arrowDirection=\"Down\"\n    app:bb_arrowHeight=\"10dp\"\n    app:bb_arrowOffset=\"30dp\"\n    app:bb_arrowWidth=\"40dp\"\n    app:bb_borderColor=\"@color/colorPrimary\"\n    app:bb_borderWidth=\"6dp\"\n    app:bb_cornerBottomLeftRadius=\"0dp\"\n    app:bb_cornerBottomRightRadius=\"10dp\"\n    app:bb_cornerTopLeftRadius=\"0dp\"\n    app:bb_cornerTopRightRadius=\"4dp\"\n    app:bb_fillColor=\"@android:color/holo_red_light\"\n    app:bb_fillPadding=\"4dp\"/\u003e\n```\n\n### Use it as layout container\n--------\nBeside using BubbleTextView to display text, you can also use\n\n* BubbleRelativeLayout\n* BubbleLinearLayout\n* BubbleFrameLayout\n\nas bubble layout container and put customized content into it.\n\n![As container](./screenshots/4.png)\n\n### Popup\n--------\nCan use BubblePopupWindow to wrap bubble, and show as popup.\n\n![popup](./screenshots/5.gif)\n\n* Support touch outside to close\n* Support touch inside to close\n* Support close in time\n\n```\n    View rootView = LayoutInflater.from(this).inflate(R.layout.simple_text_bubble, null);\n    BubbleTextView bubbleView = (BubbleTextView) rootView.findViewById(R.id.popup_bubble);\n    window = new BubblePopupWindow(rootView, bubbleView);\n    window.setCancelOnTouch(true);\n    window.setCancelOnTouchOutside(true);\n    window.setCancelOnLater(3000);\n    window.showArrowTo(v, BubbleStyle.ArrowDirection.Left);\n```\n\n### Misc.\n\n* Invoke methods like setBackground/setBackgroundColor of BubbleView will make the style settings invalid.\n\nLicense\n-------\n\tCopyright 2017 Cpiz\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n","funding_links":[],"categories":["Popup"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcpiz%2FBubbleView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcpiz%2FBubbleView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcpiz%2FBubbleView/lists"}