Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I implement custom Action Bar with custom buttons in Android?

I want to implement custom ActionBar which must look like this:

enter image description here

So questions:

  1. How can I implement a button like custom view: just some image?
  2. How can I draw a line on the top of the ActionBar?
  3. And how can I implement buttons without separator lines: add tabs on the ActionBar or what?
like image 700
MainstreamDeveloper00 Avatar asked Mar 20 '13 08:03

MainstreamDeveloper00


People also ask

How can I customize my Android Action Bar?

This example demonstrate about how to create a custom action bar in Android. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml.

How do you add action items to the action bar in Android?

All action buttons and other items available in the action overflow are defined in an XML menu resource. To add actions to the action bar, create a new XML file in your project's res/menu/ directory. The app:showAsAction attribute specifies whether the action should be shown as a button on the app bar.

Which view can be used to customize the action bar?

Custom Action Bar Layout The view layout consists of two ImageButtons that represent forward and back image buttons and a TextView in the center.

How do you style an action bar?

To change the action bar background, create a custom theme for your activity that overrides the actionBarStyle property. This property points to another style in which you can override the background property to specify a drawable resource for the action bar background.


2 Answers

1 You can use a drawable

<menu xmlns:android="http://schemas.android.com/apk/res/android">     <item android:id="@+id/menu_item1"         android:icon="@drawable/my_item_drawable"         android:title="@string/menu_item1"         android:showAsAction="ifRoom" /> </menu> 

2 Create a style for the action bar and use a custom background:

<resources>     <!-- the theme applied to the application or activity -->     <style name="CustomActivityTheme" parent="@android:style/Theme.Holo">         <item name="android:actionBarStyle">@style/MyActionBar</item>         <!-- other activity and action bar styles here -->     </style>     <!-- style for the action bar backgrounds -->     <style name="MyActionBar" parent="@android:style/Widget.Holo.ActionBar">         <item name="android:background">@drawable/background</item>         <item name="android:backgroundStacked">@drawable/background</item>         <item name="android:backgroundSplit">@drawable/split_background</item>     </style> </resources> 

3 Style again android:actionBarDivider

The android documentation is very usefull for that.

like image 33
JEY Avatar answered Sep 22 '22 02:09

JEY


enter image description here

This is pretty much as close as you'll get if you want to use the ActionBar APIs. I'm not sure you can place a colorstrip above the ActionBar without doing some weird Window hacking, it's not worth the trouble. As far as changing the MenuItems goes, you can make those tighter via a style. It would be something like this, but I haven't tested it.

<style name="MyTheme" parent="android:Theme.Holo.Light">     <item name="actionButtonStyle">@style/MyActionButtonStyle</item> </style>  <style name="MyActionButtonStyle" parent="Widget.ActionButton">     <item name="android:minWidth">28dip</item> </style> 

Here's how to inflate and add the custom layout to your ActionBar.

    // Inflate your custom layout     final ViewGroup actionBarLayout = (ViewGroup) getLayoutInflater().inflate(             R.layout.action_bar,             null);      // Set up your ActionBar     final ActionBar actionBar = getActionBar();     actionBar.setDisplayShowHomeEnabled(false);     actionBar.setDisplayShowTitleEnabled(false);     actionBar.setDisplayShowCustomEnabled(true);     actionBar.setCustomView(actionBarLayout);      // You customization     final int actionBarColor = getResources().getColor(R.color.action_bar);     actionBar.setBackgroundDrawable(new ColorDrawable(actionBarColor));      final Button actionBarTitle = (Button) findViewById(R.id.action_bar_title);     actionBarTitle.setText("Index(2)");      final Button actionBarSent = (Button) findViewById(R.id.action_bar_sent);     actionBarSent.setText("Sent");      final Button actionBarStaff = (Button) findViewById(R.id.action_bar_staff);     actionBarStaff.setText("Staff");      final Button actionBarLocations = (Button) findViewById(R.id.action_bar_locations);     actionBarLocations.setText("HIPPA Locations"); 

Here's the custom layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:enabled="false"     android:orientation="horizontal"     android:paddingEnd="8dip" >      <Button         android:id="@+id/action_bar_title"         style="@style/ActionBarButtonWhite" />      <Button         android:id="@+id/action_bar_sent"         style="@style/ActionBarButtonOffWhite" />      <Button         android:id="@+id/action_bar_staff"         style="@style/ActionBarButtonOffWhite" />      <Button         android:id="@+id/action_bar_locations"         style="@style/ActionBarButtonOffWhite" />  </LinearLayout> 

Here's the color strip layout: To use it, just use merge in whatever layout you inflate in setContentView.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="@dimen/colorstrip"     android:background="@android:color/holo_blue_dark" /> 

Here are the Button styles:

<style name="ActionBarButton">     <item name="android:layout_width">wrap_content</item>     <item name="android:layout_height">wrap_content</item>     <item name="android:background">@null</item>     <item name="android:ellipsize">end</item>     <item name="android:singleLine">true</item>     <item name="android:textSize">@dimen/text_size_small</item> </style>  <style name="ActionBarButtonWhite" parent="@style/ActionBarButton">     <item name="android:textColor">@color/white</item> </style>  <style name="ActionBarButtonOffWhite" parent="@style/ActionBarButton">     <item name="android:textColor">@color/off_white</item> </style> 

Here are the colors and dimensions I used:

<color name="action_bar">#ff0d0d0d</color> <color name="white">#ffffffff</color> <color name="off_white">#99ffffff</color>  <!-- Text sizes --> <dimen name="text_size_small">14.0sp</dimen> <dimen name="text_size_medium">16.0sp</dimen>  <!-- ActionBar color strip --> <dimen name="colorstrip">5dp</dimen> 

If you want to customize it more than this, you may consider not using the ActionBar at all, but I wouldn't recommend that. You may also consider reading through the Android Design Guidelines to get a better idea on how to design your ActionBar.

If you choose to forgo the ActionBar and use your own layout instead, you should be sure to add action-able Toasts when users long press your "MenuItems". This can be easily achieved using this Gist.

like image 126
adneal Avatar answered Sep 21 '22 02:09

adneal