diff --git a/app/build.gradle.kts b/app/build.gradle.kts index a5620828..5104192e 100644 --- a/app/build.gradle.kts +++ b/app/build.gradle.kts @@ -137,6 +137,9 @@ dependencies { // Coroutine implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.3") + + // Tool Tip + implementation("com.github.skydoves:balloon:1.6.5") } fun getApiKey(propertyKey: String): String { diff --git a/app/src/main/java/com/sopetit/softie/ui/addroutine/list/AddRoutineActivity.kt b/app/src/main/java/com/sopetit/softie/ui/addroutine/list/AddRoutineActivity.kt index 3c8b0543..596e0e8d 100644 --- a/app/src/main/java/com/sopetit/softie/ui/addroutine/list/AddRoutineActivity.kt +++ b/app/src/main/java/com/sopetit/softie/ui/addroutine/list/AddRoutineActivity.kt @@ -1,8 +1,12 @@ package com.sopetit.softie.ui.addroutine.list import android.os.Bundle +import android.view.View +import android.widget.ImageView import androidx.activity.viewModels -import androidx.recyclerview.widget.RecyclerView +import com.skydoves.balloon.createBalloon +import com.skydoves.balloon.overlay.BalloonOverlayAnimation +import com.skydoves.balloon.overlay.BalloonOverlayCircle import com.sopetit.softie.R import com.sopetit.softie.databinding.ActivityAddRoutineListBinding import com.sopetit.softie.util.HorizontalItemDecoration @@ -13,8 +17,7 @@ import com.sopetit.softie.util.setStatusBarColorFromResource import dagger.hilt.android.AndroidEntryPoint @AndroidEntryPoint -class AddRoutineActivity : - BindingActivity(R.layout.activity_add_routine_list) { +class AddRoutineActivity : BindingActivity(R.layout.activity_add_routine_list) { private val makerCardPagerAdapter = MakerCardAdapter() private val viewModel by viewModels() private var routineThemeListAdapter: RoutineThemeListAdapter? = null @@ -24,21 +27,46 @@ class AddRoutineActivity : binding.viewModel = viewModel setStatusBarColorFromResource(R.color.background) - startMakerHelpModal() + startMakerTooltipModal() setBackEnter() setInitBinding() setAddRoutineListCardPagerAdapter() setRoutineThemeListAdapter() setItemDeco() + setupUI() setupObservers() } - private fun startMakerHelpModal() { - binding.ivAddRoutineListMakerHelp.setSingleOnClickListener { - MakerHelpDialogFragment().show(supportFragmentManager, "MakerHelpDialog") + private fun startMakerTooltipModal() { + binding.ivAddRoutineListMakerHelp.setSingleOnClickListener { view -> + showTooltip(view) } } + private fun showTooltip(anchor: View) { + val balloon = + createBalloon(this) { + setLayout(R.layout.tooltip_maker_help) + setBackgroundDrawableResource(R.drawable.shape_gray0_fill_10_rect) + setIsVisibleArrow(false) + setDismissWhenClicked(false) + setIsVisibleOverlay(true) + setOverlayShape(BalloonOverlayCircle(radius = 0f)) + setOverlayColorResource(R.color.gray950) + setBalloonOverlayAnimation(BalloonOverlayAnimation.FADE) + setDismissWhenOverlayClicked(false) + setLifecycleOwner(lifecycleOwner) + } + + balloon.setOnBalloonInitializedListener { view -> + view.findViewById(R.id.iv_maker_help_tooltip_exit)?.setOnClickListener { + balloon.dismiss() + } + } + + balloon.showAlignBottom(anchor) + } + private fun setBackEnter() { binding.ivAddRoutineListBackArrow.setSingleOnClickListener { finish() @@ -64,20 +92,28 @@ class AddRoutineActivity : } private fun setItemDeco() { - val horizontalDecoration = HorizontalItemDecoration( - context = this, - firstItemMargin = R.dimen.maker_recycler_view_first_margin, - itemMargin = R.dimen.maker_recycler_view_margin - ) - val verticalDecoration = VerticalItemDecoration( - context = this, - firstItemMargin = R.dimen.add_routine_recycler_view_first_margin, - itemMargin = R.dimen.add_routine_recycler_view_margin - ) + val horizontalDecoration = + HorizontalItemDecoration( + context = this, + firstItemMargin = R.dimen.maker_recycler_view_first_margin, + itemMargin = R.dimen.maker_recycler_view_margin + ) + val verticalDecoration = + VerticalItemDecoration( + context = this, + firstItemMargin = R.dimen.add_routine_recycler_view_first_margin, + itemMargin = R.dimen.add_routine_recycler_view_margin + ) binding.rvAddRoutineListMakerCard.addItemDecoration(horizontalDecoration) binding.rvAddList.addItemDecoration(verticalDecoration) } + private fun setupUI() { + binding.ivAddRoutineListMakerHelp.setOnClickListener { + showTooltip(it) + } + } + private fun setupObservers() { viewModel.addRoutineThemeListResponse.observe(this) { routineTheme -> routineTheme?.let { diff --git a/app/src/main/java/com/sopetit/softie/ui/addroutine/list/MakerHelpDialogFragment.kt b/app/src/main/java/com/sopetit/softie/ui/addroutine/list/MakerHelpDialogFragment.kt deleted file mode 100644 index 005b7e4c..00000000 --- a/app/src/main/java/com/sopetit/softie/ui/addroutine/list/MakerHelpDialogFragment.kt +++ /dev/null @@ -1,51 +0,0 @@ -package com.sopetit.softie.ui.addroutine.list - -import android.app.Dialog -import android.os.Bundle -import android.view.Gravity -import android.view.View -import android.view.WindowManager -import androidx.fragment.app.DialogFragment -import com.sopetit.softie.R -import com.sopetit.softie.databinding.DialogMakerHelpBinding - -class MakerHelpDialogFragment : DialogFragment() { - - private var _binding: DialogMakerHelpBinding? = null - private val binding get() = _binding - override fun onCreateDialog(savedInstanceState: Bundle?): Dialog { - val dialog = super.onCreateDialog(savedInstanceState) - dialog.window?.setBackgroundDrawableResource(android.R.color.transparent) - dialog.setContentView(R.layout.dialog_maker_help) - - _binding = - DialogMakerHelpBinding.bind(dialog.findViewById(R.id.cl_maker_help_dialog_border)) - return dialog - } - - override fun onStart() { - super.onStart() - dialog?.window?.attributes?.let { - it.dimAmount = 0.72f - dialog?.window?.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND) - } - - dialog?.window?.setGravity(Gravity.TOP or Gravity.END) - val params: WindowManager.LayoutParams? = dialog?.window?.attributes - - params?.x = - requireContext().resources.getDimensionPixelSize(R.dimen.maker_help_dialog_end_margin) - params?.y = - requireContext().resources.getDimensionPixelSize(R.dimen.maker_help_dialog_top_margin) - dialog?.window?.attributes = params - - binding?.ivMakerHelpDialogExit?.setOnClickListener { - dismiss() - } - } - - override fun onDestroyView() { - super.onDestroyView() - _binding = null - } -} diff --git a/app/src/main/res/layout/activity_add_routine_list.xml b/app/src/main/res/layout/activity_add_routine_list.xml index bf504445..8ecfbdef 100644 --- a/app/src/main/res/layout/activity_add_routine_list.xml +++ b/app/src/main/res/layout/activity_add_routine_list.xml @@ -80,6 +80,7 @@ android:layout_marginEnd="20dp" android:padding="9dp" android:src="@drawable/ic_maker_help" + android:tooltipText="@string/maker_help_dialog_content" app:layout_constraintBottom_toBottomOf="@id/iv_add_routine_list_maker_chip" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="@id/iv_add_routine_list_maker_chip" /> diff --git a/app/src/main/res/layout/dialog_maker_help.xml b/app/src/main/res/layout/tooltip_maker_help.xml similarity index 88% rename from app/src/main/res/layout/dialog_maker_help.xml rename to app/src/main/res/layout/tooltip_maker_help.xml index 5fb8b06b..dde698d8 100644 --- a/app/src/main/res/layout/dialog_maker_help.xml +++ b/app/src/main/res/layout/tooltip_maker_help.xml @@ -7,13 +7,13 @@ + app:layout_constraintTop_toBottomOf="@id/tv_maker_help_tooltip_title" /> diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml index 332d0caf..0f8d5d27 100644 --- a/app/src/main/res/values/dimens.xml +++ b/app/src/main/res/values/dimens.xml @@ -11,4 +11,5 @@ 8dp 8dp 4dp + 10dp