ActionBar: vista personalizada con ImageView centrado, elementos de acción en los lados

Tengo un requisito para centrar un logotipo personalizado (utilizando un ImageView) en la barra de acciones para la actividad “Inicio”. Estoy usando ABS para este proyecto. Esto es muy similar a otra pregunta publicada en SO ( centrado en el logotipo de ActionBar y elementos de acción en los lados ), pero no estoy seguro de si el menú ImageView o de búsqueda hace una diferencia, ya que no obtengo los resultados que estoy buscando para (una imagen centrada), o si simplemente lo he equivocado. Básicamente, configuro un ícono a la izquierda, inserto la vista personalizada en el centro, y tengo un ícono de búsqueda a la derecha (menú de opciones). La imagen aparece un poco a la derecha del icono, pero aún está a la izquierda del centrado. Cualquier sugerencia sobre cómo centrar un ImageView en la barra de acciones sería muy apreciada.

Home.java:

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_home); LayoutInflater inflater = (LayoutInflater) getSupportActionBar().getThemedContext() .getSystemService(LAYOUT_INFLATER_SERVICE); final View customActionBarView = inflater.inflate( R.layout.actionbar_custom_view_home, null); /* Show the custom action bar view and hide the normal Home icon and title */ final ActionBar actionBar = getSupportActionBar(); actionBar.setHomeButtonEnabled(true); actionBar.setDisplayHomeAsUpEnabled(false); actionBar.setDisplayShowTitleEnabled(false); actionBar.setIcon(R.drawable.ic_ab_som); actionBar.setCustomView(customActionBarView); actionBar.setDisplayShowCustomEnabled(true); } @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = new MenuInflater(this); inflater.inflate(R.menu.search, menu); return true; } 

res / layout / actionbar_custom_view_home.xml:

     

res / menu / search.xml:

      

Explicado:

enter image description here

El contenedor rosa, es el espacio real donde agregarás la vista.

El truco está en hacer algunas matemáticas, centrar la Vista (lo que sea) en el medio.

En mi caso, la vista era una vista de texto. Aquí está mi método completo:

 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; } } } 

Diseño:

    

Disfrutar.

Si quieres una vista de imagen en el Centro de ActionBar, utiliza:

enter image description here

simplemente reemplace getActionBar(); para getSupportActionBar(); en el siguiente código

 public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final ActionBar actionBar = getActionBar(); actionBar.setCustomView(R.layout.actionbar_custom_view_home); actionBar.setDisplayShowTitleEnabled(false); actionBar.setDisplayShowCustomEnabled(true); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; } 

tu actionbar_custom_view_home.xml

 < ?xml version="1.0" encoding="utf-8"?>    

Ocultar el icono de la barra de acciones

enter image description here

 final ActionBar actionBar = getActionBar(); actionBar.setCustomView(R.layout.actionbar_custom_view_home); actionBar.setDisplayShowTitleEnabled(false); actionBar.setDisplayShowCustomEnabled(true); actionBar.setDisplayUseLogoEnabled(false); actionBar.setDisplayShowHomeEnabled(false); 

Nota: para <11 API use getSupportActionBar () y> 11 API use getActionBar ()


EDITADO: 03/02/16 para la barra de herramientas

    

Encontré este problema, aquí está mi solución:

  ActionBar.LayoutParams layoutParams = new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT); layoutParams.gravity = Gravity.CENTER_HORIZONTAL|Gravity.CENTER_HORIZONTAL; actionBar.setCustomView(yourCustomView,layoutParams); 

ImageView en su código se centra en relación con LinearLayout, no en la barra de acciones. Puede agregar el margen izquierdo (android: layout_marginLeft) al diseño para ajustar la posición de la imagen.

Otra forma de hacerlo es no agregar un ícono y elementos de acción a la Barra de acciones, sino usar un diseño personalizado con íconos y botones dentro. Pero necesitará manejar elementos de acción usted mismo en ese caso.

Lo único que encontré trabajando es poner (poner a la derecha o a la izquierda, según sea necesario, o ambas cosas):

 android:layout_marginLeft|Right="?attr/actionBarSize" 

que encontré aquí: http://sourcey.com/android-custom-centered-actionbar-with-material-design/

Tarde a la fiesta, pero en caso de que ayude a alguien más, use una lista de capas y configúrela como fondo. De lo contrario, el logotipo se centrará según el espacio restante, no toda la barra de herramientas como lo menciona Reinherd.

Puede usar una lista de capas con un color de fondo estático y una imagen con gravedad establecida en el centro como se muestra a continuación. ¡Espero eso ayude!

toolbar.axml

   

toolbar_background.xml

           

Me enfrento con el mismo problema y sugiero la siguiente solución:

  1. en su res / layout / actionbar_custom_view_home.xml cambie el ancho del diseño a wrap_content:

     android:layout_width="wrap_content" 
  2. Obtenga el ancho de la barra de acciones de esta manera:

     Display display = getWindowManager().getDefaultDisplay(); Point size = new Point(); display.getSize(size); //width of action bar is the same as width of whole screen final int actionBarWidth = size.x; 
  3. Añada layoutListener a su customActionBarView:

     customActionBarView.addOnLayoutChangeListener( new OnLayoutChangeListener() { @Override public void onGlobalLayout() { float x = customActionBarView.getX(); int logoImageWidth = imageLogo.getWidth(); int logoPosition = actionBarWidth / 2 - logoImageWidth / 2; if (x != logoPosition) { customActionBarView.setX(logoPosition); customActionBarView.requestLayout(); } else { customActionBarView.removeOnLayoutChangeListener(this); } } } );