How to Display Custom View in Actionbar

How to display custom view in ActionBar?

There is a trick for this. All you have to do is to use RelativeLayout instead of LinearLayout as the main container. It's important to have android:layout_gravity="fill_horizontal" set for it. That should do it.

How to set a custom view in actionbar in android?

Try this

If you are using support library

ActionBar actionBar = getActionBar();

otherwise

ActionBar actionBar = getSupportActionBar();

and then

LayoutInflater inflator = (LayoutInflater) this .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflator.inflate(R.layout.custom_actionbar, null);
actionBar.setCustomView(v);

Your onCreate should look like this

public class MainActivity extends ActionBarActivity {
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
    viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
    ActionBar actionBar = getSupportActionBar(); // As you said you are using support library
    LayoutInflater inflator = (LayoutInflater) this .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View v = inflator.inflate(R.layout.custom_actionbar, null);
    actionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
    actionBar.setCustomView(v);

}
}

Remember to import

import android.support.v7.app.ActionBar

rather than

import android.app.ActionBar

ActionBar - custom view with centered ImageView, Action Items on sides

Explained:

The pink container, is the real space where you will add the view.

The trick is doing some maths, to center the View (whatever) to the middle.

In my case, the View was a TextView. Here's my full method:

public void addTextToActionBar( String textToSet )
{
    mActionbar.setDisplayShowCustomEnabled( true );

    // Inflate the custom view
    LayoutInflater inflater = LayoutInflater.from( this );
    View header = inflater.inflate( R.layout.actionbar_header, null );

    //Here do whatever you need to do with the view (set text if it's a textview or whatever)
    TextView tv = (TextView) header.findViewById( R.id.program_title );
    tv.setText( textToSet );

    // Magic happens to center it.
    int actionBarWidth = DeviceHelper.getDeviceWidth( this ); //Google for this method. Kinda easy.

    tv.measure( 0, 0 );
    int tvSize = tv.getMeasuredWidth();

    try
    {
        int leftSpace = 0;

        View homeButton = findViewById( android.R.id.home );
        final ViewGroup holder = (ViewGroup) homeButton.getParent();

        View firstChild =  holder.getChildAt( 0 );
        View secondChild =  holder.getChildAt( 1 );

        leftSpace = firstChild.getWidth()+secondChild.getWidth();
    }
    catch ( Exception ignored )
    {}

    mActionbar.setCustomView( header );

    if ( null != header )
    {
        ActionBar.LayoutParams params = (ActionBar.LayoutParams) header.getLayoutParams();

        if ( null != params )
        {
            int leftMargin =  ( actionBarWidth / 2 - ( leftSpace ) ) - ( tvSize / 2 ) ;

            params.leftMargin = 0 >= leftMargin ? 0 : leftMargin;
        }
    }
}

Layout:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal|center_vertical|center"
    android:orientation="horizontal" >

<TextView
    android:id="@+id/program_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@android:color/white"
    android:contentDescription="@string/content_description_program_title"
    android:ellipsize="end"
    android:maxLines="1"
    android:textSize="22sp"/>

</RelativeLayout>

Enjoy.

How to show a custom view above Action Bar in Android

Here is a simple way to achieve this. ActionBar keeps its layout in the class ActionBarContainer which simply inherits from FrameLayout. So in order to display something over the ActionBar you need to grab a reference to the ActionBarContainer and add your own custom View into it. Here is the code

// first get the id of Action bar container    
    int actionbarContainerViewID = getResources().getIdentifier("action_bar_container", "id", "android");     
    FrameLayout actionBarContainer = (FrameLayout)findViewById(actionbarContainerViewID);

// bring the layout inflator to inflate your custom layout      
    LayoutInflater mInflater = getLayoutInflater();        
    View customView = mInflater.inflate(R.layout.yourCustomDesign, null);
    actionBarContainer.addView(customView);

you won't be needing any special way to put it over the top! just design it as you like and it will be on the top!

CustomView in ActionBar not loading

Converting comment to answer

actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM)

Also check this link

Manually inflating custom view yields different layouts for ActionBar custom view

Is it possible to show title and custom view on action bar at same time?

The custom view will replace the Title bar. I suggest you to include a textview for the app title in your custom view so that you have more ground to play.

Use Custom View as Actionbar Icon

Your code is probably not working because the view does not have a size yet. I also suggest you don't use the drawing cache but instead draw the view on a canvas.

I have written a little example where the view is given a size when it doesn't have one yet. You may want to tune to code a bit to fit your needs.

Example:

public static Drawable createDrawableFromView(View v, int requestedWidth, int requestedHeight) {
    // Because the view is never shown it does not have a size, but if shown don't resize it.
    if (v.getMeasuredHeight() <= 0) {

        // You may want to change these lines according to the behavior you need.
        int specWidth = MeasureSpec.makeMeasureSpec(requestedWidth, MeasureSpec.AT_MOST);
        int specHeight = MeasureSpec.makeMeasureSpec(requestedHeight, MeasureSpec.AT_MOST);
        v.measure(specWidth, specHeight);
    }
    Bitmap b = Bitmap.createBitmap(v.getMeasuredWidth(), v.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
    Canvas c = new Canvas(b);
    v.layout(0, 0, v.getMeasuredWidth(), v.getMeasuredHeight());
    v.draw(c);
    return new BitmapDrawable(v.getContext().getResources(), b);
}

Usage:

getActionBar().setTitle("View to icon test");
TextView view = new TextView(this);
view.setText("AI");
view.setGravity(Gravity.CENTER);
view.setTextColor(Color.RED);
getActionBar().setIcon(createDrawableFromView(view, 250, 250));

Result:

---

Related Topics