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.
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.
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
Related
I want to make one application which contains multiple choice question. Each question has three option. I want to show that option with one background image. And also want to change the color of that image randomly for each question. How can i do that?
It is possible to create list view by putting differnt background image for each row?
Result.xml
<LinearLayout
android:id="#+id/linearlayoutans"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:layout_toLeftOf="#+id/chrono"
android:orientation="horizontal" >
<TextView
android:id="#+id/txt_ans_true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/ic_launcher"
android:gravity="center"
android:textColor="#000000" />
<TextView
android:id="#+id/txt_ans_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/ic_launcher"
android:gravity="center"
android:textColor="#000000" />
<TextView
android:id="#+id/txt_ans_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/ic_launcher"
android:gravity="center"
android:textColor="#000000" />
</LinearLayout>
It is possible to create list view by putting differnt background
image for each row?
Yes. Take a look at articles on the internet that back a listview with a custom adapter and a custom view. This is done from the getView() method and there is no shortage of examples / tutorials out there.
I have RelativeLayouts in HorizontalScrollView. When a user clicks on one of the layouts (or any of its childs) I need to change the background color of the certain RelativeLayout and get its ID for further process. I saw this might be done with DuplicateParentState or with onTouchEvent. Which way is recommended?
My XML file after editing the XML file as proposed:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<youme.appyoume.com.ExDialog>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:clickable="true"
android:duplicateParentState="true"
android:onClick="onClick"
android:src="#drawable/ic_launcher" />
<EditText
android:id="#+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:duplicateParentState="true"
android:ems="10"
android:focusable="false"
android:focusableInTouchMode="false"
android:inputType="textMultiLine"
android:text="text" >
<requestFocus />
</EditText>
</youme.appyoume.com.ExDialog>
</RelativeLayout>
Thanks,
Simon
If you want to use the custom class youve created in your xml you just use the entire root name of the object. So for instance if you have a class in
com.your.package.customButton
you would write in your xml
<RelativeLayout
...layoutstuff config>
<com.your.package.customButton
...customButton layout config/>
</RelativeLayout>
if your subclassing a relativelayout you would use it like this
<youme.appyoume.com.ExDialog
...layout setup stuff>
<Button
...button setup stuff
/>
</youme.appyoume.com.ExDialog>
You could always assign a tag to it for future reference using setTag and getTag and just use setOn Click Listener and put what ever you need to happen in there
I'd like to recreate the CheckedTextView's functionality using my own custom views so I can have two TextViews on the left with a CheckBox on the right, centered vertically between the two TextViews. I have the Layout working for it, which I will include below. I also have it so that when you click on the outer LinearLayout (LinearLayout1) it will pass that click to the checkbox. The only thing that I can't figure out is when you press down on a checkbox it briefly highlights the checkbox (in yellow on my device) before marking it checked. I'd like to have it do the same if you touch anywhere on the outer LinearLayout, but I don't know where I'd need to hook in to make that happen.
Here is my layout.xml
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/LinearLayout1">
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/LinearLayout2">
<TextView
android:id="#+id/FieldValueTextView"
android:text="Value"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/FieldLabelTextView"
android:text="Label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<CheckBox
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toRightOf="#id/LinearLayout2"
android:id="#+id/CheckBox"
android:gravity="center_vertical" />
</LinearLayout>
Thanks,
Dan
The problem I was experiencing was solved by putting the following android:focusable="false" on the CheckBox and the two TextViews so that when the ListView is clicked, it gets the focus, not the inner views.
Hope that helps someone else.
I am trying a task that should probably be simple..I want one button at the bottom across the bottom of the screen (floating preferably), while I have a scrollable list above that (I was able to do this in a tutorial with a simple listview and buitton).But, my list is a LinearLayout that I fill with a SimpleCursorAdapter and a viewBinder. Since I am using this LinearLayout I keep getting One button per line item, instead of one at the bottom of the screen. I have tried wrapping it with a table layout, relative layout, using two LinearLayouts, etc. Every time I get one button per line. Is this because of the way I am getting the data with a cursor adapter and filling it into the listview? Do I need to use a "merge" in my xml file? Is there a way to make two xml files and then call them both? Do I need to switch to a ListView or another way of displaying the data? This is my first app that I am trying start to finish on my own, so some of this stuff trips me up. I will include my code for the LinearLayout, please note that this is just the list without my extra button added (i deleted all my failed attempts). So I would be looking to modify the code below to contain one button that floats at the bottom of the screen all the time.
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="290dp"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:hapticFeedbackEnabled="true">
<Button
android:id="#+id/BtnToClick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="myClickHandler"
android:drawableLeft="#+drawable/android_button"
android:gravity="left|center_vertical"
android:background="#android:color/transparent"
android:hapticFeedbackEnabled="true"
android:layout_weight=".1">
</Button>
<TextView android:text=""
android:id="#+id/tvViewRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone">
</TextView>
<TextView android:text="#+id/text11"
android:id="#+id/text11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone">
</TextView>
<TextView
android:id="#+id/text5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:gravity="left|center_vertical"
android:layout_weight=".20"/>
<TextView
android:id="#+id/text9"
android:layout_column="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:gravity="center|center_vertical"
android:layout_weight=".1"/>
<TextView
android:id="#+id/text10"
android:layout_column="6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:gravity="left|center_vertical"
android:layout_weight=".15"/>
<TextView
android:id="#+id/text12"
android:layout_column="8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:padding="3dip"
android:gravity="left|center_vertical" />
<Button
android:id="#+id/BtnToClick2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="myClickHandler3"
android:gravity="center|center_vertical"
android:background="#+drawable/coup0a"
android:hapticFeedbackEnabled="true"
>
</Button>
Thanks in advance!
-Joe
You need to add the button as a footer or a header according to your needs. You can try this code .The R.layout.header and footer are separate xml layout files which you would have to define.
View header = inflater.inflate(R.layout.header,null);
View footer = inflater.inflate(R.layout.footer,null);
addHeaderView(header);
addFooterView(footer);
You should absolutely use a listview for this job. Listviews are highly optimized for displaying many entries. Just let your activity extend from a ListActivity and create a layout xml file with a listview widget that has the id "#android:id/list" and the listview activity will hook onto that list automatically. You are free to place other widgets in the layout aswell. Here is an example layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<Button
android:id="#+id/chooseOther"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/add_fav"/>
</LinearLayout>
It has a list with a button sitting on the bottom of the screen at all times, even if you have a long list of items.
So, I have this nice little view that I've made, which basically shows two buttons with some status labels. Nothing too complicated.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical">
<LinearLayout android:orientation="horizontal"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<ToggleButton android:text="ToggleButton" android:id="#+id/toggleButton1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/on_off">
</ToggleButton>
<TextView android:text="TextView" android:id="#+id/textView1"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_marginLeft="20px" android:layout_marginRight="20px"
android:layout_marginTop="3dp" android:layout_marginBottom="3dp">
</TextView>
<ImageButton android:src="#drawable/preferences"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:id="#+id/imageButton2" android:background="#android:color/transparent">
</ImageButton>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:id="#+id/view_monday" android:textSize="10dp" android:layout_marginRight="3dp"
android:layout_height="wrap_content" android:layout_width="wrap_content" android:textColor="#2F4F4F"
android:text="#string/monday_short"></TextView>
<TextView android:id="#+id/view_tuesday" android:textSize="10dp" android:layout_marginRight="3dp"
android:layout_height="wrap_content" android:layout_width="wrap_content" android:textColor="#2F4F4F"
android:text="#string/tuesday_short"></TextView>
<TextView android:id="#+id/view_wednesday" android:textSize="10dp" android:layout_marginRight="3dp"
android:layout_height="wrap_content" android:layout_width="wrap_content" android:textColor="#2F4F4F"
android:text="#string/wednesday_short"></TextView>
<TextView android:id="#+id/view_thursday" android:textSize="10dp" android:layout_marginRight="3dp"
android:layout_height="wrap_content" android:layout_width="wrap_content" android:textColor="#2F4F4F"
android:text="#string/thursday_short"></TextView>
<TextView android:id="#+id/view_friday" android:textSize="10dp" android:layout_marginRight="3dp"
android:layout_height="wrap_content" android:layout_width="wrap_content" android:textColor="#2F4F4F"
android:text="#string/friday_short"></TextView>
<TextView android:id="#+id/view_saturday" android:textSize="10dp" android:layout_marginRight="3dp"
android:layout_height="wrap_content" android:layout_width="wrap_content" android:textColor="#2F4F4F"
android:text="#string/saturday_short"></TextView>
<TextView android:id="#+id/view_sunday" android:textSize="10dp" android:layout_marginRight="3dp"
android:layout_height="wrap_content" android:layout_width="wrap_content" android:textColor="#2F4F4F"
android:text="#string/sunday_short"></TextView>
</LinearLayout>
</LinearLayout>
And I want to add it to my main activity with the following code:
LinearLayout root = (LinearLayout)findViewById(R.id.alarms);
View newView = View.inflate(this, R.layout.alarm, null);
alarms.add(newView);
However, it seems as if I can't add more than one of them, and I'm not sure why, or how to get around this problem to be able to add multiple copies. Furthermore, I don't know how to access individual parts, as they would all have the same id.
Thanks,
Tim
How are you trying to add the multiple copies to the 'root' LinearLayout?
If you're simply trying to call addView(newView) twice, then you're trying to add the same View object reference twice over. This is wrong because you're trying to add the same View object reference twice. I'm not entirely sure what the defined behaviour is when you do this, but I assume that addView() performs no action the second time because it checks that it already holds a reference to newView (would be grateful if anyone could confirm whether that's right or wrong).
So you need to inflate two separate instances of your child View I think, using say:
View newView0 = View.inflate(this, R.layout.alarm, null);
View newView1 = View.inflate(this, R.layout.alarm, null);
And then add them individually.
I think you'd then get around the problem of duplicate IDs by calling findViewById() on the actual child Views, as opposed to the parent:
newView0.findViewById( someID )
Update: Just tested the code in Eclipse for you. I added two child Views created from your XML file to a LinearLayout, and then changed a property (background colour to blue) of one of the Views within the second child View:
LinearLayout root = new LinearLayout(this);
LinearLayout newView0 = (LinearLayout)View.inflate(this, R.layout.main, null);
LinearLayout newView1 = (LinearLayout)View.inflate(this, R.layout.main, null);
root.addView(newView0);
root.addView(newView1);
setContentView(root);
newView1.findViewById(R.id.view_monday).setBackgroundColor(0xff0000ff);
Try to inflate the same view every time that you want to add the view. For example, if you're adding a view every time that a button is pressed you will want to declare the view outside of onClick() but assign the view inside the onCLick() method.