Android Tutorial Different examples with 2 layouts

As an answer to the thread Forms alike, I thought that the examples below would be of general interest.

Attached there are 4 examples with two same layouts but with different managements:

- TwoPanelActivity
One Activity with 1 Layout with 2 Panels and all views on the panels.
All the code is in the Main module.
Changing the Layout will not resume the activity.
There is only one layout file.

The 2 layout files for the 3 following projects are the same .
- TwoPanelLayouts
One Activity with 2 Panels and 1 Layout file for each loaded in Activity_Create.
All the code is in the Main module.
Changing the Layout will not resume the activity.
There are 2 layout files, plus a third one with the Panels, but these could also be initialized in the code.

- TwoActivityLayouts
One Activity with 2 Layouts.
All the code is in the Main module.
Changing the Layout will not resume the activity.
There are 2 layout files.

- TwoLayoutActivities
2 Activities with 1 Layout for each.
The code is in two modules Main and Layout2.
Changing the Layout will resume the current activity.
There are 2 layout files.

All 4 have advantages and disadvantages, depending on the size of the project. Memory, speed, code in one or several modules etc. An advantage for one project could become a disadvantage for another project.

- TwoPanelActivity

Sub Globals
  'These global variables will be redeclared each time the activity is created.
  'These variables can only be accessed from this module.
  Dim btnNext1, btnNext2 As Button
  Dim edtText1, edtText2 As EditText
  Dim rbtTest1, rbtTest2 As RadioButton
  Dim pnlLayout1, pnlLayout2 As Panel
  End Sub

Sub Activity_Create(FirstTime As Boolean)
  Activity.LoadLayout("TwoLayouts")
  pnlLayout1.Top=0
  pnlLayout1.Left=0
  pnlLayout1.Visible=True
  pnlLayout2.Top=0
  pnlLayout2.Left=0
  pnlLayout2.Visible=False
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Sub btnNext1_Click
  pnlLayout1.Visible=False
  pnlLayout2.Visible=True
End Sub

Sub btnNext2_Click
  pnlLayout1.Visible=True
  pnlLayout2.Visible=False
End Sub

- TwoPanelLayouts

Sub Globals
  'These global variables will be redeclared each time the activity is created.
  'These variables can only be accessed from this module.
  Dim btnNext1, btnNext2 As Button
  Dim edtText1, edtText2 As EditText
  Dim rbtTest1, rbtTest2 As RadioButton
  Dim pnlLayout1, pnlLayout2 As Panel
End Sub

Sub Activity_Create(FirstTime As Boolean)
  Activity.LoadLayout("TwoLayouts")
  pnlLayout1.Top=0
  pnlLayout1.Left=0
  pnlLayout1.LoadLayout("TwoLayouts1")
  pnlLayout1.Visible=True
  pnlLayout2.Top=0
  pnlLayout2.Left=0
  pnlLayout2.LoadLayout("TwoLayouts2")
  pnlLayout2.Visible=False
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Sub btnNext1_Click
  pnlLayout1.Visible=False
  pnlLayout2.Visible=True
End Sub

Sub btnNext2_Click
  pnlLayout1.Visible=True
  pnlLayout2.Visible=False
End Sub

- TwoActivityLayouts

Sub Globals
  'These global variables will be redeclared each time the activity is created.
  'These variables can only be accessed from this module.
  Dim btnNext1, btnNext2 As Button
  Dim edtText1, edtText2 As EditText
  Dim rbtTest1, rbtTest2 As RadioButton
End Sub

Sub Activity_Create(FirstTime As Boolean)
  Activity.LoadLayout("TwoLayouts1")
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Sub btnNext1_Click
  Activity.RemoveAllViews
  Activity.LoadLayout("TwoLayouts2")
End Sub

Sub btnNext2_Click
  Activity.RemoveAllViews
  Activity.LoadLayout("TwoLayouts1")
End Sub

- TwoLayoutActivities
Main module

Sub Globals
  'These global variables will be redeclared each time the activity is created.
  'These variables can only be accessed from this module.
  Dim btnNext1 As Button
  Dim edtText1 As EditText
  Dim rbtTest1 As RadioButton
End Sub

Sub Activity_Create(FirstTime As Boolean)
  Activity.LoadLayout("TwoLayouts1")
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Sub btnNext1_Click
  StartActivity(Layout2)
End Sub

Layout2 module

Sub Globals
  'These global variables will be redeclared each time the activity is created.
  'These variables can only be accessed from this module.
  Dim btnNext2 As Button
  Dim edtText2 As EditText
  Dim rbtTest2 As RadioButton
End Sub

Sub Activity_Create(FirstTime As Boolean)
  Activity.LoadLayout("TwoLayouts2")
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Sub btnNext2_Click
  StartActivity(Main)
End Sub

Best regards.

EDIT: 2011_07_27
Updated files according to post #19

EDIT: 2015_03_07
Updated the zip files with B4A version 4.30

 

[moster67]

Thanks Klaus.

I will have a look later tonight because from your code-examples there is always something to learn or tips for optimizing code.

 

[Erel]

Thank you klaus. This is a very important and helpful tutorial.

 

[metrick]

Thanks Klaus.
I try to add more panels on the two Panel Layouts example and got following error; pnlLayout3.Top=0 java.lang.RuntimeException:Object should first be initialized(Panel). Continue?

Activity.LoadLayout("TwoLayouts")

pnlLayout1.Top=0
pnlLayout1.Left=0
pnlLayout1.LoadLayout("TwoLayouts1")
pnlLayout1.Visible=True

pnlLayout2.Top=0
pnlLayout2.Left=0
pnlLayout2.LoadLayout("TwoLayouts2")
pnlLayout2.Visible=False

pnlLayout3.Top=0
pnlLayout3.Left=0
pnlLayout3.LoadLayout("TwoLayouts3")
pnlLayout3.Visible=False

'Note: for pnlLayout3 I have copied the TwoLayouts2 and rename it to TwoLayouts3.bal, open the layout with designer and rename button, EditText, and Radiobutton to next increment number save and add layout with Add Files.

also added;
Sub btnNext2_Click
pnlLayout1.Visible=False
pnlLayout2.Visible=False
pnlLayout3.Visible =True

End Sub

What didn't I do right?
Thanks.

 

[klaus]

- Have you added, in the Designer, pnlLayout3 in the TwoLayout file ? You can do it by duplicating one of the existing Panels and renaming it.
- Have you added the new Views in the Dim declarations ?
- Have you added a Sub btnNext3_Click routine to go back to Layout1.

'Activity module
Sub Process_Globals
'These global variables will be declared once when the application starts.
'These variables can be accessed from all modules.
End Sub

Sub Globals
'These global variables will be redeclared each time the activity is created.
'These variables can only be accessed from this module.
Dim btnNext1, btnNext2, btnNext3 As Button
Dim edtText1, edtText2, edtText3 As EditText
Dim rbtTest1, rbtTest2, rbtTest3 As RadioButton
Dim pnlLayout1, pnlLayout2, pnlLayout3 As Panel
End Sub

Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("TwoLayouts")

pnlLayout1.Top=0
pnlLayout1.Left=0
pnlLayout1.LoadLayout("TwoLayouts1")
pnlLayout1.Visible=True

pnlLayout2.Top=0
pnlLayout2.Left=0
pnlLayout2.LoadLayout("TwoLayouts2")
pnlLayout2.Visible=Fals

pnlLayout3.Top=0
pnlLayout3.Left=0
pnlLayout3.LoadLayout("TwoLayouts3")
pnlLayout3.Visible=False
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Sub btnNext1_Click
pnlLayout1.Visible=False
pnlLayout2.Visible=True
End Sub

Sub btnNext2_Click
pnlLayout3.Visible=True
pnlLayout2.Visible=False
End Sub

Sub btnNext3_Click
pnlLayout1.Visible=True
pnlLayout3.Visible=False
End Sub

You can also add the new Panel by code, instead of adding it in the Designer.

pnlLayout3.Initialize("")
Activity.AddView(pnlLayout3, 0, 0, 320, 430)
pnlLayout3.Top = 0
pnlLayout3.Left = 0
pnlLayout3.LoadLayout("TwoLayouts3")
pnlLayout3.Visible = False

Best regards.

 

[philgoodgood]

hello,

i tried to do .... right off
thanks klaus

 

[metrick]

I still have errors with following codes;
pnlLayout3.bal button, EditText and RadioButton have been renamed to
btnNext3,edtText3,rbtTest3

'Activity module
Sub Process_Globals
'These global variables will be declared once when the application starts.
'These variables can be accessed from all modules.
End Sub

Sub Globals
'These global variables will be redeclared each time the activity is created.
'These variables can only be accessed from this module.
Dim btnNext1, btnNext2, btnNext3 As Button
Dim edtText1, edtText2, edtText3 As EditText
Dim rbtTest1, rbtTest2, rbtTest3 As RadioButton
Dim pnlLayout1, pnlLayout2, pnlLayout3 As Panel
End Sub

Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("TwoLayouts")

pnlLayout1.Top=0
pnlLayout1.Left=0
pnlLayout1.LoadLayout("TwoLayouts1")
pnlLayout1.Visible=True

pnlLayout2.Top=0
pnlLayout2.Left=0
pnlLayout2.LoadLayout("TwoLayouts2")
pnlLayout2.Visible=False

'see depict image pnlLayout3.jpg with pnlLayout3.Initialize("") comment out

'And depict image pnlLayout3Init.jpg with pnlLayout3.Initialize("")

pnlLayout3.Initialize("")

pnlLayout3.Top=0
pnlLayout3.Left=0
pnlLayout3.LoadLayout("TwoLayouts3")
pnlLayout3.Visible=False
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Sub btnNext1_Click
pnlLayout1.Visible=False
pnlLayout2.Visible=True
End Sub

Sub btnNext2_Click

pnlLayout2.Visible=False
pnlLayout3.Visible=True
End Sub

Sub btnNext3_Click
pnlLayout3.Visible=False
pnlLayout1.Visible=True

End Sub

 

[klaus]

I suspect that you have not added the Panel pnlLayout3 in the TwoPanelLayouts file in the Designer.

Attached the program.

Best regards.

 

[metrick]

I suspect that you have not added the Panel pnlLayout3 in the TwoPanelLayouts file in the Designer.

Attached the program.

Best regards.

Yes, I did added.
Thanks for quick reply.

 

[metrick]

Klaus:
Can you or someone try the followings steps?
I have problems adding more panel to PanelLayouts example.

1. Launch ThreePanelLayouts.b4a
2. Open Designer->TwoLayout3 and replace number 3 by number 4 for each tools.
3. Save as TwoLayouts4.bal
4. Add btnNext4, edtText4, rbtTest4, pnlLayout4 to Sub Globals dim statement.

Sub Globals
'These global variables will be redeclared each time the activity is created.
'These variables can only be accessed from this module.
Dim btnNext1, btnNext2, btnNext3, btnNext4 As Button
Dim edtText1, edtText2, edtText3, edtText4 As EditText
Dim rbtTest1, rbtTest2, rbtTest3, rbtTest4 As RadioButton
Dim pnlLayout1, pnlLayout2, pnlLayout3, pnlLayout4 As Panel

End Sub

5. Copy as following;
pnlLayout3.Top=0
pnlLayout3.Left=0
pnlLayout3.LoadLayout("TwoLayouts3")
pnlLayout3.Visible=False

6. paste and rename as follows;
pnlLayout4.Top=0
pnlLayout4.Left=0
pnlLayout4.LoadLayout("TwoLayouts4")
pnlLayout4.Visible=False
7. change btnNext3_Click to follows
Sub btnNext3_Click
pnlLayout4.Visible=True
pnlLayout3.Visible=False
End Sub
8. Add Sub btnNext4 as follows;
Sub btnNext4_Click
pnlLayout1.Visible=True
pnlLayout4.Visible=False
End Sub

9. Run it

Does it works or any error message?
Thanks for testing.

 

[klaus]

You are still missing a step:
2.1. Open Designer->TwoLayouts, duplicate pnlLayout3 and name it pnlLayout4.

And now it will work !

Best regards.

 

[metrick]

Got it! Just hit me after reading the post. Thank you. Completely forgot about the first layout with panels. Good lesson learned.

 

[tpakis]

All 4 have advantages and disadvantages, depending on the size of the project. Memory, speed, code in one or several modules etc. An advantage for one project could become a disadvantage for another project.

Thank you for this excelent tutorial!

Can you be more specific on the advantages and disadvantages of each solution? Specialy memory. Thank you in advance!

 

[klaus]

I don't know exactly how the memory is managed by the OS.

For small projects TwoPanelActivity would be the easiest solution.

For medium sized project, as soon as you have more the 3 or 4 layouts the TwoPanelLayouts and TwoActivityLayouts principles would be a better choice. My prefrence is the TwoPanelLayouts principle but adding the panels by code rather than having the panels in a main layout. I think that the TwoActivityLayouts pricilple would probably be less memory consuming because all views from the current layout have to be removed before loading the next one.

For big projects the TwoLayoutActivities principle would be the best choice, because you can separate the code and layouts in modules allowing a better overview of the project and probably from the memory point of view too. Bur you must be aware of the Activity lifecycle.

The examples are given with just two layouts to show the different principles.

Best regards.

 

[tpakis]

Thank you! :sign0098:

 

[aklisiewicz]

:sign0098: excelent tutorial, please add it to the MANUAL

Art

 

[devjet]

Activities Views Layer Panels layouts....... definitions

I have started to play with the above tutorial.
But I am still confused when to use what and the definitions of the different concepts.

Activity = a view I see on PDA (the similar to a form ) ; used
Panel= stack of view on top of a activity visible on screen if activated
Layout = ?

is this correct?

When do I use the different options ... best practice....

when do I use code like this and when do I define it via Designer?
pnlLayout1.Top=0
pnlLayout1.Left=0

I am trying to use 10 different views activities panels or whatever you call it
selected via a spinner. With other words each item of the spinner will show a screen for some inputs and results... how is this best done?

Thanks for any help

 

[Widget]

Attached there are 4 examples with two same layouts but with different managements:

- TwoPanelActivity
One Activity with 1 Layout with 2 Panels and all views on the panels.
All the code is in the Main module.
Changing the Layout will not resume the activity.
There is only one layout file.

Klaus,
Thanks for taking the time to create the demos. They are helping newbies like me to understand the capabilities of B4A.

But TwoPanelActivity has me stumped. I downloaded TwoPanelActivity.zip and unzipped it. You say it has one layout but in the Files directory I see:
twolayouts.bal, twolayouts1.bal and twolayouts2.bal

In the Designer I have access to these 3 layout files. twolayouts1.bal has the views that will be displayed in the twolayouts.pnlLayout1 panel and twolayouts2.bal has the views for twolayouts.pnlLayout2 panel.

Here are my questions:
1) Why are there 3 layouts? Your description said the example was using 1 layout.

2) I don't see how you got the Designer to display twolayouts1.bal in twolayouts.pnlLayout1 and twolayouts2.bal in twolayouts.pnlLayout2 at DESIGN TIME. I understand how these layouts can be loaded into a panel at runtime, but I see no property set in the Designer so it can display the two layouts in the main activity layout pnlLayout1 and pnlLayout2.

I have been banging my head against the wall trying to figure it out.
So put me out of my misery and let me know what I missed.

Widget :BangHead:

 

[Widget]

Klaus,
Ok, I figured it out. :sign0060:

You accidentally included twolayouts1.bal and twolayouts2.bal in the TwoPanelActivity.Zip. So I thought these layout files were mysteriously linked to the panels in twolayouts.bal. They weren't. The two files aren't used.

Also if you look at your TwoActivityLayouts.zip it really has the TwoPanelActivity demo inside it.

Problem solved.
My head hurts. I need to lie down.

Widget

 

[klaus]

Thank you, the two zip files have been updated in post #1.

Best regards.