在ActionBar的主图标和标题之间进行填充


110

有人知道如何在ActionBar的主页图标和标题之间设置填充吗?


13
欢迎来到黑客世界:Android。如果我们在其他UI技术和应用程序编程中需要此东西,那么任何人(甚至是新手)都应该找到这个简单的东西。但是在Android中,这确实很神秘。他们有意地隐藏了该功能,使其变得复杂,只是为了使Android成为黑客世界。我不知道他们的最终目的是什么。
金王

1
这个问题和答案让位于工具栏(支持v7)中的属性来实现这一目标
Elisabeth

Android比iOS更糟。
Borzh

Answers:


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>

可绘制对象在res / drawable / actionbar_space_between_icon_and_title.xml中看起来像Cliffus的可绘制对象(此处带有默认的应用启动器图标):

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

抱歉,我无法在5.1中说些什么。我切换到了更灵活的工具栏控件。如果尚未完成,建议您在此处在StackOverflow上打开一个新问题,并写一些更多详细信息,哪些对您有用(<5.1),哪些不起作用以及您对5.1进行了尝试,但没有找到解决方案。
明斯基

谢谢@Minsky,我从您的回答中得到了启发来解决我的问题,我在下面的回答中加上了::
Context

如果使用mipmap怎么办?
Yura Shinkarev

100

编辑:确保将此drawable设置为LOGO,而不是像某些注释程序那样将其设置为您的应用程序图标。

只需使XML可绘制,然后将其放在资源文件夹“可绘制”中即可(无需任何密度或其他配置)。

<?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
确保您将此可绘制对象设置为LOGO,而不是您的应用程序图标。祝好运!
Cliffus

1
我也看到失真。如果我按上述方法应用右填充,则会裁剪图像的右侧。
尼尔

1
有趣的解决方案但对我不起作用-我可以通过这种方式添加额外的填充或裁剪徽标图像-不好(4.3)
Dori

1
@Cliffus-不错的解决方案。我的要求是将徽标左移,所以我使用了:android:left =“-4dp”。
TharakaNirmana 2014年

55

我还面临类似的问题,就我而言,我必须根据内容在每个活动中动态设置标题。

所以这对我有用。

actionBar.setTitle("  " + yourActivityTitle);

如果您只需要间距,这是我能想到的最简单的解决方案。


13
为什么要投反对票?不要认为这是一个错误的答案,这是另一种方法。
Rahul Sainani

3
@idratherbeintheair是的,我同意这不是“最干净”的方式,所以现在只说最简单。但是,当您指出某些问题时,请发布替代解决方案。我遇到了这个问题,这就是我在应用程序中使用的内容,因此我分享了此信息。
拉胡尔·塞纳尼

3
真?在具有不同DPI的不同屏幕上,此解决方案可能无法正常工作。
Roman Bugaian

5
我不会选择此解决方案,因为我确实需要让我的应用程序更加稳定,但是我想问所有说“这不干净”的人。哦,天哪,清洁解决方案在哪里?所有带有徽标,setPadding的骇客在我看来也不是干净的!只是读评论,有多少人也有这些问题。在标题上设置android:paddingLeft-如果有效,它将是CLEAN。我们被遗忘在这里以发明骇客,因为某种原因,它只是无法正常工作。因此,没有什么是“不干净的”。
Varvara Kalinina 2015年

1
较干净的解决方案是app:titleMarginStart在布局XML中使用属性。
LarsH '17

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/resout/layout/action_bar_home.xml


1
@Dushyanth我刚刚尝试过,但是在imageview上说空指针异常。我在操作栏中同时有homeUpIndicator和home图标。
克里希纳·什雷斯塔

1
这仅适用于API> = 11,因为API 11中引入了android.R.id.home。我使用actionbarcompat在pre honeycomp设备上也有一个actionbar。如何在那里处理?
tobias

一点点hack。请参阅下面的Cliffus答案以获得更清洁的解决方案。
dhaag23年

自api以来不再使用home间距padding,它似乎marginEnd从api 17 开始使用-可能会破坏此解决方案。见下面的我
Dori

@tobias R.id.home一直存在,甚至在第11级之前也没有
。– oscarthecat

32

这是材料设计中的一个常见问题,因为您可能希望将工具栏标题与下面片段中的内容对齐。为此,您可以通过在toolbar.xml布局中使用属性contentInsetStart =“ 72dp”覆盖默认填充“ 12dp”,如下所示

工具栏

<?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");

最终,您将得到:

工具列


就我而言,这根本不起作用。请让我知道活动的风格
Nitin Mesta

11
这是正确的方法。还app:titleMarginStart="dimension"可以直接定位标题。
Markus Rubey 2015年

对于大多数用户来说,这将是“正确”的答案。很有魅力,谢谢!
Taras

1
如果问题是关于主页图标和标题之间的填充,这是“正确”的答案吗?这里未提及主图标(也未提及徽标或其他变体)。如果contentInsetStart在主页图标和标题之间放置空格,答案至少可以这样说。我刚才的测试contentInsetStart似乎在徽标之前放置了空格(该徽标与主图标并不相同)。
LarsH

30

对我来说,以下组合才有效,并经过API 18至24测试

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

在“ app”中的位置是: 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
shahid17june

1
大。如果您可以提供示例相关的XML来说明将其放在何处,那就更好了。(我知道将这行放在哪里)
John Pang

您好,@ JohnPang,您可以将其放在布局的工具栏中,如上所示。
阿吉特(Ajit)2013年

29

如果您使用的是AppCompat中的工具栏(android.support.v7.widget.Toolbar,> =修订版24,2016年6月),则可以使用以下值更改图标和标题之间的填充:

  app:contentInsetStartWithNavigation="0dp"

要改善我的答案,您可以在活动中直接在工具栏上使用它,也可以为工具栏创建新的布局文件。在这种情况下,您只需要使用每个所需视图上的include属性导入工具栏的@id。

<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来说明将其放在何处,那就更好了。(我知道将这行放在哪里)
John Pang

@JohnPang我详细说明了我的答案,希望它将帮助您了解如何使用此属性。
tryp

@ Bolein95您是否正在使用支持库?为了能够帮助您,请提供更多信息。
tryp

值得注意的是,该参数是在设计库的版本24中引入的。因此,如果您在版本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的链接以验证其当前状态。

对我来说,一个简单的解决方案是在actionBar的自定义视图中设置一个负边距,就像android:layout_marginLeft="-14dp"。快速测试显示它适用于2.3.3和4.3,适用于ActionBarCompat

希望这对某人有帮助!


@Diri您可以添加更多内容吗,我们可以在上,下,左,右制作动作栏
吗?

@amitsharma-我不确定您的确切意思-您是要从屏幕顶部移动操作栏吗?如果是这样,我认为您需要创建一个自定义操作栏视图来执行此操作-听起来它可能不是很好的用户体验:)
Dori 2014年

在那种情况下,我不知道您的意思是“您可以添加更多内容吗,我们可以使操作栏向上,向下,向左,向右吗”
Dori 2014年

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

我遇到了类似的问题,但操作栏中的up和自定义应用程序图标/徽标之间有间距。Dushyanth的设置填充解决方案对我有效(在应用程序/徽标图标上设置填充)。我试图找到android.R.id.homeR.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

您可以这样更改DrawerArrow的drawableSize:

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

这不是正确的答案,因为在更改drawableSize(drawableSize = width = height)时,您无法选择填充边和DrawerArrow图标缩放。但是您可以从左边开始。从正确的边缘做

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>

只需添加" "您的应用名称即可在图标和标题之间添加空格


这还不错,我不知道为什么会这么不满意
Martin De Simone

也许有时候最简单的解决方案是最好的!谢谢
纳曼
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.