Relleno entre el icono de inicio y el título de ActionBar


110

¿Alguien sabe cómo establecer el relleno entre el icono de inicio de ActionBar y el título?


13
Bienvenido al mundo de los hacks: Android . Esta simple cosa debería haberla encontrado cualquiera (incluso un novato) si lo necesitamos en otros técnicos de UI y programación de aplicaciones. Sin embargo, en Android, es realmente misterioso. Ocultan intencionalmente la función, la complican y solo hacen que Android se convierta en un mundo de hacks . No sé cuál es su propósito final.
King King

1
Esta pregunta y respuestas dan paso a lograr esto con atributos dentro de la barra de herramientas (soporte v7)
Elisabeth

Android apesta incluso más que iOS.
Borzh

Respuestas:


69

Adapté la respuesta de Cliffus y asigné el logo dibujable en mi definición de estilo de barra de acción, por ejemplo, como este en res / style.xml:

<item name="android:actionBarStyle">@style/MyActionBar</item>

<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#3f51b5</item>
        <item name="android:titleTextStyle">@style/ActionBar.TitleText</item>
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">18sp</item>
        <item name="android:logo">@drawable/actionbar_space_between_icon_and_title</item>
</style>

El dibujable se parece al de Cliffus (aquí con el icono del iniciador de aplicaciones predeterminado) en res / drawable / actionbar_space_between_icon_and_title.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_launcher"
        android:right="20dp"/>
</layer-list>

En android_manifest.xml aún puede establecer un ícono de aplicación diferente (ícono de iniciador en el 'escritorio'. Cualquier definición de logotipo diferente aquí es visible en actividades sin una barra de acción.


por qué no tiene efectos en Android 5.1
Logan Guo

Lo siento, no puedo decir nada al respecto en 5.1. Cambié al control de barra de herramientas más flexible. Si aún no lo ha hecho, recomiendo abrir una nueva pregunta aquí en StackOverflow y escribir algunos detalles más, lo que funcionó para usted (<5.1) y lo que no funciona y lo que intentó con 5.1, pero no llegó a una solución.
Minsky

Gracias @Minsky, me inspiré en su respuesta para resolver mi problema, puse cómo en la respuesta a continuación :)
Contexto

¿Qué pasa si se usa mipmap?
Yura Shinkarev

100

EDITAR : asegúrese de configurar este elemento de diseño como LOGO , no como el ícono de su aplicación como lo hicieron algunos de los comentaristas.

Simplemente haga un XML dibujable y colóquelo en la carpeta de recursos "dibujable" (sin ninguna densidad u otra configuración).

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:drawable="@drawable/my_logo"
        android:right="10dp"/>


</layer-list>

El último paso es establecer este nuevo elemento de diseño como logotipo en su manifiesto (o en el objeto Actionbar en su actividad)

¡Buena suerte!


1
Aquí hay un gran problema con esta solución. Lo usé y @Alesqui tiene razón: el ícono de la aplicación cambió y se hizo más pequeño ... Podrías cambiar el ícono, pero como dp es diferente para diferentes teléfonos, esta solución no es suficiente en una aplicación de producción.
Johan S

3
asegúrese de configurar este elemento de dibujo como LOGO, no como el icono de su aplicación. ¡buena suerte!
Cliffus

1
También veo distorsión. Si aplico el relleno derecho como se muestra arriba, el lado derecho de la imagen se recorta.
Neil

1
Solución interesante, pero no me funciona: puedo agregar relleno adicional de esta manera o recortar la imagen del logotipo, no es bueno (4.3)
Dori

1
@Cliffus - buena solución. Mi requisito era llevar el logotipo a la izquierda, así que usé: android: left = "- 4dp".
TharakaNirmana

55

También enfrenté un problema similar, en mi caso tuve que establecer títulos dinámicamente en cada actividad según el contenido.

Entonces esto funcionó para mí.

actionBar.setTitle("  " + yourActivityTitle);

Si todo lo que quieres es el espaciado, esta es la solución más fácil que se me ocurre.


13
¿Por qué el voto negativo? No creas que es una respuesta incorrecta, solo otra forma de hacerlo.
Rahul Sainani

3
@idratherbeintheair Sí, estoy de acuerdo en que esta no es la forma "más limpia", así que ahora solo dice la más fácil. Pero cuando señale algo, publique una solución alternativa. Me enfrenté a este problema y esto es lo que he usado en mi aplicación, así que lo compartí.
Rahul Sainani

3
De Verdad? Es posible que esta solución no funcione de la misma manera en diferentes pantallas con diferentes DPI.
Roman Bugaian

5
No elegiré esta solución porque realmente necesito algo más estable en mi aplicación, pero quiero preguntarles a todas esas personas que dicen "No está limpio". Dios mío, ¿dónde está la solución LIMPIA para este problema? ¡Todos esos trucos con logotipos, setPadding tampoco me parecen limpios! Solo lea los comentarios, cuántas personas también tienen problemas con ellos. Configuración de android: paddingLeft en el título: eso sería LIMPIO si hubiera funcionado. Nos quedamos aquí en la oscuridad para inventar trucos porque, por alguna razón, simplemente no funciona como debería haber funcionado. Así que nada "no está limpio".
Varvara Kalinina

1
Una solución más limpia sería utilizar el app:titleMarginStartatributo en el XML de diseño.
LarsH

40

Así es como pude establecer el relleno entre el ícono de inicio y el título.

ImageView view = (ImageView)findViewById(android.R.id.home);
view.setPadding(left, top, right, bottom);

Sin embargo, no pude encontrar una manera de personalizar esto a través de los estilos xml de ActionBar. Es decir, el siguiente XML no funciona:

<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">        
    <item name="android:titleTextStyle">@style/ActionBarTitle</item>
    <item name="android:icon">@drawable/ic_action_home</item>        
</style>

<style name="ActionBarTitle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textSize">18sp</item>
    <item name="android:paddingLeft">12dp</item>   <!-- Can't get this padding to work :( -->
</style>

Sin embargo, si está buscando lograr esto a través de xml, estos dos enlaces pueden ayudarlo a encontrar una solución:

https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml

(Este es el diseño real utilizado para mostrar el icono de inicio en una barra de acción) https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/action_bar_home.xml


1
@Dushyanth Acabo de intentarlo, pero dice una excepción de puntero nulo en la vista de imagen. Tengo homeUpIndicator y el icono de inicio en la barra de acción.
Krishna Shrestha

1
Esto solo funciona para API> = 11 ya que android.R.id.home se introdujo en API 11. Yo uso actionbarcompat para tener una barra de acción también en dispositivos pre honeycomp. ¿Cómo manejarlo allí?
Tobias

Un poco de truco. Consulte la respuesta de Cliffus a continuación para obtener una solución más limpia.
dhaag23

el espaciado de la casa ya no se establece usando padding, parece que se usa marginEnddesde api 17, lo que probablemente romperá esta solución. Vea el mío a continuación
Dori

@tobias R.id.home siempre está ahí, incluso antes del nivel 11, simplemente no está disponible
oscarthecat

32

Esta es una pregunta común en Material Design, ya que es posible que desee alinear el título de las barras de herramientas con el contenido del fragmento a continuación. Para hacer esto, puede anular el relleno predeterminado de "12dp" usando el atributo contentInsetStart = "72dp" en su diseño toolbar.xml como se muestra a continuación

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:background="@color/app_theme_color"
    app:contentInsetStart="72dp"/>

Luego, en tu actividad, llama

Toolbar toolbar = (Toolbar) activity.findViewById(R.id.toolbar);
toolbar.setTitle("Title Goes Here");

Y terminas con esto:

Barra de herramientas


Esto no funciona en absoluto en mi caso. Por favor, avíseme el estilo configurado para la actividad
Nitin Mesta

11
Esta es la forma correcta de hacer esto. También hay app:titleMarginStart="dimension"que apuntar directamente al título.
Markus Rubey

Piense que para la mayoría de los usuarios esta será la respuesta "correcta". Funciona como un amuleto, ¡Gracias!
Taras

1
¿Cómo es esta la respuesta "correcta", si la pregunta era sobre el relleno entre el icono de inicio y el título? El icono de inicio no se menciona aquí (ni el logotipo ni ninguna variación). Si contentInsetStartpone un espacio entre el ícono de inicio y el título, la respuesta al menos podría decirlo. Mi prueba de hace un momento contentInsetStartparecía poner el espacio antes del logotipo (que ciertamente no es lo mismo que el icono de inicio).
LarsH

30

Para mí, solo funcionó la siguiente combinación, probada de API 18 a 24

app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"

donde en "aplicación" es: xmlns:app="http://schemas.android.com/apk/res-auto"

por ejemplo.

 <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/SE_Life_Green"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp"
                >
                .......
                .......
                .......
            </android.support.v7.widget.Toolbar>

1
Muchas gracias. @Ajit
shahid17june

1
Excelente. Sería mejor si pudiera proporcionar el XML relacionado de muestra para aclarar dónde colocarlo. (Sé dónde poner esta línea)
John Pang

Hola @JohnPang, puedes poner esto en la barra de herramientas de tu diseño como se muestra arriba.
Ajit

29

Si está utilizando la barra de herramientas de AppCompat (android.support.v7.widget.Toolbar,> = revisión 24, junio de 2016), el relleno entre el icono y el título se puede cambiar con el siguiente valor:

  app:contentInsetStartWithNavigation="0dp"

Para mejorar mi respuesta, puede usarlo en su barra de herramientas directamente dentro de su actividad o puede crear un nuevo archivo de diseño para su barra de herramientas. En este caso, solo tiene que importar el @id de su barra de herramientas usando la propiedad de inclusión en cada vista necesaria.

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="4dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp">
</android.support.v7.widget.Toolbar>

Luego puede importar su diseño en su activity.xml

<include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

Excelente. Sería mejor si pudiera proporcionar el XML relacionado de muestra para aclarar dónde colocarlo. (Sé dónde poner esta línea)
John Pang

@JohnPang detallé mi respuesta, espero que te ayude a entender cómo usar esta propiedad.
tryp

@ Bolein95, ¿estás usando la biblioteca de soporte? para poder ayudarlo, proporcione más información.
tryp

Vale la pena señalar que este parámetro se introdujo en la versión 24 de la biblioteca de diseño. Entonces, si está atrapado en eclipse en la versión 23 (como solía hacerlo hasta ayer ...), no tendrá acceso a él.
FlorianT

@FloriantT gracias por la precisión, he actualizado mi respuesta con respecto a su comentario.
tryp

6

Usar titleMarginStartfunciona para mí. Ejemplo de Xamarin:

<android.support.v7.widget.Toolbar
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/toolbar"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:minHeight="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  app:titleMarginStart="24dp"/>

Establezca el logotipo así:

mToolbar = FindViewById<SupportToolbar>(Resource.Id.toolbar);
SetSupportActionBar(mToolbar);
SupportActionBar.SetLogo(Resource.Drawable.titleicon32x32);
SupportActionBar.SetDisplayShowHomeEnabled(true);
SupportActionBar.SetDisplayUseLogoEnabled(true);
SupportActionBar.Title = "App title";

Eres un genio. +1
Jacob Sánchez


2

Estoy usando una imagen personalizada en lugar del texto del título predeterminado a la derecha del logotipo de mi aplicación. Esto está configurado programáticamente como

    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setDisplayUseLogoEnabled(true);
    actionBar.setCustomView(R.layout.include_ab_txt_logo);
    actionBar.setDisplayShowCustomEnabled(true);

Los problemas con las respuestas anteriores para mí son que la sugerencia de @ Cliffus no me funciona debido a los problemas que otros han descrito en los comentarios y, aunque la configuración de relleno programático de @dushyanth puede haber funcionado en el pasado, creo que el hecho de que el espaciado es ahora configurado usando android:layout_marginEnd="8dip" desde API 17 configurar manualmente el relleno no debería tener ningún efecto. Vea el enlace que publicó en git para verificar su estado actual.

Una solución simple para mí es establecer un margen negativo en mi vista personalizada en la barra de acciones, así android:layout_marginLeft="-14dp". Una prueba rápida muestra que me funciona en 2.3.3 y 4.3 usandoActionBarCompat

¡Espero que esto ayude a alguien!


@Diri ¿puedes agregar más? Podemos hacer barra de acción arriba, abajo, izquierda, derecha
Amitsharma

@amitsharma - no estoy seguro de lo que quieres decir exactamente - ¿te refieres a mover la barra de acción desde la parte superior de la pantalla? Si es así, creo que necesitaría crear una vista de barra de acciones personalizada para hacer esto; aunque parece que puede no ser bueno :)
Dori

en ese caso, no sé qué quieres decir con "¿puedes agregar más? ¿Podemos hacer una barra de acción arriba, abajo, izquierda, derecha?"
Dori

2

Resolví este problema usando un diseño de navegación personalizado

Al usarlo, puede personalizar cualquier cosa en el título en la barra de acción:

build.gradle

dependencies {
    compile 'com.android.support:appcompat-v7:21.0.+'
    ...
}

AndroidManifest.xml

<application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name">
        <activity
            android:name=".MainActivity"
            android:theme="@style/ThemeName">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application>

styles.xml

<style name="ThemeName" parent="Theme.AppCompat.Light">
   <item name="actionBarStyle">@style/ActionBar</item>
   <item name="android:actionBarStyle" tools:ignore="NewApi">@style/ActionBar</item>

<style name="ActionBar" parent="Widget.AppCompat.ActionBar">
   <item name="displayOptions">showCustom</item>
   <item name="android:displayOptions" tools:ignore="NewApi">showCustom</item>

    <item name="customNavigationLayout">@layout/action_bar</item>
   <item name="android:customNavigationLayout" tools:ignore="NewApi">@layout/action_bar</item>

    <item name="background">@color/android:white</item>
   <item name="android:background">@color/android:white</item>

action_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/action_bar_title"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          android:drawableLeft="@drawable/ic_launcher"
          android:drawablePadding="10dp"
          android:textSize="20sp"
          android:textColor="@android:color/black"
          android:text="@string/app_name"/>

0

Tuve un problema similar pero con el espacio entre el icono / logotipo de la aplicación personalizada y arriba en la barra de acción. La solución de Dushyanth de configurar el relleno me funcionó programáticamente (configurar el relleno en el icono de la aplicación / logotipo). Intenté encontrar android.R.id.home o R.id.abs__home ( solo ActionBarSherlock , ya que esto garantiza la compatibilidad con versiones anteriores), y parece funcionar en dispositivos 2.3-4.3 en los que he probado.


0

Para mi caso, fue con Toolbar que lo resolví así:

ic_toolbar_drawble.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:drawable="@drawable/ic_toolbar"
    android:right="-16dp"
    android:left="-16dp"/>
</layer-list>

En mi Fragmento, verifico la API:

if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
      toolbar.setLogo(R.drawable.ic_toolbar);
else
      toolbar.setLogo(R.drawable.ic_toolbar_draweble);

¡Buena suerte!


0

Puede cambiar el tamaño de diseño de su DrawerArrow de esta manera:

<style name="MyTheme" parent="android:Theme.WithActionBar">
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="barLength">24dp</item>
    <item name="arrowShaftLength">24dp</item>
    <item name="arrowHeadLength">10dp</item>
    <item name="drawableSize">42dp</item> //this is your answer
</style>

No es la respuesta correcta, porque no puede elegir el lado de relleno y la escala del icono DrawerArrow cuando cambia drawableSize (drawableSize = width = height). Pero puedes marginar desde la izquierda. Al margen de la derecha hacer

findViewById(android.R.id.home).setPadding(10, 0, 5, 0);

0

¡Usé este método setContentInsetsAbsolute(int contentInsetLeft, int contentInsetRight)y funciona!

int padding = getResources().getDimensionPixelSize(R.dimen.toolbar_content_insets);
mToolbar.setContentInsetsAbsolute(padding, 0);

0

Cuando utiliza una barra de herramientas personalizada, puede utilizar

toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle(R.string.activity_title);
setSupportActionBar(toolbar);
getSupportActionBar().setLogo(R.drawable.logo);

y en el diseño de su barra de herramientas, simplemente configure app:titleMarginStart="16dp"

Tenga en cuenta que debe establecer el icono como un logotipo, no utilice getSupportActionBar().setIcon(R.drawable.logo) en su lugar: getSupportActionBar().setLogo(R.drawable.logo)


0

Solía AppBarLayouty costumbre ImageButtonhacer para ello.

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:elevation="0dp"
    android:background="@android:color/transparent"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">

       <ImageView
           android:layout_width="32dp"
           android:layout_height="32dp"
           android:src="@drawable/selector_back_button"
           android:layout_centerVertical="true"
           android:layout_marginLeft="8dp"
           android:id="@+id/back_button"/>

       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </RelativeLayout>    
</android.support.design.widget.AppBarLayout>

Mi código Java:

findViewById(R.id.appbar).bringToFront();
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar();
getSupportActionBar().setDisplayShowTitleEnabled(false);

0

También puede lograr lo mismo mediante el método:

Drawable d = new InsetDrawable(getDrawable(R.drawable.nav_icon),0,0,10,0);
mToolbar.setLogo(d);

0

En su XML, configure el app:titleMarginen la vista de la barra de herramientas de la siguiente manera:

<androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:titleMarginStart="16dp"/>

O en tu código:

toolbar.setTitleMargin(16,16,16,16); // start, top, end, bottom

-2

esto me funciona para agregar relleno al título y para el ActionBarícono lo configuré programáticamente.

 getActionBar().setTitle(Html.fromHtml("<font color='#fffff'>&nbsp;&nbsp;&nbsp;Boat App </font>"));

-2
<string name="app_name">"    "Brick Industry</string>

Solo agregue " "el nombre de su aplicación Se agregará espacio entre el icono y el título


Esto no está mal, no sé por qué se votó tan negativamente
Martin De Simone

¡quizás a veces la solución más simple sea la mejor! gracias
Nuhman
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.