Android - The Home Screen (Revised)

To add artwork to Eclipse, copy the image files (using Finder / Explorer) into the "drawable" directory. Once the files are copied, it's necessary to right-click on the project and select Refresh. After doing so, you should see the images in the folder where you placed them:



Eclipse and the Android SDK provide tooling to visually update the landing page layout. For me, I find it easier to update the XML file, and then switch to the visual pane to see how it looks. The updated version of home_vc.xml looks as follows:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:background="@drawable/futilefishing"
  6. android:orientation="vertical" >
  7.  
  8. <Button
  9. android:id="@+id/btnPlanTrip"
  10. android:layout_marginTop="100dp"
  11. android:layout_marginLeft="30dp"
  12. android:layout_width="160dp"
  13. android:layout_height="40dp"
  14. android:background="@drawable/button3"
  15. android:text="@string/sBtnPlanTrip"/>
  16.  
  17. <Button
  18. android:id="@+id/btnLogTrip"
  19. android:layout_marginTop="10dp"
  20. android:layout_marginLeft="30dp"
  21. android:layout_width="160dp"
  22. android:layout_height="40dp"
  23. android:background="@drawable/button3"
  24. android:text="@string/sBtnLogTrip" />
  25.  
  26. <Button
  27. android:id="@+id/btnCaptureCatch"
  28. android:layout_marginTop="10dp"
  29. android:layout_marginLeft="30dp"
  30. android:layout_width="160dp"
  31. android:layout_height="40dp"
  32. android:background="@drawable/button3"
  33. android:text="@string/sBtnCaptureCatch" />
  34.  
  35. <Button
  36. android:id="@+id/btnLocalSpots"
  37. android:layout_marginTop="10dp"
  38. android:layout_marginLeft="30dp"
  39. android:layout_width="160dp"
  40. android:layout_height="40dp"
  41. android:background="@drawable/button3"
  42. android:text="@string/sBtnLocalSpots" />
  43.  
  44. </LinearLayout>

Comments:

  • Line 5: I specify the background image for the layout.
  • Lines 8-15: For each button, it's (unfortunately) necessary to hard-code a few things, such as the width, height, and the top margin.
  • Line 14: For each button, I specify the background image.

Once completed, my app's landing page looks as follows:


As with iOS, it may not be perfect, but it's significantly better that the original version.