Dynamically adjusted the width of showCaseView according to device width so that it looks nice in all screen sizes

app/src/main/java/org/kiwix/kiwixmobile/localFileTransfer/LocalFileTransferFragment.kt

@@ -42,6 +42,7 @@ import android.view.MenuInflater
 import android.view.MenuItem
 import android.view.View
 import android.view.ViewGroup
+import android.widget.FrameLayout
 import android.widget.Toast
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.annotation.RequiresApi
@@ -55,16 +56,20 @@ import androidx.lifecycle.lifecycleScope
 import androidx.recyclerview.widget.LinearLayoutManager
 import org.kiwix.kiwixmobile.R
 import org.kiwix.kiwixmobile.cachedComponent
+import org.kiwix.kiwixmobile.core.R.dimen
 import org.kiwix.kiwixmobile.core.R.drawable
 import org.kiwix.kiwixmobile.core.R.string
 import org.kiwix.kiwixmobile.core.base.BaseActivity
 import org.kiwix.kiwixmobile.core.base.BaseFragment
+import org.kiwix.kiwixmobile.core.extensions.ActivityExtensions.isLandScapeMode
+import org.kiwix.kiwixmobile.core.extensions.ActivityExtensions.isTablet
 import org.kiwix.kiwixmobile.core.extensions.ActivityExtensions.popNavigationBackstack
 import org.kiwix.kiwixmobile.core.extensions.getToolbarNavigationIcon
 import org.kiwix.kiwixmobile.core.extensions.setToolTipWithContentDescription
 import org.kiwix.kiwixmobile.core.extensions.toast
 import org.kiwix.kiwixmobile.core.main.CoreMainActivity
 import org.kiwix.kiwixmobile.core.navigateToAppSettings
+import org.kiwix.kiwixmobile.core.utils.DimenUtils.getWindowWidth
 import org.kiwix.kiwixmobile.core.utils.SharedPreferenceUtil
 import org.kiwix.kiwixmobile.core.utils.dialog.AlertDialogShower
 import org.kiwix.kiwixmobile.core.utils.dialog.KiwixDialog
@@ -143,11 +148,42 @@ class LocalFileTransferFragment :
     wifiDirectManager.callbacks = this
     wifiDirectManager.lifecycleCoroutineScope = lifecycleScope
     wifiDirectManager.startWifiDirectManager(filesForTransfer)
-    fragmentLocalFileTransferBinding
+    fragmentLocalFileTransferBinding?.apply {
-      ?.textViewDeviceName
+      textViewDeviceName.setToolTipWithContentDescription(getString(string.your_device))
-      ?.setToolTipWithContentDescription(getString(string.your_device))
+      fileTransferShowCaseView.apply {
+        val fileTransferShowViewParams = layoutParams
+        fileTransferShowViewParams.width = getShowCaseViewWidth()
+        fileTransferShowViewParams.height = getShowCaseViewHeight()
+        layoutParams = fileTransferShowViewParams
+      }
+      nearbyDeviceShowCaseView.apply {
+        val nearbyDeviceShowCaseViewParams = layoutParams
+        nearbyDeviceShowCaseViewParams.width = getShowCaseViewWidth()
+        nearbyDeviceShowCaseViewParams.height = getShowCaseViewHeight()
+        layoutParams = nearbyDeviceShowCaseViewParams
+      }
+    }
   }
 
+  private fun getShowCaseViewWidth(): Int {
+    return when {
+      requireActivity().isTablet() -> {
+        requireActivity().resources.getDimensionPixelSize(dimen.maximum_donation_popup_width)
+      }
+
+      requireActivity().isLandScapeMode() -> {
+        requireActivity().resources.getDimensionPixelSize(
+          dimen.showcase_view_maximum_width_in_landscape_mode
+        )
+      }
+
+      else -> FrameLayout.LayoutParams.MATCH_PARENT
+    }
+  }
+
+  private fun getShowCaseViewHeight(): Int =
+    requireActivity().resources.getDimensionPixelSize(dimen.showcase_view_maximum_height)
+
   private fun setupMenu() {
     (requireActivity() as MenuHost).addMenuProvider(
       object : MenuProvider {

app/src/main/res/layout/fragment_local_file_transfer.xml

@@ -100,7 +100,7 @@
 
   <View
     android:id="@+id/nearby_device_show_case_view"
-    android:layout_width="@dimen/showcase_view_maximum_width"
+    android:layout_width="10dp"
     android:layout_height="10dp"
     android:layout_margin="50dp"
     app:layout_constraintEnd_toEndOf="parent"
@@ -149,7 +149,7 @@
 
   <View
     android:id="@+id/file_transfer_show_case_view"
-    android:layout_width="@dimen/showcase_view_maximum_width"
+    android:layout_width="10dp"
     android:layout_height="10dp"
     android:layout_margin="50dp"
     app:layout_constraintEnd_toEndOf="parent"

core/src/main/java/org/kiwix/kiwixmobile/core/extensions/ActivityExtensions.kt

@@ -189,4 +189,14 @@ object ActivityExtensions {
 
   fun Activity.isLandScapeMode(): Boolean =
     resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
+
+  @Suppress("MagicNumber")
+  fun Activity.isTablet(): Boolean {
+    val configuration = resources.configuration
+    val isLargeOrXLarge =
+      configuration.screenLayout and
+        Configuration.SCREENLAYOUT_SIZE_MASK >= Configuration.SCREENLAYOUT_SIZE_LARGE
+    val isWideEnough = configuration.smallestScreenWidthDp >= 600
+    return isLargeOrXLarge && isWideEnough
+  }
 }

core/src/main/res/values/dimens.xml

@@ -26,5 +26,6 @@
   <dimen name="find_in_page_button_padding">13dp</dimen>
   <dimen name="donation_popup_bottom_margin">20dp</dimen>
   <dimen name="maximum_donation_popup_width">400dp</dimen>
-  <dimen name="showcase_view_maximum_width">200dp</dimen>
+  <dimen name="showcase_view_maximum_width_in_landscape_mode">150dp</dimen>
+  <dimen name="showcase_view_maximum_height">10dp</dimen>
 </resources>