ViewPager Gallery replacement - android

I have done enough searching and finally I am asking this question.
I am converting gallery of imageviews into Viewpager backed up by PagerAdapter. I was able to achieve this:-
In onpageselected I am getting the position which I am using to get the red border.
Problem:-
Only the left most imageview is returned in onpageselected(). The rightmost imageview can never come to left and thus cannot be selected. Further on touching an imageview onpageselected() does not get called. It only gets called when you swipe it.
Questions:-
How to centre the selected imageview?
How to get the imageview position on touching it?

Thanks to NathanZ he gave me some direction. Finally I had to set a OnClickListener() on the ImageView not the ViewPager.
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
MyImageView grpView = new MyImageView(ctxt);
final int temp=position;
grpView.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View v)
{
pos=temp;//This is the value what I am interested in
}
});
grpView.setLayoutParams(new LayoutParams((int)(109*density), (int)(109*density)));
myViewPager.addView(grpView);
return grpView;
}

Related

Gridview image issue (Edge image not using CustomImageView)

I have an odd issue. Basically I use a custom image view which I overwrite the draw method. The draw method just writes the tag of the image object.
I have a grid of all these custom image views. The issue stems from the edge image that it renders. Basically the image does not display any text (just the image) but when I scroll out and back again the text reappears for the image. I am just asking whether there is any way to actually render the text of the edge image and not have to scroll off screen and back.
Here is the getView code for my image adaptor:
#Override
public View getView(int arg0, View arg1, ViewGroup arg2) {
// TODO Auto-generated method stub
CustomImageView tmp;
if (arg1 == null) {
tmp = new CustomImageView("", cx, true);
} else {
tmp = (CustomImageView) arg1;
}
int Dimens = (int) getResources().getDimension(R.dimen.gridParam);
tmp.setPadding(3, 3, 3, 3);
tmp.setLayoutParams(new GridView.LayoutParams(Dimens, Dimens));
tmp.setTag("TESTIMG" + arg0);
tmp.setImageResource(mThumbIds[arg0]);
return tmp;
}
}
And here is the code for my gridview, its just a standard creation.
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdaptor(this));
Hopefully you can help me out. Just curious as to why this issue is occuring, maybe I left out something.
Any help would be appreciated. Thanks!

Multi layers viewPager

I need to create an app that has 2 special behaviors on a viewPager that has 3 pages:
On page 0, there are 2 images, one on top of the other. the background image doesn't move when going from page 0 to page 1 , but it will move when going from page 1 to page 2 (and vice versa) . On page 1, there is nothing besides the background image from page 0.
In short, to the user, it seems as if the image from page 0 actually unveils the content of page 1 when scrolling to it (since page 1's content is behind page 0).
Some pages would have on top views that move faster than the viewPager, providing an effect as if they float above it, in a semi-3d way . Maybe show up after half the page was scrolled.
Both special behaviors are very hard to think about, and I would like to ask for your suggestions of how to achieve them.
Another tricky thing is that I need to use an indicator of the viewPager, so even if I decide to use multiple viewPagers, I would have to deal with this issue too.
Copy the background image in both Page 0 and Page 1, and try changing the image offset in onPageScrolled callback to achieve your goal~
FragmentPic is a simple fragment with only one imageview child as iv
/*this method change position of image to move it against its parent and make it looks static to the screen */
public void changeImageOffset(int offset) {
RelativeLayout.LayoutParams lp = (LayoutParams) iv
.getLayoutParams();
lp.leftMargin = offset;
lp.rightMargin = -offset;
iv.setLayoutParams(lp);
}
in the viewPager activity
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
#Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
}
#Override
public void onPageScrolled(int position, float arg1, int arg2) {
((FragmentPic) mAdapter.getItem(position))
.changeImageOffset(arg2);
}
#Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
The above code can make the page1 static and the page2 covering it from right to left.

How to set the position of a button after animation?

I have a button (placed in a linearlayout) with animation. After the animation is completed (simple translateAnimation) I want that animated button to be enabled. I realized that using an animation only has an effect for the button drawable, so the clickable "place" stays at the original position.
layout= (LinearLayout) findViewById (R.id.newitemtext);
layout.setBackgroundResource(R.drawable.white_box);
btn = (Button) findViewById (R.id.btn);
moveLefttoRight = new TranslateAnimation(0,0 , 0, 200);
moveLefttoRight.setDuration(1000);
moveLefttoRight.setFillAfter(true);
animbutton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
layout.startAnimation(moveLefttoRight);
layout.setEnabled(true);
}
});
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Log.i("TAG", "CCIK");
}
});
The btn button is in the LinearLayout layout. How could I set the position after the animation? I tried to use setPadding but with no success.
Thanks in advance!
Use View.setLayoutParams(), to update a Views params - note that it depends on what kind of layout the view is inside as to how the params can be updated. For example, if your view is in a LinearLayout, then you will only be able to adjust params that relate to a LinearLayout (gravity, weight, width, height, etc.) so you would not be able to adjust the absolute X/Y coords. You may want to switch to something like a RelativeLayout to try and move the view to the final destination based on the location of other views.

ImageView Visibility Issue in Relative Layout

I've seen all sorts of code that makes me think that mine should work, but for some reason it does not. I've got an ImageView that animates vertically down another image and I want the mobile imageview to disappear once the animation is complete but it does not. The 'scanbar' imageview is the one in question. it is set as invisible in the XML and is made visible on a button press. I need it to go away when the animation is finished.
public class scan extends Activity {
EditText Quote;
private static final Random rgenerator = new Random();
ImageView scanbar;
public void scanLine() {
// Displays the scanline animation over the wireframe image
ImageView wireframe;
scanbar = (ImageView)findViewById(R.id.scanbar);
wireframe = (ImageView) findViewById(R.id.wireframe);
scanbar.setVisibility(View.VISIBLE);
// Super ultra-secret code
}
Animation.AnimationListener scanListener = new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
scanbar.setVisibility(View.INVISIBLE);
setResults();
}
};
The setResults(); call works properly, so I know that section of code is being executed. Anyone know what I'm doing wrong?
Will give this old question an answer just in case someone stumbles upon it like me.
Check out stickupkid's answer here: Android, setVisbility to gone not working in RelativeLayout. Call clearAnimation() on what ever view is doing the animation before calling View.INVISIBLE
I can confirm that: Calling clearAnimation() on the view that is doing the animation before calling View.INVISIBLE, or GONE does the trick.

Android: Animation in Gallery View?

When I use the Gallery widget, how do I get the images to say scale up & glow on being selected and scaled down & un-glow on being unselected?
All tutorials I've seen have this effect but I'm not able to see it...
Is there some kind of an animation that I have to attach to the Gallery?
Hope this is helpful. I manage to "simulate" the shrink/grow solution with the Gallery widget. Since they removed the getScale(), things get a little bit complicated. I think that this it's not the best solution at all, but at least I can live with it.
What I have found is that Gallery manages the focus EXTREMELY BAD. So, the first approach was to add a focus change listener on the ImageView displayed, but no luck there. Focus is a MESS there... in terms that, the selected image it's not the currently focused view. I have sent a mail to android-developers mailing list about some error on API doc (regarding the focusSearch()method and some focus contants).
Here's my solution to this problem:
Build an animation resource to 'grow' the image:
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1.0"
android:toXScale="1.10"
android:fromYScale="1.0"
android:toYScale="1.10"
android:duration="300"
android:pivotX="50%"
android:pivotY="50%"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fillAfter="false"/>
If you don't get what that means then you should proceed to read this
That will be our 'grow' effect, and you will need to save it in: res/anim/grow.xml or whatever name it suites you (but always in res/anim dir).
You can follow the resource guide from here to create a Gallery view. The ImageAdapter builds an ImageView every time that the Gallery object calls getView(). One workaround you could implement is adding a line to the getView() method that identifies a View with a position, this way:
...
i.setId(position);
...
With that line added to the getView() method of the ImageAdpater object, you can then unequivocally identify that view within a listener, for instance:
g.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
public void onItemSelected (AdapterView<?> parent, View v, int position, long id) {
Animation grow = AnimationUtils.loadAnimation(YourActivity.this, R.anim.grow);
View sideView = parent.findViewById(position - 1);
if (sideView != null)
((ImageView)sideView).setLayoutParams(new Gallery.LayoutParams(150, 100));
sideView = parent.findViewById(position + 1);
if (sideView != null)
((ImageView)sideView).setLayoutParams(new Gallery.LayoutParams(150, 100));
v.startAnimation(grow);
v.setLayoutParams(new Gallery.LayoutParams(170, 150));
}
public void onNothingSelected (AdapterView<?> parent) {
System.out.println("NOTHING SELECTED");
}
});
NOTE: You may notice that all the values from animation and from layout parameters has been choosen by me at hand. This is because i'm not going to clean code for you. And, this is just a workaround the BAD focus issue with this widget or the android view system. If focus were OK, then, all you need to do is set a focus change listener that makes the gros/shrink when it got focus/unfocused.
I hope this may help you to find a way around for your problem,
Regards,
New EDIT: This is the listener I have set, I also added the line i.clearAnimation() in the getView() method:
private class SelectListener implements AdapterView.OnItemSelectedListener {
private Animation grow;
private int last;
public SelectListener() {
grow = AnimationUtils.loadAnimation(RouteGallery.this, R.anim.grow);
last = 0;
}
public void onItemSelected (AdapterView<?> parent, View v, int position, long id) {
View sideView = parent.findViewById(last);
if (sideView != null && last != position)
sideView.clearAnimation();
v.startAnimation(grow);
last = position;
}
public void onNothingSelected (AdapterView<?> parent) {
}
}
You need to use an ImageSwitcher. The ImageSwitcher has methods for setting the in and out animations (when image is selected and deselected, or selected and replaced).
The following link has a good tutorial on how to use it in conjunction with the Gallery.
I implemented a similar animation like this:
final Animation shrink = AnimationUtils.loadAnimation(activity, R.anim.shrink);
shrink.setFillAfter(true);
gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
#Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
// This iterates through the views which are currently displayed on screen.
for (int k=0; k<gallery.getChildCount(); k++){
// Do whatever else you want, here.
// This is how you get a particular element of a view
ImageView background = (ImageView) gallery.getChildAt(k).findViewById(R.id.menu_item_background);
//clear animation
gallery.getChildAt(k).clearAnimation();
}
// Scale the selected one
view.startAnimation(shrink);
}
#Override
public void onNothingSelected(AdapterView<?> adapterView) {}
});

Categories

Resources