How to achieve this effect in Snackbar












0















Here is the gif:
enter image description here



There are several features:




  • Fade in and immediately out.

  • It has margin. Because the default effect is match parent width.


Now I have already solved the margin problem. But I don't know how to achieve the animation effect. And here's my code:



snackbar_animation.xml:



<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fillAfter="true"
android:shareInterpolator="true">

<alpha
android:fromAlpha="0.1"
android:toAlpha="1" />

<scale
android:fromXScale="0.5"
android:fromYScale="0.0"
android:toXScale="1"
android:toYScale="1"/>

</set>


MainActivity:



public class MainActivity extends AppCompatActivity implements View.OnClickListener{

private Button snackbar;
private CoordinatorLayout coordinatorLayout;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.snackbar_test);

coordinatorLayout = findViewById(R.id.coordinator);

snackbar = findViewById(R.id.show_snackbar);
snackbar.setOnClickListener(this);
}

@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.show_snackbar:
showSnackbar();
break;
}
}

private void showSnackbar(){
Snackbar snackbar = Snackbar.make(coordinatorLayout,"i am a snack bar",Snackbar.LENGTH_SHORT);

View sbView = snackbar.getView();

// add animation
Animation animation = AnimationUtils.loadAnimation(this,R.anim.snackbar_animation);
sbView.setAnimation(animation);

// modify margin
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) sbView.getLayoutParams();
params.setMargins(params.leftMargin + 50,
params.topMargin,
params.rightMargin + 50,
params.bottomMargin + 50);

sbView.setLayoutParams(params);

// show snackbar
snackbar.show();
}


activity_main.xml:



<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<Button
android:id="@+id/show_snackbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingTop="10dp"
android:text="show snackbar" />

</android.support.design.widget.CoordinatorLayout>


If there are something else I need to know about this question, just comment below this question.such as: value animation or other things.I am new to the animation, so if you know the great learning materials, tell me, Thanks.










share|improve this question





























    0















    Here is the gif:
    enter image description here



    There are several features:




    • Fade in and immediately out.

    • It has margin. Because the default effect is match parent width.


    Now I have already solved the margin problem. But I don't know how to achieve the animation effect. And here's my code:



    snackbar_animation.xml:



    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fillAfter="true"
    android:shareInterpolator="true">

    <alpha
    android:fromAlpha="0.1"
    android:toAlpha="1" />

    <scale
    android:fromXScale="0.5"
    android:fromYScale="0.0"
    android:toXScale="1"
    android:toYScale="1"/>

    </set>


    MainActivity:



    public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Button snackbar;
    private CoordinatorLayout coordinatorLayout;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.snackbar_test);

    coordinatorLayout = findViewById(R.id.coordinator);

    snackbar = findViewById(R.id.show_snackbar);
    snackbar.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
    switch (view.getId()){
    case R.id.show_snackbar:
    showSnackbar();
    break;
    }
    }

    private void showSnackbar(){
    Snackbar snackbar = Snackbar.make(coordinatorLayout,"i am a snack bar",Snackbar.LENGTH_SHORT);

    View sbView = snackbar.getView();

    // add animation
    Animation animation = AnimationUtils.loadAnimation(this,R.anim.snackbar_animation);
    sbView.setAnimation(animation);

    // modify margin
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) sbView.getLayoutParams();
    params.setMargins(params.leftMargin + 50,
    params.topMargin,
    params.rightMargin + 50,
    params.bottomMargin + 50);

    sbView.setLayoutParams(params);

    // show snackbar
    snackbar.show();
    }


    activity_main.xml:



    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <Button
    android:id="@+id/show_snackbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:paddingTop="10dp"
    android:text="show snackbar" />

    </android.support.design.widget.CoordinatorLayout>


    If there are something else I need to know about this question, just comment below this question.such as: value animation or other things.I am new to the animation, so if you know the great learning materials, tell me, Thanks.










    share|improve this question



























      0












      0








      0


      0






      Here is the gif:
      enter image description here



      There are several features:




      • Fade in and immediately out.

      • It has margin. Because the default effect is match parent width.


      Now I have already solved the margin problem. But I don't know how to achieve the animation effect. And here's my code:



      snackbar_animation.xml:



      <?xml version="1.0" encoding="utf-8"?>
      <set xmlns:android="http://schemas.android.com/apk/res/android"
      android:duration="500"
      android:fillAfter="true"
      android:shareInterpolator="true">

      <alpha
      android:fromAlpha="0.1"
      android:toAlpha="1" />

      <scale
      android:fromXScale="0.5"
      android:fromYScale="0.0"
      android:toXScale="1"
      android:toYScale="1"/>

      </set>


      MainActivity:



      public class MainActivity extends AppCompatActivity implements View.OnClickListener{

      private Button snackbar;
      private CoordinatorLayout coordinatorLayout;

      @Override
      protected void onCreate(@Nullable Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);

      setContentView(R.layout.snackbar_test);

      coordinatorLayout = findViewById(R.id.coordinator);

      snackbar = findViewById(R.id.show_snackbar);
      snackbar.setOnClickListener(this);
      }

      @Override
      public void onClick(View view) {
      switch (view.getId()){
      case R.id.show_snackbar:
      showSnackbar();
      break;
      }
      }

      private void showSnackbar(){
      Snackbar snackbar = Snackbar.make(coordinatorLayout,"i am a snack bar",Snackbar.LENGTH_SHORT);

      View sbView = snackbar.getView();

      // add animation
      Animation animation = AnimationUtils.loadAnimation(this,R.anim.snackbar_animation);
      sbView.setAnimation(animation);

      // modify margin
      CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) sbView.getLayoutParams();
      params.setMargins(params.leftMargin + 50,
      params.topMargin,
      params.rightMargin + 50,
      params.bottomMargin + 50);

      sbView.setLayoutParams(params);

      // show snackbar
      snackbar.show();
      }


      activity_main.xml:



      <?xml version="1.0" encoding="utf-8"?>
      <android.support.design.widget.CoordinatorLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/coordinator"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent">

      <Button
      android:id="@+id/show_snackbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="8dp"
      android:paddingTop="10dp"
      android:text="show snackbar" />

      </android.support.design.widget.CoordinatorLayout>


      If there are something else I need to know about this question, just comment below this question.such as: value animation or other things.I am new to the animation, so if you know the great learning materials, tell me, Thanks.










      share|improve this question
















      Here is the gif:
      enter image description here



      There are several features:




      • Fade in and immediately out.

      • It has margin. Because the default effect is match parent width.


      Now I have already solved the margin problem. But I don't know how to achieve the animation effect. And here's my code:



      snackbar_animation.xml:



      <?xml version="1.0" encoding="utf-8"?>
      <set xmlns:android="http://schemas.android.com/apk/res/android"
      android:duration="500"
      android:fillAfter="true"
      android:shareInterpolator="true">

      <alpha
      android:fromAlpha="0.1"
      android:toAlpha="1" />

      <scale
      android:fromXScale="0.5"
      android:fromYScale="0.0"
      android:toXScale="1"
      android:toYScale="1"/>

      </set>


      MainActivity:



      public class MainActivity extends AppCompatActivity implements View.OnClickListener{

      private Button snackbar;
      private CoordinatorLayout coordinatorLayout;

      @Override
      protected void onCreate(@Nullable Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);

      setContentView(R.layout.snackbar_test);

      coordinatorLayout = findViewById(R.id.coordinator);

      snackbar = findViewById(R.id.show_snackbar);
      snackbar.setOnClickListener(this);
      }

      @Override
      public void onClick(View view) {
      switch (view.getId()){
      case R.id.show_snackbar:
      showSnackbar();
      break;
      }
      }

      private void showSnackbar(){
      Snackbar snackbar = Snackbar.make(coordinatorLayout,"i am a snack bar",Snackbar.LENGTH_SHORT);

      View sbView = snackbar.getView();

      // add animation
      Animation animation = AnimationUtils.loadAnimation(this,R.anim.snackbar_animation);
      sbView.setAnimation(animation);

      // modify margin
      CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) sbView.getLayoutParams();
      params.setMargins(params.leftMargin + 50,
      params.topMargin,
      params.rightMargin + 50,
      params.bottomMargin + 50);

      sbView.setLayoutParams(params);

      // show snackbar
      snackbar.show();
      }


      activity_main.xml:



      <?xml version="1.0" encoding="utf-8"?>
      <android.support.design.widget.CoordinatorLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/coordinator"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent">

      <Button
      android:id="@+id/show_snackbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="8dp"
      android:paddingTop="10dp"
      android:text="show snackbar" />

      </android.support.design.widget.CoordinatorLayout>


      If there are something else I need to know about this question, just comment below this question.such as: value animation or other things.I am new to the animation, so if you know the great learning materials, tell me, Thanks.







      android animation material-design snackbar






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 2 at 0:05









      Md. Zakir Hossain

      586416




      586416










      asked Sep 8 '18 at 1:15









      BluzLzyBluzLzy

      12




      12
























          1 Answer
          1






          active

          oldest

          votes


















          0














          Read this. setAnimation() just queues an animation. It doesn't actually start anything. SnackBar doesn't call startAnimation when it's show, either.



          However, even if you use startAnimation(), your code probably won't work as-is. You need to initially set the scale of your SnackBar to 0, so it's at the proper starting value.



          You should use SnackBar#setCallback() and then start your show animation inside the onShow() method. Set your dismiss animation inside the onDismiss() method.






          share|improve this answer
























          • Actually, setAnimation() also work. What confuse me is that how the effect done with animation xml.Because snackbar has default animation from bottom to top, but now, the effect i want is fade in.

            – BluzLzy
            Sep 8 '18 at 4:17













          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52231190%2fhow-to-achieve-this-effect-in-snackbar%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          Read this. setAnimation() just queues an animation. It doesn't actually start anything. SnackBar doesn't call startAnimation when it's show, either.



          However, even if you use startAnimation(), your code probably won't work as-is. You need to initially set the scale of your SnackBar to 0, so it's at the proper starting value.



          You should use SnackBar#setCallback() and then start your show animation inside the onShow() method. Set your dismiss animation inside the onDismiss() method.






          share|improve this answer
























          • Actually, setAnimation() also work. What confuse me is that how the effect done with animation xml.Because snackbar has default animation from bottom to top, but now, the effect i want is fade in.

            – BluzLzy
            Sep 8 '18 at 4:17


















          0














          Read this. setAnimation() just queues an animation. It doesn't actually start anything. SnackBar doesn't call startAnimation when it's show, either.



          However, even if you use startAnimation(), your code probably won't work as-is. You need to initially set the scale of your SnackBar to 0, so it's at the proper starting value.



          You should use SnackBar#setCallback() and then start your show animation inside the onShow() method. Set your dismiss animation inside the onDismiss() method.






          share|improve this answer
























          • Actually, setAnimation() also work. What confuse me is that how the effect done with animation xml.Because snackbar has default animation from bottom to top, but now, the effect i want is fade in.

            – BluzLzy
            Sep 8 '18 at 4:17
















          0












          0








          0







          Read this. setAnimation() just queues an animation. It doesn't actually start anything. SnackBar doesn't call startAnimation when it's show, either.



          However, even if you use startAnimation(), your code probably won't work as-is. You need to initially set the scale of your SnackBar to 0, so it's at the proper starting value.



          You should use SnackBar#setCallback() and then start your show animation inside the onShow() method. Set your dismiss animation inside the onDismiss() method.






          share|improve this answer













          Read this. setAnimation() just queues an animation. It doesn't actually start anything. SnackBar doesn't call startAnimation when it's show, either.



          However, even if you use startAnimation(), your code probably won't work as-is. You need to initially set the scale of your SnackBar to 0, so it's at the proper starting value.



          You should use SnackBar#setCallback() and then start your show animation inside the onShow() method. Set your dismiss animation inside the onDismiss() method.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Sep 8 '18 at 1:49









          TheWandererTheWanderer

          7,55521129




          7,55521129













          • Actually, setAnimation() also work. What confuse me is that how the effect done with animation xml.Because snackbar has default animation from bottom to top, but now, the effect i want is fade in.

            – BluzLzy
            Sep 8 '18 at 4:17





















          • Actually, setAnimation() also work. What confuse me is that how the effect done with animation xml.Because snackbar has default animation from bottom to top, but now, the effect i want is fade in.

            – BluzLzy
            Sep 8 '18 at 4:17



















          Actually, setAnimation() also work. What confuse me is that how the effect done with animation xml.Because snackbar has default animation from bottom to top, but now, the effect i want is fade in.

          – BluzLzy
          Sep 8 '18 at 4:17







          Actually, setAnimation() also work. What confuse me is that how the effect done with animation xml.Because snackbar has default animation from bottom to top, but now, the effect i want is fade in.

          – BluzLzy
          Sep 8 '18 at 4:17






















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52231190%2fhow-to-achieve-this-effect-in-snackbar%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Mossoró

          Error while reading .h5 file using the rhdf5 package in R

          Pushsharp Apns notification error: 'InvalidToken'