B4A Library AHDashboard Library

The one and only object in this library is a special Panel object that layouts the added views automatically.

With this you can add dashboard pages to your app like in Google+, Google Text and Tables or many other apps.

Just add some objects to the dashboard and see them optimally placed automatically on the screen.

The library is based on this source but I had to make some changes to make it work properly in landscape mode.

For installation copy the jar and xml file to your custom libs folder.

The example adds small panels with an image and a label to the dashboard. If you tap on an image the parent panel is made invisible and the dashboard automatically rearranges the other items. To make everything visible again just rotate the screen or restart the app.

Version History:
1.00:
- initial version

1.01:
- removed debug output
- added some documentation

1.02:
- optimized internal layout algorithm for better layout

 

[walterf25]

Dashboard library

Hello guys i'm sorry in advance for the stupid question, but what is the purpose for this library, i downloaded the example and all i see is a bunch of panels when you click on them they disappear, how would this library be used in a real application, can i get some more feedback on this library please.

thanks,
Walter

 

[corwin42]

Your question is not stupid. When I wrote this library (the first version was created on my Netbook at McDonalds while having a meal ) even I haven't seen the real power of this library but I have thought it could be useful some time.

The example project just wants to show how the layout engine automatically changes the layout with changing number of objects.

Whenever you want to place some objects of the same size evenly distributed on the display, you can use this library for it. Just add your objects to the dashboard object and let the dashboard do the layout. It is useful for some apps main menu (as in the Google+ app) or a toolbar with some buttons.

I attached some examples:

The first 4 pictures are from a weather app I'm currently working on.
Picture 1+2 are made with a dashboard filling nearly the whole screen. Each day is a panel and is added to the dashboard which does the layout and it always looks good. It is possible that there is only weather data for 5, 6 or whatever number of days. I just don't care because the dashboard does the layout automatically depending on the number of objects I add.

Picture 3+4 have two dashboards. Again one dashboard for the daypanels and another for the main menu buttons.

Picture 5+6 are the main menus of the Google+ and the Evernote apps. They are not done with B4A but it's the same idea.

 

[tmighty]

Hi Markus,

thank you for the great submission!

I have a really, really newbie question, please.

When I click a button in the dashboard, the dashboard changes:
10 buttons become 8, then 8 buttons become 6, etc.

I just do not find the part of the code where you implemented this behaviour.

(German: Wo legst Du denn fest, dass sich das Dashboard so verändert? Ich finde das einfach nicht).

Thank you very much for your reply!

 

[vb1992]

the first version was created on my Netbook at McDonalds while having a meal

I have to ask:

Was it a happy meal?

pic

 

[corwin42]

When I click a button in the dashboard, the dashboard changes:
10 buttons become 8, then 8 buttons become 6, etc.

I just do not find the part of the code where you implemented this behaviour.

In the example several Panels containing a Button and a label are added to the dashboard. The only thing that happens is that if you press a button, then the parent panel of this button is made invisible. This forces the Dashboard to redraw itself without the just pressed button/panel.

There is not a practical use for this behaviour. It just shows how the dashboard layouts its content with different numer of containing objects.

 

[corwin42]

I have to ask:

Was it a happy meal?

:sign0135:
Don't remember what it was but I'm sure it was NOT a happy meal.

 

[tmighty]

Thank you for the reply!

 

[tmighty]

I am having a slight problem, but I am not sure how to fix it or where I go wrong.

I resize Button1 so that it fits in perfectly. However, my label becomes invisible or gets off screen, I don't know yet.

Button1.Width = iSize
Button1.Height = iSize
Label1.Top = Button1.Top +Button1.Height

Is this wrong?

Greetings!

 

[tmighty]

... and maybe a really newbie question again:
Why is the button completely white and not shaded or so?
I wanted to have a colored button with a transparent png drawn over it. Is that not possible?

 

[corwin42]

I resize Button1 so that it fits in perfectly. However, my label becomes invisible or gets off screen, I don't know yet.

Button1.Width = iSize
Button1.Height = iSize
Label1.Top = Button1.Top +Button1.Height

Is this wrong?

I think you add this Button and Label to a panel. Is this panel big enough to show button and label?

Why is the button completely white and not shaded or so?
I wanted to have a colored button with a transparent png drawn over it. Is that not possible?

It is an image button. Image buttons only have the image and no other decoration. You can put whatever you want on the dashboard as long as the objects always have the same size. See my example pictures some posts back.

 

[peacemaker]

Is there solution like this dashboard, but with long items list, scrollable by a scrollview over whole the activity ?
Adding the dashboard to ScrollView.Panel is OK, but.... height is unknown for the list.


upd: if to think - it's not a problem

hh = (Xpos * Ypos) * MyAppsList.Size / sv.Width   'Xpos, Ypos = dimensions of the panel  Panel1.LoadLayout("db2")
   sv.Panel.Height = hh
   sv.Panel.AddView(dashboard, 0, 0, sv.Panel.Width, hh)

 

[Mashiane]

Hi, do you have any plans of releasing a B4i version of this dashboard? Thanks for this brilliant piece of library!

 

[corwin42]

Hi, do you have any plans of releasing a B4i version of this dashboard? Thanks for this brilliant piece of library!

Sorry, currently not.

 

[Mashiane]

One can actually load the dashboard items dynamically at runtime by running this method as an example

Private Sub AddItem(Caption As String, pnlName As String, img As String, pressedImg As String)
    ' lets create a button with icons first
    Dim ImgEnabled As BitmapDrawable
       Dim ImgPressed As BitmapDrawable
       Dim sld As StateListDrawable
    ImgPressed.Initialize(LoadBitmap(File.DirAssets, pressedImg))
    ImgEnabled.Initialize(LoadBitmap(File.DirAssets, img))
       Dim Button1 As Button
    Dim Label1 As Label
    Dim pnl As Panel
    pnl.Initialize("")
    pnl.LoadLayout(pnlName)
    pnl.Color = Colors.Transparent
    Label1.Text = Caption
    pnl.Tag = Label1.text
    Button1.Tag = pnl
    sld.Initialize
    sld.AddState(sld.State_Pressed, ImgPressed)
    sld.AddState(sld.State_Enabled, ImgEnabled)
    Button1.Background = sld
    dashboard.AddView(pnl, 100dip, 150dip)
End Sub

Then on Activity Create have

AddItem("Facebook", "panel1", "fb.png", "fbr.png")

 

[peacemaker]

Is it possible to show 1 ... 3 items, but centered along the longest current side ?