skydoves / Balloon

:balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android.
https://skydoves.github.io/libraries/balloon/html/balloon/com.skydoves.balloon/index.html
Apache License 2.0
3.75k stars 292 forks source link

balloon content always has radius.. #220

Closed asker517 closed 3 years ago

asker517 commented 3 years ago

happened in Latest version

just create a list as balloon content ,then add android:background="?attr/selectableItemBackground" on list item for click background status

however, when i click first item or last item ..radius limit ripple background

that not expected .. only wanna radius on balloon not for content

skydoves commented 3 years ago

Hi, could you build and test using the demo project? The CustomListBalloonFactory creates the same Balloon that you said.

asker517 commented 3 years ago

Hi, could you build and test using the demo project? The CustomListBalloonFactory creates the same Balloon that you said.

@skydoves that my codes below:

class CustomListBalloonFactory : Balloon.Factory() {

  override fun create(context: Context, lifecycle: LifecycleOwner?): Balloon {
    return Balloon.Builder(context)
      .setLayout(R.layout.common_layout_custom_list)
      .setWidth(BalloonSizeSpec.WRAP)
      .setHeight(BalloonSizeSpec.WRAP)
      .setPaddingTop(4)
      .setPaddingBottom(4)
      .setArrowOrientation(ArrowOrientation.TOP)
      .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
      .setArrowPosition(0.5f)
      .setArrowSize(6)
      .setCornerRadius(4f)
      .setMarginRight(8)
      .setBackgroundColorResource(android.R.color.white)
      .setBalloonAnimation(BalloonAnimation.FADE)
      .setDismissWhenShowAgain(true)
      .setDismissWhenTouchOutside(true)
      .setDismissWhenOverlayClicked(true)
      .setLifecycleOwner(lifecycle)
      .build()
  }
}

common_layout_custom.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/common_color_ffffff"
    android:orientation="vertical"
    >

  <androidx.recyclerview.widget.RecyclerView
      android:id="@+id/list_recyclerView"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:overScrollMode="never"
      app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
      tools:listitem="@layout/common_balloon_item"
      />

</LinearLayout>

common_balloon_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:gravity="center_vertical"
    android:layout_height="@dimen/common_dp_36"
    android:background="?attr/selectableItemBackground"
    android:orientation="horizontal"
    android:paddingLeft="@dimen/common_dp_8"
    android:paddingRight="@dimen/common_dp_8"
    >

  <androidx.appcompat.widget.AppCompatImageView
      android:id="@+id/item_custom_icon"
      android:layout_width="@dimen/common_dp_27"
      android:layout_height="@dimen/common_dp_27"
      android:layout_gravity="center_vertical"
      android:layout_marginEnd="@dimen/common_dp_10"
      android:layout_marginRight="@dimen/common_dp_10"
      android:scaleType="centerInside"
      tools:src="@tools:sample/avatars"
      />

  <TextView
      android:id="@+id/item_custom_title"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_vertical"
      android:textColor="@color/common_color_333333"
      android:textSize="@dimen/common_sp_14"
      tools:text="@tools:sample/full_names"
      />
</LinearLayout>

almost the same as you demo, just remove some padding setting that not need in my case

skydoves commented 3 years ago

Hmm, that's weird. Or how about adding the below style to your theme?

<item name="colorControlHighlight">@color/colorPrimary</item>
asker517 commented 3 years ago

@skydoves ...it's worked ..!!

skydoves commented 3 years ago

Great! :)

asker517 commented 3 years ago

@skydoves Oh..I'm sorry ...i just revert my code...actually..it's not work ....when i add <item name="colorControlHighlight">@color/colorPrimary</item>

asker517 commented 3 years ago

if i called

setCornerRadius(0f)

..both balloon and it's content has no radius

skydoves commented 3 years ago

Hi, could you please describe your specific issue again? I think setCornerRadius(0f) works fine in the demo project.

asker517 commented 3 years ago

Hi, could you please describe your specific issue again? I think setCornerRadius(0f) works fine in the demo project.

it's right, setCornerRadius(0f) is no problem, i mean only i add setCornerRadius(0f) can make my content has no radius ..for example,if i setCornerRadius(2f) ..both balloon shape and its content has radius,but actually i only wanna balloon shape has round corners with radius..

asker517 commented 3 years ago

issue1 just like this...some way to avoid item1 background without radius?

asker517 commented 3 years ago

@skydoves seems the issue is RadiusLayout's background radius presented always smaller than yourcanvas.clipPath(path)'s path radius presented...even though..they are same value.. if set RadiusLayout.clipToOutline=true will be nice result that i expected..but api level 21 above limited

i don't know wether it is a issue or just you wanna design like this..but it's really a wired phenomena if user set background to balloon content .

looking forward your better solution.

Azazel commented 3 years ago

It looks like when radius value is set on RadiusLayout it expects it to be @Dp value, but in fact it is already a @Px value. Which applies dp->px coefficient again and corners of RadiusLayout have radius different from background gradient.

asker517 commented 3 years ago

It looks like when radius value is set on RadiusLayout it expects it to be @Dp value, but in fact it is already a @Px value. Which applies dp->px coefficient again and corners of RadiusLayout have radius different from background gradient.

@skydoves em...

/** corner radius for the clipping corners. */
  @Px private var _radius: Float = 0f
  var radius: Float
    @Px get() = _radius
    set(@Dp value) {
      _radius = value.dp
      invalidate()
    }

you are right...issue is here...set(@Dp...)..actually when called radius = builder.cornerRadius...builder.cornerRadius was a px value already..

skydoves commented 3 years ago

Hi @asker517 @Azazel, sorry for the late reply. This issue has been fixed on the new release 1.3.8-SNAPSHOT and this will be included in the next stable. Thanks for your report. :)

skydoves commented 3 years ago

A new stable 1.3.8 has been released!