Baike.dev
All toolsOnline toolsAI codingTrendingOpen sourceNewsSubmit
Log in
< Back to tools
H

HappyBubble

> 编程语言
Open source

:thought_balloon:BubbleLayout随意变化的气泡布局、消息对话框，可定制颜色，背景、弧度、尖角弧度、边框等等。BubbleDialog气泡弹窗根据点击View的位置定位它的弹窗位置，BubbleDialog可定制方向等！(BubbleLayout changes freely,BubbleDia

724 stars0 likes1 views
WebsiteGitHub

About

:thought_balloon:BubbleLayout随意变化的气泡布局、消息对话框，可定制颜色，背景、弧度、尖角弧度、边框等等。BubbleDialog气泡弹窗根据点击View的位置定位它的弹窗位置，BubbleDialog可定制方向等！(BubbleLayout changes freely,BubbleDia

HappyBubble

气泡布局的形状可以改变，如四角弧度、气泡颜色、箭头大小和阴影。

气泡Dialog可以根据被点击的view的位置来确定自己展示的位置。

ENGLISH DOC

旧文档

更新

版本 更新描述 图片
1.2.6 修复列表位置偏移#43
1.2.5 修复位置偏移#36
1.2.4 修复状态栏高度获取#31
1.2.3 修复气泡内边距问题
1.2.2 新特性“设置气泡边框和边框颜色”#23
1.2.1 新特性“设置气泡背景”#25
1.2.0 箭头的上下圆弧都可以自由定制
1.1.9 修复初始位置偏移；新增通过x，y坐标显示HappyDialog
1.1.8 修复当设置透明背景时，状态栏文字颜色可能变白色问题
1.1.7 修复位置问题，修复autoPosition无效问题，修复横屏模式问题。#13#11#10
1.1.6 新增方向优先级:#9
1.1.5 修复:#8
1.1.4 ①新增方法setLayout(int width, int height, int margin)，width（设置气泡的宽）、height（设置气泡的高）、margin（设置距离屏幕边缘的间距,只有当设置width或height为MATCH_PARENT才有效）。
②autoPosition(true)方法准备弃用（现在还可以用），使用新方法autoPosition(Auto),如果两个都使用了会直接用autoPosition(Auto)。请参考下方“方法参考表”。
③感谢@wolf8088521提供建议#4
1.1.3 ①通过重新调用setClickedView可以直接更新当前dialog的所在位置。
②新添加setRelativeOffset(int)方法，设置dialog相对与被点击View的偏移（负值：向被点击view的中心偏移；正值：向被点击view的外侧偏移）
③测试页面SetClickedViewTestActivity.java
1.1.2 修复默认值没有适配屏幕
1.1.1 修复大小变化后，没有对应变化位置的问题；修复接触顶部偏位问题；
1.1.0 ①Dialog交互事件传递到Activity达到不在不关闭Dialog的情况下做其他Activity的操作。
②添加自动根据被点击View距离屏幕边缘的距离确定Dialog的位置。
③新增“autoPosition”和“setThroughEvent”方法，请参考“BubbleDialog方法参考表” ③
1.0.3 继续优化了点击在气泡之外才会被dismiss；修复了Dialog周围会有部分点击无法dismiss；
1.0.2 修复点击dialog边缘无法取消

哪些app使用了它？

玩清单

如何开始？

在你模块中的build.gradle添加上HappyBubble依赖

groovy
repositories {
  mavenCentral()
}

dependencies {
  implementation 'com.github.xujiaji:happy-bubble:1.2.6'
}

如何使用 HappyBubble-BubbleDialog？

方法参考表（不全面） 具体详细参数请参照案例代码和attrs.xml

方法名 参数 描述
addContentView View 添加填充在气泡中的视图
setClickedView View 被点击的View（触发Dialog出现的View）
setPosition enum ...
BubbleDialog.Position:
LEFT
TOP
RIGHT
BOTTOM BubbleDialog相对于被点击的view的位置。如果传入多个位置，那么最前面的位置优先级越高
setOffsetX int 如果您对dialog所展示的x轴位置不满，需要调整x轴方向偏移
setOffsetY int 如果您对dialog所展示的y轴位置不满，需要调整y轴方向偏移
setBubbleLayout BubbleLayout 自定义dialog的气泡布局
setTransParentBackground - 背景透明
softShowUp - 当气泡dialog中有EditText时，软键盘弹出会遮挡EditText时，dialog随软键盘上移。
show - 显示
autoPosition enum
Auto:
AROUND
UP_AND_DOWN
LEFT_AND_RIGHT 自动确定位置功能，显示在被点击View距离屏幕边缘的最大空间。开启后，“setPosition”功能失效。
AROUND：被点击View四周；
UP_AND_DOWN：被点击View上下显示；
LEFT_AND_RIGHT：被点击View左右显示；
setThroughEvent boolean, boolean 第一个参数isThroughEvent设置是否穿透Dialog手势交互。
第二个参数cancelable点击空白是否能取消Dialog，只有当"isThroughEvent=false"时才有效
setRelativeOffset int 设置dialog相对与被点击View的偏移（负值：向被点击view的中心偏移；正值：向被点击view的外侧偏移），设置后会直接影响setOffsetX和setOffsetY方法。
setLayout int，int，int 设置气泡的宽高和距离屏幕边缘的距离
第一个参数：width（设置气泡的宽）；
第二个参数：height（设置气泡的高）；
第三个参数：margin（设置距离屏幕边缘的间距,只有当设置width或height为MATCH_PARENT才有效）。
宽高单位为px或MATCH_PARENT

最简单的实现
java
new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null))
        .setClickedView(mButton)
        .show();

向下偏移8dp

java
new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null))
        .setClickedView(mButton4)
        .setPosition(mPosition)
        .setOffsetY(8)
        .show();

当想要输入框随软键盘上移时

java
new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view, null))
        .setClickedView(mButton12)
        .setPosition(mPosition)
        .softShowUp()
        .show();

自定义 BubbleLayout

java
BubbleLayout bl = new BubbleLayout(this);
bl.setBubbleColor(Color.YELLOW);
bl.setShadowColor(Color.RED);
bl.setLookLength(Util.dpToPx(this, 18));
bl.setLookWidth(Util.dpToPx(this, 24));
bl.setBubbleRadius(Util.dpToPx(this, 3));
new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view5, null))
        .setClickedView(mButton8)
        .setPosition(mPosition)
        .setBubbleLayout(bl)
        .show();

自定义 BubbleDialog，可交互的 BubbleDialog

1、布局

xml

2、自定义 BubbleDialog

…

3、显示

java
CustomOperateDialog codDialog = new CustomOperateDialog(this)
        .setPosition(mPosition)
        .setClickedView(mButton10);
codDialog.setClickListener(new CustomOperateDialog.OnClickCustomButtonListener()
{
    @Override
    public void onClick(String str)
    {
        mButton10.setText("点击了：" + str);
    }
});
codDialog.show();

查看关于BappyDialog的使用代码

TestDialogActivity 代码

写法建议

根据@hm该朋友在文章中反馈的多次点击后位置不对的问题，是由于多次对BappyDialog进行了设置导致，所以建议下方写法。(当然如果对重复调用setClickedView()方法设置不同的被点击的控件来更新位置有需要，是需要写在外面的。)

java
if(mBubbleDialog == null)
{
    mBubbleDialog = new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null))
        .setClickedView(mButton4)
        .setPosition(mPosition)
        .setOffsetY(8);
}
mBubbleDialog.show();

如何使用 HappyBubble-BubbleLayout？

在XML代码中设置属性值

属性参照表

属性 值 描述
lookAt left, top, right

Issues· 0 open

View all issuesOpen on GitHub

No open issues yet, or sync has not completed.

> Tags

Javaandroidandroid-libraryandroid-uibubble

No comments yet. Be the first to share.

> Details

PublishedAug 1, 2026
UpdatedSep 17, 2026
Category编程语言
PricingOpen source

> Related tools

T
TypeScript
JavaScript 的超集，为前端与全栈提供静态类型
P
Python
通用编程语言，广泛用于 Web、数据与 AI
G
Go
Google 推出的简洁高效系统语言