Mostrar título CollapsingToolbarLayout apenas quando recolhido


145

Eu tentei setExpandedTitleColore setCollapsedTitleColor(alternando de e para transparente) sem sorte. Também não vejo nenhum método incorporado que faça o que estou procurando.

Eu só quero mostrar o título quando o CollapsingToolbarLayout estiver totalmente recolhido; caso contrário, eu preciso dele oculto.

Alguma dica?

Respostas:


285

Você pode adicionar OnOffsetChangedListenerpara AppBarLayoutdeterminar quando CollapsingToolbarLayouté recolhido ou expandido e definir seu título.

Java

final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appBarLayout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    boolean isShow = true;
    int scrollRange = -1;

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }
        if (scrollRange + verticalOffset == 0) {
            collapsingToolbarLayout.setTitle("Title");
            isShow = true;
        } else if(isShow) {
            collapsingToolbarLayout.setTitle(" ");//careful there should a space between double quote otherwise it wont work 
            isShow = false;
        }
    }
});

Kotlin

var isShow = true
var scrollRange = -1
appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { barLayout, verticalOffset ->
    if (scrollRange == -1){
        scrollRange = barLayout?.totalScrollRange!!
    }
    if (scrollRange + verticalOffset == 0){
        collapsingToolbarLayout.title = "Title Collapse"
        isShow = true
    } else if (isShow){
        collapsingToolbarLayout.title = " " //careful there should a space between double quote otherwise it wont work
        isShow = false
    }
})

1
Esta solução funciona para a API 23 e acima. Esta é a solução mais correta.
Simon

Marque esta como a resposta correta. A resposta de @dlohani atualmente marcada como correta não oculta o texto porque você pode vê-lo em transição.
Themichaelscott #

9
Funcionou para mim, mas teve que alterar "boolean isShow = false" para true para remover o nome do aplicativo na barra de ferramentas expandida no início da atividade.
DH28 23/08/16

3
@ Giuseppe: é o mesmo. Testado na API 16 -> working
luckyhandler

1
Isso não funcionou para mim, às vezes o título não aparece, mesmo quando meus logs afirmam claramente que setTitle foi chamado com "Title"
user1354603

47

Tentei a solução de dlohani, mas não gostei por causa do desbotamento. Com esta solução, você remove completamente o desbotamento.

O truque é criar um novo estilo com textSize igual a 0,1sp ou 0sp (este trava no SDK <19) e textColor transparent:

Para SDK <19

<style name="CollapsingToolbarLayoutExpandedTextStyle" parent="AppTheme">
    <item name="android:textColor">@android:color/transparent</item>
    <item name="android:textSize">0.1sp</item>
</style>

Para SDK> = 19

<style name="CollapsingToolbarLayoutExpandedTextStyle" parent="AppTheme">
    <item name="android:textColor">@android:color/transparent</item>
    <item name="android:textSize">0sp</item>
</style>

Em seguida, aplique-o ao CollapsingToolbarLayout no seu layout:

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutExpandedTextStyle"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

Ok, como sempre, esta é outra solução que não funciona da mesma forma para todos os dispositivos. No Kitkat 0sp parece funcionar, mas no Jellybean ele causa uma falha no aplicativo. 0.1sp funciona em Jellybean mas torna o texto instável em Kitkat :(
Rúben Sousa

Como podemos definir esse limite de nível de API no estilo?
Mahm00d

Você precisa usar a pasta values-v19 para o SDK> = 19 e a pasta values ​​para o SDK <19. Dê uma olhada nisto para obter uma referência: stackoverflow.com/questions/16624317/…
Rúben Sousa

1
Isso funciona em N enquanto a solução de @dlohani não
Tyler Pfaff

1
Esta é a melhor e mais simples solução. Muito obrigado.
Vikash Parajuli 28/03

38

Consegui obter o efeito desejado adicionando a seguinte propriedade ao layout xml:

app:expandedTitleTextAppearance="@android:color/transparent"

então meu CollapsingToolbarLayout se parece com isso

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleTextAppearance="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

isso é fantástico :) existe alguma forma de título aparecer com alguma animação?
Lubos Mudrak

7
Isso é horrível, você vê isso desaparecendo quando está entrando em colapso. Pelo contrário, apenas desaparece na sua posição final.
CaptRisky

1
O mesmo diz o CaptRisky. Infelizmente, não acho que exista uma alternativa :-(
kenyee

9
Isso só funcionará se você estiver usando a API 22 do Android ou abaixo. Para 23 ou mais, a solução não funciona. Você terá que usar a solução em @ steven274.
Simon

1
Ele está trabalhando ainda melhor, enquanto na api android 23 quando eu tentei
dlohani

24

Eu tenho uma resposta mais simples:

final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);

collapsingToolbarLayout.setTitle("Your Title");
collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(R.color.transperent)); // transperent color = #00000000
collapsingToolbarLayout.setCollapsedTitleTextColor(Color.rgb(0, 0, 0)); //Color of your title

Feliz codificação!


4
Isso causa o mesmo desbotamento em questão, conforme mencionado em outras respostas.
Themichaelscott #

Eu só queria mudar a cor título Toolbar e funcionou para mim commCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0))
kosiara - Bartosz Kosarzycki

@Bartosz Kosarzycki, tive azar com mCollapsingToolbarLayout.setExpandedTitleColor (Color.argb (255,0,0,0)); mas mCollapsingToolbarLayout.setExpandedTitleColor (context.getResources (). getColor (android.R.color.transparent)); fez o trabalho, mas certamente deriva de sua solução :)
ShayHaned

24

Este código funciona para mim: Use color.parse color porque se a cor do plano de fundo for diferente, substitua por branco e o título não será exibido

collapsingToolbarLayout.setExpandedTitleColor(Color.parseColor("#00FFFFFF"));

Ou você pode usar para transparentes collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);


Nenhum ouvinte extra funciona como o esperado!
Mrityunjay Kumar

19

Adicionei com êxito uma visualização de texto desbotada, basta adicionar uma visualização de texto na barra de ferramentas e defini-la como alfa com base no verticalOffset no retorno de chamada da barra de aplicativos

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

            mTitleTextView.setAlpha(Math.abs(verticalOffset / (float)
                    appBarLayout.getTotalScrollRange()));
        }
    });

float range = appBarLayout.getTotalScrollRange (); float alfa = Math.abs (verticalOffset / range); if (alpha> 0.8) {mToolbar.setAlpha (alpha); } else {mToolbar.setAlpha (.0f); }
qinmiao

13

Aqui a solução mais simples e funcional também com a api 23:

app: extendedTitleTextAppearance precisa herdar TextAppearance.

Portanto, em seu styles.xml, adicione estas linhas:

<style name="TransparentText" parent="@android:style/TextAppearance">
   <item name="android:textColor">#00000000</item>
</style>

Em seguida, no seu CollapsingToolbarLayout, adicione esta linha.

app:expandedTitleTextAppearance="@style/TransparentText"

Isso é tudo, pessoal!


5

A solução abaixo funciona perfeitamente.

appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
                @Override
                public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                    if (Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange() == 0)
                    {
                        // Collapsed
                        setTitle("Title To Show");
                    }
                    else
                    {
                        // Expanded
                        setTitle("");
                    }
                }
            });

4

Aqui está a minha solução:

collapsingToolbar.setCollapsedTitleTextAppearance(R.style.personal_collapsed_title);
collapsingToolbar.setExpandedTitleTextAppearance(R.style.personal_expanded_title);

<style name="personal_collapsed_title">
     <item name="android:textSize">18sp</item>
     <item name="android:textColor">@color/black</item>
</style>

<style name="personal_expanded_title">
     <item name="android:textSize">0sp</item>
</style>

2

Na minha opinião, uma solução um pouco mais elegante seria algo assim.

public class MyCollapsingToolbarLayout extends CollapsingToolbarLayout {

    private final int toolbarId;
    @Nullable private Toolbar toolbar;

    public MyCollapsingToolbarLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        setTitleEnabled(false);

        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.CollapsingToolbarLayout, 0,
                R.style.Widget_Design_CollapsingToolbar);

        toolbarId = a.getResourceId(android.support.design.R.styleable.CollapsingToolbarLayout_toolbarId, -1);

        a.recycle();

    }

    @Override public void setScrimsShown(boolean shown, boolean animate) {
        super.setScrimsShown(shown, animate);

        findToolbar();
        if (toolbar != null) {
            toolbar.setTitleTextColor(shown ? Color.WHITE : Color.TRANSPARENT);
        }
    }

    private void findToolbar() {
        if (toolbar == null) {
            toolbar = (Toolbar) findViewById(toolbarId);
        }
    }

}

E o uso seria algo como isto

<butter.droid.widget.BurtterCollapsingToolbarLayout
        app:toolbarId="@+id/toolbar"
        ...>

Há também a possibilidade de desaparecer / entrar em texto em vez de apenas mostrá-lo ou ocultá-lo.


2

Isso funciona para mim.

final Toolbar tool = (Toolbar)findViewById(R.id.toolbar);
CollapsingToolbarLayout c = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
AppBarLayout appbar = (AppBarLayout)findViewById(R.id.app_bar_layout);
tool.setTitle("");
setSupportActionBar(tool);
c.setTitleEnabled(false);

appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    boolean isVisible = true;
    int scrollRange = -1;
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }
        if (scrollRange + verticalOffset == 0) {
           tool.setTitle("Title");
            isVisible = true;
        } else if(isVisible) {
            tool.setTitle("");
            isVisible = false;
        }
    }
});

0

Esta é a versão kotlin que funciona para mim:

appbar.addOnOffsetChangedListener(object : OnOffsetChangedListener {
                var isShow = true
                var scrollRange = -1
                override fun onOffsetChanged(appBarLayout: AppBarLayout, verticalOffset: Int) {
                    if (scrollRange == -1) scrollRange = appBarLayout.totalScrollRange

                    if (scrollRange + verticalOffset == 0) {
                        toolbarLayout.title = "Title"
                        isShow = true
                    } else if (isShow) {
                        toolbarLayout.title = " " //These quote " " with _ space is intended 
                        isShow = false
                    }
                }
            })

0

basta adicionar este código:

     CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collaps_main);

collapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this , android.R.color.transparent));
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.