Custom Transition Button in Android

3 min readDec 30, 2020

In this tutorial, we are going to create a custom transition button. The transition button gives an elegant look to the application, it saves space and it is eye-catching for the users. Here we will see how to use a transition button in android, this is just an example of how to use it you can use it as you want. I just give you an idea of the transition button.

Preview

Before going to implement it, let’s take a look at what we are going to create

Part 1: Installation

Gradle

dependencies {
……
implementation ‘com.royrodriguez:transitionbutton:0.2.0’
}

Part 2: How to use

Step 1

Add the Transition Button in your layout:

<com.royrodriguez.transitionbutton.TransitionButton
android:id=”@+id/transition_button”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:text=”Login”
<! — Choose nice colors →
app:defaultColor=”@color/colorAppAccent”
app:loaderColor=”@android:color/white”
android:textColor=”@android:color/white” />

Step 2

Setup your code

private TransitionButton transitionButton;
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
@Override
public void onClick(View v) {
// Start the loading animation when the user tap the button
transitionButton.startAnimation();
// Do your networking task or background work here.
handler.postDelayed(new Runnable() {
@Override
public void run() {
boolean isSuccessful = true;
// Choose a stop animation if your call was succesful or not
if (isSuccessful) {
transitionButton.stopAnimation(TransitionButton.StopAnimationStyle.EXPAND, new TransitionButton.OnAnimationStopEndListener() {
@Override
public void onAnimationStopEnd() {
Intent intent = new Intent(getBaseContext(), NewActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
startActivity(intent);
}
} else {
transitionButton.stopAnimation(TransitionButton.StopAnimationStyle.SHAKE, null);
}
}, 2000);
});
}

when you set boolean isSuccessful = true; you will see the expand animation that bring you to the next activity and

when to set boolean isSuccessful = false; it will show the shake animation.

Source code

activity_main.xml

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”@color/purple_500"
tools:context=”.MainActivity”>
<ImageView
android:id=”@+id/imageView”
android:layout_width=”80dp”
android:layout_height=”150dp”
android:src=”@drawable/ic_baseline_login_24"
app:layout_constraintTop_toTopOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”
android:layout_marginTop=”80dp”/>
<EditText
android:id=”@+id/editText”
android:layout_width=”match_parent”
android:layout_height=”44dp”
android:layout_marginStart=”32dp”
android:layout_marginTop=”80dp”
android:layout_marginEnd=”32dp”
android:background=”@drawable/rounded_background”
android:hint=”@string/main_email_hint”
android:paddingLeft=”16dp”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toBottomOf=”@+id/imageView” />
<EditText
android:id=”@+id/editText2"
android:layout_width=”match_parent”
android:layout_height=”44dp”
android:layout_marginStart=”32dp”
android:layout_marginTop=”16dp”
android:layout_marginEnd=”32dp”
android:background=”@drawable/rounded_background”
android:hint=”@string/main_password_hint”
android:paddingLeft=”16dp”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintHorizontal_bias=”0.0"
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toBottomOf=”@+id/editText” />
<com.royrodriguez.transitionbutton.TransitionButton
android:id=”@+id/transition_button”
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:layout_marginStart=”32dp”
android:layout_marginTop=”32dp”
android:layout_marginEnd=”32dp”
android:text=”@string/main_button”
android:textColor=”@android:color/white”
app:defaultColor=”#aa003c”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toBottomOf=”@+id/editText2"
app:loaderColor=”@android:color/white” />
<Button
android:id=”@+id/button”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@android:color/transparent”
android:text=”Forgot Password”
android:textColor=”@color/white”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toBottomOf=”@+id/transition_button”
app:layout_constraintVertical_bias=”0.054" />
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@android:color/transparent”
android:text=”New User? Register First”
android:textColor=”@color/white”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintHorizontal_bias=”0.497"
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toBottomOf=”@+id/button”
app:layout_constraintVertical_bias=”0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {
private TransitionButton transitionButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WindowUtils.makeStatusbarTransparent(this);
getSupportActionBar().hide();
transitionButton = findViewById(R.id.transition_button);
transitionButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Then start the loading animation when the user tap the button
transitionButton.startAnimation();
// Do your networking task or background work here.
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
boolean isSuccessful = true;
// Choose a stop animation if your call was succesful or not
if (isSuccessful) {
transitionButton.stopAnimation(TransitionButton.StopAnimationStyle.EXPAND, new TransitionButton.OnAnimationStopEndListener() {
@Override
public void onAnimationStopEnd() {
Intent intent = new Intent(getBaseContext(), NewActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
startActivity(intent);
}
});
} else {
transitionButton.stopAnimation(TransitionButton.StopAnimationStyle.SHAKE, null);
}
}
}, 2000);
}
});
}
}

I hope you find it useful. Use it in your next project and see the response of the users.