ActionBarのホームアイコンとタイトルの間のパディング


110

ActionBarのホームアイコンとタイトルの間にパディングを設定する方法を知っている人はいますか?


13
ハッキングの世界:Androidへようこそ。他のUI技術やアプリケーションプログラミングでこれが必要な場合、この単純なものは誰でも(初心者でも)見つけられるはずです。しかし、Androidでは、それは本当に不思議です。彼らは意図的に機能を隠し、複雑にし、Android をハックの世界にするだけです。彼らの最終的な目的が何であるか私は知りません。
キングキング

1
この質問と回答は、ツールバー(サポートv7)内の属性でこれを達成する方法を提供します
Elisabeth

AndroidはiOSよりも多くの機能を備えています。
Borzh

回答:


69

私はCliffusの回答を採用し、たとえばres / style.xmlで次のように、私のアクションバーのスタイル定義でlogo-drawableを割り当てました:

<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ではそれについて何か言うことはできません。より柔軟なToolbar-Controlに切り替えました。まだ行っていない場合は、ここでStackOverflowの新しい質問を開いて、いくつかの詳細、何がうまくいったか(<5.1)、何がうまくいかなかったか、5.1で試したが解決策に至らなかった詳細を書くことをお勧めします。
ミンスキー

ありがとう@Minsky、私は私の問題を解決するためにあなたの答えからインスピレーションを得ました、私は以下の答えにその方法を入れます:)
Context

ミップマップを使用するとどうなりますか?
Yura Shinkarev

100

編集:このドローアブルを、一部のコメンターのようにアプリのアイコンではなく、ロゴとして設定してください。

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
このドロアブルをアプリのアイコンではなく、ロゴとして設定していることを確認してください。幸運を!
Cliffus 2013

1
歪みも見られます。上記のように右パディングを適用すると、画像の右側がトリミングされます。
ニール

1
興味深い解決策ですが、私には機能しません-この方法でパディングを追加するか、ロゴ画像をトリミングできます-良くない(4.3)
Dori

1
@Cliffus-素晴らしい解決策。私の要件は、ロゴを左にすることでしたので、android:left = "-4dp"を使用しました。
TharakaNirmana 2014

55

私も同様の問題に直面しました。私の場合、コンテンツに応じて各アクティビティに動的にタイトルを設定する必要がありました。

これでうまくいきました。

actionBar.setTitle("  " + yourActivityTitle);

必要なのが間隔だけなら、これは私が考えることができる最も簡単な解決策です。


13
なぜ反対票か。それが間違った答えであると考えないでください、それを行う別の方法です。
Rahul Sainani 2014年

3
@idratherbeintheairはい、これは「クリーン」な方法ではないことに同意します。しかし、何かを指摘した場合は、代替ソリューションを投稿してください。私はこの問題に直面し、これが私がアプリで使用したものなので、共有しました。
Rahul Sainani 2014

3
本当に?このソリューションは、DPIが異なる別の画面では同じように機能しない可能性があります。
ローマブガイアン2015年

5
私は本当にアプリでsthをもっと安定させる必要があるので、このソリューションを選択しません。ああ、私の神様、この問題のクリーンな解決策はどこにありますか?ロゴを使用したハック、setPaddingも見た目がきれいではありません。コメントを読んでください。どれだけの人がそれらについても問題を抱えています。タイトルにandroid:paddingLeftを設定します-機能していればクリーンになります。私たちはハッキングを発明するためにここに残されています。それは、何らかの理由で、本来あるべきように機能しないためです。したがって、「クリーンでない」ものはありません。
Varvara Kalinina、2015年

1
より明確な解決策はapp:titleMarginStart、レイアウトXMLで属性を使用することです。
LarsH 2017

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で実現しようとしている場合は、次の2つのリンクが解決策を見つけるのに役立つ可能性があります。

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私は試したところ、imageviewでnullポインタ例外が表示されました。アクションバーにhomeUpIndicatorとホームアイコンの両方があります。
クリシュナシュレスタ

1
android.R.id.homeはAPI 11で導入されたため、これはAPI> = 11でのみ機能します。私はactionbarcompatを使用して、honeycomp以前のデバイスでもアクションバーを使用します。そこでの扱い方は?
tobias 2012

ハックの少し。より明確な解決策については、以下のクリフスの回答を参照してください。
dhaag23 2013年

ホームの間隔はpaddingを使用して設定されなくなりましたmarginEnd。API17以降に使用されているようです-これはおそらくこのソリューションを壊します。下記の鉱山を参照してください
ドリ

@tobias R.id.homeは、レベル11より前でも常に存在します。これは利用できません
oscarthecat 2013年

32

ツールバーのタイトルを下のフラグメントのコンテンツに合わせたい場合があるので、これはマテリアルデザインの一般的な質問です。これを行うには、以下に示すように、toolbar.xmlレイアウトで属性contentInsetStart = "72dp"を使用して、「12dp」のデフォルトのパディングを上書きできます。

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

そして、あなたはこれで終わります:

ツールバー


私の場合、これはまったく機能しません。アクティビティのスタイルを教えてください
Nitin Mesta 2015年

11
これはこれを行う正しい方法です。app:titleMarginStart="dimension"タイトルを直接ターゲットにすることもあります。
Markus Rubey

ほとんどのユーザーにとって、これは「正しい」答えになると思います。チャームとして機能します、ありがとう!
タラス

1
質問がホームアイコンとタイトルの間のパディングに関するものだった場合、これはどのように「正しい」答えですか。ホームアイコンはここでは言及されていません(ロゴやその他のバリエーション)。場合はcontentInsetStartホームアイコンとタイトルの間プットスペース、答えは少なくともそう言うことができます。私の今のテストでは、ロゴのcontentInsetStartにスペースを置いているようです(確かにホームアイコンと同じではありません)。
LarsH 2017

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 2016

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 2017

@FloriantT正確にお礼を申し上げます。コメントに関する回答を更新しました。
tryp 2017

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

@amitsharma-正確に何を言っているのかわからない-画面の上からアクションバーを移動することを意味しますか?もしそうなら、あなたはこれを行うためにカスタムのアクションバービューを作成する必要があると思います-しかしそれは良いuxではないかもしれません:)
Dori

その場合、私はあなたが何を意味知らない「uがより追加することができ、我々は上下にアクションバーを作ることができ、右、左」
ドリ

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

次のように、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

場合によっては、最も簡単な解決策が最適な場合があります。感謝
Nuhman
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.