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?

Psest328
fonte

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
    }
})
steven274
fonte
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">
Rúben Sousa
fonte
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">
dlohani
fonte
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!

Shrini Jaiswal
fonte
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);

Hardik Dudhaiya
fonte
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()));
        }
    });
Vishal
fonte
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!

Alecs
fonte
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("");
                    }
                }
            });
Parth Patel
fonte
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>
Shaun
fonte
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.

Blaz
fonte
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;
        }
    }
});
Aistis
fonte
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
                    }
                }
            })
realpranav
fonte
0

basta adicionar este código:

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

collapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this , android.R.color.transparent));
AlimItTech
fonte