PocketMagic

PocketMagic

Where Technology meets magic


Android
53 Posts
BlackBerry
6 Posts
Electronics
83 Posts
Hardware
141 Posts
High Voltage
57 Posts
Image processing
5 Posts
iPhone
4 Posts
Linux
2 Posts
Nuclear
27 Posts
Optics
11 Posts
Photography
7 Posts
Photoshop
3 Posts
Research
21 Posts
Reviews
19 Posts
Robotics
9 Posts
Security
9 Posts
Software
90 Posts
Symbian
2 Posts
Tubes
23 Posts
Windows Mobile
11 Posts

Sponsored Links


   

Top Articles!


3V to 400V regulated inverter for Geiger counters | 861 Views | Rate 66.23
3V to 400V regulated inverter for Geiger counters
Android Open Source Audio player using MediaCodec API | 665 Views | Rate 11.08
Android Open Source Audio player using MediaCodec API
Electric Fence Circuit for perimeter protection | 957 Views | Rate 8.94
Electric Fence Circuit for perimeter protection
AVR SDCard FAT support with FatFS | 3174 Views | Rate 8.74
AVR SDCard FAT support with FatFS

   

News & Updates


2014-07-23, High Voltage Power supply - 140KV

2014-07-20, 3V to 400V regulated inverter for Geiger counters

2014-07-20, uRADMonitor - Unusual Background Radiation Reports - Explained

2014-06-29, Global radiation monitoring network

 

  

Android GUI with Header+Scrollable Content+Footer


By Radu Motisan Posted on March 18th, 2011 , 260 Views (Rate 0.21)



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



More on PocketMagic:

Complex Android GridView with Drag and Drop functionality | 751 Views | Rate 3.02
Complex Android GridView with Drag and Drop functionality
A 3D Carousel View for Android | 1208 Views | Rate 2.92
A 3D Carousel View for Android
Using FS1000A/XY-FST RF Radio module with AVRs | 1063 Views | Rate 2.9
Using FS1000A/XY-FST RF Radio module with AVRs
Custom Rotary Knob Control for Android | 689 Views | Rate 2.57
Custom Rotary Knob Control for Android
Variable 0..30V Regulated Power supply for 20A max | 4049 Views | Rate 2.5
Variable 0..30V Regulated Power supply for 20A max
Programmatically Injecting Events on Android - Part 2 | 1304 Views | Rate 2.38
Programmatically Injecting Events on Android - Part 2

17 Responses to “Android GUI with Header+Scrollable Content+Footer”

  1. 1
    Android WebBrowser using WebView « PocketMagic:

    [...]   « Android GUI with Header+Scrollable Content+Footer [...]

  2. 2
    chitgoks:

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

  3. 3
    Radu Motisan:

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

  4. 4
    Daler:

    Why u dont want to use xml????

  5. 5
    Radu Motisan:

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

  6. 6
    Daler:

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

  7. 7
    Radu:

    I didn’t notice any speed issues.

  8. 8
    suresh devaraj:

    how to add list view instead of buttons..

  9. 9
    suresh devaraj:

    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);

  10. 10
    Patrick Krapf:

    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.

  11. 11
    Radu Motisan:

    Hi Patrick,

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

  12. 12
    Patrick Krapf:

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

  13. 13
    Radu Motisan:

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

  14. 14
    Patrick Krapf:

    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.

  15. 15
    Patrick Krapf:

    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?

  16. 16
    Radu:

    @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.

  17. 17
    Patrick Krapf:

    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.

Thank you for commenting. Your comment won't show until approved, which can take some time.

Please copy the string sQKj2l to the field below: