Android Tutorial ActionBar / Sliding Pages tutorial

Discussion in 'Tutorials & Examples' started by Erel, Jan 19, 2014.

  1. Erel

    Erel Administrator Staff Member Licensed User

    A simpler and better looking solution is now available: https://www.b4x.com/android/forum/threads/tabstripviewpager-better-viewpager.63975/

    StdActionBar library allows you to create layouts that use the action bar as a navigation interface.
    Note that StdActionBar requires Android 4+.

    In this tutorial we will create this layout:

    upload_2014-1-19_15-27-46.png upload_2014-1-19_15-28-3.png

    The user can switch pages with a swipe gesture.

    StdViewPager holds several panels and supports the swipe gesture.

    Using StdViewPager is quite simple:

    1. Initialize it and set the number of pages and their size.
    2. Add it to its parent.
    3. Create the internal pages layouts.

    Code:
    Dim height As Int = CalculateHeight(TrueTrue)
    vp.Initialize(
    "vp"3100%x, height) 'vp is a StdViewPager object
    Activity.AddView(vp.AsView, 00100%x, height)
    'load the pages layouts
    vp.Panels(0).LoadLayout("0")
    vp.Panels(
    1).LoadLayout("1")
    vp.Panels(
    2).LoadLayout("2")
    The next step is to add the ActionBar tabs:
    Code:
    bar.Initialize("bar")
    bar.NavigationMode = bar.NAVIGATION_MODE_TABS
    bar.AddTab(
    "Tab 1")
    bar.AddTab(
    "Tab 2")
    bar.AddTab(
    "Tab 3")
    We need to synchronize the selected tab and the selected page:
    Code:
    Sub VP_PageSelected (Position As Int)
       
    If bar.SelectedIndex <> Position Then bar.SelectedIndex = Position
    End Sub

    Sub bar_TabChanged(Index As Int, STab As StdTab)
       
    If vp.currentPage <> Index Then vp.ScrollTo(Index, False)
    End Sub
    CalculateHeight (TabsMode As Boolean, SplitEnabled As Boolean) is a helper sub that calculates the pages height based on the two features.
    As you can see in the first screenshot, the split mode is enabled in this case. In split mode the action bar menu items appear at the bottom in portrait mode (phones only). This is set by adding the following line to the manifest editor:
    Code:
    SetApplicationAttribute(android:uiOptions, "splitActionBarWhenNarrow")
    The project is attached. Note that it requires StdActionBar v1.50+.

    Tips:

    - You can show the "up indicator" by setting ShowUpIndicator to True:

    [​IMG]

    You can then handle the ButtonClicked event and use it to navigate to the "parent" activity.

    - The holo.light theme is used in this project. It is done with this manifest line:
    Code:
    SetApplicationAttribute(android:theme, "@android:style/Theme.Holo.Light")
     

    Attached Files:

    Last edited: Feb 25, 2016
    AlbertDE, Mashiane, thekevt and 8 others like this.
  2. zombee81

    zombee81 Member Licensed User

    Erel, thanks for this library, its fantastic. An idea for a future one, a ActionBar library that uses the sherlock actionbar so that it will be compatible with all versions of android down to 2.1.
     
  3. imgsimonebiliato

    imgsimonebiliato Well-Known Member Licensed User

    Hello,
    trying to use this library i get in the manifestor, this error:


    Code:
    AndroidManifest.xml:15: error: No resource identifier found for attribute 'uiOptions' in package 'android'
    AndroidManifest.xml:15: error: Error: No resource found that matches the given name (at 'theme' with value '@android:style/Theme.Holo.Light').
    Please help
     
  4. Erel

    Erel Administrator Staff Member Licensed User

    Make sure that you reference android.jar version 14+ (Tools - Configure Paths).
     
  5. JakeBullet70

    JakeBullet70 Well-Known Member Licensed User

    Very nice! Thanks Erel.
     
  6. tuhatinhvn

    tuhatinhvn Active Member Licensed User

    great! can you fix it to use with Android 2++??
     
  7. Erel

    Erel Administrator Staff Member Licensed User

    No. It is based on the native ActionBar that is only available in Android 4+.
     
  8. M. Giray Ozkan

    M. Giray Ozkan Member Licensed User

    Hi,

    Can I add or remove menu items in
    Code:
    bar_TabChanged
    sub ?

    Thank you
     
  9. Erel

    Erel Administrator Staff Member Licensed User

    Currently no.
     
  10. M. Giray Ozkan

    M. Giray Ozkan Member Licensed User

    Dear Erel,

    I have trouble adding menu items to actionbar. I'm using addmenuItem3 but 3 dot menu icon doesn't appear on top right corner. please help. Thank you.

    Code:
    AddManifestText(
    <uses-sdk android:minSdkVersion=
    "17" android:targetSdkVersion="17"/>
    <supports-screens android:largeScreens=
    "true"
        android:normalScreens=
    "true"
        android:smallScreens=
    "true"
        android:anyDensity=
    "true"/>)
    SetApplicationAttribute(android:icon, 
    "@drawable/icon")
    SetApplicationAttribute(android:
    label"$LABEL$")
    SetApplicationAttribute(android:theme, 
    "@style/Theme.MyCustomTheme")
    SetActivityAttribute(addReminderActivity, android:windowSoftInputMode, adjustResize|stateHidden)
    AddPermission(android.permission.VIBRATE)

    Code:
    Activity.AddMenuItem3("""mnuUser"LoadBitmap(File.DirAssets, "ic_action_user.png"), True)
          
        
    Activity.AddMenuItem3("Menu Option 1""mnuOpt1",Null,False)
        
    Activity.AddMenuItem3("Menu Option 2""mnuOpt2",Null,False)
        
    Activity.AddMenuItem3("Menu Option 3""mnuOpt3",Null,False)
        
    Activity.AddMenuItem3("Menu Option 4""mnuOpt4",Null,False)

    by the way, I'm using LG-G2 phone with Android 4.2.2
     
    Last edited: Mar 21, 2014
  11. Erel

    Erel Administrator Staff Member Licensed User

    Please start a new thread for this question. Also try it without the custom theme and see whether the menu icon shows.
     
  12. thedesolatesoul

    thedesolatesoul Expert Licensed User

    Small mistake in the tutorial.
    At the end where it says:
    the manifest code is wrong.
     
  13. Erel

    Erel Administrator Staff Member Licensed User

    Fixed. Thank you.
     
  14. Roger C

    Roger C Active Member Licensed User

    Looks very interesting!!!

    And here comes a stupid question...
    I'm working on an app with many layouts which now are accessed through buttons on the startpage.
    If I would implement this instead where I load the layouts in panels, would the layouts still be connected to the old activitymodule where I loaded the layouts before? So I don't have to rewrite anything and place it all in Main where this code goes?
    It's just another way of showing the different layouts?

    And another...
    Would it be possible to load images in the tabs instead of text? If I have 5 tabs, four of them are visible and then there isn't much space for text. 'Settings' is cropped and I have to write 'Set.' instead. Doesn't look so good. :)
     
  15. Roger C

    Roger C Active Member Licensed User

    Been trying to integrate this in my current app but I can't get it working.

    In my old version, pressing a button on startscreen opened another Activity (Act2), displayed that layout and run some code to update information on the screen.

    When placing the layout for Act2 in panel 1 (panel 0 = startscreen) and sliding/pressing tab to panel 1, it shows the layout but the buttons don't work and they are not updated with new information.
    So I placed a check in 'Sub VP_PageSelected' to check for panel 1 and then run the start code by CallSub from Act2 but nothing happens.

    How can I implement this in an existing app? And how can I update the information in the layout in the panel I slide to? Do I have to update all layouts on all panels when I create them? Then it don't work for me since I use dynamic data that could change between panels and have to be updated when it comes into view.

    How do I handle the press of buttons on the layouts? Do all code have to be in Main and catch the button pressed?

    Am I missing something here?
     
  16. Erel

    Erel Administrator Staff Member Licensed User

    If you choose this solution then you should use a single activity. However you can use classes or code modules to split your code into several modules.

    You cannot put images in the tabs titles.
     
  17. netchicken

    netchicken Active Member Licensed User

    Erel I think I have the same question as Roger above.
    I have 4 layouts that are at present opened by 4 activities using Buttons. Each layout is loaded with data from the class in the Activity.

    Is there a way to fill each layout with the data (its only 1 line of data) with this system? Or can I only use 4 panels and one Activity?
     
  18. netchicken

    netchicken Active Member Licensed User

    I seem to have found an answer.
    By adding the fields (Labels) to the same activity that holds the sliding pages code, it seems to fill the labels in the layouts with the correct data.
     
  19. Roger C

    Roger C Active Member Licensed User

    Netchicken,

    I've made a solution with one Activity and classes loading Layouts and this works fine for me so far. Supplied here are the framework of this setup. I've been searching a lot for a working solution and thought I'd share this, might help others in the same situation.

    The Activity has an Actionbar in top and another in bottom (which works as a statusbar for me).
    Changes in the Actionbars can be done by calling a sub in Main like:
    Code:
    CallSub(Main,"ActivityLowerBar")
    or in the top bar
    Code:
    CallSub(Main,"ActivityTopBar")
    I use KeyValueStore to send variables between classes and activity, a bit slower than global variables but safer if the app shuts down.

    I also have slidingmenues (http://www.basic4ppc.com/android/forum/threads/jfeinstein10-slidingmenu-library.36482/) to the left, with buttons for selecting function and to the right with a ScrollView that can be used for anything you want.

    The menubuttons loads the classes like this:
    Code:
    sm.HideMenus
    Activity.RemoveAllViews
    lClsHistory.Initialize(Me, 
    Activity2)
    Then the class loads the Layouts and each class will handle the events from that layout.
    This means you have the Activity common for the project and just change the visible layouts by initializing the classes.

    I've also implemented a Multilanguage function based on this http://www.basic4ppc.com/android/forum/threads/ahlocale-library.7561/.
    Texts are used in this way:
    Code:
    btnKund.text=trans.GetText("Customer")
    I only have Swedish at the moment as complement to English (the english is the text Customer above) and the Swedish is looked up in a text file in the folder /Files.

    Noticed that the Backbutton on the device don't work but thats easy to solve for you...
    The sliding doesn't work so good on the emulator but it does on a real device.

    Notice that you will need some libraries...
    Since this frame is taken from my complete app there are a lot of libs and I really don't know which are used for only the frame to work... But try and add them one at a time when you get error...
    These are the libs used: AHLocale, Core, DateUtils, Dialogs, HTTP, JavaObject, JSON, Net, Phone, RandomAccessFile, Reflection, ScrollView2D, SlidingMenuWrapper, SQL, StdActionbar, StringFunctions, StringUtils, TabHostExtras, XmlSax.
     

    Attached Files:

    Last edited: Apr 29, 2014
  20. luke2012

    luke2012 Well-Known Member Licensed User

    @Erel
    Very good work!
    Only a question : In the tutorial's screenshots I don't see the action overflow. Is it supported ?
     
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