Instagram Background Animation in Android Studio Tutorial

Google+ Pinterest LinkedIn Tumblr +

Video is ready, Click Here to View ×


How to design UI for background animation like in Instragram’s sign up page with the XML Drawable and Transition and Java language in Android Studio.

My lovely app to work:
Wireframing:
– Mockplus: www.mockplus.com/?r=grace
– Pen and Book
– Balsamiq: www.balsamiq.com

User-Interface Designing
– Sketch App: www.sketchapp.com
– Gravit Designer: www.designer.io

Prototyping
– Flinto: www.flinto.com
– Marvelapp: www.marvelapp.com
– Invision: www.invisionapp.com

Collaborating
– Zeplin
– Abstract App

Communication
– Slack: www.slack.com
– Skype: www.skype.com
– Telegram: www.telegram.org

Task Management
– Basecamp: www.basecamp.com
– Trello: www.trello.com
– GetHarvest: www.getharvest.com

Development
– Sublime Text: www.sublimetext.com
– Android Studio
– XCode

Take My Course:
udemy.com/user/angga-risky

My Portfolio:
dribbble.com/anggarisky
behance.net/anggarisky

My Site:
anggarisky.com
garudapixel.com

Connect Me:
fb.me/anggariskys
instagram: anggarsky

Share.

About Author

27 Comments

  1. Great tutorial thank you very much … It is exactly what i needed to bring my apps to the next level, I am a student and its hard to find good practical tutorials ………… Thanks again : )

  2. i keep having error when i use relative layout ""Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.widget.RelativeLayout.getBackground()' on a null object reference"" how can resolve it??

  3. Hi can you help me ?

    I code this instragram animation like instagram. All its ok only this Main java.

    My code is:

    import android.graphics.drawable.AnimationDrawable;
    import android.support.constraint.ConstraintLayout;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.widget.Button;
    import android.view.View;
    import android.content.Intent;
    import android.appwidget.AppWidgetProvider;

    public class Main2Activity extends AppCompatActivity {

    Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate ( savedInstanceState );
    setContentView ( R.layout.activity_main2 );

    btn = findViewById ( R.id.button2 );
    btn.setOnClickListener ( new View.OnClickListener () {
    @Override

    public void onClick(View view) {
    Intent i = new Intent ( Main2Activity.this, Main3Activity.class );
    startActivity ( i );
    }

    } );
    }

    ConstraintLayout constraintLayout = findViewById ( R.id.layout );
    AnimationDrawable animationDrawable = ( AnimationDrawable ) constraintLayout.getBackground ();
    animationDrawable.setEnterFadeDuration(2000)
    animationDrawable.setExitFadeDuration(4000)
    animationDrawable.start()
    }

    I Have the problem with the end of code, errors.

    setEnterFadeDuration (is red)
    setExitFadeDuration (is red)
    start (is red too)

    I'M NEW ANDROID STUDIO ONLY TWO WEEK REALLY.
    I DONT KNOW HOW TO CODE PAST ONE ACTIVITY TO ANOTHER, AND CODE THE ANIMATION IN SAME JAVA MAIN FILES.

    I CREATE XML OF GRADIENT FILE LIKE YOU DO, I PUT LAYOUT ID IN THE XML FILE OF MAN.

    HOW I DO THAT ???

  4. Anyway of making this on a Linear Layout? I followed this code on one of my projects but i keep getting an unfortunately __ stoped working error. i changed constraintLayout to LinearLayout for the mainActivity(LoginActivity.java), but cant seem to make it work.

  5. very important tutorial ..great job bro.. i was looking for that kind of animation keep it up friend and please make more tutorials on custom animations and kindly share your resources with us.