Android Question TabStripViewPager - reuse same layout on each tab

Rusty

Well-Known Member
Licensed User
I would like to reuse a layout on each tab and be able to independently update their contents during program execution.
For example I'd like to have a label or listbox on a layout; populate the tabstripview (i.e. 4 tabs) with the same layout.
During execution, I'd like to put different things on each tab label or listbox.
How can I address the label or listbox independently when a tab is selected and then another tab is selected.
Any ideas are appreciated.
Rusty
 

techknight

Well-Known Member
Licensed User
I have done this.

Easiest way is build/load your layout and controls, in an Activity context, Class.

Then you can define an array of that Class in your Main, and then initialize each one you want, and add it to a tab.

That creates a copy of all references to that "layout" in an array of a specific index. From that point, you can manipulate anything, anywhere.

So you would create a Class, called PageForATab (hypothetically)

Then in your Main, define Pages(X) As PageForATab

X being the number of pages you want.

from there you could simply add Pages(PageNumber) to a tab. Anything you do with that particular index, will affect that index's page.

In the Class, I just simply declare a panel, initialize it, and then load the layout file into the panel. That works fine.

Here was my subroutine:
B4X:
    'Assign memory locations for user playlists.
    Dim PlaylistPages(25) As PlaylistPage
    Dim QuickHitPages(25) As QuickHitPage

Sub BuildPages
    Dim I As Int
    I = 0
    LoadedPages.Clear 'Clear out any loaded pages, as we are reloading new ones.
    For Each PageName As String In FM.Pages.Keys
        Dim PageSettings As Map = FM.Pages.Get(PageName)
        LoadedPages.Put(PageName, PageSettings) 'Store a copy locally. (For comparing on DB updates)
        If PageSettings.Get("PlaylistType") = "Standard" Then
            TabHost1.AddTab2(PageName, PlaylistPages(I).Initialize(Me, PageName, PageSettings))
        Else If PageSettings.Get("PlaylistType") = "Quick-Hit" Then
            TabHost1.AddTab2(PageName, QuickHitPages(I).Initialize(Me, PageName, PageSettings))
        End If
        I = I + 1
    Next
End Sub
The initialize routine being called in the above, is the Initialize sub I put in the Class that sets up my controls with the initial data that it was sent during the assignment, but the key thing is, it also returns the View which is important for adding into the TabStrip.

B4X:
Public Sub Initialize(mCallBack As Object, PageName As String, PageSettings As Object) As View
    Callback = mCallBack 'This allows us to raise subroutines in the code module that initialized our class. 
    PlaylistName = PageName 'Make this class instance aware of what "Page" this is. (UI and Saved settings purposes).
    Playlist.Initialize
   
    If PageSettings <> Null Then 
        Dim Settings As Map = PageSettings
    Else
        Dim Settings As Map
        Settings.Initialize
    End If
   
    'Grab each setting (or defaults) and preload them into our working variables for this Page.
    If Settings.ContainsKey("SelectedScreen") = True Then 
        SelectedScreen = Settings.Get("SelectedScreen")
    Else 
        SelectedScreen = 0 'Default
    End If
   
    If Settings.ContainsKey("SelectedIndex") = True Then 
        SelectedIndex = Settings.Get("SelectedIndex")
    Else
        SelectedIndex = 0
    End If
   
    If Settings.ContainsKey("PlaylistStatus") = True Then 'We have a current status of our playlist stored
        PlaylistStatus = Settings.Get("PlaylistStatus")
    Else
        PlaylistStatus = "stopped" 'This playlist isnt playing
    End If
   
    If Settings.ContainsKey("PlaylistType") = True Then 'We have a current type of playlist stored
        PlaylistType = Settings.Get("PlaylistType")
    Else
        PlaylistType = "Standard" 'This is a standard playlist
    End If
   
    If Settings.ContainsKey(PageName) = True Then 'We have a stored playlist for this page
        Playlist = Settings.Get(PageName)
    Else
        Playlist.Clear
    End If
   
    pnlSequenceLayout.Initialize("pnlSequenceLayout")
    pnlSequenceLayout.Width = 100%x
    pnlSequenceLayout.Height = 78%y
    pnlSequenceLayout.LoadLayout("SequenceLayout.bal")

    RefreshDisplay 'Fill our playlist and settings and update UI based on known stored data. (or defaults if none exists)

    IsInitialized = True
    Return pnlSequenceLayout
End Sub
 
Last edited:

DawningTruth

Active Member
Licensed User
I have done this.

Easiest way is build/load your layout and controls, in an Activity context, Class.

Then you can define an array of that Class in your Main, and then initialize each one you want, and add it to a tab.

That creates a copy of all references to that "layout" in an array of a specific index. From that point, you can manipulate anything, anywhere.

So you would create a Class, called PageForATab (hypothetically)

Then in your Main, define Pages(X) As PageForATab

X being the number of pages you want.

from there you could simply add Pages(PageNumber) to a tab. Anything you do with that particular index, will affect that index's page.

In the Class, I just simply declare a panel, initialize it, and then load the layout file into the panel. That works fine.

Here was my subroutine:
B4X:
    'Assign memory locations for user playlists.
    Dim PlaylistPages(25) As PlaylistPage
    Dim QuickHitPages(25) As QuickHitPage

Sub BuildPages
    Dim I As Int
    I = 0
    LoadedPages.Clear 'Clear out any loaded pages, as we are reloading new ones.
    For Each PageName As String In FM.Pages.Keys
        Dim PageSettings As Map = FM.Pages.Get(PageName)
        LoadedPages.Put(PageName, PageSettings) 'Store a copy locally. (For comparing on DB updates)
        If PageSettings.Get("PlaylistType") = "Standard" Then
            TabHost1.AddTab2(PageName, PlaylistPages(I).Initialize(Me, PageName, PageSettings))
        Else If PageSettings.Get("PlaylistType") = "Quick-Hit" Then
            TabHost1.AddTab2(PageName, QuickHitPages(I).Initialize(Me, PageName, PageSettings))
        End If
        I = I + 1
    Next
End Sub
The initialize routine being called in the above, is the Initialize sub I put in the Class that sets up my controls with the initial data that it was sent during the assignment, but the key thing is, it also returns the View which is important for adding into the TabStrip.

B4X:
Public Sub Initialize(mCallBack As Object, PageName As String, PageSettings As Object) As View
    Callback = mCallBack 'This allows us to raise subroutines in the code module that initialized our class.
    PlaylistName = PageName 'Make this class instance aware of what "Page" this is. (UI and Saved settings purposes).
    Playlist.Initialize
  
    If PageSettings <> Null Then
        Dim Settings As Map = PageSettings
    Else
        Dim Settings As Map
        Settings.Initialize
    End If
  
    'Grab each setting (or defaults) and preload them into our working variables for this Page.
    If Settings.ContainsKey("SelectedScreen") = True Then
        SelectedScreen = Settings.Get("SelectedScreen")
    Else
        SelectedScreen = 0 'Default
    End If
  
    If Settings.ContainsKey("SelectedIndex") = True Then
        SelectedIndex = Settings.Get("SelectedIndex")
    Else
        SelectedIndex = 0
    End If
  
    If Settings.ContainsKey("PlaylistStatus") = True Then 'We have a current status of our playlist stored
        PlaylistStatus = Settings.Get("PlaylistStatus")
    Else
        PlaylistStatus = "stopped" 'This playlist isnt playing
    End If
  
    If Settings.ContainsKey("PlaylistType") = True Then 'We have a current type of playlist stored
        PlaylistType = Settings.Get("PlaylistType")
    Else
        PlaylistType = "Standard" 'This is a standard playlist
    End If
  
    If Settings.ContainsKey(PageName) = True Then 'We have a stored playlist for this page
        Playlist = Settings.Get(PageName)
    Else
        Playlist.Clear
    End If
  
    pnlSequenceLayout.Initialize("pnlSequenceLayout")
    pnlSequenceLayout.Width = 100%x
    pnlSequenceLayout.Height = 78%y
    pnlSequenceLayout.LoadLayout("SequenceLayout.bal")

    RefreshDisplay 'Fill our playlist and settings and update UI based on known stored data. (or defaults if none exists)

    IsInitialized = True
    Return pnlSequenceLayout
End Sub
Can you please eleaborate on how you change the UI elements in a particular page? Thx :)
 

techknight

Well-Known Member
Licensed User
It is in the example code?

Basically you need to define each "tab" as an activity views class that gets loaded into an object variable assigned to that particular tab. That way you can manipulate everything you want by basically changing the contents in that variable.

So when I initialize the class, my initialize sub in the class returns the View. the View is then added to the Tab. And in my case, all my tabs are the same so I made an array defined as the Class which is the View.
 
Top