Display button and label under tableView

You must Login before you can answer or comment on any questions.

Is it possible using Android to have a window and/or view with a label and button under a tabelView control? I have a view with layout: 'vertical'. Then I add a tableView. That works fine. When I add a button or label under the tableView they do not appear. Any suggestions?

4 Answers

Accepted Answer

Hi Nando

I thought I would try and solve this one more time.

I have created another sample for you that you only need to specify the height of the bottom bar that contains the button and label you mentioned. You do not have to specify any other parameters and this will expand and shrink to fit the device height automatically.

This works on both Android and iOS. It only assumes you have a windows call win. 

var data = [
    { title: 'One' },
    { title: 'Two' },
    { title: 'Three' },
    { title: 'Four' },
    { title: 'Five' },
    { title: 'Six' },
    { title: 'Seven' },
    { title: 'Eight' },
    { title: 'Nine' },
    { title: 'Ten' },
    { title: 'Eleven' },
    { title: 'Twelve' },
    { title: 'Thirteen' },
    { title: 'Fourteen' },
    { title: 'Fifteen' }
];
var intLedgeHeight = 90;
var viewLedgeBar = Ti.UI.createView({
    backgroundColor: '#ccc',
    bottom: 0,
    height: intLedgeHeight,
    layout: 'vertical',
    width: Ti.UI.FILL
});
win.add(viewLedgeBar);
var btn = Ti.UI.createButton({
    bottom: 0,
    height: 50,
    left: 10,
    right: 10,
    title: 'Button',
    top: 5,
    width: Ti.UI.FILL
});
viewLedgeBar.add(btn);
var lblFooter = Ti.UI.createLabel({
    bottom: 5,
    color: '#000',
    height: Ti.UI.SIZE,
    left: 5,
    right: 5,
    text: 'This is under the table',
    textAlign: 'center',
    top: 5,
    width: Ti.UI.FILL
});
viewLedgeBar.add(lblFooter);
var tbl = Ti.UI.createTableView({
    bottom: intLedgeHeight,
    data: data,
    //footerView: viewFooter,
    height: Ti.UI.FILL,
    top: 0,
    width: Ti.UI.FILL
});
win.add(tbl);
Let me know how it goes.

Did you give your tableview a height? Can you provide a minimal, but complete, code sample (like 40 lines of code in an app.js)?

Hi Nando

This will show you how to add a footerview that gets linked to the table and is placed after all rows you added. 

var data = [
    { title: 'One' },
    { title: 'Two' },
    { title: 'Three' }
];
var viewFooter = Ti.UI.createView({
    height: Ti.UI.SIZE,
    layout: 'vertical',
    width: Ti.UI.FILL
});
var btn = Ti.UI.createButton({
    bottom: 5,
    height: Ti.UI.SIZE,
    left: 10,
    right: 10,
    title: 'Button',
    top: 5,
    width: Ti.UI.FILL
});
viewFooter.add(btn);
var lblFooter = Ti.UI.createLabel({
    bottom: 5,
    height: Ti.UI.SIZE,
    left: 5,
    right: 5,
    text: 'This is under the table',
    top: 5,
    width: Ti.UI.FILL
});
viewFooter.add(lblFooter);
var tbl = Ti.UI.createTableView({
    data: data,
    footerView: viewFooter,
    height: Ti.UI.FILL,
    top: 0,
    width: Ti.UI.FILL
});
win.add(tbl);
You also have headerView that does the same but places it at the top.

The example use the layout property to control the internal position of the label and button to make things easier.

Hope this helps.

— answered 10 months ago by Malcolm Hollingsworth
answer permalink
1 Comment

  • I'm not sure that's what Nando wants -- the footer view comes after the last row in the tableview, so if you have lots of rows, the footer view is not visible on the screen unless you scroll to the bottom of the tableview.

    The code below demonstrates putting a button at the bottom of the window with a tableview at the top.

    Note that I am using layout: vertical on the window because Nando specifically asked about using vertical layout. What I've done looks fine on the iphone simulator, but probably not so great on different android devices.

    If I were building such an interface for real (and cross-platform), I wouldn't use layout: vertical for the window. I'd probably use absolute layout for the window, set the top and bottom properties of the tableview, and set the bottom and height properties of the button. 

    var win = Ti.UI.createWindow({
    title:'test',
    backgroundColor:'#fff',
    layout: 'vertical'
});
 
 
var data = [
    { title: 'One' },
    { title: 'Two' },
    { title: 'Three' }
];
 
var tbl = Ti.UI.createTableView({
    data: data,
    height: '400dp',
    top: 0,
    width: Ti.UI.FILL
});
win.add(tbl);
 
var btn = Ti.UI.createButton({
    top: 10,
    height: Ti.UI.SIZE,
    left: 10,
    right: 10,
    title: 'Button'
});
 
win.add(btn);
 
win.open();

    — commented 10 months ago by Jason Priebe

I appreciate the feedback. Jason you are spot on. The only problem is I don't have IOS at the moment so I cannot test on iPhone. However after testing on Android the button appears all the way at the bottom of the screen. Is there a way to tweak what you have to work on both iPhone/Android. Your solution is very elegant and I'd rather not use the absolute layout unless it is the only option. I suppose I could check what OS the user has and display a different view but if it's not necessary it would be sweet to use the same code on both devices.

— answered 10 months ago by Nando Cammarota
answer permalink
1 Comment

  • The whole point of my post was to put the button at the bottom of the screen.

    You have to explain exactly what you want. Your original post said "a label and button under a tabelView control". There are three ways to interpret that:

    • a table where the label and button are inside the table after the last row. This means there is no gap between the last row and the label+button, but the label+button will be scrolled offscreen if there are a lot of rows in the table. Malcolm's example will provide this.

    • a table of fixed height that occupies part of the screen and has a label/button immediately following (with little or no gap between the table and the label+button). My example is kind of like this, but you would specify a smaller height for the TableView.

    • a table that fills all of the screen except for enough room for the label+button, which is positioned at the bottom of the screen. My example provides this on iOS, but not necessarily on every android device, where you have to accomodate different screen resolutions.

    Depending on what you want to do, I believe you can accomplish any of these scenarios and make it cross-platform. To make it robust, you'll probably need to look at the Ti.Platform.displayCaps.platformHeight and use an absolute layout.

    There's nothing wrong with an absolute layout, btw. In fact, I think it gives you more control than the vertical layout, which just flows things onto the view, but doesn't really help you "snap" the controls to the bottom of the view where needed, or help you resize for different screen resolutions. With some computation on your part, you can use an absolute layout and have your interface look right on any device.

    — commented 10 months ago by Jason Priebe

Your Answer

Think you can help? Login to answer this question!