Make Flashcards in Android Studio [closed]

Question

I am a newbie in android programming. I wanted to make an app that would have flashcards. These flashcards would have words and when I touch them, it will turn to show the meanings of the word.

I searched google. But I could not find any proper tutorial for making flashcards.

Thanks!

Answer 1

Welcome to Android Richa.

I have found some useful links for you:

Basically you are going to be working with animations and ImageViews. The best link in the list here for what you are trying to do is the "Flip animation explained".

Card tutorial

Curl/Flip animations

Flip animation explained

Cool flip card library

You will set up the layout of your card and then the Activity. Once that is in place you will make your animations in the XML.

I have found the code here:

Main Activity

public class MainActivity extends AppCompatActivity {

private AnimatorSet mSetRightOut;
private AnimatorSet mSetLeftIn;
private boolean mIsBackVisible = false;
private View mCardFrontLayout;
private View mCardBackLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    findViews();
    loadAnimations();
    changeCameraDistance();

}

private void changeCameraDistance() {
    int distance = 8000;
    float scale = getResources().getDisplayMetrics().density * distance;
    mCardFrontLayout.setCameraDistance(scale);
    mCardBackLayout.setCameraDistance(scale);
}

private void loadAnimations() {
    mSetRightOut = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.out_animation);
    mSetLeftIn = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.in_animation);
}

private void findViews() {
    mCardBackLayout = findViewById(R.id.card_back);
    mCardFrontLayout = findViewById(R.id.card_front);
}

public void flipCard(View view) {
    if (!mIsBackVisible) {
        mSetRightOut.setTarget(mCardFrontLayout);
        mSetLeftIn.setTarget(mCardBackLayout);
        mSetRightOut.start();
        mSetLeftIn.start();
        mIsBackVisible = true;
    } else {
        mSetRightOut.setTarget(mCardBackLayout);
        mSetLeftIn.setTarget(mCardFrontLayout);
        mSetRightOut.start();
        mSetLeftIn.start();
        mIsBackVisible = false;
    }
  } 
}

You are messing with the camera distance here to make sure the flipping animation is seen on screen. As it may cross the "Virtual Line" and not be seen at all.

Card Front XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:tint="@color/cardFront"
        android:padding="16dp"
        android:src="@drawable/rectangle"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/front"
        android:textColor="@color/white"
        style="@style/Base.TextAppearance.AppCompat.Display1"
        android:gravity="center"/>

</FrameLayout>

Card Back XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">



    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:tint="@color/cardBack"
        android:padding="16dp"
        android:src="@drawable/rectangle"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/back"
        android:textColor="@color/white"
        style="@style/Base.TextAppearance.AppCompat.Display1"
        android:gravity="center"/>


</FrameLayout>

Activity XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="blog.droidsonroids.pl.blogpost.MainActivity"
    android:onClick="flipCard">


    <FrameLayout
        android:id="@+id/card_back"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <include layout="@layout/card_back" />


    </FrameLayout>

    <FrameLayout
        android:id="@+id/card_front"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">
        <include layout="@layout/card_front" />

    </FrameLayout>


</FrameLayout>

In animation XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />


    <objectAnimator
        android:valueFrom="-180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:repeatMode="reverse"
        android:duration="@integer/anim_length" />

    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="@integer/anim_length_half"
        android:duration="0" />
</set>

Out Animation

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="180"
        android:propertyName="rotationY"
        android:duration="@integer/anim_length" />

    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="@integer/anim_length_half"
        android:duration="0" />
</set>