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.