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 150 times, 1 visits today)
facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail
Tagged on:                             

17 thoughts on “Android GUI with Header+Scrollable Content+Footer

  • Pingback: Android WebBrowser using WebView « PocketMagic

  • April 5, 2011 at 9:16 am
    Permalink

    hi. do you have an xml version of the layout? thank you

  • April 5, 2011 at 9:58 am
    Permalink

    hi chitgoks, no – I don’t use xml anymore.

  • April 17, 2011 at 2:30 pm
    Permalink

    Why u dont want to use xml????

  • April 17, 2011 at 3:39 pm
    Permalink

    @Daler, because for complex applications you need more freedom.

  • April 18, 2011 at 10:46 am
    Permalink

    @Radu Motisan, freedom?? What about the speed?? will it affect to the speed of an app?

  • April 18, 2011 at 10:49 am
    Permalink

    I didn’t notice any speed issues.

  • September 2, 2011 at 8:37 pm
    Permalink

    how to add list view instead of buttons..

  • September 2, 2011 at 8:40 pm
    Permalink

    Please help me….How to add below List View instead buttons..
    ListView maListViewPerso = (ListView) findViewById();
    ArrayList<HashMap> listItem = new ArrayList<HashMap>();
    HashMap map;
    map = new HashMap();
    map.put(“titre”, “Movie Ticket”);
    map.put(“description”, “Movie Ticket Booking”);
    map.put(“img”, String.valueOf(R.drawable.reel_icon));
    listItem.add(map);

    map = new HashMap();
    map.put(“titre”, “Snow World”);
    map.put(“description”, “SnowWorld Tickets”);
    map.put(“img”, String.valueOf(R.drawable.reel_icon));
    listItem.add(map);

    map = new HashMap();
    map.put(“titre”, “Kissing Car”);
    map.put(“description”, “Kissing Car Tickets”);
    map.put(“img”, String.valueOf(R.drawable.reel_icon));
    listItem.add(map);

    map = new HashMap();
    map.put(“titre”, “Events”);
    map.put(“description”, “Events in Mall”);
    map.put(“img”, String.valueOf(R.drawable.reel_icon));
    listItem.add(map);

    map = new HashMap();
    map.put(“titre”, “Screens”);
    map.put(“description”, “Screens @ Abirami”);
    map.put(“img”, String.valueOf(R.drawable.reel_icon));
    listItem.add(map);

    SimpleAdapter mSchedule = new SimpleAdapter (this.getBaseContext(), listItem, R.layout.main_menu_list,
    new String[] {“img”, “titre”, “description”}, new int[] {R.id.img, R.id.titre, R.id.description});

    maListViewPerso.setAdapter(mSchedule);

  • February 23, 2012 at 6:58 am
    Permalink

    I love your code and I hope you still read these messages. I prefer to do everything in code as well, which brings me to my question. I have just started using ExpandableListView and I cannot find any information on how to initialize and use it in code only. Do you know how? Let me be a bit more precise. I can use it all in code after I have used getExpandableListView() to attach itself to the xml file, but I do not want to use any xml.

  • February 23, 2012 at 11:02 am
    Permalink

    Hi Patrick,

    I would start with ExpandableListView list = new ExpandableListView ();

  • February 23, 2012 at 5:18 pm
    Permalink

    I tried that and it errors soon as setContentView() is used. (cannot find source)

  • February 23, 2012 at 7:22 pm
    Permalink

    Unfortunately I am not familiar with the ExpandableListView , but feel free to post your code, maybe I can have a look at it.

  • February 24, 2012 at 2:49 am
    Permalink

    I solved it! If you use:
    MyActivity extends ExpandableListActivity {……

    You must use ExpandableListView ev = getExpandableListView();

    which well look for your xml file to get your ExpandableListView id which must be setup like this: android:id=”@android:id/list” notice that the “@+id/….” is missing so you can not use findViewByID().

    If you using:
    MyActivity extends Activity {…..
    then you can use:
    ExpandableListView list = new ExpandableListView ();
    and everything should be fine.

  • May 11, 2012 at 7:24 am
    Permalink

    I have used your basic layout of the header and footer with scrollable middle content to create an app, however I am noticing that when I scroll to the bottom there is, what looks like a spinning clock. A single clock arm that spins around about once a second. I remember reading about someone else having the same issue and they solved the problem, but did not think much of it because I was not having the problem. However, now I am and I cannot find the article. I cannot figure out what is causing this, can you help please?

  • May 11, 2012 at 11:22 am
    Permalink

    @Patrick can you include a screen shot? Or at least some hand drawn schematic? I’m not sure I understand what you are referring to.

  • May 11, 2012 at 3:35 pm
    Permalink

    Go to the app store and search for “AVON”. My app is titled “Order and Contacts” with my name beneath it. On the first screen if you scroll all the way down, the list well disappear, you well see the the spinning “clock arm”. It only appears on the first screen. My real issue is that the app well force close at times, or if you close the app and go back in, it well force close. I am trying to figure out why! Once you start the app it well begin to download the product information in the background. Nothing indicates when its done so please allow up to 15 minutes for it to complete before shuting down the app. It does this once every two weeks when a new campaign starts. On my phone I get the force close screen but the app keeps running just fine, however other people are reporting that they are getting booted out of the app completely. Please let me know what you think.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>