I have this custom listView:
<?xml version="1.0" encoding="utf-8"?>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tableRow">
<ImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="@drawable/ic_launcher"
android:contentDescription="@string/imdDesc" />
<TextView
android:id="@+id/titleList"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textSize="25sp"
android:autoText="false"
android:gravity="center_vertical|center|center_horizontal" />
</TableRow>
This adapter:
public class CustomList extends ArrayAdapter<String> {
private final Activity context;
private final String[] title;
private final int[] colors;
private final Integer[] imageId;
public CustomList(Activity context,String[] title,int[] colors, Integer[] imageId) {
super(context, R.layout.list_single, title);
this.context = context;
this.title = title;
this.imageId = imageId;
this.colors=colors;
}
@override
public View getView(int position, View view, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View rowView= inflater.inflate(R.layout.list_single, null, true);
TextView txtTitle = (TextView) rowView.findViewById(R.id.titleList);
ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
txtTitle.setText(title[position]);
txtTitle.setTextColor(Color.parseColor("#FFffffff"));
txtTitle.setBackgroundColor(colors[position]);
imageView.setImageResource(imageId[position]);
return rowView;
}
}
and this is how I bind them:
final CustomList adapter = new
CustomList(MainActivity.this, title, colors, imageId);
list = (ListView) findViewById(R.id.list);
list.setAdapter(adapter);
My list has 12 items. I need to resize the list when user click one item. If the user choses an Item for the first time, the list has to change its width to 1/3 of its original size and to double the height of the selected item. If an item is already selected in the list and the user selects another the old item has to go back to the original height and the new selected one has to double its height without any width changes.
I want to animate all the resizing for nice looking.
This is the animation for changing width:
public class ShrinkList extends Animation
{
int fromWidth;
View view;
int def;
public ShrinkList(View view) {
this.view = view;
this.fromWidth = view.getWidth();
def=fromWidth/3;
}
@override
public boolean willChangeBounds() {
return true;
}
@override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
}
@override
protected void applyTransformation(float interpolatedTime, Transformation t) {
int newWidth;
newWidth = (int) ((def - fromWidth) * interpolatedTime + fromWidth);
if (newWidth > def/3) {
view.getLayoutParams().width = newWidth;
view.requestLayout();
}
else{
view.getLayoutParams().width = def/3;
view.requestLayout();
}
}
}
and this one is for changing height:
public class Grow extends Animation
{
int fromHeight;
View view;
int defaultHeight;
public Grow(View view,int height) {
this.view = view;
this.fromHeight = view.getHeight();
defaultHeight=height;
}
@override
public boolean willChangeBounds() {
return true;
}
@override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
}
@override
protected void applyTransformation(float interpolatedTime, Transformation t) {
int newHeight;
newHeight = (int) (fromHeight / (1 - interpolatedTime));
if (newHeight < defaultHeight * 2) {
view.getLayoutParams().height = newHeight;
view.requestLayout();
}
else{
view.getLayoutParams().height = defaultHeight*2;
view.requestLayout();
}
}
}
and I play them like that:
if(h==0) { //first time the user selects an item =>change width and height
Animation a = new ShrinkList(list);
a.setInterpolator(new LinearInterpolator());
a.setDuration(1000);
list.setAnimation(a);
list.startAnimation(a);
}
Animation a1 = new Grow(view,height); //change only height
a1.setInterpolator(new LinearInterpolator());
a1.setDuration(300);
view.setAnimation(a1);
view.startAnimation(a1);
My problem is that when the list changes its width, the animation is not smooth at all and it only changes the width, not the height too.
How can I make the animation smoother and make the two animations play at once?
I have tried scaling the list, but that scales all the list. basically I need only to resize the textView within ListView nd changing layoutParams does that.
I have tried to insert the code from Grow.java into ShrinkList.Java in orefer to play both animations once and it only played the one from Grow.java.
<?xml version="1.0" encoding="utf-8"?>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tableRow">
<ImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="@drawable/ic_launcher"
android:contentDescription="@string/imdDesc" />
<TextView
android:id="@+id/titleList"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textSize="25sp"
android:autoText="false"
android:gravity="center_vertical|center|center_horizontal" />
</TableRow>
This adapter:
public class CustomList extends ArrayAdapter<String> {
private final Activity context;
private final String[] title;
private final int[] colors;
private final Integer[] imageId;
public CustomList(Activity context,String[] title,int[] colors, Integer[] imageId) {
super(context, R.layout.list_single, title);
this.context = context;
this.title = title;
this.imageId = imageId;
this.colors=colors;
}
@override
public View getView(int position, View view, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View rowView= inflater.inflate(R.layout.list_single, null, true);
TextView txtTitle = (TextView) rowView.findViewById(R.id.titleList);
ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
txtTitle.setText(title[position]);
txtTitle.setTextColor(Color.parseColor("#FFffffff"));
txtTitle.setBackgroundColor(colors[position]);
imageView.setImageResource(imageId[position]);
return rowView;
}
}
and this is how I bind them:
final CustomList adapter = new
CustomList(MainActivity.this, title, colors, imageId);
list = (ListView) findViewById(R.id.list);
list.setAdapter(adapter);
My list has 12 items. I need to resize the list when user click one item. If the user choses an Item for the first time, the list has to change its width to 1/3 of its original size and to double the height of the selected item. If an item is already selected in the list and the user selects another the old item has to go back to the original height and the new selected one has to double its height without any width changes.
I want to animate all the resizing for nice looking.
This is the animation for changing width:
public class ShrinkList extends Animation
{
int fromWidth;
View view;
int def;
public ShrinkList(View view) {
this.view = view;
this.fromWidth = view.getWidth();
def=fromWidth/3;
}
@override
public boolean willChangeBounds() {
return true;
}
@override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
}
@override
protected void applyTransformation(float interpolatedTime, Transformation t) {
int newWidth;
newWidth = (int) ((def - fromWidth) * interpolatedTime + fromWidth);
if (newWidth > def/3) {
view.getLayoutParams().width = newWidth;
view.requestLayout();
}
else{
view.getLayoutParams().width = def/3;
view.requestLayout();
}
}
}
and this one is for changing height:
public class Grow extends Animation
{
int fromHeight;
View view;
int defaultHeight;
public Grow(View view,int height) {
this.view = view;
this.fromHeight = view.getHeight();
defaultHeight=height;
}
@override
public boolean willChangeBounds() {
return true;
}
@override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
}
@override
protected void applyTransformation(float interpolatedTime, Transformation t) {
int newHeight;
newHeight = (int) (fromHeight / (1 - interpolatedTime));
if (newHeight < defaultHeight * 2) {
view.getLayoutParams().height = newHeight;
view.requestLayout();
}
else{
view.getLayoutParams().height = defaultHeight*2;
view.requestLayout();
}
}
}
and I play them like that:
if(h==0) { //first time the user selects an item =>change width and height
Animation a = new ShrinkList(list);
a.setInterpolator(new LinearInterpolator());
a.setDuration(1000);
list.setAnimation(a);
list.startAnimation(a);
}
Animation a1 = new Grow(view,height); //change only height
a1.setInterpolator(new LinearInterpolator());
a1.setDuration(300);
view.setAnimation(a1);
view.startAnimation(a1);
My problem is that when the list changes its width, the animation is not smooth at all and it only changes the width, not the height too.
How can I make the animation smoother and make the two animations play at once?
I have tried scaling the list, but that scales all the list. basically I need only to resize the textView within ListView nd changing layoutParams does that.
I have tried to insert the code from Grow.java into ShrinkList.Java in orefer to play both animations once and it only played the one from Grow.java.
