3
votes

Comment réaliser une animation de bouton Android avec du texte flou et une ombre

Je souhaite réaliser cette animation de bouton sous Android. L'exemple ci-dessous provient d'iOS. Je veux que l'ombre disparaisse lorsque l'utilisateur clique sur le bouton et réapparaît une fois que l'utilisateur relâche le bouton.

Toute aide sera très appréciée.

 entrez la description de l'image ici


1 commentaires

Pouvez-vous s'il vous plaît vérifier la réponse ci-dessous et me faire savoir si cela aide?


4 Réponses :


0
votes

Ajoutez une mise en page avec l'arrière-plan comme ombre sous le bouton. Dans le button.setOnTouchListener masquez la mise en page lorsque le bouton est enfoncé et rendez-le visible lorsqu'il est relâché. Cependant, cela ne fonctionnera que si l'ombre est en dessous.


0 commentaires

2
votes

Vous devez ajouter une couleur comme celle-ci. Par exemple, le nom de la couleur est button_text_color.xml . Voici le fichier .xml qui doit être placé dans le dossier color . Si le dossier color n'existe pas, créez-en un dans votre répertoire res .

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_margin="32dp"
    android:background="@drawable/button_state_list_animator"
    android:text="Save Changes"
    android:textColor="@color/button_text_color" />

Vérifiez que j'ai ajouté 50% de transparence à la couleur blanche à l'état pressé. Maintenant, ajoutez simplement cet attribut dans le Button où il est déclaré.

Vous avez maintenant besoin d'un arrière-plan dessinable, à mettre dans votre dossier drawable . Par exemple, prenons le nom du dessinable est button_state_list_animator.xml . Cela devrait avoir le contenu suivant.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="@android:color/darker_gray" />
                    <corners android:radius="19dp" />
                </shape>
            </item>
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp" />
                    <gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
                    <corners android:radius="19dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_pressed="true">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#102746" />
                    <corners android:radius="19dp" />

                </shape>
            </item>
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp" />
                    <gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
                    <corners android:radius="19dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

La construction de vos boutons est maintenant simple.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#50FFFFFF" android:state_pressed="true" />
    <item android:color="#FFFFFF" android:state_pressed="false" />
</selector>

Voici la capture d'écran de mon code.

 entrez la description de l'image ici

 entrez la description de l'image ici

Vous pouvez avoir le push -Down animation utilisant la bibliothèque également, comme mentionné dans une réponse ici.

J'espère que cela vous aidera!


8 commentaires

Mec, où est le code du bouton de traduction de push to back? Vous venez d'écrire sur la couleur du texte uniquement.


@PratikButani Alors, avez-vous décliné la réponse pour cette raison? Je pense que la question demande uniquement d'ombrer la couleur du texte. Cependant, j'ai également ajouté la bibliothèque dans ma réponse pour la rendre complète. Vous n'avez pas non plus cette partie d'ombrage de la couleur du texte dans votre réponse, ce qui la rend également incomplète.


Où se trouve le mot-clé text shadow dans toute la question? Pouvez-vous vérifier à nouveau s'il vous plaît?


Pas un mot-clé text shadow juste text . :) As-tu trouvé?


Vous pouvez mettre une capture d'écran pour que l'utilisateur sache comment cela fonctionnera? Si vous avez essayé ce code dans Android Studio.


Capture d'écran ajoutée. Je n'ai pas pu ajouter le changement de couleur du texte et l'ombre a disparu. Merci.


Votre réponse est très proche de la solution mon ami.


C'est génial de savoir ça. Merci. :)



0
votes

Utilisez l'effet d'animation (comme le code ci-dessous) sur le bouton personnalisé lorsque vous cliquez sur le bouton.

 btn_custom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R
                        .anim.animation_btn);
                btn_custom.startAnimation(animation);
            }
        });

définissez Animation sur le clic du bouton en utilisant.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXScale="1"
        android:toXScale="0.8"
        android:fromYScale="1"
        android:toYScale="0.8"
        android:duration="500"
        android:pivotX="50%"
        android:pivotY="50%" >
    </scale>
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0.8"
        android:duration="500">
    </alpha>
</set>


1 commentaires

Cela n'aide pas mon ami.



1
votes

Vous pouvez utiliser cette bibliothèque: pushdown-anim-click

Comment à installer:

Button button = findViewById( R.id.button );

PushDownAnim.setPushDownAnimTo( button, ... )
    .setOnClickListener( new View.OnClickListener(){
        @Override
        public void onClick( View view ){
            Toast.makeText( MainActivity.this, "PUSH DOWN !!", Toast.LENGTH_SHORT ).show();
        }

});

Comment utiliser:

compile( 'com.github.thekhaeng:pushdown-anim-click:1.1.1' ){
    exclude group: 'com.android.support'
}

Pour Shadow:

Comme je l'ai vu fichiers de bibliothèque, il n'y a que trois fichiers java. Il a juste utilisé la classe pour animer le bouton. Vous pouvez donner une ombre à votre bouton en de cette façon . Même si j'ai créé un problème , vous pouvez rester vigilant à ce sujet.

entrez la description du lien ici

Pour plus de fonctionnalités, vous pouvez visiter le lien github.

Merci.


2 commentaires

Comme j'ai vu les fichiers de bibliothèque, il n'y a que trois fichiers java. Il a juste utilisé la classe pour animer le bouton. Vous pouvez donner une ombre à votre bouton en de cette façon . Même si j'ai créé un problème , vous pouvez rester vigilant à ce sujet.


Oui. J'ai vu la bibliothèque. J'apprécie vos efforts pour créer le problème, mais dans mon cas, je pense que ce n'est pas pertinent. Comme j'utiliserai des ombres de différentes couleurs, je vais donc devoir le faire manuellement. La bibliothèque est bonne cependant.