ActionBar'ın ana simgesi ve başlığı arasında dolgu


110

ActionBar'ın ana simgesi ile başlık arasında nasıl dolgu yapılacağını bilen var mı?


13
Hack dünyasına hoş geldiniz: Android . Diğer kullanıcı arayüzü teknisyenlerinde ve uygulama programlamasında buna ihtiyacımız varsa, bu basit şey herkes (hatta yeni başlayanlar) tarafından bulunmalıydı. Ancak Android'de bu gerçekten gizemli. Bunlar kasıtlı uzak özelliğini gizlemek biraz karışık ve sadece Android hale getirmek yapmak dalaverecileri bir dünya . Nihai amaçlarının ne olduğunu bilmiyorum.
King King

1
Bu soru ve cevaplar, araç çubuğundaki özniteliklerle bunu başarmaya yol açar (destek v7)
Elisabeth

Android, iOS'tan daha fazla emiyor.
Borzh

Yanıtlar:


69

Cliffus cevabını uyarladım ve logo çizilebilir olanı eylem çubuğu stil tanımıma atadım, örneğin res / style.xml'deki gibi:

<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'de Cliffus'un (burada varsayılan uygulama başlatıcı simgesiyle) çekilebilir olanı gibi görünüyor:

<?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'de yine de farklı bir uygulama simgesi ('masaüstündeki' başlatıcı simgesi) ayarlayabilirsiniz. Buradaki her türlü farklı logo tanımı, eylem çubuğu olmayan etkinliklerde görülebilir.


neden Android 5.1'de etki göstermiyor
Logan Guo

Maalesef 5.1 sürümünde bununla ilgili bir şey söyleyemiyorum. Daha esnek Araç Çubuğu Kontrolüne geçtim. Henüz yapılmadıysa, burada StackOverflow'da yeni bir soru açmanızı ve sizin için neyin işe yaradığını (<5.1) ve neyin işe yaramadığını ve 5.1 ile denediğiniz ancak bir çözüme ulaşamadığınızı, biraz daha ayrıntı yazmanızı öneririm.
Minsky

Teşekkür ederim @Minsky, sorunumu çözmek için cevabınızdan ilham aldım, aşağıdaki cevaba nasıl olduğunu ekledim :)
Bağlam

Mipmap kullanılırsa ne olur?
Yura Shinkarev

100

DÜZENLEME : Bu çekilebilirliği , bazı yorumcuların yaptığı gibi uygulama simgeniz olarak değil, LOGO olarak ayarladığınızdan emin olun .

Sadece bir XML çekilebilir yapın ve onu "çekilebilir" kaynak klasörüne koyun (herhangi bir yoğunluk veya başka bir konfigürasyon olmadan).

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

Son adım, bu yeni çekilebilirliği bildiriminizde (veya etkinliğinizdeki Actionbar nesnesinde) logo olarak ayarlamaktır.

İyi şanslar!


1
Burada bu çözümle ilgili büyük bir sorun var. Bunu kullandım ve @Alesqui haklı - uygulama simgesi değişti ve küçüldü ... Simgeyi değiştirebilirsiniz ancak dp farklı telefonlar için farklı olduğundan, bu çözüm bir üretim uygulamasında kesmez.
Johan S

3
bu çekilebilirliği uygulama simgeniz olarak değil, LOGO olarak ayarladığınızdan emin olun. iyi şanslar!
Cliffus

1
Ayrıca bozulma görüyorum. Yukarıdaki gibi sağ dolguyu uygularsam, görüntünün sağ tarafı kırpılır.
Neil

1
İlginç bir çözüm ama benim için çalışmıyor - ya bu şekilde fazladan dolgu ekleyebilirim ya da logo resmini kırpabilirim - iyi değil (4.3)
Dori

1
@Cliffus - güzel çözüm. Benim ihtiyacım logoyu sola götürmekti, bu yüzden şunu kullandım: android: left = "- 4dp".
TharakaNirmana

55

Ben de benzer bir sorunla karşılaştım, benim durumumda içeriğe bağlı olarak her bir etkinlikte dinamik olarak başlık ayarlamak zorunda kaldım.

Yani bu benim için çalıştı.

actionBar.setTitle("  " + yourActivityTitle);

Tek istediğiniz boşluksa, düşünebildiğim en kolay çözüm budur.


13
Neden olumsuz oy? Bunun yanlış bir cevap olduğunu düşünme, sadece bunu yapmanın başka bir yolu.
Rahul Sainani

3
@idratherbeintheair Evet, bunun "en temiz" yol olmadığına katılıyorum, bu yüzden şimdi sadece en kolay diyor. Ancak bir şeyi işaret ettiğinizde lütfen alternatif bir çözüm gönderin. Bu sorunla karşılaştım ve uygulamamda kullandığım şey bu, bu yüzden paylaştım.
Rahul Sainani

3
Gerçekten mi? Bu çözüm, farklı DPI değerlerine sahip farklı ekranlarda aynı şekilde çalışmayabilir.
Roman Bugaian

5
Bu çözümü seçmeyeceğim çünkü uygulamamda gerçekten daha kararlı bir şeye ihtiyacım var, ancak tüm bu insanlara "Temiz değil" demesini istiyorum. Aman Tanrım, bu problem için TEMİZ çözüm nerede? Logo içeren tüm bu hackler, setPadding bana da temiz görünmüyor! Sadece yorumları okuyun, kaç kişinin bunlarla da sorunu var. Android ayarlanıyor: başlıkta paddingLeft - işe yarasaydı ne TEMİZ olurdu. Bilgisayar korsanları icat etmek için burada karanlıkta bırakıldık çünkü nedense olması gerektiği gibi çalışmıyor. Yani hiçbir şey "temiz değil" değil.
Varvara Kalinina

1
Daha temiz bir çözüm app:titleMarginStart, mizanpaj XML'sindeki niteliği kullanmak olacaktır .
LarsH

40

Ana sayfa simgesi ile başlık arasındaki dolguyu bu şekilde ayarlayabildim.

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

Yine de ActionBar xml stilleri ile bunu özelleştirmenin bir yolunu bulamadım. Yani aşağıdaki XML çalışmaz:

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

Ancak, bunu xml aracılığıyla elde etmek istiyorsanız, bu iki bağlantı bir çözüm bulmanıza yardımcı olabilir:

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

(Bu, ana simgeyi bir işlem çubuğunda görüntülemek için kullanılan gerçek düzendir) https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/action_bar_home.xml


1
@Dushyanth yeni denedim ama görüntüde boş işaretçi istisnası diyor. İşlem çubuğunda hem homeUpIndicator hem de home simgesi var.
Krishna Shrestha

1
Bu sadece API> = 11 için çalışıyor, çünkü android.R.id.home API 11'de tanıtıldı. Honeycomp öncesi cihazlarda da bir eylem çubuğuna sahip olmak için actionbarcompat kullanıyorum. Orada nasıl idare edilir?
tobias

Biraz hile. Daha temiz bir çözüm için aşağıdaki Cliffus'un cevabına bakın.
dhaag23

ev aralığı artık kullanılmıyor padding, marginEndapi 17'den beri kullanılıyor gibi görünüyor - bu muhtemelen bu çözümü bozacak. Aşağıdaki benimkine bakın
Dori

@tobias R.id.home 11. seviyeden önce bile her zaman oradadır, sadece mevcut değil
oscarthecat

32

Araç çubuklarınızın başlığını aşağıdaki parçadaki içerikle aynı hizaya getirmek isteyebileceğinizden bu, Materyal Tasarımda sık sorulan bir sorudur. Bunu yapmak için, aşağıda gösterildiği gibi toolbar.xml düzeninizde contentInsetStart = "72dp" niteliğini kullanarak "12dp" varsayılan dolgusunu geçersiz kılabilirsiniz.

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

Sonra aktivitenizde arayın

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

Ve bununla sonuçlanırsın:

Araç Çubuğu


Bu benim durumumda hiç işe yaramıyor. Lütfen stilin etkinliğe ayarlandığını bildirin
Nitin Mesta

11
Bunu yapmanın doğru yolu budur. Orada da app:titleMarginStart="dimension"doğrudan başlığını hedef.
Markus Rubey

Çoğu kullanıcı için bunun "doğru" cevap olacağını düşünün. Tılsım olarak çalışıyor, teşekkürler!
Taras

1
Soru, ana sayfa simgesi ile başlık arasında dolgu yapmakla ilgiliyse, bu nasıl "doğru" cevap olabilir? Ana sayfa simgesinden burada bahsedilmemiştir (ne logo veya herhangi bir varyasyon). Eğer contentInsetStartev simgesi ve başlık arasındaki koyar boşluk, cevap, en azından bu yüzden söyleyebiliriz. Şu anki testimcontentInsetStart , boşluğu logonun önüne koymuş gibiydi (kuşkusuz ki ana sayfa simgesiyle aynı değil).
LarsH

30

Benim için sadece aşağıdaki kombinasyon çalıştı, API 18'den 24'e kadar test edildi

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

"uygulama" nın nerede olduğu: xmlns:app="http://schemas.android.com/apk/res-auto"

Örneğin.

 <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
Çok teşekkür ederim. @Ajit
shahid17june

1
Harika. Bunu nereye koyacağınızı açıklığa kavuşturmak için XML ile ilgili örnek sunabilirseniz daha iyi olur. (Bu satırı nereye koyacağımı biliyorum)
John Pang

Merhaba @JohnPang, bunu yukarıda gösterildiği gibi düzeninizin Araç Çubuğuna yerleştirebilirsiniz.
Ajit

29

AppCompat'tan araç çubuğu kullanıyorsanız (android.support.v7.widget.Toolbar,> = revizyon 24, Haziran 2016), simge ve başlık arasındaki dolgu aşağıdaki değerle değiştirilebilir:

  app:contentInsetStartWithNavigation="0dp"

Cevabımı geliştirmek için, bunu araç çubuğunuzda doğrudan aktivitenizin içinde kullanabilir veya araç çubuğunuz için yeni bir düzen dosyası oluşturabilirsiniz. Bu durumda, ihtiyaç duyulan her görünümde include özelliğini kullanarak araç çubuğunuzun @id'sini içe aktarmanız yeterlidir.

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

Daha sonra düzeninizi activity.xml dosyanıza aktarabilirsiniz.

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

Harika. Bunu nereye koyacağınızı açıklığa kavuşturmak için XML ile ilgili örnek sunabilirseniz daha iyi olur. (Bu satırı nereye koyacağımı biliyorum)
John Pang

@JohnPang cevabımı detaylandırdım, umarım bu özelliği nasıl kullanacağınızı anlamanıza yardımcı olur.
tryp

@ Bolein95 destek kitaplığını kullanıyor musunuz? size yardımcı olabilmemiz için lütfen daha fazla bilgi verin.
tryp

Bu parametrenin tasarım kitaplığının 24. sürümünde tanıtıldığını belirtmek gerekir. Yani, 23. versiyonda tutulma durumunda kaldıysanız (düne kadar yaptığım gibi ...), ona erişiminiz olmayacak.
FlorianT

@FloriantT hassasiyet için teşekkür ederim, yorumunuzla ilgili cevabımı güncelledim.
tryp

6

titleMarginStartÇalışmaları benim için kullanmak . Xamarin örneği:

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

Logoyu şu şekilde ayarlayın:

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

Sen bir dahisin. +1
Jacob Sánchez

4

Başlıktan önce kullandım ve kendim için çalıştım.


2

Uygulamalarımın logosunun sağındaki varsayılan başlık metni yerine özel bir resim kullanıyorum. Bu, programatik olarak şöyle ayarlanır

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

Benim için yukarıdaki cevaplarla ilgili sorunlar, @ Cliffus'un önerisi başkalarının yorumlarda ana hatlarıyla belirttiği sorunlar nedeniyle benim için işe yaramıyor ve @dushyanth programatik dolgu ayarı geçmişte işe yaramış olabilirken, boşlukların şimdi kullanarak ayarla android:layout_marginEnd="8dip" API 17'yi manuel olarak ayarlamanın hiçbir etkisi olmayacağından . Mevcut durumunu doğrulamak için git'e gönderdiği bağlantıya bakın.

Benim için basit bir çözüm, actionBar'daki özel görünümümde bunun gibi negatif bir kenar boşluğu ayarlamaktır android:layout_marginLeft="-14dp". Hızlı bir test, 2.3.3 ve 4.3'te benim için çalıştığını gösteriyor.ActionBarCompat

Umarım bu birine yardımcı olur!


@Diri u daha biz işlem çubuğu up, aşağı, sağa, sola yapabilirsiniz ekleyebilir
Amitsharma

@amitsharma - tam olarak ne demek istediğinizden emin değilim - eylem çubuğunu ekranın üstünden taşımak mı istiyorsunuz? Öyleyse, bunu yapmak için özel bir eylem çubuğu görünümü oluşturmanız gerektiğini düşünüyorum - kulağa hoş gelmeyebilir gibi görünüyor :)
Dori

bu durumda "daha fazla ekleyebilir misin, yukarı, aşağı, sola, sağa işlem çubuğu yapabilir miyiz" ile ne demek istediğini bilmiyorum
Dori

2

Bu sorunu özel Gezinme düzenini kullanarak çözdüm

Bunu kullanarak işlem çubuğundaki başlıktaki her şeyi özelleştirebilirsiniz:

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

Benzer bir sorun yaşadım, ancak işlem çubuğundaki yukarı ve özel uygulama simgesi / logosu arasındaki boşluk. Dushyanth'ın programlı olarak dolgu ayarlama çözümü benim için çalıştı (uygulama / logo simgesinde dolgu ayarlama). Ben de bulmaya çalıştık android.R.id.home veya R.id.abs__home ( sadece ActionBarSherlock bu garanti geriye dönük uyumluluk gibi) ve ben üzerinde test ettik 2,3-4,3 cihazlar arasında işe görünmektedir.


0

Benim durumum için, bunu Araç Çubuğu ile şu şekilde çözdüm:

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>

Parçamda, API'yi kontrol ediyorum:

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

İyi şanslar!


0

Çekmece Okunuzun Çekilebilir Boyutunu şu şekilde değiştirebilirsiniz:

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

Bu doğru cevap değil, çünkü drawableSize (drawableSize = width = height) değiştirildiğinde padding tarafı ve DrawerArrow simge ölçeklemesini seçemezsiniz. Ama soldan marj yapabilirsiniz. Sağdan marj yapmak için

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

0

Bu yöntemi kullandım setContentInsetsAbsolute(int contentInsetLeft, int contentInsetRight)ve işe yarıyor!

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

0

Özel bir Araç Çubuğu kullandığınızda,

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

ve araç çubuğu düzeninizde basitçe app:titleMarginStart="16dp"

Simgeyi logo olarak ayarlamanız gerektiğini unutmayın, getSupportActionBar().setIcon(R.drawable.logo) bunun yerine şunu kullanmayın: getSupportActionBar().setLogo(R.drawable.logo)


0

Bunu kullandım AppBarLayoutve özel olarak ImageButtonyapıyorum.

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

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

0

Aynı yöntemi yöntemle de başarabilirsiniz:

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

0

XML'nizde, app:titleMarginAraç Çubuğu görünümünüzde aşağıdaki gibi ayarlayın:

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

Veya kodunuzda:

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

-2

bu benim için başlığa dolgu eklemek için çalışıyor ve ActionBarsimge için bunu programlı olarak ayarladım.

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

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

Sadece " "uygulamanızın adı için ekleyin Simge ve başlık arasına boşluk ekleyecektir


Bu kötü değil, neden bu kadar olumsuz oy verildiğini bilmiyorum
Martin De Simone

belki bazen çözümün en basiti en iyisidir! teşekkürler
Nuhman
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.