Android Tutorial Different examples with 2 layouts

Discussion in 'Tutorials & Examples' started by klaus, Mar 26, 2011.

  1. klaus

    klaus Expert Licensed User

    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
    Code:
    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
    Code:
    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
    Code:
    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
    Code:
    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
    Code:
    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
     

    Attached Files:

    Last edited: Jan 12, 2018
    ahorro1, aidymp, DonManfred and 6 others like this.
  2. moster67

    moster67 Expert Licensed User

    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.
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    Thank you klaus. This is a very important and helpful tutorial.
     
    aidymp likes this.
  4. metrick

    metrick Active Member Licensed User

    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.
     
  5. klaus

    klaus Expert Licensed User

    - 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.
    Code:
    '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.
    Code:
    [SIZE=2][FONT=Courier New][SIZE=2][FONT=Courier New]pnlLayout3.Initialize([/FONT][/SIZE][/FONT][/SIZE][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]""[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])[/SIZE][/FONT]
    [SIZE=
    2][FONT=Courier New]Activity.AddView(pnlLayout3,[/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2],[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2],[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]320[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2],[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]430[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])[/SIZE][/FONT]
    [SIZE=
    2][FONT=Courier New]pnlLayout3.Top=[/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT]
    [/COLOR][/SIZE][/
    FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]pnlLayout3.Left=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT]
    [/COLOR][/SIZE][/
    FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]pnlLayout3.LoadLayout([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"TwoLayouts3"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])[/SIZE][/FONT]
    [SIZE=
    2][FONT=Courier New]pnlLayout3.Visible=[/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]False[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]
    Best regards.
     
  6. philgoodgood

    philgoodgood Member Licensed User

    hello,

    i tried to do .... right off :)
    thanks klaus
     
  7. metrick

    metrick Active Member Licensed User

    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
     

    Attached Files:

  8. klaus

    klaus Expert Licensed User

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

    Attached the program.

    Best regards.
     

    Attached Files:

  9. metrick

    metrick Active Member Licensed User

    Yes, I did added.
    Thanks for quick reply.
     
  10. metrick

    metrick Active Member Licensed User

    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.
     
    Last edited: Apr 3, 2011
  11. klaus

    klaus Expert Licensed User

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

    And now it will work !

    Best regards.
     
  12. metrick

    metrick Active Member Licensed User

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

    tpakis Active Member Licensed User

    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!
     
  14. klaus

    klaus Expert Licensed User

    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.
     
  15. tpakis

    tpakis Active Member Licensed User

    Thank you! :sign0098:
     
  16. aklisiewicz

    aklisiewicz Active Member Licensed User

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

    Art
     
  17. devjet

    devjet Member Licensed User

    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
     
  18. Widget

    Widget Well-Known Member Licensed User

    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:
     
  19. Widget

    Widget Well-Known Member Licensed User

    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
     
  20. klaus

    klaus Expert Licensed User

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

    Best regards.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice