adjusting tabbar size

Getting Started Newbie Questions
#1

the size of the tabbar on my app is way too small,

i recently changed the resolution in config.lua to 640x960

im trying to adjust the size of the tab bar but its not doing anything

here is the code for the tab bar

how can i adjust its size?

-- table to setup buttons tabButtons = {     { label="Thropia", defaultFile = "icon1.png", overFile = "icon1-down.png", width = 60, height = 60, onPress=onFirstView, selected=true },      { label="Enthalpis", defaultFile = "icon2.png", overFile = "icon2-down.png", width = 60, height = 60, onPress=onSecondView },     { label="Diseases", defaultFile = "icon3.png", overFile = "icon3-down.png", width = 60, height = 60, onPress=onThirdView }, } -- create the actual tabBar widget tabBar = widget.newTabBar{     hieght = 600,     left = 0,     top = display.contentHeight - 90,     width = display.contentWidth,    -- 50 is default height for tabBar widget     buttons = tabButtons }

thanks

#2

Hi @dcj_786,

You misspelled “height” as “hieght”. Can you correct that and see if it changes the size?

Thanks,

Brent Sorrentino

#3

still no good

heres what it looks like right now (i’ll upload the print screen)

the background image and tab bar have become much smaller after i changed the resolution

the background image is easy to adjust but im having trouble with the tabbar

#4

Hi @dcj_786,

Can you compare the following code to yours? This is a TabBar sample I have working pretty well, at a height of 120:

[lua]

local tabButtons = 

{

    {

        width = 72, 

        height = 120,

        defaultFile = “tabBarIconDef.png”,

        overFile = “tabBarIconOver.png”,

        label = “Tab1”,

        selected = true,

        size = 16,

        font = “Times”,

        labelYOffset = -8

    },

    {

        width = 72, 

        height = 120,

        defaultFile = “tabBarIconDef.png”,

        overFile = “tabBarIconOver.png”,

        label = “Tab2”,

        size = 16,

        labelYOffset = -8,

        labelColor = { default={255}, over={255,0,0} }

    },

    {

        width = 72, 

        height = 120,

        defaultFile = “tabBarIconDef.png”,

        overFile = “tabBarIconOver.png”,

        label = “Tab3”,

        size = 16,

        labelYOffset = -8

    },

}

local tabBar = widget.newTabBar

{

   left = 0,

   top = display.contentHeight-140,

   width = 580,

   height = 120,

   backgroundFile = “tabBarBack.png”,

   tabSelectedLeftFile = “tabBarSelL.png”,

    tabSelectedRightFile = “tabBarSelR.png”,

   tabSelectedMiddleFile = “tabBarSelM.png”,

   tabSelectedFrameWidth = 40,

   tabSelectedFrameHeight = 120,

   buttons = tabButtons

}

[/lua]

#5

Thanks alot for the code template.

i realised that the default image used for ‘tabSelected’ wasnt enlarging

so i used custom ‘tabSelected’ images and copied the code from your template above.

Thankyou once again :slight_smile:

#6

Hi @dcj_786,

You misspelled “height” as “hieght”. Can you correct that and see if it changes the size?

Thanks,

Brent Sorrentino

#7

still no good

heres what it looks like right now (i’ll upload the print screen)

the background image and tab bar have become much smaller after i changed the resolution

the background image is easy to adjust but im having trouble with the tabbar

#8

Hi @dcj_786,

Can you compare the following code to yours? This is a TabBar sample I have working pretty well, at a height of 120:

[lua]

local tabButtons = 

{

    {

        width = 72, 

        height = 120,

        defaultFile = “tabBarIconDef.png”,

        overFile = “tabBarIconOver.png”,

        label = “Tab1”,

        selected = true,

        size = 16,

        font = “Times”,

        labelYOffset = -8

    },

    {

        width = 72, 

        height = 120,

        defaultFile = “tabBarIconDef.png”,

        overFile = “tabBarIconOver.png”,

        label = “Tab2”,

        size = 16,

        labelYOffset = -8,

        labelColor = { default={255}, over={255,0,0} }

    },

    {

        width = 72, 

        height = 120,

        defaultFile = “tabBarIconDef.png”,

        overFile = “tabBarIconOver.png”,

        label = “Tab3”,

        size = 16,

        labelYOffset = -8

    },

}

local tabBar = widget.newTabBar

{

   left = 0,

   top = display.contentHeight-140,

   width = 580,

   height = 120,

   backgroundFile = “tabBarBack.png”,

   tabSelectedLeftFile = “tabBarSelL.png”,

    tabSelectedRightFile = “tabBarSelR.png”,

   tabSelectedMiddleFile = “tabBarSelM.png”,

   tabSelectedFrameWidth = 40,

   tabSelectedFrameHeight = 120,

   buttons = tabButtons

}

[/lua]

#9

Thanks alot for the code template.

i realised that the default image used for ‘tabSelected’ wasnt enlarging

so i used custom ‘tabSelected’ images and copied the code from your template above.

Thankyou once again :slight_smile: