{"id":20756574,"url":"https://github.com/tylersuehr7/bubble-layout","last_synced_at":"2025-08-23T02:06:17.058Z","repository":{"id":130831144,"uuid":"93894149","full_name":"tylersuehr7/bubble-layout","owner":"tylersuehr7","description":"An Android ViewGroup that displays avatar bubbles... similar to the chat bubbles on Facebook Messenger.","archived":false,"fork":false,"pushed_at":"2017-10-18T23:14:45.000Z","size":9111,"stargazers_count":45,"open_issues_count":0,"forks_count":12,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-28T20:14:22.489Z","etag":null,"topics":["android","bubble","bubblelayout","bubbles","circle","circleimageview","custom","design","imageview","layout","view","viewgroup"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tylersuehr7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-09T20:22:22.000Z","updated_at":"2024-07-21T03:40:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"4e30e92f-d0b5-4537-b444-da5106e5b3a4","html_url":"https://github.com/tylersuehr7/bubble-layout","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylersuehr7%2Fbubble-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylersuehr7%2Fbubble-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylersuehr7%2Fbubble-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylersuehr7%2Fbubble-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tylersuehr7","download_url":"https://codeload.github.com/tylersuehr7/bubble-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251380922,"owners_count":21580338,"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":["android","bubble","bubblelayout","bubbles","circle","circleimageview","custom","design","imageview","layout","view","viewgroup"],"created_at":"2024-11-17T09:33:30.450Z","updated_at":"2025-04-28T20:14:28.684Z","avatar_url":"https://github.com/tylersuehr7.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bubble Layout\nA customizable Android ViewGroup that displays avatar bubbles... similar to the chat bubbles on Facebook Messenger.\n\n\u003cimg src=\"https://github.com/tylersuehr7/bubble-layout/blob/master/docs/screen_bubbles_1.png\" width=\"200\"\u003e \u003cimg src=\"https://github.com/tylersuehr7/bubble-layout/blob/master/docs/screen_bubbles_2.png\" width=\"200\"\u003e\n\nHow to use it...\n\nIn your project level build.gradle :\n```java\nallprojects {\n    repositories {\n        ...\n        maven { url \"https://jitpack.io\" }\n    }\n} \n```\n\nIn your app level build.gradle:\n```java\ndependencies {\n    compile 'com.github.tylersuehr7:bubble-layout:1.0'\n}  \n```\n\n## Using the Bubble Layout\nThe intended purpose of this library is to afford a ViewGroup that displays avatar bubbles that can have a limit on how many can be shown on the screen at once before displaying an extra count.\n\nA typical use-case for this type of ViewGroup could be something like displaying the users attending an event, but you only want to show the images of the first few users and still emphasize how many people are attending the event.\n\nTo use the intended functionality, you'll need to use the `BubbleLayout`.\n\n### Using in an XML layout\n`BubbleLayout` can be used inside any other ViewGroup and supports all width and height attributes. Supported views can be dynamically added to the `BubbleLayout` or statically added using the XML layout file. Simple examples of both are shown below.\n\nExample 1:\n```xml\n\u003ccom.tylersuehr.bubbles.BubbleLayout\n    android:id=\"@+id/bubbles\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"64dp\"\n    android:layout_marginTop=\"16dp\"\n    android:textColor=\"@color/colorPrimary\"\n    app:bubbleSize=\"64dp\"\n    app:bubblePeek=\"3\"/\u003e\n```\n\nExample 2:\n```xml\n\u003ccom.tylersuehr.bubbles.BubbleLayout\n    android:id=\"@+id/bubbles\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"64dp\"\n    android:layout_marginTop=\"16dp\"\n    android:textColor=\"@color/colorPrimary\"\n    app:bubbleSize=\"64dp\"\n    app:bubblePeek=\"3\"\u003e\n    \u003ccom.tylersuehr.bubbles.CircleImageView ... /\u003e\n    \u003ccom.tylersuehr.bubbles.CircleCountView ... /\u003e\n\u003c/com.tylersuehr.bubbles.BubbleLayout\u003e\n```\n\n\u003cattr name=\"android:textColor\"/\u003e\n        \u003cattr name=\"borderColor\"/\u003e\n        \u003cattr name=\"borderWidth\"/\u003e\n        \u003cattr name=\"bubbleSize\"/\u003e\n        \u003cattr name=\"bubblePeek\"/\u003e\n        \u003cattr name=\"bubbleOffset\"/\u003e\n        \u003cattr name=\"bubbleMargin\"/\u003e\n        \u003cattr name=\"useBubbleOffset\"/\u003e\n\nHere is a table of all the XML attributes available for this view:\n\nAttribute | Type | Summary\n--- | :---: | ---\n`android:textColor` | `color` | Sets the text color used by the extra count view.\n`app:borderColor` | `color` | The color of each bubbles' border.\n`app:borderWidth` | `dimension` | The size of each bubbles' border.\n`app:bubbleSize` | `dimension` | The size of each bubble.\n`app:bubblePeek` | `int` | How many avatar bubbles should show before displaying the extra count.\n`app:bubbleOffset` | `int` | The offset overlap of each bubble on each other.\n`app:bubbleMargin` | `dimension` | The spacing in between each bubble.\n`app:useBubbleOffset` | `boolean` | True if bubbles should overlap and use offset.\n\n### Using in Java code\n`BubbleLayout` can be programmatically added into any ViewGroup. Simple usage in an Activity is shown here:\n```java\n@Override\nprotected void onCreate(Bundle savedInstanceState) {\n    super.onCreate(savedInstanceState);\n    \n    BubbleLayout bubbles = new BubbleLayout(this);\n    // Set any properties for bubble layout\n    \n    setContentView(bubbles);\n}\n```\n\nHere is a table of all the accessible attributes available for this view:\n\nMethod | Summary\n--- | ---\n`setUseBubbleOffset(boolean)` | True if bubbles should overlap each other and use offsets rather than margins.\n`setBubbleSize(int)` | Sets the size of each bubble.\n`setBubblePeek(int)` | Sets how many avatar bubbles should be shown before showing the extra count.\n`setBubbleOffset(int)` | Sets the overlapping offset of each bubble (only used when useOffset is true).\n`setBubbleMargin(int)` | Sets the spacing between each bubble (only used when useOffset is false).\n`setBubbleBorderWidth(int)` | Sets the border width of each bubble.\n`setBubbleBorderColor(int)` | Sets the border color of each bubble.\n`setBubbleBorderColorResource(int)` | Sets the border color of each bubble using color resource.\n`setBubbleTextColor(int)` | Sets the text color of each bubble (used by count bubble).\n`setBubbleTextColorResource(int)` | Sets the text color of each bubble using color resource (used by count bubble).\n\n## Using Bubbles\nBubbles are the core feature of this library, but what are they? Bubbles are a circular shape that either shows an avatar image or displays an extra count (like, \"+3\").\n\n`BubbleLayout` manages all of the bubbles, and their views, for you! It affords you the ability to add, remove, or clear bubbles in it, and will handle displaying the extra count bubble when the set peek is reached.\n\n### Adding a bubble\nAdding a bubble can be done by using any of the overloads of `addBubble(...)` in `BubbleLayout`. Simple examples are shown here:\n```java\n@Override\nprotected void onCreate(Bundle savedInstanceState) {\n    super.onCreate(savedInstanceState);\n    \n    BubbleLayout bubbles = new BubbleLayout(this);\n    setContentView(bubbles);\n    \n    // Example of adding a bubble using a drawable\n    bubbles.addBubble(anyCoolDrawable);\n    \n    // Example of adding another bubble using a bitmap\n    bubbles.addBubble(anyCoolBitmap);\n    \n    // Example of adding another bubble using a drawable resource\n    bubbles.addBubble(R.drawable.cool_image);\n}\n```\n\n### Removing all bubbles\nRemoving all bubbles can be done by using the `clearBubbles()` method in `BubbleLayout`. A simple example is shown here:\n```java\n@Override\nprotected void onCreate(Bundle savedInstanceState) {\n    super.onCreate(savedInstanceState);\n    \n    BubbleLayout bubbles = new BubbleLayout(this);\n    setContentView(bubbles);\n    \n    addCoolBubblesToBubbleLayout();\n    \n    // Example of removing all shown bubbles\n    bubbles.clearBubbles();\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylersuehr7%2Fbubble-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftylersuehr7%2Fbubble-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylersuehr7%2Fbubble-layout/lists"}