[Android Kotlin]툴팁 구현 / Tooltip Library Balloon

https://github.com/skydoves/Balloon 참고 

1. app gradle에 depedencies 추가 

dependencies {
    implementation "com.github.skydoves:balloon:1.4.6"
}

 

2. 클릭해서 툴팁을 띄울 View 생성 (xml 작성)

ConstraintLayout 안에 넣어서 진행.

 <ImageButton
        android:id="@+id/ib_body_tooltip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="15dp"
        android:background="@android:color/transparent"
        android:scaleType="fitXY"
        android:src="@drawable/ic_information_black_30"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view2" />

 

3. Balloon Object 생성

Kotlin 

Activity에서 구현할 때는 createBalloon(context) 부분을 createBalloon(context = this)수정. 그리고 setLifecycleOwner(lifecycle) 부분을 빼고 진행.

val balloon = createBalloon(context) {
  setWidthRatio(1.0f)
  setHeight(BalloonSizeSpec.WRAP)
  setText("Edit your profile here!")
  setTextColorResource(R.color.white_87)
  setTextSize(15f)
  setIconDrawableResource(R.drawable.ic_edit)
  setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
  setArrowSize(10)
  setArrowPosition(0.5f)
  setPadding(12)
  setCornerRadius(8f)
  setBackgroundColorResource(R.color.skyBlue)
  setBalloonAnimation(BalloonAnimation.ELASTIC)
  setLifecycleOwner(lifecycle)
  build()
}

 

실제 쓴 코드 

- Viewbinding과 ViewModel을 사용하면서 적용함.

 

- setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR) 로 툴팁을 띄울 버튼을 기준으로 화살표 방향이 잡히는거라 setArrowPosition(0.5f) 값은 그대로 했다. 

 

- 가로길이 컨텐츠 크기에 맞게 동적으로 반응하게 함  : setWidth(BalloonSizeSpec.WRAP) 

class BodyTemplate : AppCompatActivity(), View.OnClickListener {
    private lateinit var binding: ActivityBodyTemplateBinding
    private lateinit var bodyTemplateViewModel: BodyTemplateViewModel
    private lateinit var balloon: Balloon

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityBodyTemplateBinding.inflate(layoutInflater)
        setContentView(binding.root)

        bodyTemplateViewModel = ViewModelProvider(this)[BodyTemplateViewModel::class.java]

        ...생략...
        
        //tooltip 버튼
        binding.ibBodyTooltip.setOnClickListener(this)
        //balloon객체 생성
        balloon = createBalloon(context = this) {
            setHeight(BalloonSizeSpec.WRAP)
            setWidth(BalloonSizeSpec.WRAP)
            setText(getString(R.string.template_body_tooltip))
            setTextColorResource(R.color.purple_200)
            setTextSize(15f)
            setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
            setArrowSize(10)
            setArrowPosition(0.5f)
            setPadding(12)
            setCornerRadius(8f)
            setBackgroundColorResource(R.color.black)
            setBalloonAnimation(BalloonAnimation.FADE)
            build()
        }

    }

JAVA

Balloon balloon = new Balloon.Builder(context)
    .setArrowSize(10)
    .setArrowOrientation(ArrowOrientation.TOP)
    .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
    .setArrowPosition(0.5f)
    .setWidth(BalloonSizeSpec.WRAP)
    .setHeight(65)
    .setTextSize(15f)
    .setCornerRadius(4f)
    .setAlpha(0.9f)
    .setText("You can access your profile from now on.")
    .setTextColor(ContextCompat.getColor(context, R.color.white_93))
    .setTextIsHtml(true)
    .setIconDrawable(ContextCompat.getDrawable(context, R.drawable.ic_profile))
    .setBackgroundColor(ContextCompat.getColor(context, R.color.colorPrimary))
    .setOnBalloonClickListener(onBalloonClickListener)
    .setBalloonAnimation(BalloonAnimation.FADE)
    .setLifecycleOwner(lifecycleOwner)
    .build();

 

4. 툴팁 띄우기 

아래의 함수로 툴팁을 띄울 방향을 정할 수 있다.

balloon.showAlignTop(눌러서 툴팁을 띄울 뷰) //위
balloon.showAlignBottom(눌러서 툴팁을 띄울 뷰) //아래
balloon.showAlignRight(눌러서 툴팁을 띄울 뷰) //오른쪽
balloon.showAlignLeft(눌러서 툴팁을 띄울 뷰) //왼쪽

나는 아래에 띄웠다. 

balloon.showAlignBottom(binding.ibBodyTooltip)

 

실제 쓴 코드 

View.OnClickListener를 사용해서 진행. when에서 툴팁을 띄우도록 처리했다.

class BodyTemplate : AppCompatActivity(), View.OnClickListener {
    private lateinit var binding: ActivityBodyTemplateBinding
    private lateinit var bodyTemplateViewModel: BodyTemplateViewModel
    private lateinit var balloon: Balloon

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityBodyTemplateBinding.inflate(layoutInflater)
        setContentView(binding.root)

        bodyTemplateViewModel = ViewModelProvider(this)[BodyTemplateViewModel::class.java]

       
... 생략...

        //tooltip 버튼
        binding.ibBodyTooltip.setOnClickListener(this)
        //tooltip
        balloon = createBalloon(context = this) {
            setWidthRatio(1.0f)
            setHeight(BalloonSizeSpec.WRAP)
            setText("Edit your profile here!")
            setTextColorResource(R.color.purple_200)
            setTextSize(15f)
            setIconDrawableResource(R.drawable.ic_chat)
            setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
            setArrowSize(10)
            setArrowPosition(0.5f)
            setPadding(12)
            setCornerRadius(8f)
            setBackgroundColorResource(R.color.black)
            setBalloonAnimation(BalloonAnimation.ELASTIC)
            build()
        }
    }

override fun onClick(p0: View?) {
        when (p0!!.id) {
           ...
            R.id.ib_body_tooltip -> { //tooltip
               balloon.showAlignBottom(binding.ibBodyTooltip)
            }
            R.id.btn_body_cancel -> {
                finish()
            }
            R.id.btn_body_save -> {
                bodyTemplateViewModel.keywordLiveData.observe(this) {
                   for(i in it){
                       bodyTemplateViewModel.insertKeyword(i)
                   }

                }

            }
        }
    }

결과