Enhance frontend UX: add ripple feedback, placeholder text, loading progress indicator, button blocking, and auto-scrolling

app/src/main/java/com/example/pestdetection/MainActivity.java

@@ -32,6 +32,13 @@ public class MainActivity extends AppCompatActivity {
     Uri imageUri;
     EditText etServerUrl;
 
+    // View references for enhanced UX
+    ScrollView mainScrollView;
+    TextView tvImagePlaceholder;
+    View loadingOverlay;
+    ProgressBar progressBar;
+    Button btnSelect, btnCamera, btnUpload;
+
     private ConnectivityManager connectivityManager;
     private ConnectivityManager.NetworkCallback networkCallback;
 
@@ -40,6 +47,12 @@ public class MainActivity extends AppCompatActivity {
                 if (result.getResultCode() == RESULT_OK && result.getData() != null) {
                     imageUri = result.getData().getData();
                     imageView.setImageURI(imageUri);
+                    if (tvImagePlaceholder != null) {
+                        tvImagePlaceholder.setVisibility(View.GONE);
+                    }
+                    if (btnUpload != null) {
+                        btnUpload.setEnabled(true);
+                    }
                 }
             });
 
@@ -47,6 +60,12 @@ public class MainActivity extends AppCompatActivity {
             registerForActivityResult(new ActivityResultContracts.TakePicture(), success -> {
                 if (success) {
                     imageView.setImageURI(imageUri);
+                    if (tvImagePlaceholder != null) {
+                        tvImagePlaceholder.setVisibility(View.GONE);
+                    }
+                    if (btnUpload != null) {
+                        btnUpload.setEnabled(true);
+                    }
                 }
             });
 
@@ -64,10 +83,14 @@ public class MainActivity extends AppCompatActivity {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
 
+        mainScrollView = findViewById(R.id.mainScrollView);
         imageView = findViewById(R.id.imageView);
-        Button btnSelect = findViewById(R.id.btnSelect);
-        Button btnCamera = findViewById(R.id.btnCamera);
-        Button btnUpload = findViewById(R.id.btnUpload);
+        tvImagePlaceholder = findViewById(R.id.tvImagePlaceholder);
+        loadingOverlay = findViewById(R.id.loadingOverlay);
+        progressBar = findViewById(R.id.progressBar);
+        btnSelect = findViewById(R.id.btnSelect);
+        btnCamera = findViewById(R.id.btnCamera);
+        btnUpload = findViewById(R.id.btnUpload);
         resultText = findViewById(R.id.resultText);
         treatmentText = findViewById(R.id.treatmentText);
         tvConnectionStatus = findViewById(R.id.tvConnectionStatus);
@@ -81,6 +104,10 @@ public class MainActivity extends AppCompatActivity {
         ImageView settingsToggleArrow = findViewById(R.id.settingsToggleArrow);
         Button btnTestConnection = findViewById(R.id.btnTestConnection);
 
+        if (btnUpload != null) {
+            btnUpload.setEnabled(false); // Initially disable upload button
+        }
+
         etServerUrl.setText(ApiConfig.getPredictUrl(this));
 
         settingsHeader.setOnClickListener(v -> {
@@ -117,7 +144,19 @@ public class MainActivity extends AppCompatActivity {
     protected void onStop() {
         super.onStop();
         if (imageView != null) {
-            imageView.setImageResource(R.mipmap.ic_launcher);
+            imageView.setImageDrawable(null);
+        }
+        if (tvImagePlaceholder != null) {
+            tvImagePlaceholder.setVisibility(View.VISIBLE);
+        }
+        if (btnUpload != null) {
+            btnUpload.setEnabled(false);
+        }
+        if (progressBar != null) {
+            progressBar.setVisibility(View.GONE);
+        }
+        if (loadingOverlay != null) {
+            loadingOverlay.setVisibility(View.GONE);
         }
         if (resultText != null) {
             resultText.setText("Waiting for scan...");
@@ -279,6 +318,13 @@ public class MainActivity extends AppCompatActivity {
             resultText.setText("Analyzing...");
             treatmentText.setText("Please wait...");
 
+            // Show loaders and disable action controls to avoid duplicate clicks
+            if (progressBar != null) progressBar.setVisibility(View.VISIBLE);
+            if (loadingOverlay != null) loadingOverlay.setVisibility(View.VISIBLE);
+            if (btnUpload != null) btnUpload.setEnabled(false);
+            if (btnSelect != null) btnSelect.setEnabled(false);
+            if (btnCamera != null) btnCamera.setEnabled(false);
+
             // Scaled and compressed image bytes on-device
             byte[] imageBytes = getScaledAndCompressedImage(imageUri);
 
@@ -288,6 +334,18 @@ public class MainActivity extends AppCompatActivity {
                     resultText.setText(pest + " (" + (int) (confidence * 100) + "%)");
                     treatmentText.setText(treatment);
                     updateConnectionStatus(true, "Connected");
+
+                    // Hide loaders and re-enable buttons
+                    if (progressBar != null) progressBar.setVisibility(View.GONE);
+                    if (loadingOverlay != null) loadingOverlay.setVisibility(View.GONE);
+                    if (btnUpload != null) btnUpload.setEnabled(true);
+                    if (btnSelect != null) btnSelect.setEnabled(true);
+                    if (btnCamera != null) btnCamera.setEnabled(true);
+
+                    // Auto-scroll layout to reveal results
+                    if (mainScrollView != null) {
+                        mainScrollView.post(() -> mainScrollView.fullScroll(View.FOCUS_DOWN));
+                    }
                 }
 
                 @Override
@@ -295,6 +353,14 @@ public class MainActivity extends AppCompatActivity {
                     resultText.setText("FAILED: " + message);
                     treatmentText.setText("Check server URL in Connection Settings");
                     updateConnectionStatus(false, message);
+
+                    // Hide loaders and re-enable buttons
+                    if (progressBar != null) progressBar.setVisibility(View.GONE);
+                    if (loadingOverlay != null) loadingOverlay.setVisibility(View.GONE);
+                    if (btnUpload != null) btnUpload.setEnabled(true);
+                    if (btnSelect != null) btnSelect.setEnabled(true);
+                    if (btnCamera != null) btnCamera.setEnabled(true);
+
                     android.util.Log.e("PestScanner", "Connection Error to " + serverUrl + ": " + message);
                 }
             });
@@ -302,6 +368,13 @@ public class MainActivity extends AppCompatActivity {
         } catch (Exception e) {
             e.printStackTrace();
             resultText.setText("Error: " + e.getMessage());
+
+            // Reset loaders and re-enable buttons on error
+            if (progressBar != null) progressBar.setVisibility(View.GONE);
+            if (loadingOverlay != null) loadingOverlay.setVisibility(View.GONE);
+            if (btnUpload != null) btnUpload.setEnabled(true);
+            if (btnSelect != null) btnSelect.setEnabled(true);
+            if (btnCamera != null) btnCamera.setEnabled(true);
         }
     }
 

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

@@ -3,6 +3,7 @@
     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:id="@+id/mainScrollView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@color/bg_soft_white"
@@ -98,7 +99,8 @@
                     android:orientation="horizontal"
                     android:gravity="center_vertical"
                     android:clickable="true"
-                    android:focusable="true">
+                    android:focusable="true"
+                    android:background="?android:attr/selectableItemBackground">
 
                     <ImageView
                         android:layout_width="20dp"
@@ -196,14 +198,37 @@
                 android:id="@+id/imageView"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
-                android:scaleType="centerCrop"
-                android:src="@mipmap/ic_launcher" />
+                android:scaleType="centerCrop" />
 
-            <!-- Overlay for when no image is selected -->
+            <!-- Placeholder text when no image is selected -->
+            <TextView
+                android:id="@+id/tvImagePlaceholder"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:gravity="center"
+                android:text="No crop image selected\nTap Gallery or Camera below"
+                android:textColor="@color/text_hint"
+                android:textSize="14sp"
+                android:textStyle="bold"
+                android:padding="24dp" />
+
+            <!-- Semi-transparent overlay to dim image when analyzing -->
             <View
+                android:id="@+id/loadingOverlay"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
-                android:background="#1A000000" />
+                android:background="#99000000"
+                android:visibility="gone" />
+
+            <!-- Circular Loading Spinner -->
+            <ProgressBar
+                android:id="@+id/progressBar"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:visibility="gone"
+                android:indeterminateTint="@color/primary_green" />
         </com.google.android.material.card.MaterialCardView>
 
         <!-- Action Buttons Section -->