Thursday, December 1, 2011

Using an ActionBar At The Bottom of a Screen

To make some actions easier for users, I added what I am calling an ActionBar to the bottom of the WebView.  It allows users to add a note, share the link and download the EPUB or PDF files without accessing the menu.  It is not an ActionBar in the pure Android way of doing things since it is not at the top of the screen and does not include a title.  However, an ActionBar at the top of the screen did not make sense for my app, thus I moved it to the botttom.

Creating the ActionBar involved a few steps:
  • modification of the webview layout
  • creation of the ActionBar style
  • adding code to handle the button events when an item on the ActionBar is selected
WebView Layout

The original WebView layout was very simple.  It was a RelativeLayout containing a WebView.  The new layout is a set of layouts.



  
   
  
  
   
       
       
       
       
   
  


The key to getting the layout correct (WebView on top, ActionBar on bottom) was adding the android:layout_weight="1" atttribute to the LinearLayout that contains the WebView. This caused the WebView to be displayed on top of the ActionBar. I used a RelativeLayout for the ActionBar ImageButtons so I could lay them out next to each other.

ActionBar Style
 
The look of the ActionBar contains the following styles
  • No borders around the ImageButtons 10sp of padding around the images 
  • All of the ImageButtons have the same background color 
  • The layout that contains the ImageButtons has the same backround color as the buttons.

I handled all of the button styling by modifying the existing button_background.xml and saving it as button_bar_background.xml

    
    
    
    
    
    
    


The main difference is the use of button_bar_default.xml

    
 
    
     


I removed the rounded corners and the stroke which was drawing the border around the button.

Code for ActionBar
 
In WebViewActivity, I added a method, setLayout(), that setup the ActionBar based on the URL being viewed. I did not want the ActionBar to be displayed when the user was viewing search results or the app help page. If either of those URLs are detected, the ActionBar is hidden.

private void setLayout(String url)
{
        RelativeLayout relLayout = (RelativeLayout)findViewById(R.id.relativeLayout1);
        int visibility = relLayout.getVisibility();
        if(url.contains("/search") || url.contains(".html"))
        {
            if(visibility == View.VISIBLE)
            {
                relLayout.setVisibility(View.GONE);
            }
        }
        else
        {
            if(visibility == View.GONE)
            {
                relLayout.setVisibility(View.VISIBLE);
            }
            
                
                ImageButton noteButton = (ImageButton)findViewById(R.id.noteButton);
                noteButton.setOnClickListener(new OnClickListener() 
                {
                          
                      public void onClick(View v) 
                      {
                          Intent noteintent = new Intent(getApplicationContext(), NoteEditorActivity.class);
                          ContentCache.setObject(getString(R.string.content), content);
                          startActivity(noteintent);
                      }
                  });
                
                ImageButton shareButton = (ImageButton)findViewById(R.id.shareButton);
                shareButton.setOnClickListener(new OnClickListener() 
                {
                          
                      public void onClick(View v) 
                      {
                          Intent intent = new Intent(Intent.ACTION_SEND);
                          intent.setType("text/plain");

                          intent.putExtra(Intent.EXTRA_SUBJECT, content.getTitle());
                          intent.putExtra(Intent.EXTRA_TEXT, content.getUrl().toString() + " " + getString(R.string.shared_via));

                          Intent chooser = Intent.createChooser(intent, getString(R.string.tell_friend) + " "+ content.getTitle());
                          startActivity(chooser);

                      }
                  });
                
                ImageButton epubButton = (ImageButton)findViewById(R.id.epubButton);
                epubButton.setOnClickListener(new OnClickListener() 
                {
                          
                      public void onClick(View v) 
                      {
                          download(Constants.EPUB_TYPE);

                      }
                  });
                
                ImageButton pdfButton = (ImageButton)findViewById(R.id.pdfButton);
                pdfButton.setOnClickListener(new OnClickListener() 
                {
                          
                      public void onClick(View v) 
                      {
                          download(Constants.PDF_TYPE);

                      }
                  });
            
        }
}

An OnClickListener is coded to handle each button's function. Since the WebView can be used to view an entire book, search or visit the help page, I had to call setLayout() in WebViewClient.onPageFinished() as well as onCreate().

You can browse the source or download a zip file of the source. Connexions for Android is available in the Android Market or from the Connexions website.