How can I implement custom Action Bar with custom buttons in Android?
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.
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.