• Stars
    star
    1,356
  • Rank 34,645 (Top 0.7 %)
  • Language
    Java
  • License
    Apache License 2.0
  • Created almost 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ’³ A quick and easy flip view through which you can create views with two sides like credit cards, poker cards etc.

New in the EasyFlipViewΒ  The article on how this library was created is now published. You can read it on this link here. β†’.

πŸ’³ EasyFlipView

Codacy Badge Build Status Download Android Arsenal API Say Thanks!

Built with ❀︎ by Wajahat Karim and contributors

A quick and easy flip view through which you can create views with two sides like credit cards, poker cards etc.

βœ”οΈ Changelog

Changes exist in the releases tab.

πŸ’» Installation

Add this in your app's build.gradle file:

dependencies {
  implementation 'com.wajahatkarim:EasyFlipView:3.0.3'
}

New in the EasyFlipView From the version 3.0.0, this library will only support Android X naming artifacts. If you want to use the android.support versions, then use 2.1.2 version.

Or add EasyFlipView as a new dependency inside your pom.xml

<dependency> 
  <groupId>com.wajahatkarim</groupId>
  <artifactId>EasyFlipView</artifactId> 
  <version>3.0.3</version>
  <type>pom</type> 
</dependency>

❔ Usage

XML

EasyFlipView In XML layouts("Vertical")

<com.wajahatkarim3.easyflipview.EasyFlipView
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	app:flipOnTouch="true"
	app:flipEnabled="true"
	app:flipDuration="400"
	app:flipType="vertical"
	app:flipFrom="front"
	app:autoFlipBack="true"
	app:autoFlipBackTime="1000"
	>

	<!-- Back Layout Goes Here -->
	<include layout="@layout/flash_card_layout_back"/>
        
	<!-- Front Layout Goes Here -->
	<include layout="@layout/flash_card_layout_front"/>

</com.wajahatkarim3.easyflipview.EasyFlipView>

EasyFlipView In XML layouts("Horizontal")

<com.wajahatkarim3.easyflipview.EasyFlipView
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	app:flipOnTouch="true"
	app:flipEnabled="true"
	app:flipDuration="400"
	app:flipFrom="right"
	app:flipType="horizontal"
	app:autoFlipBack="false"
	>

	<!-- Back Layout Goes Here -->
	<include layout="@layout/flash_card_layout_back"/>

	<!-- Front Layout Goes Here -->
	<include layout="@layout/flash_card_layout_front"/>

</com.wajahatkarim3.easyflipview.EasyFlipView>

🎨 Customizations & Attributes

All customizable attributes for EasyFlipView

Attribute Name Default Value Description
app:flipOnTouch="true" true Whether card should be flipped on touch or not.
app:flipDuration="400" 400 The duration of flip animation in milliseconds.
app:flipEnabled="true" true If this is set to false, then it won't flip ever in Single View and it has to be always false for RecyclerView
app:flipType="horizontal" vertical Whether card should flip in vertical or horizontal
app:flipType="horizontal" vertical Whether card should flip in vertical or horizontal
app:flipFrom="right" app:flipFrom="back" left front Whether card should flip from left to right Or right to left(Horizontal type) or car should flip to front or back(Vertical type)
app:autoFlipBack="true" false If this is set to true, then he card will be flipped back to original front side after the time set in autoFlipBackTime.
app:autoFlipBackTime="1000" 1000 The time in milliseconds (ms), after the card will be flipped back to original front side.

In Code (Java)

// Flips the view with or without animation
mYourFlipView.flipTheView();
mYourFlipView.flipTheView(false);

// Sets and Gets the Flip Animation Duration in milliseconds (Default is 400 ms)
mYourFlipView.setFlipDuration(1000);
int dur = mYourFlipView.getFlipDuration();

// Sets and gets the flip enable status (Default is true)
mYourFlipView.setFlipEnabled(false);
boolean flipStatus = mYourFlipView.isFlipEnabled();

// Sets and gets the flip on touch status (Default is true)
mYourFlipView.setFlipOntouch(false);
boolean flipTouchStatus = mYourFlipView.isFlipOnTouch();

// Get current flip state in enum (FlipState.FRONT_SIDE or FlipState.BACK_SIDE)
EasyFlipView.FlipState flipSide = mYourFlipView.getCurrentFlipState();

// Get whether front/back side of flip is visible or not.
boolean frontVal = mYourFlipView.isFrontSide();
boolean backVal = mYourFlipView.isBackSide();

// Get/Set the FlipType to FlipType.Horizontal
boolean isHorizontal = mYourFlipView.isHorizontalType();
mYourFlipView.setToHorizontalType();

// Get/Set the FlipType to FlipType.Vertical
boolean isVertical = mYourFlipView.isVerticalType();
mYourFlipView.setToVerticalType();

// Get/Set if the auto flip back is enabled
boolean isAutoFlipBackEnabled = mYourFlipView.isAutoFlipBack();
mYourFlipView.setAutoFlipBack(true);

// Get/Set the time in milliseconds (ms) after the view is auto flip back to original front side
int autoflipBackTimeInMilliseconds = mYourFlipView.getAutoFlipBackTime();
mYourFlipView.setAutoFlipBackTime(2000);

// Sets the animation direction from left (horizontal) and back (vertical)
easyFlipView.setFlipTypeFromLeft();

// Sets the animation direction from right (horizontal) and front (vertical)
easyFlipView.setFlipTypeFromRight();

// Sets the animation direction from front (vertical) and right (horizontal)
easyFlipView.setFlipTypeFromFront();

// Sets the animation direction from back (vertical) and left (horizontal)
easyFlipView.setFlipTypeFromBack();

// Returns the flip type from direction. For horizontal, it will be either right or left and for vertical, it will be front or back.
easyFlipView.getFlipTypeFrom();

Flip Animation Listener

EasyFlipView easyFlipView = (EasyFlipView) findViewById(R.id.easyFlipView);
easyFlipView.setOnFlipListener(new EasyFlipView.OnFlipAnimationListener() {
            @Override
            public void onViewFlipCompleted(EasyFlipView flipView, EasyFlipView.FlipState newCurrentSide) 
            {
                
                // ...
                // Your code goes here
                // ...
                
            }
        });

❌ Known Issues

The EasyFlipView doesn't flip when used in RecyclerView. This is because the EasyFlipView uses the onTouch() method to intercept the touch events and flip the view accordingly. One easier solution is to disable the flipOnTouch attribute in XML by this.

app:flipOnTouch="false"

Now, your RecyclerView will scroll but the EasyFlipView will not flip or animate on touch etc. You will have to manually flip the view by calling the method mYourFlipView.flipTheView() inside the adapter or ViewHolder class of the RecyclerView. For example,

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {

    private List<Object> mData;
    private LayoutInflater mInflater;
    private ItemClickListener mClickListener;

    // data is passed into the constructor
    MyRecyclerViewAdapter(Context context, List<Object> data) {
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
    }

    // inflates the row layout from xml when needed
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.recyclerview_row, parent, false);
        return new ViewHolder(view);
    }

    // binds the data to the TextView in each row
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        String textData = (String) mData.get(position);
        holder.myTextView.setText(textData);
    }

    // total number of rows
    @Override
    public int getItemCount() {
        return mData.size();
    }


    // stores and recycles views as they are scrolled off screen
    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        TextView myTextView;
	EasyFlipView myEasyFlipView;

        ViewHolder(View itemView) {
            super(itemView);
            myTextView = itemView.findViewById(R.id.tvAnimalName);
	    myEasyFlipView = itemView.findViewById(R.id.myEasyFlipView);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
	    myEasyFlipView.flipTheView();
            if (mClickListener != null) {
	    	mClickListener.onItemClick(view, getAdapterPosition());
	    }
        }
    }

    // convenience method for getting data at click position
    String getItem(int id) {
        return mData.get(id);
    }

    // allows clicks events to be caught
    void setClickListener(ItemClickListener itemClickListener) {
        this.mClickListener = itemClickListener;
    }

    // parent activity will implement this method to respond to click events
    public interface ItemClickListener {
        void onItemClick(View view, int position);
    }
}

The EasyFlipView has a strange behaviour when the back and front layouts are a CardView. To workaround it, wrap your CardView in a FrameLayout or other ViewGroup.

πŸ’° Donations

This project needs you! If you would like to support this project's further development, the creator of this project or the continuous maintenance of this project, feel free to donate. Your donation is highly appreciated (and I love food, coffee and beer). Thank you!

PayPal

  • Donate $5: Thank's for creating this project, here's a tea (or some juice) for you!
  • Donate $10: Wow, I am stunned. Let me take you to the movies!
  • Donate $15: I really appreciate your work, let's grab some lunch!
  • Donate $25: That's some awesome stuff you did right there, dinner is on me!
  • Donate $50: I really really want to support this project, great job!
  • Donate $100: You are the man! This project saved me hours (if not days) of struggle and hard work, simply awesome!
  • Donate $2799: Go buddy, buy Macbook Pro for yourself!

Of course, you can also choose what you want to donate, all donations are awesome!

πŸ‘¨ Developed By

Wajahat Karim

πŸ’– Special Thanks

πŸ‘ How to Contribute

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

πŸ“ƒ License

Copyright 2018 Wajahat Karim

Licensed under the Apache License, Version 2.0 (the "License");
you may not use 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.

More Repositories

1

EasyFlipViewPager

πŸ“– The library for creating book and card flip animations in ViewPager in Android
Java
810
star
2

MediumClap-Android

πŸ‘ The Medium's Clapping Effect developed in Android
Kotlin
502
star
3

Flippable

A Jetpack Compose library for animating a flip transition between the front and back of something, such as a card.
Kotlin
463
star
4

EasyValidation

βœ”οΈ A text and input validation library in Kotlin for Android
Kotlin
397
star
5

Imagine

An simple image gallery app utilizing Unsplash API to showcase modern Android development architecture (MVVM + Kotlin + Retrofit2 + Hilt + Coroutines + Kotlin Flow + mockK + Espresso + Junit)
Kotlin
361
star
6

Today-I-Learned

πŸ“ Today I Learned - A list of all things I learn on daily basis.
353
star
7

DinoCompose

Chrome's Dino T-Rex game developed in Jetpack Compose
Kotlin
268
star
8

RoomExplorer

πŸ”Ž A quick and easy in-app database viewer and manager library for your Room databases.
Java
225
star
9

LongImageCamera

πŸ“· A camera view to capture long image merged from small captured images as it is in Shoparoo app available on Google Play!!
Java
115
star
10

EasyMoney-Widgets

The widgets (EditText and TextView) for support of money requirements like currency, number formatting, comma formatting etc.
Java
93
star
11

hugo-on-fire

πŸ”₯ A Github Action to build a Hugo site and deploy it on Firebase Hosting.
Dockerfile
61
star
12

FeedbackAnimSample

An attempt to code feedback animation UI inspired from https://site.uplabs.com/posts/web-feedback
Java
57
star
13

Hacktoberfest2019

A repository to contribute to Hacktoberfest 2019
55
star
14

SideMirror

An Android Studio plugin to mirror your android devices with scrcpy directly from Android Studio.
Java
54
star
15

BottomNavArchDemo

The demo project for Bottom Navigation with Navigation Architecture Components article
Kotlin
53
star
16

OCR-Test

An experiment about OCR in Android
Java
47
star
17

ComposeAnimationsDemo

Demo codes for droidcon EMEA 2020 talk about Jetpack Compose and Animations
Kotlin
39
star
18

SplashScreen

A demo project showcasing different methods to create splash screen in Android and discusses the details in the companion Medium article.
Kotlin
39
star
19

ActivityResultsDemo

A demo project to experiment with new Activity Results API in Android
Kotlin
37
star
20

Hacktoberfest2020

An example repository to learn how to contribute to open source for Hacktoberfest 2020
34
star
21

Android-Github-Actions

A sample app with multiple Github Actions for Android CI/CD
Kotlin
32
star
22

ComposeCodelab

An implementation of Compose Codelab and creation of Gmail App UI in Jetpack Compose live coding at 360Andev Conference
Kotlin
26
star
23

DBFlowManager

A quick and easy database manager plugin library for your DBFlow databases.
Java
26
star
24

Petnician

A pet adaption app for #AndroidDevChallenge week 1 made in Jetpack Compose
Kotlin
24
star
25

User-Online-Demo-Firestore

Managing users' presence like users' online and offline status using Firestore and Cloud Functions. Read more at: https://android.jlelse.eu/fmanaging-user-presence-with-firestore-in-android-a1146bdf101d
Kotlin
19
star
26

Movies-App

Kotlin
18
star
27

LottieWorld

A Lottie animations marketplace powered by LottieFiles
Kotlin
18
star
28

SoapRetrofitDemo

A simple demonstration of using SOAP services with Retrofit
Kotlin
14
star
29

ChessGameCPP

A chess game in C++ with multiplayer using console graphics.
C++
13
star
30

MVVM-GDG-Live

A demo app for live coding session hosted by GDG Live, Pakistan
Kotlin
11
star
31

BottomNavigationWithActivities

A example project of using BottomNavigation with Activities rather than Fragments.
Java
11
star
32

Quizca-UI-Concept

An attempt to code Quzica UI concept inspired from https://material.uplabs.com/posts/quzica-question-answer-ui-concept
Java
10
star
33

StackLayoutManager

A RecyclerView Layout Manager to scroll items with stacking
Kotlin
10
star
34

ZocDoc-Clone

A simple UI clone of ZocDoc app
Java
10
star
35

letime

A clock timer app for #AndroidDevChallenge week 2 made in Jetpack Compose
Kotlin
8
star
36

android-ci-cd

A Covid-19 pandemic worldwide stats tracker Android app
Kotlin
8
star
37

ToDoMvvm

Kotlin
5
star
38

ComposePlayground

A playground to learn the Jetpack Compose in Android Kotlin
Kotlin
5
star
39

LinksOfHugo

A code generator app to embed links in Hugo sites in cards like in Medium
Kotlin
5
star
40

DBFlowManager-Hyperion-Plugin

The Hyperion plugin of DBFlowManager for viewing DBFlow databases in the app.
Java
5
star
41

education_flutter

An Education demo app for Flutter Study Jam
Dart
4
star
42

ComposeBooksDemo

A repository for the talk to create a UI in Jetpack Compose
Kotlin
4
star
43

Snake-Game-With-AI

A snake game in C++ with multiplayer and computer AI snake using console graphics.
C++
4
star
44

MoviesApp

A simple movies app created using MVP, Kotlin, Data Binding, Dagger, Retrofit.
Kotlin
3
star
45

GeminiVertexDemo

Gemini Pro API Demo project in Android and Jetpack Compose
Kotlin
3
star
46

LottieLoading

An Android library for creating Loading dialogs/bars with Lottie animations
Kotlin
2
star
47

TipCalculator-MVVM-Example

An example created from learning the course
Kotlin
2
star
48

JCenter-Gradle-Scripts

Gradle Scripts for uploading AAR/JARs on jCenter from Android Studio
2
star
49

RoundedBottomDialog

A rounded BottomSheetDialog like as in Google Tasks and Google News app
Java
2
star
50

wajahatkarim3

2
star
51

CardsInMotion

A MotionLayout and motion editor example in Android
Kotlin
2
star
52

BottomNavigationArchitecture

An example to create bottom navigation with Navigation Architecture components
Kotlin
2
star
53

CircleProgressDrawable

An exprimental repository to learn about jcenter and bintray!
Java
2
star
54

netlify-url-shortener2

2
star
55

MVVM-Demo

An example app to learn MVVM with arch components
Kotlin
2
star
56

WhatsApp-FlutterDemo

A demo app to explore flutter by creating a clone of WhatsApp android UI.
Dart
2
star
57

HelloGitBasics

Some basics exporing for Github
1
star
58

Coroutines-DevFestKHI

A demo project for codelab at DevFest Karachi
1
star
59

GithubActions-Hugo-Test

An experiment to test Hugo site with Github Actions
HCL
1
star
60

HugoLinkify

Craft stunning link previews effortlessly with HugoLinkify, the ultimate Hugo-inspired link card generator for web developers.
Kotlin
1
star
61

EasyFirebase

An easy to use wrapper around Firebase APIs using Kotlin and DSL features
Kotlin
1
star
62

Hugo-On-Fire-Demo

πŸ’» A demo example site made in Hugo for the purpose of showing how Hugo-On-Fire Github Action works
HTML
1
star
63

Huginary

An Android app to upload images on Cloudinary and add in your Hugo sites
Kotlin
1
star