I am working on a android project where i have to implement UI like below.
where center image is an product image, surrounded with a three buttons. On click of that it is going to redirect to some other screen.
Is there any one who did this before? Your prompt reply will be really appreciated thanks.
You can simply use FrameLayout.
Image that this UI is composed of 4 same size components, which overlapped with the transparent part.
Then you should make some filtering operations in onTouchEvent to avoid the confused clicking event, because once you click the component, the other components will wait to respond.
There are two way to filter.
Linear Programming in the math way
Judged by the color of pixel
Obviously, the second is a better choice. So, you can use getPixel(x, y), which belongs to the Bitmap, to get the color value at the specified coordinate. If it is a transparent color, then return false to pass the touch event to the next layer View or return true to intercept it.
After that you will get the correct clicking event in your own OnClickListener.
Related
I have two png-images for the pressed and released state of a button. I'd like to build a button that accomplishes the following:
Has no background/border (only those two images visible)
Does not highlight with a blue rectangle when clicked (only by cycling through those images)
Does not get activated, when the user clicks on a transparent part of the image.
As you can see, the button is not rectangular, so the last point mentioned above might be tricky.
I already tried to use an ImageButton and managed to meet point 1, but I failed at point 2.
Is there another View I can use, that does the work for me? If not, could you hint me what techniques I should look into to solve this?
Just use ImageView
One image set as background, second as src.
And it resolve all your problems
[Edit]
for third part- follow this https://stackoverflow.com/a/8086317/3811198
in short
Use a TouchListener instead of ClickListener
Inside the listener, if the event is MotionEvent.ACTION_DOWN, get the touch coordinates
Check the image's pixel at the coordinates you obtained earlier; if the pixel is not transparent, consider the button was clicked, otherwise ignore the event.
If you use setBackground = "#0xxx"; on button in xml file the borders will desappear. Basically making it transparent using alpha
android:setBackground = "#0AAA"
I am trying to learn special effects in android. I want to add an image in my android application. When the user touch on particular portion of image, that portion should be highlighted and a description panel regarding that portion will be displayed (as displayed in the example).
An example is posted here
Please suggest any method that can be used for implementing this effect.
This is not a simple problem.
The simplest solution I'd suggest in to implement an OnTouchListener to get X and Y position of touch. Using its MotionEvent getX() getY() values . Compare it to your portions position to know which one to highlight.
The effect of displaying highlights over portions can be achieve by placing invisible pictures on top of the main one (that represent only the highlighted portion in its highlight color on a transparent background, see what I mean?) And set them visible on user selection. The description panel can be included in this invisible image or be another invisible layout to set visible on selection (for example included in a PopupWindow or so...)
Good day to all!
I'm trying to implement a voice over for Android (like iPhone), but a specific application (not the entire operating system)
Imagine a screen with six buttons, so they occupy the entire activity, distributed equally in size.
When I "walk" with my finger on the screen, I want to give focus to the button and capture the event when the button has focus and let the focus as well.
Conclusion: As I flick on the screen and if it is over a button, the focus button. if I continue to drag the finger, give the focus to another button without taking your finger off the screen.
Can anyone help me? Sorry for bad English.
I don't think you can use the Android Button class for this, but instead do a custom view, draw six rectangles, and write an onTouchEvent method that determines what sound to play based on where the user's finger is. See the Sudokuv4 example at http://pragprog.com/book/eband3/hello-android for some code you can use.
Well you have to know positions of buttons. You can use basic view functions to get positions (getLeft(), and so on...)
After that you have to implment onTouchListner for Activity. Within you have to check where Event.x and Event.y pointers are and set foucs to specified view. After pointers move from specified view you set focus to false.
I'm working on implementing a UI for an Android application, and I wanted to ask if there is already something in the native widgets to accomplish most of what I'm trying to do.
The application that I'm working on performs 15 different tasks that can be divided into 3 different groups. (5 tasks per group) I have 18 icon images (3 for the groups and 15 for the individual tasks) and I want to be able to panel these icons (starting with the groups) like this:
I want the next icon visible below and above (if further down than the first icon) and swipe to go to the next icon
Once an icon is clicked, the panels slide to the side, exposing the next layer (the specific 5 tasks for the selected group) with the selected group still visible on the side:
From there, the user can tell at a glance what group they are in, what the current, next and previous selectable tasks are, and that by swiping right, they can get back to the group selection.
What types of widgets would I need to look into in order to accomplish something like this? Are there already pre-built lists to do these activities?
Thanks for any guidance!
You can get close with a LinearLayout of ImageView widgets and a ScrollView (vertical) or HorizontalScrollView. However, it will not give you the desired "centered image with bits of the previous/next images" effect -- it will be wherever the user positions it.
You can get close with a Gallery. However, it will not give you the vertical orientation, and it will always give you a fixed set of full options to the sides, not the partial images that you seek.
If it's gotta be the way you describe it, you'll have to roll it yourself. Gestures and animations should give you the desired effect.
Have you taken a look at ViewFlipper? http://developer.android.com/reference/android/widget/ViewFlipper.html This will give the side by side effect but you will have to make custom views for each group to populate it with the proper icons.
I'd use a ListActivity for the first 3 top level items. This won't give you the auto centering effect that you'll probably want, but you should be able to look at the Gallery source code, which can be found here, and make some modifications to the ListActivity so that it autocenters.
For the next items, I'd add an onClick and a GestureListener so you can navigate to another activity with another list view. Since you know where you came from (add some data to your Intent) you can set the color rectangle on the left so that it appears that you have just swiped the whole view left.
If you need to customize the animation, you can call this:
overridePendingTransition(R.anim.slide_left_entry, R.anim.slide_left_exit);
To make the yellow icon look good as it animates to the left, I'd change the list bounds (on the first activity) to have no margins, and change the yellow icon to have square right edges - This will make the small yellow rectangle on the next activity appear to be part of the first activity.
It should be relatively easy to mock this up to see if it's going to work properly for you.
Good luck!
EDIT: Ok, so I've made a basic project that does most of what you want.
here is the link to the eclipse project file. I was going to put the source up here, but there's a bit much to display.
What you still have to do:
Tweak animation
Configure the layer lists to display the correct colors
Add information to the top level intent for the sub-activity to be able to configure itself.
Quite a few other small things.
I think I've got the main stuff done. I've also added the gesture listener I talked about, although re-reading your question, you actually didn't ask for that. Since it's cool, I left it in.
Good Luck once again!!
Have you thought of launching Activities with different view configurations? You can switch from one activity to another with a gesture and you can Animate the views. What your UI looks like to me is a bunch of screens with affordances that show the other screens. So one Activity per screen maybe the same in different configurations or something like that.
I need to create some custom buttons as shown in the image below
what is the best approach to follow?
thanks
Abdul Khaliq
That's a hard one. I made a lot of custom views, and the first thing I would thinking of is, made one Button with that above image, and handle onTouch by yourself so you can distinguish which area the user hit. There you can also change the state of the button, like changing the image to a bevel one e.g. when the left button is hit.
Can you imagine this ansatz?
You can place two transparent "invisible" buttons over the top of a background in a LinearView. Like two ImageButtons with a transparent png inside.
It is also possible to make this background animated when buttons are clicked using android animation class.