I'm currently developing an android app and I would like to achieve an effect to which I haven't found an answer to, even after some searching.
The effect I would like to obtain is over an image. Usually when you press an image, you apply some sort of tint over the image in order to show some feedback, but I would like to go a little bit further, I wouldn't like to apply a tint but a sort os scale over the image.
E.g. I have the following image, Normal Image, and if I press the image (and while I keep it pressed), I would like the image to shrink a bit, like this Pressed Image
N.B.- The black part would not be part of the image, but part of the background. The image would only be the blue square.
Thank you for any help! :)
P.S.- I couldn't post the images here because I don't have enough reputation.
You need to set the onTouchListener of your ImageView that displays the image, so that it replaces the displayed image. This is the listener that runs when you press or unpress the view (in this case the image).
Sample Code:
ImageView iv = (ImageView)findViewById(R.id.my_image_view);
iv.setOnTouchListener(new ImageView.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent e) {
if (e.getAction()==MotionEvent.ACTION_DOWN)
// Write code here that sets the imageview to display the pressed image
else if (e.getAction()==MotionEvent.ACTION_UP)
// Write code here that sets the imageview to display the unpressed image
}
});
Reference to onTouchListener: http://developer.android.com/reference/android/view/View.OnTouchListener.html
Reference to ImageView (for replacing the displayed image):
http://developer.android.com/reference/android/widget/ImageView.html
Related
TL;DR: It looks fine when setting a drawable to ImageView (see attachment - top). Replacing it with a Bitmap (setImageBitmap) and setting again to the original (setImageBitmap(null) & setBackgroundResource(R...)) leads to the drawable being stretched (see atachment - bottom).
The ImageView element has a resource image when starting the app and it looks fine and not stretched. If the user puts his sign by using another activity, the ImageView is used to show a small thumbnail of his sign and the ImageView gets overwritten by using setImageBitmap().
The issue occurs, when user saves the draft and all fields get emptied. Emptying includes setImageBitmap(null)
and setBackGroundResource(R.drawable.ACTUAL_IMAGE_OF_IMG_VIEW).
After resetting the ImageView (deleting Bitmap and setting actual background), the Background-Image gets stretched (see attached picture):
Changing the orientation of the device (landscape and portrait) the image is normal again.
Also there are grid lines on the background of the image, which absolutely doesn't stem from the ressource image.
Would love to hear the way You would solve this.
Edit - Code:
// Inserting Bitmap
private void insertSignature(){
ivSign.setImageBitmap(signature);
}
// setting signature -> null and adding icon again as background
private void ResetInputFields(){
ivSign.setImageBitmap(null);
ivSign.setBackgroundResource(R.drawable.sign_pen);
// TRIED ALREADY:
// ivSign.setBackground(getResources().getDrawable(R.drawable.sign_pen));
}
add to your imageView's XML code
android:scaleType="fitCenter"
or
android:scaleType="centerInside"
and it will keep its original ratio
I have an activity which contains an image view that is scrollable -> the image is bigger than the phone's screen and therefore it is scrollable.
I want that several points of the image would be clickable.
how is it possible then if the image is scrollable and I also need to detect on which part of the image the user clicked?
thanks
Well you'll have to divide us the image in different portions if you want to provide that sort of functionality. Because an ImageView is one element which is capable of handling it's own trigger event for the whole image. It doesn't matter if you touch the middle, top-right, bottom-left, quarter to the right or anywhere. The only thing you can determine are the X and Y cordinators of where the touch was placed via the following function:
imageView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN){
String xCordinate = String.valueOf(event.getX()
String yCordinate = String.valueOf(event.getY();
}
return true;
}
});
Additionally, if you want to handle a different events on a single image based on what part/portion of the image was clicked, you'll have to hide elements which will trigger the event. In this case, you can use a frameLayout with ImageView on the back and 4 buttons on the top (top-left, top-right, bottom-left, bottom-right) and hide the buttons using the following code:
button.setVisibility(View.GONE);
And base your functionality around the onClickListener for the buttons.
Hope I am making sense.
How to change TRANSPARENT part of image set in imageview with another image?
Below is the main image, there is TRANSPARENT portion(here looks white), i want to set another image withing that portion of image.
any idea how to do it?
Question:
How to find TRANSPARENT portion starting point LEFT(x,y), RIGHT (x,y), BOTTOM LEFT (x,y), BOTTOM RIGHT(x,y) ? for image replacement.
How to process bitmap in runtime to add another image to make changes in imageview?
I've tried this to find transparent part of image.
You have a bitmap (B1) and there is only one rectangle transparent zone somewhere. And you want to place another bitmap (B2) inside it.
use monte-carlo method to find any transparent pixel on B1. You know
it's coordinates now.
go [left/right/top/bottom] from transparent pixel and find
first solid pixel. Now you know transparent rectangle coorditates.
There are several ways to put something inside transparent area. You can:
place second imageview (with B2) under the first one (with B1). Set B2 padding inside imageview accordingly transparent zone coordinates.
create new image from B1 and B2 and set it to imageview.
do it some other way...
try this example in this crop image with transparent part it will use full for you.
https://github.com/ketanpatel25/Image-Cropping-In-Transparent-Area
I use my own icon image as indicator for ExpandableListView, but the icon seems to be stretched, I tried to put the image file in /drawable and /drawable-hdpi with no luck. If I do not use my own icon, the built-in Android one looks nice, so I wonder is there any restriction on image dimension, or is there anything I've done wrong?
Thanks!
Whatever image you are using as your group indicator, make it a 9 patch (xxx.9.png) image and set its stretchable areas to around the border pixels (which probably may be transparent). It will prevent stretching of image from the middle.
The expandable list is a pain. It always stretches the icons. An easy solution is to use a nine patches images which contains only a stretchable pixel at both top and bottom. Thus only those two pixels are stretched and the rest of your image remains unmodified.
hope this make sense
If you want to do this all via coding, without using a different image, this is how I got this working.
(1) Setting the group indicator to null
(2) Including my custom group indicator in the group Layout.
(3) Having an groupClickListener that changes the state of you indicator.
Code Snippets :
(1) mListView.setGroupIndicator(null);
(2) Included my indicator in the group layout.
<ImageView
android:id="#+id/help_group_indicator"
android:layout_width="#dimen/help_group_indicator_dimension"
android:layout_height="#dimen/help_group_indicator_dimension"
android:layout_marginTop="#dimen/help_group_indicator_dimension"
android:src="#drawable/down_icon" />
(3)
mListView.setOnGroupClickListener(new OnGroupClickListener() {
#Override
public boolean onGroupClick(ExpandableListView parent, View clickedView, int groupPosition, long rowId) {
ImageView groupIndicator = (ImageView) clickedView.findViewById(R.id.help_group_indicator);
if (parent.isGroupExpanded(groupPosition)) {
parent.collapseGroup(groupPosition);
groupIndicator.setImageResource(R.drawable.down_icon);
} else {
parent.expandGroup(groupPosition);
groupIndicator.setImageResource(R.drawable.up_icon);
}
return true;
}
});
I have a image loaded as a background and when the screen is touched I want to animate that portion of the screen with a frameanimation. My frameanimation consists of 9 different png files which are made from just the portion of the screen I want animated. I can get it working when I use entire backgrounds as the frames for the animations, but when I use setbounds() to tell the frameanimation where to draw, I end up with the frameanimation being scaled up to fill the entire screen, which also erase my background. How can I get the frameanimation to stay it's original size and locate it at the same time? I can post code later if this isn't clear, i'm not at the comp right now
public boolean onTouchEvent (MotionEvent event)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
this.setBackgroundResource (R.drawable.nova);
Object bg = this.getBackground
touchAni.setBounds (152, 156, 152+140, 156+140);
touchAni = (AnimationDrawable) bg;
if (!touchAni.isRunning())
touchAni.start ();
else
{
touchAni.stop();
touchAni.start();
}
}
}
The way I have resolved a similar problem is that I added another image component to my layout xml on top of the component I want to animate. Normally that image component is android:visibility="gone"
but when I want to run the frame animation I set it visible and start the animation.
This way you can place the animation component wherever you want in your layout.
Well, after much puttering around, I finally found the BounceActivity code here: http://rsequence.com/android_blog/node/107. Seems really complicated for such a simple task but gets me what I want.
Of note, if anyone else finds it useful, the Handler() codes needs to have a switch in it so it's not spinning off cpu cycles to BounceView.draw() when nothing is happening on the screen.