How I can increase the touch area for controls (ToggleButton)? - android

I have a ToggleButton. I want to have more place for click on this button. If I add layout_width, layout_height etc. the image looks bad. I also tried using android:padding but it did not help me.
It is needed for the convenience of users.

Easy solution : If you have image for the button, then create transparent area around it (i.e. for touch area).
The grey area can be transparent to increase the touch area.
Or use TouchDelegate

You can also increase touch area by setting touch delegates Android Developer Training Blog Post
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Get the parent view
View parentView = findViewById(R.id.parent_layout);
parentView.post(new Runnable() {
// Post in the parent's message queue to make sure the parent
// lays out its children before you call getHitRect()
#Override
public void run() {
// The bounds for the delegate view (an ImageButton
// in this example)
Rect delegateArea = new Rect();
ImageButton myButton = (ImageButton) findViewById(R.id.button);
myButton.setEnabled(true);
myButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(MainActivity.this,
"Touch occurred within ImageButton touch region.",
Toast.LENGTH_SHORT).show();
}
});
// The hit rectangle for the ImageButton
myButton.getHitRect(delegateArea);
// Extend the touch area of the ImageButton beyond its bounds
// on the right and bottom.
delegateArea.right += 100;
delegateArea.bottom += 100;
// Instantiate a TouchDelegate.
// "delegateArea" is the bounds in local coordinates of
// the containing view to be mapped to the delegate view.
// "myButton" is the child view that should receive motion
// events.
TouchDelegate touchDelegate = new TouchDelegate(delegateArea,
myButton);
// Sets the TouchDelegate on the parent view, such that touches
// within the touch delegate bounds are routed to the child.
if (View.class.isInstance(myButton.getParent())) {
((View) myButton.getParent()).setTouchDelegate(touchDelegate);
}
}
});
}
}

Use TouchDelegate for your ToggleButton as ammar26 have commented you.
Or
Try this:
Make one parent layout like LinearLayout or RelativeLayout that cover the ToggleButton. And now put margin to that Parent layout.
Now, on click of that Parent layout do action for the toggle button.
Hope it will help you to increase touch area for your view.
Happy Coding.

Instead of putting the touch event in button put it in the layout containg the only the button..and fix the size of the layout as ur wish

increase the values of android:padding:
<SeekBar android:id="#+id/seek" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_weight="1"
android:paddingTop="5dp" android:paddingBottom="5dp"
android:progressDrawable="#drawable/green_scrubber_progress_horizontal_holo_ligh‌​t"
android:thumb="#drawable/thumb" />

Take the margin (place of padding) of your Button from its parent layout and then perform opration on your Layout
mLayout.setonTouchListener(View.onTouchListener{
// here your working code
});

Related

Draw a circle partially inside on a button dynamically android

My class Triangle extends from View and its method onDraw consists of:
... onDraw(){
...
drawCircle(anyx, anyy, anyradius, anypaint);
}
And the Activity in which I want to create the Button and the Circle, both created dynamically.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.newexample);
RelativeLayout viewGroup = (RelativeLayout)findViewById(R.id.visiont);
Button b1 = new Button(this);
viewGroup.addView(b1);
b1.setX(140); // Position of the button
b1.setY(140);
ViewGroup.LayoutParams params = b1.getLayoutParams();
params.height=80; // Size of the button
params.width=80;
b1.setLayoutParams(params); // Deleting this does not change the behaviour of what I am getting (only changes the height and width)
Circle c = new Circle(this);
c.setColor(Color.DKGRAY);
c.setCircle(150,130,80);
viewGroup.addView(c);
}
An example of what is the desired result, the rectangle is the button.
What I am getting now is the opposite, the button is over the circle.
I tried to switch Button to ImageButton since I wanted to have a custom image in the button (Actually I wanted a clickable component)
It appears that, with only switching Button to ImageButton, works as desired, so, for me it's a suitable solution.

Scrollable and Clickable textview inside gridview android

I have a grid view inwhich I inflate two layouts one with {background imageview containing a imageview and two textviews aligned vertically over the image} and another layout with {background image containing three textviews aligned vertically over the image}.
I have restricted maximum number of lines in textview. Please suggest how to make the textview scrollable in the gridview and I want the gridview items to be clickable which will navigate to next screen on item click.
I tried to make the scrollable textview working inside the gridview using the requestDisallowInterceptTouchEvent method. But i didn't get the expected result. When the setscrollingmovement() method is used, the textview goes unclickable and so this is also not working.
I am not able to post the scenario as image, as I don't have the enough reputations to post image. Image uploaded in google drive.Please use below link to view the image.
https://drive.google.com/file/d/0B45x-sgFopMBMUJOaHk0NWlkMzQ/edit?usp=sharing
I got it working :-) But partially. I used android:descendantFocusability="blocksDescendants" in the root layout of gridview item's custom layout (inflating layout). The thing is onclick works outside of the textiew.
So, the textview scrolls and clicking outside of the textview somewhere on background image fires grid view's onClickListener()
But not able to trigger gridview's onclicklistener() when clicking on textview. Need to look into this issue.
Used suggestion from the stackoverflow link: Referred Link
Edited: Scrollable and clickable textview in gridview - Got Workaround using onTouchlistener
Setting below ontouch click listener for the textview inside the adapter class for gridview will allow you to scroll text as well as fire onItemClick of GridView.
OnTouchListener aListener = new OnTouchListener() {
long startTouchTime = 0;
#Override
public boolean onTouch(View v,
MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
Log.e("ACTION_DOWN",
"ACTION_DOWN, intercept true");
startTouchTime = (System
.currentTimeMillis());
// To scroll the textview set this
textview
.setMovementMethod(new ScrollingMovementMethod());
v.getParent()
.requestDisallowInterceptTouchEvent(
true);
break;
case MotionEvent.ACTION_UP:
Log.e("ACTION_UP",
"Call onitemclick"
+ ((System
.currentTimeMillis()) - startTouchTime));
if ((System.currentTimeMillis())
- startTouchTime < 200)
// To call gridview onItemClick here
myGridActivity.myGridView
.getOnItemClickListener()
.onItemClick(
null,
myGridActivity.myGridView,
(Integer) imageView
.getTag(), // Setting the position here through imageview set tag
(long) 6767);
break;
}
if (event.getAction() == MotionEvent.ACTION_MOVE) {
Log.e("ACTION_MOVE",
"ACTION_MOVE, intercept true");
v.getParent()
.requestDisallowInterceptTouchEvent(
true);
} else {
Log.e("Other", "Intercept false");
v.getParent()
.requestDisallowInterceptTouchEvent(
true);
}
return false;
}
};
textview.setOnTouchListener(aCBInfoListener);
Set android:scrollbars="vertical" for the textview to be scrolled.
Try this:
Properties of your TextView in your layout's xml file:
android:maxLines = "INTEGER"
android:scrollbars = "vertical"
Then use:
yourTextView.setMovementMethod(new ScrollingMovementMethod())
in your code.
It will work fine..
or else you can put the TextView into the ScrollView:
<ScrollView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1">
<TextView android:id="#+id/TextView01" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Testin testin testing "></TextView>
</ScrollView>

OnTouchListener on invisible view

so all I want to do is to touch on a certain part of the screen where an invisible view is hidden.
After that touch the view should fade In.
The Problem: The Listener isn't triggered whe I touch the view.
Things I've tried: view.setImageAlpha(0), view.setAlpha(0), view.setVisibility(View.INVISIBLE)
When I set alpha=1 the listener works fine.
Thanks in advance.
Edit:
Thanks to #Viswanath L for the great solution which he mentioned in his post as second workaround.
I just wanted to give a little code example for that in case someone doesn't know how this works:
What I want: I want to touch the right corner of the screen and at this spot, a view(myView) should fade in.
fadeInListener = new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
System.out.println("TRIGGERED");
//The screen size here is 1080x1920(vertical)
if (event.getRawX() > 800 && event.getRawY() > 1640) {
final AlphaAnimation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setDuration(500);
fadeIn.setFillAfter(true);
myView.startAnimation(fadeIn);
}
}
return false;
}
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
layout.setOnTouchListener(fadeInListener);
}
The layout is:
this.layout = (RelativeLayout) findViewById(R.id.layout);
And myView should be placed in the right corner and what's very important:
myView.setVisibility(View.Gone);
Hope this helps.
INVISBLE means you are trying to add a listener to a view which is not there. You can add the listener to a visible view only.
WORKAROUND
1) Try to make a dummy view which is visible but having the same color as background.
2) Try to set the listener for parent and check the position (whether the position does
belongs to INVISIBLE view).
onTouchListener does not trigger for an invisible View. You can make 2 exactly the same views one under another the one below having the map. It will be visible and so it can be touched but it will be obscured by the view above like they do here: http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/
Try this in your xml:
<View
android:id="#+id/my_inv_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/blue"
/>
<View
android:id="#+id/my_touch_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
And set up the click listener like this:
final View mTouchView = findViewById(R.id.my_touch_view);
final View mInvView = findViewById(R.id.my_inv_view);
mInvView.setVisibility(View.INVISIBLE);
mTouchView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mInvView.setVisibility(View.VISIBLE);
}
});

How to add Buttons dynamically into ScrollView

I'm having a difficulty adding buttons dynamically to a ScrollView. The code below is adding the buttons BUT there is no scroller.
If I'm putting the buttons directly in the XML (not dynamically) it's working and I can scroll down/up.
My view:
<ScrollView android:id="#+id/ScrollView01"
android:layout_width="264dp"
android:layout_height="match_parent"
android:fillViewport="true"
>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="264dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:scrollbars="vertical"
>
** HERE THE BUTTONS SHOULD BE ADDED DYNAMICALLY **
</LinearLayout>
</ScrollView>
The code which adding buttons:
// create new button
final Button newbutton = new Button(this);
// set background color
newbutton.setBackgroundColor(Color.GRAY);
// set width and height
newbutton.setWidth(50);
newbutton.setHeight(20);
// set position
newbutton.setY(((float)numOfButton*20)+20);
newbutton.setX(100);
// set text
newbutton.setText(Integer.toString(numOfButton));
// create patameter
final LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT
);
//set listener
android.view.View.OnClickListener buttonListener = new View.OnClickListener() {
#Override
public void onClick(View v) {
// make all the DrawView invisible
for(View view : comments){
view.setVisibility(View.INVISIBLE);
}
// set the chosen comment visible
comments.get(numOfButton).setVisibility(View.VISIBLE);
boardsHandler.setCurrenBoard(numOfButton);
}};
newbutton.setOnClickListener(buttonListener);
// creating a thread to add button
buttons.post(new Runnable() {
#Override
public void run() {
buttons.addView(newbutton, p);
}
});
Is it something with the LinearLayout.LayoutParams p ?
Thanks!
Try following code
first do
LinearLayout myContainer = findViewById(R.id.layoutId);
When you set parameters for a view, they need to correspond to the parent view for your widget.
LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT);
finally add button as you are doing.
try and tell if it works
Setting X and Y position will not work. The LinearLayout layouts it's children vertically or horizontally, only taking their width/height into account.
Besides this -- have you tried calling buttons.invalidate() after buttons.addView(...). This should refresh the layout and should show your newbutton.
This is a rather old post but I found it quickly when doing research on that kind of problem. So I'll post am answer anyway, maybe it'll be of help to anyone..
I had a similar problem with a relative layout to which buttons were added dynamically. I found a workaround in defining the layout's size manually when adding the buttons. For your case, adding the line
buttons.getLayoutParams().height = numOfButton*20+40;
after
buttons.addView(newbutton, p);
might help, though it's probably not the best solution.
I thought my mistake was using the RelativeLayout at all, but since you appear to have the same problem...
Ever thought of using a table layout?

Google Map Marker Clickable Area

I am using this example: https://github.com/galex/android-mapviewballoons
My problem is that the clickable area is wider than the marker itself. For example, my Google Map marker is 25x25 then the clickable area would extend up to 70x70. This is a big problem for overlapping markers.
When I clicked on the tip of that arrow, onTap is activated, even though the tap area is far from the marker.
Please help me. Thanks.
This is the default behaivior of ItemizedOverlay. 25x25 px is generally not an adquate touchable area for most human fingers.
You should override the hitTest() method if you want to modify the way an overlay item hit is tested.
For debugging :
Try using a TouchDelegate for the View, you can specify the Touch rect for a give View
An example showing how to use the TouchDelegate :
public class TouchDelegateSample extends Activity {
Button mButton;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.touch_delegate_view);
mButton = (Button)findViewById(R.id.delegated_button);
View parent = findViewById(R.id.touch_delegate_root);
// post a runnable to the parent view's message queue so its run
after
// the view is drawn
parent.post(new Runnable() {
#Override
public void run() {
Rect delegateArea = new Rect();
Button delegate = TouchDelegateSample.this.mButton;
delegate.getHitRect(delegateArea);
delegateArea.top -= 200;
TouchDelegate expandedArea = new TouchDelegate(delegateArea,
delegate);
// give the delegate to an ancestor of the view we're
delegating the
// area to
if (View.class.isInstance(delegate.getParent())) {
((View)delegate.getParent()).setTouchDelegate(expandedArea);
}
}
});
}
}
hitTest()
See if a given hit point is within the bounds of an item's marker. Override to modify the way an item is hit tested. The hit point is relative to the marker's bounds. The default implementation just checks to see if the hit point is within the touchable bounds of the marker.

Categories

Resources