android - quiere - Imagen de la barra de herramientas centrada

seo imagenes wordpress

Question

Utilizando el último android.support.v7.widget.Toolbar Quiero centrar una imagen en la barra de herramientas pero se mantiene a la izquierda.

La mejor manera para mí sería usar el método toolbar.setLogo() y centrar el logotipo, pero no veo ninguna forma de hacerlo.

Yo uso un diseño para la Toolbar :

  <android.support.v7.widget.Toolbar style="@style/ToolBarStyle"
                                   xmlns:android="http://schemas.android.com/apk/res/android"
                                   android:layout_width="match_parent"
                                   android:layout_height="wrap_content"
                                   android:background="?attr/colorPrimary"
                                   android:minHeight="@dimen/abc_action_bar_default_height_material">

</android.support.v7.widget.Toolbar>

¿Existe alguna posibilidad de agregar una imagen (logotipo) a la barra de herramientas y centrarla? programáticamente o en el diseño?

Answer 1

Esta no es la mejor solución, pero es una solución que funciona incluso cuando tienes un botón arriba o un elemento de menú.

tratar

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
       style="@style/ToolBarStyle"
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="?attr/colorPrimary"
       android:minHeight="@dimen/abc_action_bar_default_height_material"/>

    <ImageView
        android:layout_width="wrap_content"
        android:contentDescription="@string/logo"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher"/>

</FrameLayout>

Answer 2

La barra de herramientas es solo un ViewGroup, puede personalizarla tanto como desee.

Prueba esto :

<android.support.v7.widget.Toolbar
   style="@style/ToolBarStyle"
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="?attr/colorPrimary"
   android:minHeight="@dimen/abc_action_bar_default_height_material">

    <ImageView
        android:layout_width="wrap_content"
        android:contentDescription="@string/logo"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher"/>

 </android.support.v7.widget.Toolbar>

Esto debería llevar su imageView al centro de la barra de herramientas.

Answer 3

Me gusta el enfoque dado por la respuesta de Ruben Yoo debido a su simplicidad . Es explícito, fácil de seguir y mantiene todos los cambios de código juntos.

Aquí hay una versión actualizada con algunas mejoras menores:

<android.support.design.widget.AppBarLayout
    android:id="@+id/layout_app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize">
        </android.support.v7.widget.Toolbar>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/app_name"
            android:scaleType="centerInside"
            android:src="@mipmap/ic_launcher"/>
    </FrameLayout>

</android.support.design.widget.AppBarLayout>

Cambios:

1. presentó el padre AppBarLayout
2. tamaño explícito ?attr/actionBarSize proporcionado al marco y barra de herramientas
3. ImageView coincide con las dimensiones principales en ancho y alto
4. logotipo redimensionado al centerInside

Answer 4

Si el usuario lo configuró:

activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true); activity.getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_iconmenu);

y luego hacer algo como

<Toolbar ... >
   <ImageView ...>
   </ImageView>
</Toolbar>

entonces la imagen dentro de la barra de herramientas no estará centrada, ya que el botón de inicio ocupará algo de espacio del diseño. El centro horizontal de la imagen estará sesgado en el ancho del icono de inicio. Así que la mejor solución:
1.Cree 9 parches png desde su imagen original .png recurso.
2.Cree dibujables desde 9 parches con xml usando la lista de capas como ejemplo toolbar_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@color/white"/><!-- fill color under image(optional) -->
    <item>
        <nine-patch
        android:src="@drawable/toolbar_image" />
    </item>
</layer-list>

Luego establezca el recurso toolbar_background como fondo en el elemento Toolbar:

<Toolbar android:background="toolbar_background" ...>
</Toolbar>

Eso es todo.

Answer 5

Si necesita centrar un diseño más complicado en la barra de herramientas que solo una imagen, esto es lo que coloqué en onCreate () de mi actividad:

mToolbar.addOnLayoutChangeListener(
            new View.OnLayoutChangeListener() {
                @Override
                public void onLayoutChange(View view, int i, int i1, int i2, int i3, int i4, int i5, int i6, int i7) {
                    // Push layout to the center
                    int toolbarCenterX = (int) (mToolbar.getWidth() / 2.0 - mMiddleToolbarLayout.getWidth() / 2.0));
                    if(mMiddleToolbarLayout.getX() != toolbarCenterX) {
                        mMiddleToolbarLayout.setX(toolbarCenterX);
                    }
                }
            }
    );

Cuando se llama a onLayoutChange , el ancho de su diseño ya está determinado, por lo que solo debe empujarlo hacia el centro.

NOTA: es importante centrar solo la barra de herramientas (consulte la condición if) cuando no está centrada; de lo contrario, esta devolución de llamada se volvería a llamar en un bucle infinito.

El archivo XML se verá así:

<android.support.v7.widget.Toolbar
...
>
    <LinearLayout
        android:id="@+id/middle_toolbar_layout"
        ...
    >
</android.support.v7.widget.Toolbar>

Answer 6

Si tiene alguna vista y no puede centrar el logotipo, será porque el centrado se basa en el espacio restante, no en la barra de herramientas completa.

Para garantizar que el logotipo esté centrado, intente usar una lista de capas como fondo de su barra de herramientas en lugar de intentar usar una imagen como vista.

toolbar.xml

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@drawable/toolbar_background"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|enterAlways"
    app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>

toolbar_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="@color/colorPrimary" />
    </shape>
  </item>
  <item>
    <bitmap android:src="@drawable/logo" android:gravity="center" />
  </item>
</layer-list>

Eso debería garantizar un logotipo centrado, con un color de fondo específico.

Answer 7

Tuve un problema similar. Traté de usar el enfoque de lista de capas sugerido por Blueberry, pero una vez que puse un activo de alta resolución para el logotipo, la solución ya no funcionó. Un mapa de bits en una lista de capas tiene un error: agrandará las imágenes más pequeñas para ajustarse al espacio pero no reducirá las imágenes más grandes. Por lo tanto, siempre que esté de acuerdo con el uso de imágenes pequeñas que se ven granuladas / pixeladas cuando se amplían, la lista de capas funciona bien.

Para resolver este problema y tener un logotipo de alta resolución centrado, eliminé por completo el atributo android:background de la barra de herramientas, agregué android:background="?attr/colorPrimary" a mi padre AppBarLayout y luego AppBarLayout este terrible código en onCreate mi Activity método:

    final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    ActionBar ab = getSupportActionBar();
    if (ab != null && toolbar != null)
    {
        // Hide the title text.
        ab.setDisplayShowTitleEnabled(false);

        // Convert and show the logo.
        toolbar.addOnLayoutChangeListener(new View.OnLayoutChangeListener()
        {
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom)
            {
                ActionBar ab = getSupportActionBar();
                if (ab != null)
                {
                    Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.logo);
                    Bitmap bmp2 = Bitmap.createBitmap(toolbar.getWidth(), toolbar.getHeight(), bmp.getConfig());
                    Bitmap bmp3 = Bitmap.createScaledBitmap(bmp, bmp.getWidth() * toolbar.getHeight() / bmp.getHeight(), toolbar.getHeight(), true);
                    Canvas canvas = new Canvas(bmp2);
                    canvas.drawBitmap(bmp3, (toolbar.getWidth() / 2) - (bmp3.getWidth() / 2), 0, null);
                    BitmapDrawable background = new BitmapDrawable(getResources(), bmp2);
                    ab.setBackgroundDrawable(background);
                }
            }
        });
    }

Funciona creando un lienzo del tamaño de la barra de herramientas y una versión a escala del logotipo, dibujando el logotipo recientemente redimensionado en el lienzo en el centro y finalmente configurando el mapa de bits que se dibuja como el fondo de la barra de acción.

En el lado positivo, este enfoque le brinda un control total sobre la ubicación, el tamaño, etc. No se limita a lo que pueda hacer en XML. Es terrible porque se llama con bastante frecuencia cada vez que cambia el diseño de la barra de herramientas, lo que significa que hay implicaciones de rendimiento. Pero, cuando su equipo de diseño (que no se preocupa por lo primero con respecto al diseño de materiales) le exige tener un logotipo de fondo y perder cinco horas buscando la solución anterior, el rendimiento deja de importar: solo quiere que funcione. El código anterior apesta bastante a desesperación.

Dejaré que alguien más capaz que yo en el desarrollo de Android señale que "lo estoy haciendo mal" y solucione los problemas / errores de rendimiento que haya con el código anterior. No cambia el hecho de que el mapa de bits de la lista de capas está roto y este es un truco (que no debería existir) para corregir un error estúpido (que tampoco debería existir) en Android.

Answer 8

puedes usar este código:

     <android.support.v7.widget.Toolbar

        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"

        android:background="?attr/colorPrimary"

        app:popupTheme="@style/AppTheme.PopupOverlay">


        <ImageView
            android:layout_width="250dp"
            android:layout_height="match_parent"
            android:src="@drawable/apptitle"/>