Bubble View for Android.

Overview

BubbleLayout

Platform API Android Arsenal

Bubble View for Android with custom stroke width and color, arrow size, position and direction.
BubbleLayout Extends the FrameLayout.

Gradle

Step 1. Add the JitPack repository to your build file

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

Step 2. Add the dependency

dependencies {
        implementation 'com.github.MasayukiSuda:BubbleLayout:v1.2.1'
}

Basic Usage

Include the BubbleLayout widget in your layout.
<com.daasuu.bl.BubbleLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="12dp"
    android:padding="8dp"
    app:bl_arrowDirection="right"
    app:bl_arrowHeight="8dp"
    app:bl_arrowPosition="16dp"
    app:bl_arrowWidth="8dp"
    app:bl_cornersRadius="6dp"
    app:bl_strokeWidth="1dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="4dp"
        android:text="BubbleLayout"
        android:textColor="@android:color/holo_red_dark" />

</com.daasuu.bl.BubbleLayout>

Attributes

There are several attributes you can set:

attr description
bl_arrowWidth Width of the arrow, default 8dp
bl_arrowHeight Height of the arrow, default 8dp
bl_arrowPosition Position of the arrow, default 12dp
bl_cornersRadius Corner radius of the BubbleLayout, default 0dp
bl_bubbleColor Color of the BubbleLayout, default WHITE
bl_strokeWidth Width of the stroke, default 0dp
bl_strokeColor Color of the stroke, default GLAY
bl_arrowDirection Drawing position of the arrow : 'left' or 'top' or 'right' or 'bottom' or 'left_center' or 'top_center' or 'right_center' or 'bottom_center' default 'left'

Samples

<com.daasuu.bl.BubbleLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="12dp"
    android:padding="8dp"
    app:bl_arrowDirection="top"
    app:bl_arrowHeight="8dp"
    app:bl_arrowPosition="12dp"
    app:bl_arrowWidth="8dp"
    app:bl_bubbleColor="@android:color/holo_blue_light"
    app:bl_cornersRadius="8dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="4dp"
            android:text="BubbleLayout"
            android:textColor="@android:color/holo_red_dark" />

    </LinearLayout>

</com.daasuu.bl.BubbleLayout>

<com.daasuu.bl.BubbleLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp"
    app:bl_arrowDirection="left"
    app:bl_arrowHeight="8dp"
    app:bl_arrowPosition="16dp"
    app:bl_arrowWidth="8dp"
    app:bl_strokeWidth="1dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="4dp"
        android:text="BubbleLayout"
        android:textColor="@android:color/holo_red_dark" />
</com.daasuu.bl.BubbleLayout>

Button button = (Button) findViewById(R.id.btn_popup);

BubbleLayout bubbleLayout = (BubbleLayout) LayoutInflater.from(this).inflate(R.layout.layout_sample_popup, null);
PopupWindow popupWindow = BubblePopupHelper.create(this, bubbleLayout);
final Random random = new Random();

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        int[] location = new int[2];
        v.getLocationInWindow(location);
        if (random.nextBoolean()) {
            bubbleLayout.setArrowDirection(ArrowDirection.TOP);
        } else {
            bubbleLayout.setArrowDirection(ArrowDirection.BOTTOM);
        }
        popupWindow.showAtLocation(v, Gravity.NO_GRAVITY, location[0], v.getHeight() + location[1]);
    }
});

layout_sample_popup.xml

<?xml version="1.0" encoding="utf-8"?>
<com.daasuu.bl.BubbleLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="@dimen/activity_horizontal_margin"
    app:bl_arrowDirection="top"
    app:bl_arrowHeight="12dp"
    app:bl_arrowPosition="16dp"
    app:bl_arrowWidth="8dp"
    app:bl_bubbleColor="@color/colorAccent"
    app:bl_cornersRadius="2dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="4dp"
        android:text="BubbleLayout Popup"
        android:textColor="@android:color/white" />
</com.daasuu.bl.BubbleLayout>

License

Copyright 2016 MasayukiSuda

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • Upgrade to androidx

    Upgrade to androidx

    It would be great if this could be updated to androidx (that dependency on com.android.support:appcompat-v7:) so we can avoid using Jetifier for this dependancy. (Jetifier makes our builds a bit slow).

    opened by bjarneheden 3
  • Feature/support top right + bottom right bubble directions

    Feature/support top right + bottom right bubble directions

    What happened 🤔

    We use this lib but it doesn't support TOP-RIGHT or BOTTOM-RIGHT direction so we decided to add support to solve this issue #18.

    PoW (a.k.a Proof Of Work)💪

    Solve #18

    20200724_005208

    opened by luongvo 1
  • initPadding(), resetPadding() calculate incorrect

    initPadding(), resetPadding() calculate incorrect

    First, i'm sorry that i am not good at english.

    In my case, mArroHeight variable is prime number.

    So, Every time you call the method, the value changes. (ex. setArrowPosition())

    because, float to int type casting

    opened by yangsuni1024 1
  • Change shape arrow

    Change shape arrow

    Hi MasayukiSuda. I am using your library, it is very helpful, thank you very much. I have a issue. I want to change shape arrow, like image image For top left and top right. Can i help me, i really need it. Thank you.

    opened by bittergourdbd 1
  • setBubbleColor always gray

    setBubbleColor always gray

    The issue could be specific to when populating through an adapter. Inside the poplateView I have:

    protected void populateView(View v, ChatMessage model, int position) {
     BubbleLayout bubble;
     bubble = (BubbleLayout) v.findViewById(R.id.bubble);
    
     if (model.getMessageUser() != null && messageAuthor.equals(currentUsername)) {
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) bubble.getLayoutParams();
                params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
    
                bubble.setArrowDirection(ArrowDirection.RIGHT);
                bubble.setBubbleColor(R.color.colorPrimary);
            }
    

    The arrow direction works well, but the bubbles always looks dark gray regardless of the value of R.color.colorPrimary in the values resource folder. Setting the color of the bubble in the xml layout works (displays the right color) for the bubbles that don't meet the condition in the above statement.

    opened by Yisas 1
  • add setter for bubble attribute, allow user use one layout for similar bubble

    add setter for bubble attribute, allow user use one layout for similar bubble

    1. add setter for bubble attribute, allow user use one layout for similar bubble;
    2. change arrow direction from enum to @IntDef;
    3. update dependencies;
    4. clean up dependencies;
    5. clean up code;
    opened by Piasy 1
  • not able to add dependency

    not able to add dependency

    when im trying to add dependency in build.gradle file then it giving me error. please help me out. compile 'com.daasuu:BubbleLayout:1.2.0' Error:(74, 13) Failed to resolve: com.daasuu:BubbleLayout:1.2.0

    opened by HarshitaAggrawal 0
  • Android resource linking failed, incompatible with attribute bl_cornersRadius

    Android resource linking failed, incompatible with attribute bl_cornersRadius

    FAILURE: Build failed with an exception.

    • What went wrong: Execution failed for task ':app:processDebugResources'.

    A failure occurred while executing com.android.build.gradle.internal.res.LinkApplicationAndroidResourcesTask$TaskAction Android resource linking failed ERROR:/Users/ram/Desktop/Ram/workspace/reactnative/android/app/src/main/res/layout/text_row_left.xml:45: AAPT: error: '16' is incompatible with attribute bl_cornersRadius (attr) reference|dimension [weak].

    Code :

    <com.daasuu.bl.BubbleLayout
                android:padding="12dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:bl_arrowDirection="left"
                app:bl_arrowHeight="11dp"
                app:bl_arrowPosition="14dp"
                app:bl_arrowWidth="6dp"
                app:bl_cornersRadius="16"
                app:bl_strokeColor="@color/grey_1"
                app:bl_strokeWidth="1dp">
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:maxWidth="200dp"
                    android:textColor="@color/black"
                    android:textSize="14sp" />
            </com.daasuu.bl.BubbleLayout>
    

    implementation 'com.github.MasayukiSuda:BubbleLayout:v1.2.2'

    maven { url 'https://www.jitpack.io' }

    opened by Ramaraju1992 0
  • Added NONE value

    Added NONE value

    Is good to add and none value if we don't have any arrow direction to any bubble layout. In my case I have some bubbles with arrows and some not but when I try with switch I can use ArrowDirection.NONE. If this will added it will be very good.

    opened by diargegaj 0
Releases(v1.2.2)
Owner
Masayuki Suda
Masayuki Suda
null 2.4k Dec 30, 2022
A wave view of android,can be used as progress bar.

WaveView ![Gitter](https://badges.gitter.im/Join Chat.svg) A wave view of android,can be used as progress bar. Screenshot APK demo.apk What can be use

Kai Wang 1.3k Dec 28, 2022
TileView is a subclass of android.view.ViewGroup that asynchronously displays, pans and zooms tile-based images. Plugins are available for features like markers, hotspots, and path drawing.

This project isn't maintained anymore. It is now recommended to use https://github.com/peterLaurence/MapView. MapView is maintained by Peter, one of o

Mike Dunn 1.5k Nov 21, 2022
Android component which presents a dismissible view from the bottom of the screen

BottomSheet BottomSheet is an Android component which presents a dismissible view from the bottom of the screen. BottomSheet can be a useful replaceme

Flipboard 4.5k Dec 28, 2022
A swipeable - auto resizing view group for android

SwipeableLayout A swipeable - auto resizing view group for android Usage build.gradle compile 'com.wmbest.widget:swipeable-layout:1.0.+@aar' -- or --

Bill Best 114 Nov 25, 2022
Show triangle view.

TriangleLabelView Show triangle view. How to Use To see how the TriangleLabelView are added to your xml layouts, check the sample project. <jp.shts.an

Shota Saito 877 Dec 6, 2022
VoronoiView is a view (ViewGroup) that allows you to add and display views inside Voronoi diagram regions.

Vorolay VoronoiView is a view (ViewGroup) that allows you to add and display views inside Voronoi diagram regions. [Voronoi diagram] (https://en.wikip

Daniil Jurjev 918 Dec 4, 2022
A library for showing different types of layouts when a list view is empty

Android Empty Layout Please note that this project is not being maintained now. Hopefully a new version will be available soon. A library for showing

Raquib-ul Alam (Kanak) 606 Nov 26, 2022
Material Design Search View Layout, now implemented in Google Maps, Dialer, etc

THIS PROJECT IS DEPRECATED Component is not maintained anymore. Implementation of Lollipop+ Dialer and Google Maps. DEMO Add in View Add to your layou

Sahil Dave 1.1k Dec 22, 2022
Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube graphic component.

Draggable Panel DEPRECATED. This project is not maintained anymore. Draggable Panel is an Android library created to build a draggable user interface

Pedro Vicente Gómez Sánchez 3k Jan 5, 2023
Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your development.

Bubbles for Android Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your

Txus Ballesteros 1.5k Jan 2, 2023
Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube New graphic component.

Please switch to DragView, for the best support, thank you DraggablePanel Download allprojects { repositories { ... maven { url 'https://jitp

Hoàng Anh Tuấn 103 Oct 12, 2022
FixedHeaderTableLayout is a powerful Android library for displaying complex data structures and rendering tabular data composed of rows, columns and cells with scrolling and zooming features. FixedHeaderTableLayout is similar in construction and use as to Android's TableLayout

FixedHeaderTableLayout is a powerful Android library for displaying complex data structures and rendering tabular data composed of rows, columns and cells with scrolling and zooming features. FixedHeaderTableLayout is similar in construction and use as to Android's TableLayout

null 33 Dec 8, 2022
An Android Layout which has a same function like https://github.com/romaonthego/RESideMenu

ResideLayout An Android Layout which has a same function like https://github.com/romaonthego/RESideMenu. Can be used on Android 1.6(I haven't try it.)

Yang Hui 392 Oct 12, 2022
An Android library that help you to build app with swipe back gesture.

SwipeBackLayout An Android library that help you to build app with swipe back gesture. Demo Apk GooglePlay Requirement The latest android-support-v4.j

ike_w0ng 6.1k Dec 29, 2022
Ultra Pull to Refresh for Android. Support all the views.

Welcome to follow me on GitHub or Twitter GitHub: https://github.com/liaohuqiu Twitter: https://twitter.com/liaohuqiu 中文版文档 Wanna auto-load-more? This

Huqiu Liao 9.6k Jan 5, 2023
SwipeBack is an android library that can finish a activity by using gesture.

SwipeBack SwipeBack is a android library that can finish a activity by using gesture. You can set the swipe direction,such as left,top,right and botto

Eric 1.7k Nov 21, 2022
A very simple arc layout library for Android

ArcLayout A very simple arc layout library for Android. Try out the sample application on the Play Store. Usage (For a working implementation of this

ogaclejapan 1.4k Dec 26, 2022