fix(android): make pairing code fit/visible on all screen sizes

Reported on a Pixel 10: the pairing code wasn't visible. The provisioning screen
was a non-scrolling vertical stack, and when the pairing section appeared below
the server-URL + Connect controls, the fixed 64sp code got pushed off-screen on
short/landscape phones (and could clip horizontally on narrow widths).

- Wrap the screen in a ScrollView (fillViewport) so content is always reachable.
- pairingCodeText now auto-sizes (autoSizeTextType=uniform, 24-96sp, single line,
  match_parent width) so it fills the width and never clips - phones, TVs, sticks.
- Hide the server-URL section + Connect button once paired so the code gets the
  full screen.

Compile-checked + signed APK builds. Needs on-device confirmation (Pixel 10 /
onn stick) that the code is now visible.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
ScreenTinker 2026-06-08 19:18:29 -05:00
parent d41bd1f27d
commit 06c6c3214b
2 changed files with 119 additions and 95 deletions

View file

@ -34,6 +34,7 @@ class ProvisioningActivity : AppCompatActivity() {
private lateinit var statusText: TextView
private lateinit var progressBar: ProgressBar
private lateinit var pairingSection: View
private lateinit var serverSection: View
private val connection = object : ServiceConnection {
override fun onServiceConnected(name: ComponentName?, service: IBinder?) {
@ -73,6 +74,7 @@ class ProvisioningActivity : AppCompatActivity() {
statusText = findViewById(R.id.statusText)
progressBar = findViewById(R.id.progressBar)
pairingSection = findViewById(R.id.pairingSection)
serverSection = findViewById(R.id.serverSection)
// Pre-fill if previously entered
if (config.serverUrl.isNotEmpty()) {
@ -135,6 +137,10 @@ class ProvisioningActivity : AppCompatActivity() {
wsService?.onRegistered = { deviceId ->
runOnUiThread {
progressBar.visibility = View.GONE
// Hide the server/connect controls so the pairing code has the
// whole screen and stays visible on short/landscape phones.
serverSection.visibility = View.GONE
connectBtn.visibility = View.GONE
pairingSection.visibility = View.VISIBLE
pairingCodeText.text = wsService?.getPairingCode() ?: "------"
statusText.text = "Enter this code in the dashboard to pair this display"

View file

@ -1,123 +1,141 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
<!-- Scrolls so content is always reachable on short screens; the pairing code
auto-sizes to fit any screen width (phones, TVs, HD sticks). -->
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:background="#111827"
android:padding="48dp"
android:keepScreenOn="true">
android:fillViewport="true"
android:background="#111827">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RemoteDisplay"
android:textColor="#3B82F6"
android:textSize="36sp"
android:textStyle="bold"
android:layout_marginBottom="8dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Digital Signage Player"
android:textColor="#94A3B8"
android:textSize="16sp"
android:layout_marginBottom="48dp" />
<!-- Server URL Section -->
<LinearLayout
android:layout_width="400dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:layout_marginBottom="24dp">
android:padding="32dp"
android:keepScreenOn="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Server URL"
android:textColor="#94A3B8"
android:textSize="14sp"
android:text="RemoteDisplay"
android:textColor="#3B82F6"
android:textSize="36sp"
android:textStyle="bold"
android:layout_marginBottom="8dp" />
<EditText
android:id="@+id/serverUrlInput"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@drawable/input_background"
android:hint="http://192.168.1.100:3000"
android:textColorHint="#64748B"
android:textColor="#F1F5F9"
android:textSize="16sp"
android:padding="12dp"
android:inputType="textUri"
android:singleLine="true"
android:importantForAutofill="no" />
</LinearLayout>
<Button
android:id="@+id/connectBtn"
android:layout_width="400dp"
android:layout_height="48dp"
android:text="Connect"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold"
android:background="@drawable/button_primary"
android:layout_marginBottom="32dp" />
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="48dp"
android:layout_height="48dp"
android:indeterminate="true"
android:visibility="gone" />
<!-- Pairing Section (shown after connection) -->
<LinearLayout
android:id="@+id/pairingSection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pairing Code"
android:text="Digital Signage Player"
android:textColor="#94A3B8"
android:textSize="16sp"
android:layout_marginBottom="12dp" />
android:layout_marginBottom="32dp" />
<TextView
android:id="@+id/pairingCodeText"
android:layout_width="wrap_content"
<!-- Server URL Section (hidden once paired so the code has room) -->
<LinearLayout
android:id="@+id/serverSection"
android:layout_width="400dp"
android:layout_height="wrap_content"
android:text="------"
android:textColor="#3B82F6"
android:textSize="64sp"
android:orientation="vertical"
android:layout_marginBottom="24dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Server URL"
android:textColor="#94A3B8"
android:textSize="14sp"
android:layout_marginBottom="8dp" />
<EditText
android:id="@+id/serverUrlInput"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@drawable/input_background"
android:hint="http://192.168.1.100:3000"
android:textColorHint="#64748B"
android:textColor="#F1F5F9"
android:textSize="16sp"
android:padding="12dp"
android:inputType="textUri"
android:singleLine="true"
android:importantForAutofill="no" />
</LinearLayout>
<Button
android:id="@+id/connectBtn"
android:layout_width="400dp"
android:layout_height="48dp"
android:text="Connect"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold"
android:fontFamily="monospace"
android:letterSpacing="0.3" />
android:background="@drawable/button_primary"
android:layout_marginBottom="32dp" />
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="48dp"
android:layout_height="48dp"
android:indeterminate="true"
android:visibility="gone" />
<!-- Pairing Section (shown after connection) -->
<LinearLayout
android:id="@+id/pairingSection"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pairing Code"
android:textColor="#94A3B8"
android:textSize="16sp"
android:layout_marginBottom="12dp" />
<!-- Auto-sizes between 24sp and 96sp to fill the available width on a
single line, so it's readable and never clipped on any screen. -->
<TextView
android:id="@+id/pairingCodeText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="------"
android:textColor="#3B82F6"
android:textStyle="bold"
android:fontFamily="monospace"
android:letterSpacing="0.3"
android:maxLines="1"
android:gravity="center"
app:autoSizeTextType="uniform"
app:autoSizeMinTextSize="24sp"
app:autoSizeMaxTextSize="96sp"
app:autoSizeStepGranularity="2sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Enter this code in the dashboard to pair this display"
android:textColor="#64748B"
android:textSize="14sp"
android:layout_marginTop="16dp"
android:gravity="center" />
</LinearLayout>
<TextView
android:id="@+id/statusText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter this code in the dashboard to pair this display"
android:textColor="#64748B"
android:textColor="#94A3B8"
android:textSize="14sp"
android:layout_marginTop="16dp"
android:gravity="center" />
android:gravity="center"
android:layout_marginTop="16dp" />
</LinearLayout>
<TextView
android:id="@+id/statusText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#94A3B8"
android:textSize="14sp"
android:layout_marginTop="16dp" />
</LinearLayout>
</ScrollView>