Go Github

The shape of the bubble layout can be changed, such as quadrangle radian, bubble color, arrow size, and shadow.

The bubble Dialog can determine the position of its display based on the position of the view being clicked.

update

• 1.1.4: SetLayout (int width, int height, int margin) Width (set the width of the bubble), height (set the height of the bubble), margin (set the distance from the edge of the screen, only valid if width or height is MATCH_PARENT). (2) The method autoPosition(true) is ready to deprecate (can still be used), use the new method autoPosition(Auto), if both are used will directly use autoPosition(Auto). Please refer to the method Reference table below. ③ Thanks to @wolf8088521 for suggestion #4

• 1.1.3: ① Update the current dialog location directly by calling setClickedView again. SetRelativeOffset (int) setRelativeOffset(int) setRelativeOffset(int) setRelativeOffset(int) setRelativeOffset(int) setRelativeOffset(int) setRelativeOffset(int) Positive: click to view the lateral migration) (3) the test page SetClickedViewTestActivity. Java

• 1.1.2: Fixed default values not matching the screen

• 1.1.1: Fix the problem that there is no corresponding change position after the size changes; Repair contact top deviation problem;

• 1.1.0 ① The Dialog interaction event is passed to the Activity to enable it to do other activities without closing the Dialog. The position of the Dialog is automatically determined based on the distance between the clicked View and the edge of the screen. ③ Add “autoPosition” and “setThroughEvent” methods, please refer to “BubbleDialog Method Reference table”.

  

• 1.0.3: Continue to optimize the click outside the bubble will be dismissed; [Fixed] part of click around Dialog cannot dismiss

• 1.0.2: Fixed clicking on dialog edges not being cancelled

How to start?

Add the HappyBubble dependency to build.gradle in your module

compile 'com. Making. Xujiaji: happy - mercifully: 1.1.4'
Copy the code

How to use happybubbleDialog?

Method Reference table

The simplest implementation

You need to provide: Context, View to fill, View to be clicked. If the outermost layout is not in full screen, you need to calculate the height of the status bar. Otherwise, the height of the status bar will be offset by one more down.

new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null))
        .setClickedView(mButton)
        .calBar(true)
        .show();
Copy the code

Offset down by 8dp

new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null))
        .setClickedView(mButton4)
        .setPosition(mPosition)
        .setOffsetY(8)
        .calBar(true)
        .show();
Copy the code

When you want the input box to move up with the soft keyboard

new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view, null))
        .setClickedView(mButton12)
        .setPosition(mPosition)
        .calBar(true)
        .softShowUp()
        .show();
Copy the code

Custom BubbleLayout.

BubbleLayout bl = new BubbleLayout(this);
bl.setBubbleColor(Color.BLUE);
bl.setShadowColor(Color.RED);
bl.setLookLength(Util.dpToPx(this.54));
bl.setLookWidth(Util.dpToPx(this.48));
new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view5, null))
        .setClickedView(mButton8)
        .setPosition(mPosition)
        .calBar(true)
        .setBubbleLayout(bl)
        .show();
Copy the code

Custom BubbleDialog, interactive BubbleDialog.

1, the layout

<?xml version="1.0" encoding="utf-8"? >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="160dp"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/button13"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button1" />

    <Button
        android:id="@+id/button14"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button2" />

    <Button
        android:id="@+id/button15"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button3" />

</LinearLayout>
Copy the code

2. Customize BubbleDialog

/** * Created by JiajiXu on 17-12-11. */

public class CustomOperateDialog extends BubbleDialog implements View.OnClickListener
{
    private ViewHolder mViewHolder;
    private OnClickCustomButtonListener mListener;

    public CustomOperateDialog(Context context)
    {
        super(context);
        calBar(true);
        setTransParentBackground();
        setPosition(Position.TOP);
        View rootView = LayoutInflater.from(context).inflate(R.layout.dialog_view4, null);
        mViewHolder = new ViewHolder(rootView);
        addContentView(rootView);
        mViewHolder.btn13.setOnClickListener(this);
        mViewHolder.btn14.setOnClickListener(this);
        mViewHolder.btn15.setOnClickListener(this);
    }

    @Override
    public void onClick(View v)
    {
        if(mListener ! =null) { mListener.onClick(((Button)v).getText().toString()); }}private static class ViewHolder
    {
        Button btn13, btn14, btn15;
        public ViewHolder(View rootView)
        { btn13 = rootView.findViewById(R.id.button13); btn14 = rootView.findViewById(R.id.button14); btn15 = rootView.findViewById(R.id.button15); }}public void setClickListener(OnClickCustomButtonListener l)
    {
        this.mListener = l;
    }

    public interface OnClickCustomButtonListener
    {
        void onClick(String str); }}Copy the code

3, display

CustomOperateDialog codDialog = new CustomOperateDialog(this)
        .setPosition(mPosition)
        .setClickedView(mButton10);
codDialog.setClickListener(new CustomOperateDialog.OnClickCustomButtonListener()
{
    @Override
    public void onClick(String str)
    {
        mButton10.setText("Click:"+ str); }}); codDialog.show();Copy the code

See the code to use BappyDialog

TestDialogActivity code

Written advice

According to @hm’s feedback in the article, the problem of incorrect position after multiple clicks is caused by multiple Settings of BappyDialog, so I suggest the following method. (Of course, if repeated calls to setClickedView() are needed to update the position of different clicked controls, this should be done outside.)

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

How to use happybubble-Bubble Layout?

Set the attribute values in the XML code

Attribute reference list

XML example

    <com.xujiaji.happybubble.BubbleLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/bubbleLayout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="16dp"
        app:lookAt="left"
        app:lookLength="16dp"
        app:lookPosition="20dp"
        app:lookWidth="16dp" />
Copy the code

Define attribute values in Java code.

BubbleLayout updates BubbleLayout with the “set property name” method and the invalidate method.

mBubbleLayout.setLook(BubbleLayout.Look.LEFT);
Copy the code

To view more

MainActivity code

Download the Demo

   Copyright 2016 XuJiaji

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except inThe 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 toin 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.
Copy the code