Custom Transition Button in Android

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

Part 1: Installation

Gradle

dependencies {

……

implementation ‘com.royrodriguez:transitionbutton:0.2.0’

}

Part 2: How to use

Step 1

<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

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

<?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.

Hi everyone, myself Golap an Android app developer with UI/UX designer.