Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Java Development

Reply
Trusted Contributor
Posts: 126
Registered: ‎10-15-2010
My Device: Torch 9850
My Carrier: Not specified

Tab controls Design Problem

Hi to all,
I want to implement three tabs in my app. I created three buttons for tab control but i cant design like this, Please help me how design.
tab_2.png

 

tab_3.png

 

 

tab_4.png

 

Android developers use small rect tab image, arrow image and designed each tab as one view but i cant able to design above tab manager using buttons. Please help me.

Developer
Posts: 19,636
Registered: ‎07-14-2008
My Device: Not Specified

Re: Tab controls Design Problem

If you are not very familar with creating BB UI components, then this might seem a challenge.  But I think it can be done. 

 

Let us start with the basics.  Add three buttons to a HorizontalFieldManager.  Add the HFM to the Banner area of a MainScreen (setBanner()).  Now add a VerticalFieldManager, which we shall call _tabPane, to the MainScreen,

 

Now in the change listener for each of the Buttons, have code to delete all Fields from _tabPane, and then add a LabelField which tells you which Button has been hit..

 

Test this.

 

Does this get you started?

Super Contributor
Posts: 278
Registered: ‎11-04-2010
My Device: 4.5 and above
My Carrier: none

Re: Tab controls Design Problem

Trusted Contributor
Posts: 126
Registered: ‎10-15-2010
My Device: Torch 9850
My Carrier: Not specified

Re: Tab controls Design Problem

Thank you peter, I understood but i struck with how to set image for buttons, if i get first tab image as a full arrow then i get empty space on the corner of the images

Copy of tab_3.png

 

so that i cant place the second button image near to the first button. Please guide me how to get image for each tab from the designer. And place the images horizontally.

Trusted Contributor
Posts: 126
Registered: ‎10-15-2010
My Device: Torch 9850
My Carrier: Not specified

Re: Tab controls Design Problem

Thank you pp, I am using the Tab manager only but my problem is the button is like arrow, If the button is rectangle then i can place three buttons in Horizontal manager and when image is selected i change the onfocus image. But the real problem is placing the arrow images in horizontaly and their onfocus image.

Super Contributor
Posts: 278
Registered: ‎11-04-2010
My Device: 4.5 and above
My Carrier: none

Re: Tab controls Design Problem

Hi,

you can manage image by taking it as rectangle. as you have marked in red color. i.e first image contains first full image + sencond tab half image. so that it looks like its an arrow.
then second image contains second full image and third half image until it cover arrow. give the same shadings. like you want.

Regards,
priyanka
Developer
Posts: 19,636
Registered: ‎07-14-2008
My Device: Not Specified

Re: Tab controls Design Problem

Remember you are also going to need three different 'arrow' icons:

1) when the tab is in focus (so that it is focus color on the left of the 'arrow' and not focused color on the right)

2) when the next tab is in focus (so that it is focus color on the right of the 'arrow' and not focused color on the left)

3) when the neither this tab, nor the one next is in focus (so that it is not focused color on the right and left of the 'arrow')

Trusted Contributor
Posts: 126
Registered: ‎10-15-2010
My Device: Torch 9850
My Carrier: Not specified

Re: Tab controls Design Problem

Thank you peter and priyanka, i worked like what you instructed i almost did but i am getting issue on the arrows, when the first tab is in focus the right arrow tab3 also getting focus color, i cant able to set normal color to the rigth arrow, also when the tab is not focused the two tabs arrow is in focus color.

sample_design2.png

 

sample_design1.png

sample_design3.png

 

Trusted Contributor
Posts: 126
Registered: ‎10-15-2010
My Device: Torch 9850
My Carrier: Not specified

Re: Tab controls Design Problem

I worked on the Tabscontrol sample, I set Tabs image as background for the Horizontal Manager and replaced the tabs images when the focus is changed. I think i found the solution. Please suggest is this correct

9900_1-01.jpg

9900_1-02.jpg

Highlighted
Developer
Posts: 214
Registered: ‎03-18-2012
My Device: 8520
My Carrier: Company

Re: Tab controls Design Problem

ok ,

       from the discussion i understand the how to dispaly the tabs.but i fail to understand how to represent buttons in tab so that buttons look like arrow....