Preenchimento entre o ícone inicial e o título da ActionBar

110

Alguém sabe como definir o preenchimento entre o ícone inicial da ActionBar e o título?

Alesqui
fonte
13
Bem-vindo ao mundo dos hacks: Android . Essa coisa simples deveria ter sido encontrada por qualquer pessoa (mesmo um novato) se precisarmos disso em outros técnicos de IU e programação de aplicativos. No entanto, no Android, é realmente misterioso. Eles intencionalmente escondem o recurso, tornam-no complicado e apenas para fazer o Android se tornar um mundo de hacks . Não sei qual é o propósito final deles.
King King
1
Esta pergunta e respostas dão forma de conseguir isso com atributos dentro da barra de ferramentas (suporte v7)
Elisabeth
O Android é ainda pior do que o iOS.
Borzh

Respostas:

69

Eu adaptei a resposta de Cliffus e atribuí o desenho do logotipo em minha definição de estilo da barra de ações, por exemplo, em 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>

O drawable se parece com o de Cliffus (aqui com o ícone do inicializador de aplicativos padrão) em 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>

No android_manifest.xml, você ainda pode definir um ícone de aplicativo diferente (ícone do iniciador na 'área de trabalho'. Qualquer definição de logotipo diferente aqui é visível nas atividades sem uma barra de ação.

Minsky
fonte
por que não tem efeito no Android 5.1
Logan Guo
Não posso dizer nada sobre isso no 5.1. Mudei para o Toolbar-Control mais flexível. Se ainda não foi feito, recomendo abrir uma nova pergunta aqui no StackOverflow e escrever mais alguns detalhes, o que funcionou para você (<5.1) e o que não funcionou e o que você tentou com o 5.1, mas não deu solução.
Minsky de
Obrigado @Minsky, me inspirei em sua resposta para resolver meu problema, coloquei como na resposta abaixo :)
Contexto
E se mipmap usado?
Yura Shinkarev
100

EDITAR : certifique-se de definir este drawable como LOGO , não como o ícone do aplicativo como alguns dos comentadores fizeram.

Basta fazer um drawable XML e colocá-lo na pasta de recursos "drawable" (sem nenhuma densidade ou outra configuração).

<?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>

A última etapa é definir este novo drawable como logotipo em seu manifesto (ou no objeto Actionbar em sua atividade)

Boa sorte!

Cliffus
fonte
1
Existe um grande problema aqui com esta solução. Eu usei e @Alesqui está certo - o ícone do aplicativo mudou e ficou menor ... Você poderia mudar o ícone, mas como o dp é diferente para telefones diferentes, essa solução não funciona em um aplicativo de produção.
Johan S
3
certifique-se de definir este drawable como LOGO, não como o ícone do aplicativo. boa sorte!
Cliffus de
1
Também estou vendo distorção. Se eu aplicar o preenchimento direito como acima, o lado direito da imagem será cortado.
Neil
1
Solução interessante, mas não funciona para mim - posso adicionar preenchimento extra desta forma ou cortar a imagem do logotipo - nada bom (4.3)
Dori
1
@Cliffus - boa solução. Minha exigência era levar o logotipo para a esquerda, então usei: android: left = "- 4dp".
TharakaNirmana
55

Eu também enfrentei um problema semelhante, no meu caso eu tive que definir títulos dinamicamente em cada atividade dependendo do conteúdo.

Então isso funcionou para mim.

actionBar.setTitle("  " + yourActivityTitle);

Se tudo o que você quer é o espaçamento, esta é a solução mais fácil que eu poderia pensar.

Rahul Sainani
fonte
13
Por que o voto negativo? Não pense que é uma resposta errada, apenas outra maneira de fazer isso.
Rahul Sainani,
3
@idratherbeintheair Sim, concordo que essa não é a maneira "mais limpa", então agora diz apenas que é a mais fácil. Mas quando você apontar algo, poste uma solução alternativa. Enfrentei esse problema e é isso que usei no meu aplicativo, então compartilhei.
Rahul Sainani
3
Realmente? Esta solução pode não funcionar da mesma forma em telas diferentes com DPI diferente.
Roman Bugaian
5
Não vou escolher essa solução porque realmente preciso de um sth mais estável em meu aplicativo, mas gostaria de perguntar a todas essas pessoas dizendo "Não está limpo". Oh, meu Deus, onde está a solução CLEAN para este problema? Todos aqueles hacks com logotipos, setPadding, não parecem limpos para mim também! Basta ler os comentários, quantas pessoas têm problemas com aqueles também. Configurando android: paddingLeft no título - isso seria CLEAN se tivesse funcionado. Somos deixados aqui no escuro para inventar hacks porque, por algum motivo, ele simplesmente não funciona da maneira que deveria. Portanto, nada está "não limpo".
Varvara Kalinina,
1
Uma solução mais limpa seria usar o app:titleMarginStartatributo no XML do layout.
LarsH
40

Foi assim que consegui definir o espaçamento entre o ícone inicial e o título.

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

Não consegui encontrar uma maneira de personalizar isso por meio dos estilos XML da ActionBar. Ou seja, o seguinte XML não 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>

No entanto, se você deseja fazer isso por meio de xml, esses dois links podem ajudá-lo a encontrar uma solução:

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

(Este é o layout real usado para exibir o ícone da página inicial em uma barra de ação) https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/action_bar_home.xml

Dushyanth
fonte
1
@Dushyanth Eu apenas tentei, mas diz exceção de ponteiro nulo no imageview. Eu tenho o homeUpIndicator e o ícone de casa na barra de ação.
Krishna Shrestha
1
Isso está funcionando apenas para API> = 11, pois android.R.id.home foi introduzido na API 11. Eu uso actionbarcompat para ter uma barra de ação também em dispositivos pré-honeycomp. Como lidar com isso aí?
Tobias
Um pouco de hack. Veja a resposta de Cliffus abaixo para uma solução mais limpa.
dhaag23 de
o espaçamento de origem não é mais definido usando padding, parece usar marginEnddesde api 17 - o que provavelmente quebrará essa solução. Veja o meu abaixo
Dori
@tobias R.id.home está sempre lá, mesmo antes do nível 11. ele simplesmente não está disponível
oscarthecat
32

Esta é uma pergunta comum no Material Design, pois você pode querer alinhar o título da barra de ferramentas com o conteúdo do fragmento abaixo. Para fazer isso, você pode substituir o preenchimento padrão de "12dp" usando o atributo contentInsetStart = "72dp" em seu layout toolbar.xml conforme mostrado abaixo

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"/>

Então, em sua atividade, ligue

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

E você acaba com isso:

Barra de ferramentas

themichaelscott
fonte
Isso não está funcionando no meu caso. Informe o estilo definido para atividade
Nitin Mesta
11
Esta é a maneira certa de fazer isso. Também é app:titleMarginStart="dimension"necessário direcionar o título diretamente.
Markus Rubey
Acho que para a maioria dos usuários esta será a resposta "certa". Funciona como um encanto, obrigado!
Taras
1
Como essa é a resposta "certa", se a pergunta era sobre o preenchimento entre o ícone da página inicial e o título? O ícone da página inicial não é mencionado aqui (nem o logotipo ou qualquer variação). Se contentInsetStartcolocar um espaço entre o ícone da página inicial e o título, a resposta poderia pelo menos dizer isso. Meu teste agora com contentInsetStartparecia colocar o espaço antes do logotipo (que reconhecidamente não é o mesmo que o ícone de casa).
LarsH
30

Para mim, apenas a seguinte combinação funcionou, testada de API 18 a 24

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

onde em "app" está: xmlns:app="http://schemas.android.com/apk/res-auto"

por exemplo.

 <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>
Ajit
fonte
1
Muito obrigado. @Ajit
shahid17june
1
Ótimo. Seria melhor se você pudesse fornecer o XML de amostra relacionado para esclarecer onde colocá-lo. (Eu sei onde colocar esta linha)
John Pang
Olá @JohnPang, você pode colocar isso na barra de ferramentas do seu layout conforme mostrado acima.
Ajit
29

Se você estiver usando a barra de ferramentas do AppCompat (android.support.v7.widget.Toolbar,> = revisão 24, junho de 2016), o preenchimento entre o ícone e o título pode ser alterado com o seguinte valor:

  app:contentInsetStartWithNavigation="0dp"

Para melhorar minha resposta, você pode usá-lo em sua barra de ferramentas diretamente dentro de sua atividade ou pode criar um novo arquivo de layout para sua barra de ferramentas. Nesse caso, você só precisa importar o @id de sua barra de ferramentas usando a propriedade include em cada visualização necessária.

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

Você pode então importar seu layout em seu activity.xml

<include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
tryp
fonte
Ótimo. Seria melhor se você pudesse fornecer o XML de amostra relacionado para esclarecer onde colocá-lo. (Eu sei onde colocar esta linha)
John Pang
@JohnPang eu detalhei minha resposta, espero que ajude você a entender como usar esta propriedade.
tryp
@ Bolein95 você está usando a biblioteca de suporte? para poder ajudá-lo, forneça mais informações.
tryp
Vale ressaltar que este parâmetro foi introduzido na versão 24 da biblioteca de projetos. Então, se você estiver preso no Eclipse na versão 23 (como eu costumava fazer até ontem ...), você não terá acesso a ele.
FlorianT de
@FloriantT obrigado pela precisão, atualizei minha resposta em relação ao seu comentário.
tryp
6

Usar titleMarginStartfunciona para mim. Exemplo 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"/>

Defina o logotipo assim:

mToolbar = FindViewById<SupportToolbar>(Resource.Id.toolbar);
SetSupportActionBar(mToolbar);
SupportActionBar.SetLogo(Resource.Drawable.titleicon32x32);
SupportActionBar.SetDisplayShowHomeEnabled(true);
SupportActionBar.SetDisplayUseLogoEnabled(true);
SupportActionBar.Title = "App title";
druida
fonte
Você é um gênio. +1
Jacob Sánchez de
4

Usei \ t antes do título e trabalhei para mim.

Zanini
fonte
2

Estou usando uma imagem personalizada em vez do texto do título padrão à direita do logotipo do meu aplicativo. Isso é configurado programaticamente como

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

Os problemas com as respostas acima para mim são: a sugestão de @ Cliffus não funciona para mim devido aos problemas que outros descreveram nos comentários e, embora a configuração de preenchimento programático @dushyanth possa ter funcionado no passado, acho que o fato de o espaçamento ser agora definido usando android:layout_marginEnd="8dip"desde a API 17, definir manualmente o preenchimento não deve ter efeito. Veja o link que ele postou no git para verificar seu estado atual.

Uma solução simples para mim é definir uma margem negativa em minha visualização personalizada na actionBar, assim android:layout_marginLeft="-14dp". Um teste rápido mostra que funciona para mim em 2.3.3 e 4.3 usandoActionBarCompat

Espero que isso ajude alguém!

Dori
fonte
@Diri, você pode adicionar mais, podemos fazer a barra de ação em cima, baixo, esquerda, direita
Amitsharma
@amitsharma - não tenho certeza do que você quer dizer exatamente - você quer dizer mover a barra de ação do topo da tela? Em caso afirmativo, acho que você precisaria criar uma visualização de barra de ação personalizada para fazer isso - mas parece que não é um bom ux :)
Dori
Nesse caso, não sei o que você quer dizer com "você pode adicionar mais, podemos fazer a barra de ação para cima, para baixo, para a esquerda, para a direita"
Dori
2

Resolvi esse problema usando o layout de navegação personalizado

Usando-o, você pode personalizar qualquer coisa no título da barra de ação:

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"/>
mc.dev
fonte
0

Tive um problema semelhante, mas com espaçamento entre o ícone / logotipo do aplicativo personalizado e na barra de ação. A solução de Dushyanth de definir o preenchimento programaticamente funcionou para mim (configuração do preenchimento no ícone do aplicativo / logotipo). Tentei encontrar android.R.id.home ou R.id.abs__home ( apenas ActionBarSherlock , pois isso garante compatibilidade com versões anteriores) e parece funcionar em dispositivos 2.3-4.3 em que testei.

raptores
fonte
0

No meu caso, foi com a Barra de Ferramentas que resolvi assim:

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>

No meu Fragment, eu verifico a 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);

Boa sorte!

Contexto
fonte
0

Você pode alterar drawableSize de seu DrawerArrow assim:

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

Não é a resposta correta, porque você não pode escolher o lado do preenchimento e a escala do ícone DrawerArrow ao alterar drawableSize (drawableSize = largura = altura). Mas você pode fazer a margem da esquerda. Para a margem da direita faça

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

Usei esse método setContentInsetsAbsolute(int contentInsetLeft, int contentInsetRight)e funciona!

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

Quando estiver usando uma barra de ferramentas personalizada, você pode usar

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

e no layout da barra de ferramentas basta definir app:titleMarginStart="16dp"

Observe que você deve definir o ícone como um logotipo, não use em getSupportActionBar().setIcon(R.drawable.logo) vez disso: getSupportActionBar().setLogo(R.drawable.logo)

Martin Schüller
fonte
0

Eu usei AppBarLayoute costumo ImageButtonfazer isso.

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

Meu código Java:

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

Você também pode conseguir o mesmo pelo método:

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

Em seu XML, defina o app:titleMarginem sua visualização da Barra de Ferramentas da seguinte forma:

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

Ou em seu código:

toolbar.setTitleMargin(16,16,16,16); // start, top, end, bottom
Ahmed Ashour
fonte
-2

isso funciona para mim adicionar preenchimento ao título e para o ActionBarícone eu configurei isso programaticamente.

 getActionBar().setTitle(Html.fromHtml("<font color='#fffff'>&nbsp;&nbsp;&nbsp;Boat App </font>"));
Muhammad Dawood
fonte
-2
<string name="app_name">"    "Brick Industry</string>

Basta adicionar " "o nome do aplicativo. Isso adicionará um espaço entre o ícone e o título

Manohar
fonte
Isso não é ruim, não sei por que foi tão rejeitado
Martin De Simone
talvez às vezes a solução mais simples seja a melhor! obrigado
Nuhman