Wypełnienie między ikoną główną ActionBar a tytułem


110

Czy ktoś wie, jak ustawić dopełnienie między ikoną główną ActionBar a tytułem?


13
Witamy w świecie hacków: Android . Ta prosta rzecz powinna zostać znaleziona przez każdego (nawet początkującego), jeśli potrzebujemy tego w innych technologiach interfejsu użytkownika i programowaniu aplikacji. Jednak w Androidzie jest to naprawdę tajemnicze. Oni celowo ukryć funkcję hotelu, sprawiają, że skomplikowane i po prostu zrobić Android stają świat hacki . Nie wiem, jaki jest ich ostateczny cel.
King King

1
To pytanie i odpowiedzi dają drogę do osiągnięcia tego dzięki atrybutom na pasku narzędzi (wsparcie v7)
Elisabeth

Android jest do bani nawet bardziej niż iOS.
Borzh

Odpowiedzi:


69

Dostosowałem odpowiedź Cliffusa i przypisałem logo do rysowania w mojej definicji stylu paska akcji, na przykład tak w 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>

Ten do rysowania wygląda jak ten Cliffusa (tutaj z domyślną ikoną uruchamiania aplikacji) w 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>

W pliku android_manifest.xml nadal możesz ustawić inną ikonę aplikacji (ikona programu uruchamiającego na „pulpicie”. W działaniach bez paska akcji widoczne są tutaj dowolne definicje logo).


dlaczego nie działa na Androidzie 5.1
Logan Guo

Przepraszam, nie mogę nic o tym powiedzieć w 5.1. Przerzuciłem się na bardziej elastyczny Toolbar-Control. Jeśli jeszcze tego nie zrobiłeś, polecam otworzyć nowe pytanie tutaj na StackOverflow i napisać więcej szczegółów, co zadziałało dla Ciebie (<5.1), a co nie działa i co próbowałeś z 5.1, ale nie znalazłeś rozwiązania.
Minsky

Dziękuję @Minsky, zainspirowałem się twoją odpowiedzią do rozwiązania mojego problemu, umieściłem to w odpowiedzi poniżej :)
Kontekst

Co jeśli jest używana mipmap?
Yura Shinkarev,

100

EDYCJA : upewnij się, że ustawiłeś to do rysowania jako LOGO , a nie jako ikonę aplikacji, jak to zrobili niektórzy komentatorzy.

Po prostu utwórz plik XML do rysowania i umieść go w folderze zasobów „do rysowania” (bez jakiejkolwiek gęstości lub innej konfiguracji).

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

Ostatnim krokiem jest ustawienie tego nowego do rysowania jako logo w swoim manifeście (lub w obiekcie Actionbar w Twojej aktywności)

Powodzenia!


1
Z tym rozwiązaniem jest duży problem. Użyłem go i @Alesqui ma rację - ikona aplikacji zmieniła się i stała się mniejsza ... Możesz zmienić ikonę, ale ponieważ dp jest inny dla różnych telefonów, to rozwiązanie nie działa w aplikacji produkcyjnej.
Johan S

3
upewnij się, że ustawiasz to do rysowania jako LOGO, a nie jako ikonę aplikacji. powodzenia!
Cliffus,

1
Widzę też zniekształcenie. Jeśli zastosuję prawe wypełnienie, jak powyżej, prawa strona obrazu zostanie przycięta.
Neil,

1
Ciekawe rozwiązanie, ale u mnie nie działa - mogę w ten sposób dodać dodatkowe wypełnienie lub przyciąć obraz logo - niedobrze (4.3)
Dori

1
@Cliffus - fajne rozwiązanie. Moim wymaganiem było przesunięcie logo w lewo, więc użyłem: android: left = "- 4dp".
TharakaNirmana

55

Miałem też podobny problem, w moim przypadku musiałem dynamicznie ustawiać tytuły każdej czynności w zależności od treści.

Więc to zadziałało dla mnie.

actionBar.setTitle("  " + yourActivityTitle);

Jeśli chcesz tylko odstępów, jest to najłatwiejsze rozwiązanie, jakie przyszło mi do głowy.


13
Dlaczego głosowanie negatywne? Nie myśl, że to zła odpowiedź, po prostu inny sposób na zrobienie tego.
Rahul Sainani

3
@idratherbeintheair Tak, zgadzam się, że to nie jest „najczystszy” sposób, więc teraz mówi tylko o najłatwiejszym. Ale kiedy coś wskażesz, napisz alternatywne rozwiązanie. Zmierzyłem się z tym problemem i właśnie tego używałem w mojej aplikacji, więc udostępniłem.
Rahul Sainani

3
Naprawdę? To rozwiązanie może nie działać tak samo na różnych ekranach z różnymi DPI.
Roman Bugaian

5
Nie wybiorę tego rozwiązania, ponieważ naprawdę potrzebuję czegoś bardziej stabilnego w mojej aplikacji, ale chcę zapytać wszystkie osoby, które mówią „nie jest czyste”. O mój Boże, gdzie jest CZYSTE rozwiązanie tego problemu? Wszystkie te hacki z logo, setPadding też nie wyglądają na czyste! Przeczytaj tylko komentarze, ile osób też ma z nimi problemy. Ustawienie android: paddingLeft on title - to, co byłoby CZYSTE, gdyby zadziałało. Zostajemy tutaj w ciemności, aby wymyślać hacki, ponieważ z jakiegoś powodu po prostu nie działa tak, jak powinno. Więc nic nie jest „nieczyste”.
Varvara Kalinina

1
Czystszym rozwiązaniem byłoby użycie app:titleMarginStartatrybutu w formacie XML układu.
LarsH,

40

W ten sposób mogłem ustawić wypełnienie między ikoną domu a tytułem.

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

Nie mogłem jednak znaleźć sposobu na dostosowanie tego za pomocą stylów ActionBar xml. Oznacza to, że następujący kod XML nie działa:

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

Jeśli jednak chcesz to osiągnąć za pomocą XML, te dwa linki mogą pomóc Ci znaleźć rozwiązanie:

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

(To jest rzeczywisty układ używany do wyświetlania ikony strony głównej na pasku akcji) https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/action_bar_home.xml


1
@Dushyanth właśnie próbowałem, ale wyświetla wyjątek zerowego wskaźnika w widoku obrazu. mam zarówno homeUpIndicator, jak i ikonę domu na pasku akcji.
Krishna Shrestha,

1
Działa to tylko dla API> = 11, ponieważ android.R.id.home został wprowadzony w API 11. Używam actionbarcompat, aby mieć pasek akcji również na urządzeniach sprzed honeycomp. Jak sobie z tym poradzić?
tobias

Trochę hacka. Zobacz odpowiedź Cliffusa poniżej, aby uzyskać czystsze rozwiązanie.
dhaag23

odstęp domowy nie jest już ustawiany za pomocą padding, wydaje się, że używa marginEndod api 17 - co prawdopodobnie zepsuje to rozwiązanie. Zobacz moje poniżej
Dori

Dom @tobias R.id. jest zawsze dostępny, nawet przed poziomem 11. jest po prostu niedostępny
oscarthecat

32

Jest to częste pytanie w Material Design, ponieważ możesz chcieć wyrównać tytuł paska narzędzi z zawartością fragmentu poniżej. Aby to zrobić, możesz zastąpić domyślne wypełnienie „12dp”, używając atrybutu contentInsetStart = „72dp” w układzie toolbar.xml, jak pokazano poniżej

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

Następnie w swojej aktywności zadzwoń

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

I kończysz z tym:

pasek narzędzi


W moim przypadku to wcale nie działa. Proszę dać mi znać, jaki styl ma być wykonywany
Nitin Mesta

11
To jest właściwy sposób, aby to zrobić. Istnieje również app:titleMarginStart="dimension"bezpośrednie kierowanie na tytuł.
Markus Rubey

Pomyśl, że dla większości użytkowników będzie to „właściwa” odpowiedź. Działa jak urok, dzięki!
Taras

1
Jaka jest „właściwa” odpowiedź, jeśli pytanie dotyczyło odstępu między ikoną strony głównej a tytułem? Ikona domu nie jest tutaj wymieniona (ani logo ani żadna odmiana). Jeśli contentInsetStartwstawi odstęp między ikoną domu a tytułem, odpowiedź może przynajmniej tak powiedzieć. Mój test przed chwilą contentInsetStartzdawał się umieszczać spację przed logo (co wprawdzie nie jest tym samym, co ikona domu).
LarsH,

30

U mnie zadziałała tylko następująca kombinacja, testowana od API 18 do 24

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

gdzie w „aplikacji” jest: xmlns:app="http://schemas.android.com/apk/res-auto"

na przykład.

 <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
Dziękuję bardzo. @Ajit
shahid17june

1
Wspaniały. Byłoby lepiej, gdybyś mógł podać przykładowy powiązany plik XML, aby wyjaśnić, gdzie go umieścić. (Wiem, gdzie umieścić tę linię)
John Pang

Witaj @JohnPang, możesz umieścić to na pasku narzędzi swojego układu, jak pokazano powyżej.
Ajit

29

Jeśli używasz paska narzędzi z AppCompat (android.support.v7.widget.Toolbar,> = wersja 24, czerwiec 2016), wypełnienie między ikoną a tytułem można zmienić za pomocą następującej wartości:

  app:contentInsetStartWithNavigation="0dp"

Aby poprawić moją odpowiedź, możesz użyć jej na pasku narzędzi bezpośrednio w swojej aktywności lub możesz utworzyć nowy plik układu dla swojego paska narzędzi. W takim przypadku wystarczy zaimportować @id paska narzędzi przy użyciu właściwości include w każdym z potrzebnych widoków.

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

Następnie możesz zaimportować układ do pliku activity.xml

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

Wspaniały. Byłoby lepiej, gdybyś mógł podać przykładowy powiązany plik XML, aby wyjaśnić, gdzie go umieścić. (Wiem, gdzie umieścić tę linię)
John Pang,

@JohnPang Wyszczególniłem moją odpowiedź, mam nadzieję, że pomoże ci ona zrozumieć, jak korzystać z tej właściwości.
tryp

@ Bolein95 czy korzystasz z biblioteki wsparcia? aby móc Ci pomóc, podaj więcej informacji.
tryp

Warto zauważyć, że parametr ten został wprowadzony w wersji 24 biblioteki projektów. Więc jeśli utkniesz w zaćmieniu w wersji 23 (tak jak kiedyś ...), nie będziesz mieć do niego dostępu.
FlorianT,

@FloriantT dziękuję za precyzję, zaktualizowałem moją odpowiedź dotyczącą twojego komentarza.
tryp

6

U titleMarginStartmnie działa. Przykład platformy 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"/>

Ustaw logo w następujący sposób:

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

Jesteś geniuszem. +1
Jacob Sánchez


2

Używam niestandardowego obrazu zamiast domyślnego tekstu tytułu po prawej stronie logo moich aplikacji. Jest to ustawione programowo, podobnie jak

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

Problemy z powyższymi odpowiedziami są dla mnie takie, że sugestia @ Cliffusa nie działa dla mnie z powodu problemów, które inni nakreślili w komentarzach i chociaż ustawienie dopełnienia programowego @dushyanth mogło działać w przeszłości, myślę, że fakt, że odstępy są teraz ustaw za pomocą android:layout_marginEnd="8dip" od API 17, ręczne ustawienie wypełnienia nie powinno mieć żadnego efektu. Zobacz link, który zamieścił w git, aby zweryfikować jego aktualny stan.

Prostym rozwiązaniem dla mnie jest ustawienie ujemnego marginesu na moim niestandardowym widoku w ActionBar, w ten sposób android:layout_marginLeft="-14dp" . Szybki test pokazuje, że działa u mnie na 2.3.3 i 4.3ActionBarCompat

Mam nadzieję, że to komuś pomoże!


@Diri, czy możesz dodać więcej, czy możemy zrobić pasek akcji w górę, w dół, w lewo, w prawo
Amitsharma

@amitsharma - nie jestem pewien, co dokładnie masz na myśli - czy masz na myśli przesunięcie paska akcji z góry ekranu? Jeśli tak, myślę, że musisz stworzyć niestandardowy widok paska akcji, aby to zrobić - brzmi to tak, jakby to nie było dobre ux :)
Dori

w takim przypadku nie wiem, co masz na myśli, mówiąc „czy możesz dodać więcej, czy możemy utworzyć pasek akcji w górę, w dół, w lewo, w prawo”
Dori,

2

Rozwiązałem ten problem, używając niestandardowego układu nawigacji

Używając go, możesz dostosować wszystko w tytule na pasku akcji:

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>

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

Miałem podobny problem, ale z odstępami między górną a niestandardową ikoną / logo aplikacji na pasku akcji. Rozwiązanie Dushyantha polegające na programowym ustawianiu dopełnienia zadziałało dla mnie (ustawienie dopełnienia na ikonie aplikacji / logo). Próbowałem znaleźć android.R.id.home lub R.id.abs__home ( tylko ActionBarSherlock , ponieważ zapewnia to kompatybilność wsteczną) i wydaje się, że działa na urządzeniach 2.3-4.3, na których testowałem.


0

W moim przypadku to z Toolbar rozwiązałem w ten sposób:

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>

W moim fragmencie sprawdzam interfejs 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);

Powodzenia!


0

Możesz zmienić drawableSize swojej DrawerArrow w następujący sposób:

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

To nie jest prawidłowa odpowiedź, ponieważ nie możesz wybrać strony wypełnienia i skalowania ikony DrawerArrow po zmianie drawableSize (drawableSize = width = height). Ale możesz zrobić margines od lewej strony. Zrób margines od prawej

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

0

Użyłem tej metody setContentInsetsAbsolute(int contentInsetLeft, int contentInsetRight)i działa!

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

0

Gdy używasz niestandardowego paska narzędzi, możesz użyć

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

a w układzie paska narzędzi po prostu ustaw app:titleMarginStart="16dp"

Pamiętaj, że musisz ustawić ikonę jako logo, nie używaj getSupportActionBar().setIcon(R.drawable.logo) zamiast tego: getSupportActionBar().setLogo(R.drawable.logo)


0

Użyłem AppBarLayouti ImageButtonrobię to na zamówienie .

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

Mój kod Java:

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

0

Możesz również osiągnąć to samo metodą:

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

0

W pliku XML ustaw app:titleMarginwidok paska narzędzi w następujący sposób:

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

Lub w swoim kodzie:

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

-2

ta praca dla mnie, aby dodać dopełnienie do tytułu, a dla ActionBarikony ustawiłem to programowo.

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

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

Po prostu dodaj " "nazwę aplikacji. Doda spację między ikoną a tytułem


To nie jest zły, Nie wiem, dlaczego tak się downvoted
Martin De Simone

może czasami najprostsze rozwiązanie jest najlepsze! dzięki
Nuhman
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.