Animated Flip View is a dynamic and easy-to-use Android library that lets you flip views with smooth animations. You can flip views to the front or back in any direction and set custom durations for the animations. This library provides an intuitive way to add engaging visual transitions to your app, enhancing user experience without complex coding.
Min SDK : 21 - (Android – 5.0 Lollipop)
Max(Target) SDK : 34 - (Android - 14.0 UPSIDE_DOWN_CAKE)
Language : Kotlin
Latest Version : 2.0.2
License : Apache 2.0
Repository : JitPack
Compatible : Java, Kotlin
- Lightweight and Easy to Use: Enables smooth view flipping with minimal coding effort.
- Flexible Flip Directions: Supports flipping views in any direction—left, right, up, or down.
- Customizable Animations: You can set custom durations and easing functions for animations.
Step 1. Add the JitPack repository to your build file
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
mavenCentral()
maven { url 'https://www.jitpack.io' }
}
}
Step 2. Add the dependency
dependencies {
implementation 'com.github.HasnathJami:AnimatedFlipView:version'
}
Add this custom view to your layout or single-row design
<com.hasnath.jami.animated_flip_view.afv_custom_view.AnimatedFlipView
android:id="@+id/animatedFlipView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:frontFlipDuration="800"
app:backFlipDuration="800"
app:flipDirection="RIGHT_TO_LEFT"/>flipDirection = {RIGHT_TO_LEFT, LEFT_TO_RIGHT, TOP_TO_BOTTOM, BOTTOM_TO_TOP}
Java
public class YourActivity extends AppCompatActivity {
private AnimatedFlipView flipView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_your);
flipView = findViewById(R.id.animatedFlipView);
// Set your front layout
View frontView = getLayoutInflater().inflate(R.layout.your_front_side_layout, null);
// Set your back layout
View backView = getLayoutInflater().inflate(R.layout.your_back_side_layout, null);
// Add front layout to parent view
flipView.setFrontView(frontView);
// Add back layout to parent view
flipView.setBackView(backView);
// Control the front view flipping with view clicking
frontView.findViewById(R.id.view_id).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flipView.flipToBack();
}
});
// Control the back view flipping with view clicking
backView.findViewById(R.id.view_id).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flipView.flipToFront();
}
});
// OR
// Handle the auto back view flipping
// frontView.findViewById(R.id.view_id).setOnClickListener(new View.OnClickListener() {
// @Override
// public void onClick(View v) {
// flipView.startAutoBackFlippingWithIntervals(1500);
// }
// });
}
@Override
protected void onDestroy() {
super.onDestroy();
flipView.removeHandler();
}
}Kotlin
class YourActivity : AppCompatActivity() {
private lateinit var flipView: AnimatedFlipView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_your)
flipView = findViewById(R.id.animatedFlipView)
// Set your front layout
val frontView = layoutInflater.inflate(R.layout.your_front_side_layout, null)
// Set your back layout
val backView = layoutInflater.inflate(R.layout.your_back_side_layout, null)
// Add front layout to parent view
flipView.setFrontView(frontView)
// Add back layout to parent view
flipView.setBackView(backView)
/* Control the front view flipping with view clicking */
frontView.findViewById<Your_View>(R.id.view_id).setOnClickListener {
flipView.flipToBack()
}
/* Control the back view flipping with view clicking */
backView.findViewById<Your_View>(R.id.view_id).setOnClickListener {
flipView.flipToFront()
}
//OR
/* Handle the auto back view flipping */
// frontView.findViewById<Your_View>(R.id.view_id).setOnClickListener {
// flipView.startAutoBackFlippingWithIntervals(delay = 1500)
}
}
// Release the handler when the screen destroys
override fun onDestroy() {
super.onDestroy()
flipView.removeHandler()
}
}Java
public class YourFragment extends Fragment {
private AnimatedFlipView flipView;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_your, container, false);
flipView = view.findViewById(R.id.animatedFlipView);
// Set your front layout
View frontView = inflater.inflate(R.layout.your_front_side_layout, null);
// Set your back layout
View backView = inflater.inflate(R.layout.your_back_side_layout, null);
// Add the front layout to parent view
flipView.setFrontView(frontView);
// Add the back layout to parent view
flipView.setBackView(backView);
// Control the front view flipping with view clicking
frontView.findViewById(R.id.view_id).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flipView.flipToBack();
}
});
// Control the back view flipping with view clicking
backView.findViewById(R.id.view_id).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flipView.flipToFront();
}
});
// OR
// Handle the auto back view flipping
// frontView.findViewById(R.id.view_id).setOnClickListener(new View.OnClickListener() {
// @Override
// public void onClick(View v) {
// flipView.startAutoBackFlippingWithIntervals(1500);
// }
// });
return view;
}
@Override
public void onDestroyView() {
super.onDestroyView();
if (flipView != null) {
flipView.removeHandler();
}
}
}Kotlin
class YourFragment : Fragment() {
private lateinit var flipView: AnimatedFlipView
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
val view = inflater.inflate(R.layout.fragment_your, container, false)
flipView = view.findViewById(R.id.animatedFlipView)
// Set your front layout
val frontView = inflater.inflate(R.layout.your_front_side_layout, null)
// Set your back layout
val backView = inflater.inflate(R.layout.your_back_side_layout, null)
// Add the front layout to parent view
flipView.setFrontView(frontView)
// Add the back layout to parent view
flipView.setBackView(backView)
/* Control the front view flipping with view clicking */
frontView.findViewById<Your_View>(R.id.view_id).setOnClickListener {
flipView.flipToBack()
}
/* Control the back view flipping with view clicking */
backView.findViewById<Your_View>(R.id.view_id).setOnClickListener {
flipView.flipToFront()
}
//OR
/* Handle the auto back view flipping */
// frontView.findViewById<Your_View>(R.id.view_id).setOnClickListener {
// flipView.startAutoBackFlippingWithIntervals(delay = 1500)
// }
return view
}
// Release the handler when the fragment view destroys
override fun onDestroyView() {
super.onDestroyView()
flipView?.removeHandler()
}
}Java
public class ViewHolder extends RecyclerView.ViewHolder {
private AnimatedFlipView flipView;
private View frontView;
private View backView;
public ViewHolder(@NonNull View itemView) {
super(itemView);
flipView = itemView.findViewById(R.id.animatedFlipView);
// Set your front layout
frontView = LayoutInflater.from(itemView.getContext()).inflate(R.layout.your_front_side_layout, null);
// Set your back layout
backView = LayoutInflater.from(itemView.getContext()).inflate(R.layout.your_back_side_layout, null);
// Set your front layout
flipView.setFrontView(frontView);
// Set your back layout
flipView.setBackView(backView);
// Control the front view flipping with view clicking
frontView.findViewById(R.id.view_id).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flipView.flipToBack();
}
});
// Control the back view flipping with view clicking
backView.findViewById(R.id.view_id).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flipView.flipToFront();
}
});
// OR
// Handle the auto back view flipping
// frontView.findViewById(R.id.view_id).setOnClickListener(new View.OnClickListener() {
// @Override
// public void onClick(View v) {
// flipView.startAutoBackFlippingWithIntervals(1500);
// }
// });
}
public void bind(Item item) {
// Bind data to your views here
// Add other bindings as needed
}
}
Kotlin
class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
private val flipView: AnimatedFlipView = itemView.findViewById(R.id.animatedFlipView)
// Set your front layout
private val frontView: View = LayoutInflater.from(itemView.context).inflate(R.layout.your_front_side_layout, null)
// Set your back layout
private val backView: View = LayoutInflater.from(itemView.context).inflate(R.layout.your_back_side_layout, null)
init {
// Set your front layout
flipView.setFrontView(frontView)
// Set your back layout
flipView.setBackView(backView)
/* Control the front view flipping with view clicking */
frontView.findViewById<Your_View>(R.id.view_id).setOnClickListener {
flipView.flipToBack()
}
/* Control the back view flipping with view clicking */
backView.findViewById<Your_View>(R.id.view_id).setOnClickListener {
flipView.flipToFront()
}
//OR
/* Handle the auto back view flipping */
// frontView.findViewById<Your_View>(R.id.view_id).setOnClickListener {
// flipView.startAutoBackFlippingWithIntervals(delay = 1500)
// }
}
fun bind(item: Item) {
// Bind data to your views here
// Add other bindings as needed
}
}
Contributions to the Animated Flip View library are welcome! Enhance the library with bug fixes, new features, or improvements. Your input makes it better for everyone. Visit the GitHub repository to collaborate with fellow developers.
Animated Flip View is under Apache 2.0 License, permitting personal and commercial use. You can use, modify, and distribute the library per the license terms.
Copyright 2024 Hasnath Jami Chowdhury
Licensed under the Apache License, Version 2.0 (the "License");
You won't be using this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.