Show a custom button on ActionBarSherlock to show a Sliding menu

Question

I'm developing an Android application that uses ActionBarSherlock with SlidingMenu.

Now, this is how I show the button to open the menu:

But don't want to show that < in left, and change its icon for a custom.

This is how I set up Sliding Menu:

private void setUpSlidingMenuAndActionBar()
{
    setBehindContentView(R.menu.menu);

    setSlidingActionBarEnabled(true);        

    slidingMenu = getSlidingMenu(); 
    slidingMenu.setMode(SlidingMenu.LEFT);
    slidingMenu.setSlidingEnabled(false);
    slidingMenu.setBehindOffset(100);

    getSupportActionBar().setDisplayShowCustomEnabled(true);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}

How can I remove that < icon on the left and change the home button icon?

When I tap on that button I open the sliding menu.

UPDATE:

Following blackbelt answer, this is what I did:

styles.xml:

<style name="AppTheme.ActionBarStyle" parent="@style/Theme.Sherlock">
    <item name="android:homeAsUpIndicator">@drawable/but_menu</item>
    <item name="homeAsUpIndicator">@drawable/but_menu</item>
</style>

Manifest.xml:

<application
    [ ... ]
    android:theme="@style/AppTheme.ActionBarStyle" >

The result:

I can see the green Android!!! I don't want to see it!!

Bemoan

Answer 1

Use homeAsUpIndicator inside styles

 <item name="android:homeAsUpIndicator">@drawable/home_up_drawable</item>
 <item name="homeAsUpIndicator">@drawable/home_up_drawable</item>

Mine looks like:

<style name="AppTheme.ActionBarStyle" parent="@style/Widget.Sherlock.ActionBar.Solid">
    <item name="android:homeAsUpIndicator">@drawable/home_up_drawable</item>
    <item name="homeAsUpIndicator">@drawable/home_up_drawable</item>
    <item name="android:titleTextStyle">@style/AppTheme.TitleTextStyle</item>
    <item name="android:background">@drawable/actionbar_background</item>
    <item name="background">@drawable/actionbar_background</item>
    <item name="android:displayOptions">showHome|useLogo</item>
    <item name="displayOptions">showHome|useLogo</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="windowContentOverlay">@null</item>
</style>

Sewel

Thanks for your answer but I'm very new on this. Where do I have to add that? – Bemoan

inside styles.xml. the item with android: is for native action bar support, the one without is for sherlock – Sewel

I have updated my question with more details. Using your answer, I still can see the green android robot. – Bemoan

try adding <item name="android:icon">@null</item> <item name="icon">@null</item> – Sewel

I removed it at runtime with getSupportActionBar().setIcon(android.R.color.transparent); – Sewel

@blackbelt: do u have idea on set that title as center_horizontal of the page like in the smaple it is at right of the image right ,want it center? – Kalif

@blackbelt, I am issue with opening the sliding menu, its open perfectly with dragging it from left, but not with menu icon click,,, yet it close with menu icon click, would have idea to resolve this.? – Enisle

Answer 2

you make custom Action-bar and possible to change its icon for a custom.

Follow this Steps:

Only possible for this to make Custom Sherlock bar for Title.

create separate xml file for title on App.

that file contains like this..

In this custom layout, we can able to change the background color and custom icon..

you just add the image from drawable to that header_sherlock.xml file button coding part like android:background="@drawable/imageName"

header_sherlock.xml

     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3"
android:background="#008000"
 >

     <Button
    android:id="@+id/header_tvleft"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:gravity="left"
    android:layout_marginTop="@dimen/margintop"
    android:clickable="true"
    android:paddingLeft="@dimen/layoutpaddingleft"
    android:text="Back"
    android:background="@drawable/imageName"
    android:textColor="#ffffff" 
    android:textSize="@dimen/header_leftbtn"
     /> 


<Button
    android:id="@+id/header_tvcenter"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:layout_marginTop="@dimen/margintop"
    android:layout_marginRight="@dimen/sherlockpaddingright"   
    android:layout_marginLeft="@dimen/sherlockpaddingleft"
    android:text="Center"
    android:textColor="#ffffff"
    android:textStyle="bold"
    android:background="@drawable/save1"
    android:textSize="@dimen/header_title"
     />

    <Button
    android:id="@+id/header_tvright"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:gravity="right"
    android:layout_marginTop="@dimen/margintop"
    android:clickable="true"
    android:paddingRight="@dimen/layoutpaddingright"
    android:text="Right"
    android:textColor="#ffffff"
    android:background="@drawable/save1"
    android:textSize="@dimen/header_rightbtn"
     />

 </LinearLayout>

For MainActivity or which activity you want to add title :

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); 
getSupportActionBar().setCustomView(R.layout.header_sherlock);
header_tvleft = (Button) findViewById(R.id.header_tvleft);
header_tvleft.setText("LeftTitleName");
header_tvcenter = (Button) findViewById(R.id.header_tvcenter);
header_tvcenter.setText("CenterTitleName");
header_tvright = (Button) findViewById(R.id.header_tvright);
header_tvright.setText("RightTitleName");

then you will the listener code for button like this..

// In this Button Listener code inside, we able to set the sliding menu coding....

 header_tvleft.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
    // inside you will able to set your sliding menu whatever.......                

        }
    });

Note : This are all possible only for creating the Custom Action bar.....

if you want any clarification more regarding this, I like to answer your query....

Growl

Hi, how to open sliding menu when click on right button for right sliding menu, and Left button for left menu?? – Peebles

when use slide menu, there is no two separate left and right menu. when we see slide menu, first click left side menu,then, menu will go to right side on same menu. then, when you click same menu on right side, it will come on left side again..thats it.. – Growl

see any example slide menu program.it may useful to understand. – Growl

Thanks, but now i have solve my Problem. in my case, i have two sliding menu. i for left and another is right side just like facebook. – Peebles