Отступ между иконкой Home и заголовком ActionBar


110

Кто-нибудь знает, как установить отступ между домашним значком ActionBar и заголовком?


13
Добро пожаловать в мир хаков: Android . Эту простую вещь должен был найти кто угодно (даже новичок), если нам это нужно для других технологий пользовательского интерфейса и программирования приложений. Однако в Android это действительно загадочно. Они намеренно скрывают эту функцию, усложняют ее и просто делают Android миром взломов . Я не знаю, какова их конечная цель.
King King

1
Этот вопрос и ответы позволяют добиться этого с помощью атрибутов на панели инструментов (поддержка версии 7)
Элизабет

Android отстой даже больше, чем iOS.
Borzh 05

Ответы:


69

Я адаптировал ответ Cliffus и назначил логотип для рисования в моем определении стиля панели действий, например, как это в 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>

Drawable выглядит как Cliffus (здесь со значком запуска приложения по умолчанию) в 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>

В android_manifest.xml вы все еще можете установить другой значок приложения (значок запуска на «рабочем столе». Любое другое определение логотипа здесь отображается в действиях без панели действий.


почему он не работает на Android 5.1
Логан Гуо

Извините, я ничего не могу сказать об этом в 5.1. Я перешел на более гибкий Toolbar-Control. Если это еще не сделано, я рекомендую открыть новый вопрос здесь, в StackOverflow, и написать более подробную информацию, что сработало для вас (<5.1), а что не работает, и что вы пробовали с 5.1, но не пришли к решению.
Minsky

Спасибо, @Minsky, я вдохновился вашим ответом на решение моей проблемы, я указал, как в ответе ниже :)
Контекст

А если использовать mipmap?
Юра Шинкарев

100

РЕДАКТИРОВАТЬ : убедитесь, что вы установили этот рисунок как ЛОГОТИП , а не как значок вашего приложения, как это сделали некоторые из комментаторов.

Просто сделайте XML-файл доступным для рисования и поместите его в папку ресурсов "drawable" (без какой-либо плотности или другой конфигурации).

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

Последний шаг - установить эту новую возможность рисования как логотип в вашем манифесте (или на объекте Actionbar в вашей деятельности).

Удачи!


1
Здесь есть большая проблема с этим решением. Я использовал его, и @Alesqui прав - значок приложения изменился и стал меньше ... Вы можете изменить значок, но поскольку dp отличается для разных телефонов, это решение не сокращает его в производственном приложении.
Johan S

3
убедитесь, что вы устанавливаете этот рисунок как ЛОГОТИП, а не как значок вашего приложения. удачи!
Cliffus

1
Я также вижу искажение. Если я применяю правый отступ, как указано выше, правая часть изображения обрезается.
Нил

1
Интересное решение, но не работает для меня - я могу либо добавить дополнительные отступы таким образом, либо обрезать изображение логотипа - бесполезно (4.3)
Дори

1
@Cliffus - красивое решение. Моим требованием было переместить логотип влево, поэтому я использовал: android: left = "- 4dp".
TharakaNirmana

55

Я также столкнулся с аналогичной проблемой, в моем случае мне пришлось динамически устанавливать заголовки для каждого действия в зависимости от содержимого.

Так что это сработало для меня.

actionBar.setTitle("  " + yourActivityTitle);

Если все, что вам нужно, это интервал, это самое простое решение, которое я мог придумать.


13
Почему голосование против? Не думайте, что это неправильный ответ, просто еще один способ сделать это.
Рахул Сайнани 05

3
@idratherbeintheair Да, я согласен, это не самый "чистый" способ, поэтому теперь он говорит только "самый простой". Но когда вы что-то указываете, опубликуйте альтернативное решение. Я столкнулся с этой проблемой, и это то, что я использовал в своем приложении, поэтому поделился.
Рахул Сайнани

3
В самом деле? Это решение может не работать одинаково на разных экранах с разным DPI.
Роман Бугаян

5
Я не буду выбирать это решение, потому что мне действительно нужно что-то более стабильное в моем приложении, но я хочу спросить всех тех людей, которые говорят: «Это не чисто». О боже, а где ЧИСТЫЕ решения этой проблемы? Все эти хаки с логотипами, setPadding мне тоже не кажутся чистыми! Просто прочтите комментарии, у скольких людей тоже с ними проблемы. Установка android: paddingLeft в заголовке - это то, что было бы ЧИСТЫМ, если бы он работал. Мы остались здесь в неведении, чтобы изобретать хаки, потому что по какой-то причине это просто не работает так, как должно было работать. Так что нет ничего «нечистого».
Варвара Калинина

1
Более чистым решением было бы использовать app:titleMarginStartатрибут в XML макета.
LarsH

40

Вот как я смог установить отступ между значком дома и заголовком.

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

Однако я не смог найти способ настроить это с помощью стилей ActionBar xml. То есть следующий XML не работает:

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

Однако, если вы хотите добиться этого с помощью xml, эти две ссылки могут помочь вам найти решение:

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

(Это фактический макет, используемый для отображения значка дома на панели действий) https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/action_bar_home.xml


1
@Dushyanth Я только что пробовал, но говорит об исключении нулевого указателя при просмотре изображения. У меня есть как homeUpIndicator, так и значок дома на панели действий.
Кришна Шрестха

1
Это работает только для API> = 11, поскольку android.R.id.home был введен в API 11. Я использую actionbarcompat, чтобы иметь панель действий также на устройствах pre honeycomp. Как там с этим справиться?
tobias

Немного хака. См. Ответ Клиффуса ниже для более чистого решения.
dhaag23

домашний интервал больше не устанавливается с использованием padding, похоже, он используется marginEndс api 17, что, вероятно, нарушит это решение. Смотрите мой ниже
Дори

@tobias R.id.home всегда там, даже до 11 уровня, он просто недоступен
oscarthecat

32

Это частый вопрос в материальном дизайне, так как вы можете захотеть совместить заголовок панели инструментов с содержимым фрагмента ниже. Для этого вы можете переопределить отступ по умолчанию «12dp», используя атрибут contentInsetStart = «72dp» в макете toolbar.xml, как показано ниже.

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

Затем в своей деятельности позвоните

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

И в итоге вы получите следующее:

Панель инструментов


В моем случае это совсем не работает. Пожалуйста, дайте мне знать, какой стиль установлен на активность
Нитин Места

11
Это правильный способ сделать это. Также существует app:titleMarginStart="dimension"возможность прямого таргетинга на заголовок.
Маркус Руби

Думаю, для большинства пользователей это будет «правильный» ответ. Работает как шарм, спасибо!
Тарас

1
Как это «правильный» ответ, если вопрос касался отступов между значком дома и заголовком? Здесь не упоминается значок дома (ни логотип, ни какой-либо другой вариант). Если contentInsetStartпоставить пробел между значком дома и заголовком, ответ, по крайней мере, мог бы так сказать. В моем тесте только contentInsetStartчто было помещено пробел перед логотипом (который, по общему признанию, не то же самое, что и значок дома).
LarsH

30

Для меня сработала только следующая комбинация, протестированная с API 18 до 24

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

где в "приложении" находится: xmlns:app="http://schemas.android.com/apk/res-auto"

например.

 <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
Огромное спасибо. @Ajit
shahid17 июнь

1
Отлично. Было бы лучше, если бы вы могли предоставить образец связанного XML, чтобы прояснить, где это разместить. (Я знаю, где поставить эту строчку)
Джон Панг

Привет @JohnPang, вы можете поместить это на панель инструментов вашего макета, как показано выше.
Ajit

29

Если вы используете панель инструментов из AppCompat (android.support.v7.widget.Toolbar,> = версия 24, июнь 2016 г.), отступ между значком и заголовком можно изменить с помощью следующего значения:

  app:contentInsetStartWithNavigation="0dp"

Чтобы улучшить мой ответ, вы можете использовать его на своей панели инструментов непосредственно в своей деятельности или вы можете создать новый файл макета для своей панели инструментов. В этом случае вам просто нужно импортировать @id панели инструментов, используя свойство include для каждого необходимого представления.

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

Затем вы можете импортировать свой макет в свой activity.xml.

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

Отлично. Было бы лучше, если бы вы могли предоставить образец связанного XML, чтобы прояснить, где это разместить. (Я знаю, где поставить эту строчку)
Джон Панг

@JohnPang Я подробно изложил свой ответ, надеюсь, он поможет вам понять, как использовать это свойство.
tryp

@ Bolein95 вы пользуетесь библиотекой поддержки? чтобы иметь возможность помочь вам, пожалуйста, предоставьте дополнительную информацию.
tryp

Стоит отметить, что этот параметр был введен в версии 24 библиотеки дизайна. Так что, если вы застряли в eclipse на версии 23 (как я был до вчерашнего дня ...), у вас не будет доступа к ней.
FlorianT

@FloriantT спасибо за точность, я обновил свой ответ на ваш комментарий.
tryp

6

Использование titleMarginStartработает для меня. Пример 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"/>

Установите логотип так:

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

Ты гений. +1
Джейкоб Санчес


2

Я использую собственное изображение вместо текста заголовка по умолчанию справа от логотипа моего приложения. Это настроено программно, как

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

Проблемы с приведенными выше ответами для меня заключаются в том, что предложение @ Cliffus не работает для меня из-за проблем, которые другие указали в комментариях, и хотя настройка программного заполнения @dushyanth могла работать в прошлом, я бы подумал, что тот факт, что интервал теперь устанавливается с использованием android:layout_marginEnd="8dip" API 17, ручная установка заполнения не должна иметь никакого эффекта. См. Ссылку, которую он разместил на git, чтобы проверить его текущее состояние.

Простым решением для меня является установка отрицательного поля для моего пользовательского представления в панели действий, например android:layout_marginLeft="-14dp". Быстрый тест показывает, что у меня это работает на 2.3.3 и 4.3, используяActionBarCompat

Надеюсь, это кому-то поможет!


@Diri, можете ли вы добавить больше, можем ли мы сделать панель действий вверх, вниз, влево, вправо
Amitsharma

@amitsharma - я не совсем понимаю, что вы имеете в виду - вы имеете в виду перемещение панели действий из верхней части экрана? Если это так, я думаю, вам нужно создать настраиваемое представление панели действий, чтобы сделать это - похоже, что это может быть не очень хорошим ux :)
Дори

в этом случае я не знаю, что вы имеете в виду под «можно добавить еще, можем ли мы сделать панель действий вверх, вниз, влево, вправо»
Дори

2

Я решил эту проблему, используя настраиваемый макет навигации.

С его помощью вы можете настроить что угодно в заголовке на панели действий:

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

У меня была аналогичная проблема, но с промежутком между значком или логотипом пользовательского приложения на панели действий. Решение Dushyanth по настройке заполнения программно сработало для меня (настройка заполнения на значке приложения / логотипа). Я попытался найти либо android.R.id.home, либо R.id.abs__home ( только ActionBarSherlock , поскольку это обеспечивает обратную совместимость), и, похоже, он работает на устройствах 2.3–4.3, на которых я тестировал.


0

В моем случае это было с панелью инструментов, я решил это так:

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>

В моем фрагменте я проверяю 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);

Удачи!


0

Вы можете изменить drawableSize своего DrawerArrow следующим образом:

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

Это неправильный ответ, потому что вы не можете выбрать сторону заполнения и масштабирование значка DrawerArrow при изменении drawableSize (drawableSize = width = height). Но вы можете оставить отступ слева. Для отступа справа сделайте

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

0

Я использовал этот метод, setContentInsetsAbsolute(int contentInsetLeft, int contentInsetRight)и он работает!

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

0

Когда вы используете настраиваемую панель инструментов, вы можете использовать

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

и в макете панели инструментов просто установите app:titleMarginStart="16dp"

Обратите внимание, что вы должны установить значок в качестве логотипа, не используйте getSupportActionBar().setIcon(R.drawable.logo) вместо этого: getSupportActionBar().setLogo(R.drawable.logo)


0

Я использовал AppBarLayoutи обычай так ImageButtonделать.

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

Мой код Java:

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

0

Вы также можете добиться того же методом:

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

0

В вашем XML установите на app:titleMarginпанели инструментов представление следующим образом:

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

Или в вашем коде:

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

-2

эта работа для меня, чтобы добавить отступ к заголовку и ActionBarзначку, который я установил программно.

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

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

Просто добавьте " "для имени вашего приложения. Это добавит пробел между значком и заголовком.


Это неплохо, я не знаю, почему за него так проголосовали против
Мартин Де Симоне

может быть, иногда самое простое решение оказывается лучшим! спасибо
Nuhman 07
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.