I need to have some text with a drawable on the left and I want to execute some code when the user clicks/touches the image (only the image, not the text), so I used a LinearLayout with a TextView and an ImageView which is clickable and launches an onClick event. The XML parser suggests me to replace this with a TextView with a compound drawable, which would draw the same thing with far less lines of XML.. My question is "can I specify I want to handle an onClick event only on the drawable of the TextView and not on the TextView itself? I've seen some solutions which involves writing your own extension of TextView, but I'm only interested in being able to do it within the layout resource, if possible, otherwise I'll keep the following XML code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="#string/home_feedback_title"
android:textColor="#android:color/primary_text_dark"
android:textStyle="bold"
android:paddingBottom="4dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/action_feedback"
android:clickable="true"
android:onClick="onClickFeedback"
android:contentDescription="#string/action_feedback_description"/>
</LinearLayout>
Its very simple. Lets say you have a drawable on left side of your TextView 'txtview'. Following will do the trick.
TextView txtview = (TextView) findViewById(R.id.txtview);
txtview.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_UP) {
if(event.getRawX() <= txtview.getTotalPaddingLeft()) {
// your action for drawable click event
return true;
}
}
return true;
}
});
If you want for right drawable change the if statement to:
if(event.getRawX() >= txtview.getRight() - txtview.getTotalPaddingRight())
Similarly, you can do it for all compound drawables.
txtview.getTotalPaddingTop();
txtview.getTotalPaddingBottom();
This method call returns all the padding on that side including any drawables. You can use this even for TextView, Button etc.
Click here for reference from android developer site.
You can go either way. Using the compound drawable is faster though because it was intended to be an optimization. It uses less ram because you reduce 3 views into 1 and it's faster layout because you lose 1 depth.
If I were you I'd consider stepping back to see if both the text and the image intercepting the touch to do whatever action is possibly a good thing. In general having a larger touch region makes it easier to press. Some users may actually be inclined to touch the text instead of the image.
Lastly if you go that route of merging the 2 you might want to consider using a Button instead of a TextView. You can style the button to not have the rectangle around it. They call it a borderless button. It's nice because you get visual feedback that you clicked on a actionable item where as an ImageView or TextView normally aren't actionable.
How to Create Borderless Buttons in Android
#Vishnuvathsan's answer is almost perfect, but getRaw() returns an absolute x position of the touch point. If the textview is located not on the left edge of the view, you should compare with the absolute position of the textview by using getLocationOnScreen. Code below is an example to check both left drawable tap and right drawable tap.
textView.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
int[] textLocation = new int[2];
textView.getLocationOnScreen(textLocation);
if (event.getRawX() <= textLocation[0] + textView.getTotalPaddingLeft()) {
// Left drawable was tapped
return true;
}
if (event.getRawX() >= textLocation[0] + textView.getWidth() - textView.getTotalPaddingRight()){
// Right drawable was tapped
return true;
}
}
return true;
}
});
final int DRAWABLE_LEFT = 0;
final int DRAWABLE_TOP = 1;
final int DRAWABLE_RIGHT = 2;
final int DRAWABLE_DOWN = 3;
This click listener is getting in on touch listener
if (event.getAction() == MotionEvent.ACTION_DOWN)
if (event.getAction() == MotionEvent.ACTION_DOWN) {
if (event.getX() >= (tvFollow.getTop() - tvFollow.getCompoundDrawables()[DRAWABLE_TOP].getBounds().width())) {
// your action here
return true; } }
Since getRaw() and getRight() both returns in regards with the entire screen coordinates, this will not work if your views are not on the left edge of the screen. The below solution can be used anywhere regardless of layout position. This is for right side drawable touch.
textView.setOnTouchListener(OnTouchListener { _, event ->
if (event.action == MotionEvent.ACTION_UP)
{
if (event.x >= textView.width - textView.totalPaddingEnd)
{
<!---DO YOUR ACTIONS HERE--->
return#OnTouchListener true
}
}
true
})
PS: Kotlin code
Related
I have used 4 different colored custom shape buttons. I am trying to implement an ontouch listener by getting the pixel color as shown below
#Override
public boolean onTouch(View v, MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
return isPixelTransparent(v, x, y) || v.onTouchEvent(event);
}
private boolean isPixelTransparent(View v, int x, int y) {
Bitmap bmp = Bitmap.createBitmap(v.getDrawingCache());
int color = Color.TRANSPARENT;
try {
color = bmp.getPixel(x, y);
} catch (IllegalArgumentException e) {
// x or y exceed the bitmap's bounds.
// Reverts the View's internal state from a previously set "pressed" state.
v.setPressed(false);
}
return color == Color.TRANSPARENT;
}
However the rectangular area of the buttons overlap so the buttons underneath dont get pressed if pixel is transparent. Also please note all the buttons have large white text. I have done lots of searching but cannot figure out how to go about it, any help would be much appreciated please.
XML
<za.co.####.####.DiamondShapeButton
android:id="#+id/button_resources"
style="#style/NavigationButton"
android:layout_width="150dp"
android:layout_height="150dp"
android:text="#string/resources"
custom:diamondColor="#color/red"/>
<za.co.####.####.DiamondShapeButton
android:id="#+id/button_practise"
style="#style/NavigationButton"
android:layout_width="150dp"
android:layout_height="150dp"
android:text="#string/practise"
custom:diamondColor="#color/blue"/>
<za.co.####.####.DiamondShapeButton
android:id="#+id/button_tests_exams"
style="#style/NavigationButton"
android:layout_width="150dp"
android:layout_height="150dp"
android:text="#string/my_tests_exams"
custom:diamondColor="#color/orange_light"/>
<za.co.####.####.DiamondShapeButton
android:id="#+id/button_track_studies"
style="#style/NavigationButton"
android:layout_width="150dp"
android:layout_height="150dp"
android:text="#string/track_studies"
custom:diamondColor="#color/black"/>
</za.co.####.####.DiamondShapeLayout>
A View only knows about its own rectangular space, not that of the views that might be behind it. So if a View has a transparent pixel, it will only know that its own pixel is transparent, not anything about the views that may be behind it.
If you want to have a view bypass some event handling, it will need to know about the views behind it and if they wish to handle the event instead. You can't do this with pixel color of a single view - you will have to code this logic yourself based on the overall layout of the views.
I use Android studio and I have this image with a transparent background. Whenever i click on it it'll bring me to another Activity. But even when I click on the transparent part of the image it'll bring me to the other Activity.
Is it possible to make the nontransparent part clickable (or touchable) and the transparent part unclickable?
Yes this is possible but it becomes much more difficult than just adding an OnClickListener.
The trick is to use a Touch listener instead of click and on either a DOWN or UP event take the position and then either use some simple maths to work out whether it was a transparent area (if the design is a simple one) or, do some more complicated stuff to work out your pixel values at the centre.
new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
If (event.getAction() == MotionEvent.ACTION_DOWN) {
final int x = (int) event.getX();
final int y = (int) event.getY();
//now map the coords we got to the
//bitmap (because of scaling)
ImageView imageView = ((ImageView)v);
Bitmap bitmap =((BitmapDrawable)imageView.getDrawable()).getBitmap();
int pixel = bitmap.getPixel(x,y);
//now check alpha for transparency
int alpha = Color.alpha(pixel);
If (alpha != 0) {
//do whatever you would have done for your click event here
}
}
return true; //we've handled the event
}
}
I have created a button at the center of the layout with width 50dp.If I touch the screen at left extreme side of the layout(where the is no button) and hold down (Keep pressing ) till I reach the button in center then it should detect the touch .How can I do that .I have tried both onCLicklistener() and onTouchListener() but I still cannot detect the touch .
Basically like gesture but I thought button had a way of detecting that.
button.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
// Toast text : entered within button
return false;
}
}))
If we set Click or Touch listener to Button which is 50dp width at center, then the listener will get callback only if the user click/touch initiating from button.
While in your problem case, You are initiating click/touch from outside and coming to button.
So, button listener will not get callback from Android Framework
For your requirement to work, we need to add some logic, i have tried to add it here :
activity_main.xml :
<RelativeLayout android:id="#+id/parentLayout" ... >
<Button android:id="#+id/buttonCenter ... />
</RelativeLayout>
MainActivity.java :
// apply touch listener to parentLayout
button = (Button) findViewById(R.id.buttonCenter);
parent = (RelativeLayout) findViewById(R.id.parentLayout);
parent.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
Log.d("tag","in onTouch...");
checkTouch(event);
return true;
}
});
// check if touch entered button area
// save button left, right, top and bottom edge
// update : This is API i found on google documentation
float[] params;
button.getLocationOnScreen(params);
public void checkTouch(MotionEvent event) {
x = event.getX();
y = event.getY();
if(x >= param[0] && x <= (param[0]+button.getWidth())) {
if(y >= param[1] && y <= (param[1]+button.getHeight())) {
Log.d("tag","this touch is in button area");
// do what you want to do when touch/click comes in button area
}
}
}
Actually when you place a touch MotionEvent.ACTION_DOWN event is dispatched on the view which you touch and as you move MotionEvent.ACTION_MOVE events will be dispatched for every pixel point moved and until you release viz. until MotionEvent.ACTION_UP event is dispatched on that same view the events will not be handed over to any other view.
That is why it is not detecting on the button since it is actually the event of its parent view. So write an ontouchlistener on the parent and in that handle the touch according to the event.getRawX() & event.getRawY() positions in pixels.
I have 2 AutoCompleteTextViews in an activity (LinearLayout) and several additional controls (radiogroups, buttons, etc). Somehow the AutoCompleteTextViews are never losing focus.
As Example:
The user clicks on an AutoCompleteTextView, the control gets the focus. So the cursor starts blinking, the autocomplete dropdown list and the keyboard is shown. This is fine.
However if the user now clicks on of the radio buttons (or another control), the cursor in the AutoCompleteTextView is still blinking and the keyboard is still shown.
How to make the focus disappear automatically?
EDIT: xml code
<AutoCompleteTextView
android:id="#+id/ediFrom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"
android:text="" />
Only solution that worked for me is to add this line
android:focusable="true"
android:focusableInTouchMode="true"
To parent of AutoCompleteTextView (like LinearLayout etc..)
have u tried with android:focusableInTouchMode="true" for each view
code snippet
<AutoCompleteTextView
android:id="#+id/ediFrom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"
android:focusableInTouchMode="true"
android:text="" />
http://android-developers.blogspot.in/2008/12/touch-mode.html
In order to avoid setting everything else focusable (which is painful if you happen to use the same text view in many other layouts), we opt to override the logic to intercept touch screen events at activity level instead:
#Override
public boolean dispatchTouchEvent(MotionEvent event) {
View v = getCurrentFocus();
if (v instanceof EditText) {
int scrcoords[] = new int[2];
v.getLocationOnScreen(scrcoords);
// calculate the relative position of the clicking position against the position of the view
float x = event.getRawX() - scrcoords[0];
float y = event.getRawY() - scrcoords[1];
// check whether action is up and the clicking position is outside of the view
if (event.getAction() == MotionEvent.ACTION_UP
&& (x < 0 || x > v.getRight() - v.getLeft()
|| y < 0 || y > v.getBottom() - v.getTop())) {
if (v.getOnFocusChangeListener() != null) {
v.getOnFocusChangeListener().onFocusChange(v, false);
}
}
}
return super.dispatchTouchEvent(event);
}
If you put this logic in your base activity, any screen with an edit text now will fire onFocusChange when you tap anywhere outside it. By listening to onFocusChange you can clearFocus or requestFocus on another view. It's a hack more or less but at least you don't have to set focusable for any other items on many layouts.
See http://developer.android.com/reference/android/app/Activity.html#dispatchTouchEvent(android.view.MotionEvent)
You can use the method setOnDismissListener() to clear the focus whenever the dropdown is dismissed (value picked, clicked outside)
This Kotlin code works fine for me, you can easily rewrite it to java too:
materialAutoCompleteTextBox.setOnDismissListener {
materialAutoCompleteTextBox.clearFocus()
}
in my application i have one bag-round image with 5 icons how can i put on-click actions for individual icons in the android in my case 5 icons is place in the one image and that image used as bag-round image in my app.
Please help me thanks in Advance......
You can use ImageButton and listen its on click method:
imgB =(ImageButton)findViewById(R.id.Image_Button_ID);
imgB.setOnClickListener(new OnClickListener() {
// write your code here
});
Or if you want to specify the method in the xml:
<ImageButton android:id="#+id/Image_Button_ID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/blah"
android:onClick="cutsom_onclick_method" />
Hopefully I am not misunderstanding, it is not very clear to me what you need.
OnTouchListener will give you the location of the click which you can use to determine where you have clicked.
imageView.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent e) {
if (e.getAction() == MotionEvent.ACTION_DOWN){
int x = (int) e.getX();
int y = (int) e.getY();
}
// then do some calculation with x and y and where they are
return true;
}
});
The other way is to use five ImageButtons and five different images