facebooktwittergoogle_pluslinkedinrssyoutubefacebooktwittergoogle_pluslinkedinrssyoutube
It happens quite often that we need to implement a custom interface, with a header and a footer, but in between the content is to big to fit the screen and then we need scrolling.
On Android this can be implemented in an elegant fashion, by using the RelativeLayout control. We create the Header, the Footer and then a layout for the middle content that we set to be RelativeLayout.ABOVE the footer and RelativeLayout.BELOW the Header. That's it!

Sample source code: HeaderContentFooterGUI

Note: To learn how to add a background, scroll to the bottom of this article.

The relevant part of code:

  1.  
  2. //Create our top content holder
  3. RelativeLayout global_panel = new RelativeLayout (this);
  4. global_panel.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
  5. global_panel.setGravity(Gravity.FILL);
  6.  
  7. // +++++++++++++ TOP COMPONENT: the header
  8. RelativeLayout ibMenu = new RelativeLayout(this);
  9. ibMenu.setId(idTopLayout);
  10. ibMenu.setBackgroundDrawable(getResources().getDrawable(R.drawable.line));
  11. int ibMenuPadding = (int) 6;
  12. ibMenu.setPadding(ibMenuPadding,ibMenuPadding,ibMenuPadding,ibMenuPadding);
  13. RelativeLayout.LayoutParams topParams = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
  14. topParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
  15. global_panel.addView(ibMenu,topParams);
  16. // textview in ibMenu : card holder
  17. TextView cTV = new TextView(this);
  18. cTV.setText("Header");
  19. cTV.setTextColor(Color.rgb(255,255,255));
  20. int nTextH = 18;
  21. cTV.setTextSize(nTextH);
  22. cTV.setTypeface(Typeface.create("arial", Typeface.BOLD));
  23. RelativeLayout.LayoutParams lpcTV = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  24. lpcTV.addRule(RelativeLayout.CENTER_IN_PARENT);
  25. ibMenu.addView(cTV, lpcTV);
  26. // cancel button in ibMenu
  27. Button m_bCancel = new Button(this);
  28. m_bCancel.setId(idBack);
  29. m_bCancel.setOnClickListener((OnClickListener) this);
  30. m_bCancel.setText("Cancel");
  31. nTextH = 12;
  32. m_bCancel.setTextSize(nTextH);
  33. m_bCancel.setTypeface(Typeface.create("arial", Typeface.BOLD));
  34. RelativeLayout.LayoutParams lpbCancel =
  35. new RelativeLayout.LayoutParams(100,50);//LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  36. lpbCancel.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
  37. lpbCancel.addRule(RelativeLayout.CENTER_VERTICAL);
  38. ibMenu.addView(m_bCancel, lpbCancel);
  39.  
  40. // +++++++++++++ BOTTOM COMPONENT: the footer
  41. RelativeLayout ibMenuBot = new RelativeLayout(this);
  42. ibMenuBot.setId(idBotLayout);
  43. ibMenuBot.setBackgroundDrawable(getResources().getDrawable(R.drawable.line));
  44. ibMenuBot.setPadding(ibMenuPadding,ibMenuPadding,ibMenuPadding,ibMenuPadding);
  45. RelativeLayout.LayoutParams botParams = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
  46. botParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
  47. global_panel.addView(ibMenuBot,botParams);
  48. // textview in ibMenu : card holder
  49. TextView cTVBot = new TextView(this);
  50. cTVBot.setText("www.pocketmagic.net");
  51. cTVBot.setTextColor(Color.rgb(179,116,197));
  52. cTVBot.setTextSize(nTextH);
  53. cTVBot.setTypeface(Typeface.create("arial", Typeface.NORMAL));
  54. RelativeLayout.LayoutParams lpcTVBot = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  55. lpcTVBot.addRule(RelativeLayout.CENTER_IN_PARENT);
  56. ibMenuBot.addView(cTVBot, lpcTVBot);
  57.  
  58. // +++++++++++++ MIDDLE COMPONENT: all our GUI content
  59. LinearLayout midLayout = new LinearLayout (this);
  60. midLayout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
  61. midLayout.setOrientation(LinearLayout.VERTICAL);
  62. RelativeLayout.LayoutParams midParams = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
  63. midParams.addRule(RelativeLayout.ABOVE,ibMenuBot.getId());
  64. midParams.addRule(RelativeLayout.BELOW,ibMenu.getId());
  65. global_panel.addView(midLayout,midParams );
  66. //scroll - so our content will be scrollable between the header and the footer
  67. ScrollView vscroll = new ScrollView(this);
  68. vscroll.setFillViewport(false);
  69. midLayout.addView(vscroll);
  70. //panel in scroll: add all controls/ objects to this layout
  71. LinearLayout m_panel = new LinearLayout (this);
  72. m_panel.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
  73. m_panel.setOrientation(LinearLayout.VERTICAL);
  74. vscroll.addView(m_panel);
  75.  
  76. Button b[] = new Button[10];
  77. for (int i=0;i<10;i++) {
  78. b[i] = new Button(this);
  79. b[i].setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
  80. b[i].setText("But "+i);
  81. m_panel.addView(b[i]);
  82. }
  83.  

Adding a background

You can set a background for the middle content region. The background will be fixed, eg. when scrolling the middle content, it will float over it (so you only need a background image of the size of the screen: back.png)

All you need is a single line of code:

  1.  
  2. global_panel.setBackgroundDrawable(getResources().getDrawable( R.drawable.back));
  3.  

Complete source:
HeaderContentFooterGUI-2

(Visited 14 times, 1 visits today)
facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail
Tagged on: