ActionBar의 홈 아이콘과 제목 사이의 패딩


110

아무도 ActionBar의 홈 아이콘과 제목 사이에 패딩을 설정하는 방법을 알고 있습니까?


13
해킹의 세계에 오신 것을 환영합니다 : Android . 이 간단한 것은 다른 UI 기술과 애플리케이션 프로그래밍에서 필요하다면 누구나 (초보자라도) 발견했을 것입니다. 그러나 Android에서는 정말 신비합니다. 그들은 의도적 으로 기능을 숨기고 복잡하게 만들고 Android 를 해킹의 세계 로 만듭니다 . 그들의 최종 목적이 무엇인지 모르겠습니다.
국왕

1
질문 과 답변은 도구 모음 (지원 V7) 내부 속성으로이를 달성하는 방법 제공
엘리자베스

Android는 iOS보다 훨씬 더 짜증납니다.
Borzh

답변:


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에서 여전히 다른 앱 아이콘 ( '데스크톱'의 런처 아이콘)을 설정할 수 있습니다. 여기에서 다른 로고 정의는 작업 표시 줄이없는 활동에서 볼 수 있습니다.


그것은 안드로이드 5.1에 영향을 어쩌려 구`t 왜
로건 구오

죄송합니다. 5.1에서는 이에 대해 말할 수 없습니다. 더 유연한 도구 모음 제어로 전환했습니다. 아직 완료되지 않은 경우 여기에 StackOverflow에서 새 질문을 열고 몇 가지 세부 정보, 효과가있는 항목 (<5.1), 효과가없는 항목 및 5.1에서 시도한 항목을 작성하는 것이 좋습니다.
Minsky

@Minsky 감사합니다. 내 문제를 해결하기 위해 귀하의 답변에서 영감을 얻었습니다. 아래 답변에 방법을 넣었습니다. :)
Context

밉맵을 사용하면 어떻게 되나요?
Yura Shinkarev

100

편집 :이 드로어 블을 일부 댓글 작성자와 같이 앱 아이콘이 아닌 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
이 드로어 블을 앱 아이콘이 아닌 로고로 설정했는지 확인하십시오. 행운을 빕니다!
Cliffus 2013

1
나는 또한 왜곡을보고있다. 위와 같이 오른쪽 패딩을 적용하면 이미지의 오른쪽이 잘립니다.
Neil

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가 다른 다른 화면에서 동일하게 작동하지 않을 수 있습니다.
Roman Bugaian 2015 년

5
이 솔루션을 선택하지 않을 것입니다. 제 앱에서 더 안정적인 것이 필요하기 때문입니다. 그러나 모든 사람들에게 "그것은 깨끗하지 않습니다"라고 말하고 싶습니다. 오, 세상에,이 문제에 대한 깨끗한 해결책은 어디에 있습니까? 로고가있는 모든 해킹, setPadding도 나에게 깨끗해 보이지 않습니다! 댓글을 읽으십시오. 얼마나 많은 사람들이 문제를 겪고 있습니까? 제목에 android : paddingLeft 설정-작동했다면 CLEAN이 될 것입니다. 우리는 해킹을 발명하기 위해 어둠 속에 남겨져 있습니다. 왜냐하면 어떤 이유로 작동해야했던 방식으로 작동하지 않기 때문입니다. 따라서 "깨끗하지 않은"것은 없습니다.
Varvara Kalinina 2015 년

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 방금 시도했지만 imageview에서 null 포인터 예외가 표시됩니다. 작업 표시 줄에 homeUpIndicator와 홈 아이콘이 모두 있습니다.
Krishna Shrestha

1
이것은 android.R.id.home이 API 11에 도입 되었기 때문에 API> = 11에서만 작동합니다. 저는 actionbarcompat를 사용하여 pre honeycomp 장치에서도 액션 바를 갖습니다. 거기에서 어떻게 처리합니까?
tobias

약간의 해킹. 더 깨끗한 솔루션은 아래 Cliffus의 답변을 참조하십시오.
dhaag23 2013 년

홈 간격은 더 이상을 사용하여 설정되지 않으며 api 17 이후 padding로 사용 marginEnd되는 것 같습니다. 아래 내 참조
Dori

@tobias R.id.home도 레벨 11.it 전에,이 단지를 사용할 수 없습니다에 allways입니다
oscarthecat

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

11
이것이 올바른 방법입니다. app:titleMarginStart="dimension"제목을 직접 타겟팅하는 것도 있습니다.
Markus Rubey

대부분의 사용자에게 이것이 "정답"이라고 생각하십시오. 매력으로 작동합니다, 감사합니다!
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

29

AppCompat (android.support.v7.widget.Toolbar,> = 수정 버전 24, 2016 년 6 월 24 일)에서 툴바를 사용하는 경우 다음 값으로 아이콘과 제목 사이의 패딩을 변경할 수 있습니다.

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

@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
Jacob Sánchez

4

나는 제목 앞에 \ t를 사용했고 나를 위해 일했다.


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>

내 자바 코드 :

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>

그냥 추가 " "앱 이름은 아이콘과 제목 사이에 공간을 추가합니다


이 나쁘지 않다, 나는 그것이 너무을 downvoted있어 이유를 잘 모릅니다
마틴 드 시몬에게

때로는 가장 간단한 솔루션이 최고 일 수 있습니다! 감사
Nuhman
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.