Animate Textviews within elements of a listview separately

Question

I’ve got a layout which consists of multiple views arranged in a relative layout. This layout will be inflated within an adapter of a listview.

Now I want to animate each element of my listview separately (not the element itself, but a textview within it), for instance on an onClick event. The animation should consist of a transition of a textview, and a fading of another one.

I don’t really have an idea here. I’ve got my ArrayList of Objects which holds the data for the elements of my listview. This ArrayList is given to the adapter which fills the textviews.

I guess I need a way now to approach the textviews. But how do I do that? I fiddled around with the getView Method of the Adapter class, without any success. To get the position of the clicked element within the adapter/arraylist is no problem at all. Any ideads/different approaches?

I tried to attach an ObjectAnimator in my Adapter, which looks like this:

ObjectAnimator animation = ObjectAnimator.ofFloat(holder.txtPlayerPoints,"x", 200);
animation.setDuration(2000);
holder.txtPlayerPoints.setTag(R.id.tag_animation_in,animation);

And in my onClick I tried to start it like so:

((ObjectAnimator ) textView.getTag(R.id.tag_animation_in)).start();

The reference to the textView is correct, but it didn't move. The Debugger also says that the "mTag" porperty of my textView is "null". Any suggestions?

Edit: Here's the layout of each element:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp">

<TextView
    android:layout_width="fill_parent"
    android:layout_height="@dimen/bar_upper_height"
    android:paddingLeft="@dimen/bar_name_padding"
    android:text="Hendrik"
    android:textSize="@dimen/font_player_name"
    android:id="@+id/txtNamePlayer"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:background="@color/txt_default"
    android:textStyle="bold"
    android:textColor="@android:color/white"
    android:gravity="center_vertical" />

<TextView
    android:layout_width="@dimen/bar_rank_width"
    android:layout_height="@dimen/bar_rank_height"
    android:layout_marginLeft="@dimen/bar_upper_margin"
    android:layout_marginBottom="@dimen/bar_upper_margin"
    android:textSize="@dimen/font_bar_info"
    android:text="1"
    android:id="@+id/txtRankPlayer"
    android:layout_alignLeft="@id/txtNamePlayer"
    android:layout_alignBottom="@id/txtNamePlayer"
    android:background="@android:color/white"
    android:textStyle="bold"
    android:textColor="@color/txt_default"
    android:gravity="center_vertical|center_horizontal" />

<ImageView
    android:layout_width="@dimen/bar_arrow_width"
    android:layout_height="@dimen/bar_rank_height"
    android:id="@+id/imgActivePlayer"
    android:layout_toRightOf="@id/txtRankPlayer"
    android:layout_marginLeft="@dimen/bar_upper_margin"
    android:layout_alignBottom="@id/txtNamePlayer"
    android:layout_marginBottom="@dimen/bar_upper_margin"
    android:background="@drawable/active_player" />

<TextView
    android:layout_width="@dimen/bar_rank_height"
    android:layout_height="@dimen/bar_rank_height"
    android:layout_marginRight="@dimen/bar_upper_margin"
    android:layout_marginBottom="@dimen/bar_upper_margin"
    android:text="12"
    android:id="@+id/txtPointsPlayer"
    android:layout_alignRight="@id/txtNamePlayer"
    android:layout_alignBottom="@id/txtNamePlayer"
    android:background="@android:color/white"
    android:textStyle="bold"
    android:textColor="@color/txt_default"
    android:textSize="@dimen/font_bar_info"
    android:gravity="center_vertical|center_horizontal" />

<TextView
    android:layout_width="@dimen/bar_rank_height"
    android:layout_height="@dimen/bar_rank_height"
    android:layout_marginRight="@dimen/bar_upper_margin"
    android:layout_marginBottom="@dimen/bar_upper_margin"
    android:layout_toLeftOf="@id/txtPointsPlayer"
    android:layout_alignBottom="@id/txtNamePlayer"
    android:text="0"
    android:id="@+id/txtCurrScorePlayer"
    android:background="@color/txt_disabled"
    android:textColor="@android:color/white"
    android:textSize="@dimen/font_bar_info"
    android:gravity="center_vertical|center_horizontal" />

<LinearLayout
    android:orientation="horizontal"
    android:id="@+id/aheadBehindPlayer"
    android:layout_width="fill_parent"
    android:layout_height="@dimen/bar_lower_height"
    android:layout_below="@+id/txtNamePlayer"
    android:layout_centerHorizontal="true"
    android:background="@color/txt_disabled"
    android:gravity="center_vertical"
    android:paddingLeft="20dp"
    android:paddingRight="20dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ahead"
        android:textSize="@dimen/font_bar_info"
        android:textColor="@android:color/white"
        android:id="@+id/textView2"
        android:layout_weight="1"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="15"
        android:textSize="@dimen/font_bar_info"
        android:textColor="@android:color/white"
        android:id="@+id/txtPlayerAhead"
        android:layout_weight="5"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="15"
        android:textColor="@android:color/white"
        android:textSize="@dimen/font_bar_info"
        android:id="@+id/txtPlayerBehind"
        android:textStyle="bold"
        android:gravity="right"
        android:layout_weight="5" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/behind"
        android:textColor="@android:color/white"
        android:textSize="@dimen/font_bar_info"
        android:id="@+id/textView5"
        android:gravity="right"
        android:layout_weight="1" />

</LinearLayout>

</RelativeLayout>

I want to animate txtPointsPLayer and txtCurrScorePlayer.

@mazen..Can u give us some code so as we can look into it..Also does this help you..http://www.webdefllo.com/android-listview-with-animation.php — SemperFi, Aug 08 '14 at 09:11

score 0 · Answer 1 · answered Aug 08 '14 at 09:14

0

Just attach an ObjectAnimator to each view (using setTag()) and then retrieve it later during onClick. To create an animator you can do something like:

  // Animate X from 0 to 200
  ObjectAnimator animation2 = ObjectAnimator.ofFloat(myview,"x", 200);
  animation2.setDuration(2000);
  myview.setTag(animation2)

And then during onClick you get a reference to it and start it

 ((ObjectAnimator ) myview.getTag()).start()

Hope it helps.

answered Aug 08 '14 at 09:14

FrankMonza

2,024
16
26

I would do this in the adapter, right? My problem still is, that I can't get a reference to the view. I think it should work with Adapter.getView. I think I give it another try and post the results. – Mazen Aug 08 '14 at 09:30
In the adapter you use "setTag()" then in on click you have a "position" with the position you can use the adapter to get the view back – FrankMonza Aug 08 '14 at 09:32
I propably miss the obvious here. But how do I get a reference to my textview of a specific element (I know it's position) from my adapter? – Mazen Aug 08 '14 at 09:40
http://stackoverflow.com/questions/257514/android-access-child-views-from-a-listview – FrankMonza Aug 08 '14 at 09:49
Thanks. I tried it, but the animation doesn't seem to work. (See my edited question above) – Mazen Aug 08 '14 at 12:07

score 0 · Answer 2 · answered Aug 08 '14 at 09:14

I guess this is pretty much opinion based. Even though, I'm not an android expert, I believe that whatever approach you choose you will still need to get a reference of each TextView inside the ListView, specify the OnClickListener and start the animation. So, I'd approach this in such a way that I don't keep my activity/fragment polluted with child-views-specific logic by creating a custom view that extends from the TextView class where I would define everything related to this TextViews. So, basically, the activity/fragment only needs to know how the ListView...it doesn't care about the items inside it or what the items are doing...this is from an architecture-specific perspective

Animate Textviews within elements of a listview separately

2 Answers2