Custom view clipped when moved - android

I have a custom view that gets clipped to its original bounds after it's moved. On a 4.4.4 KitKat device, the view draws just fine outside its bound, but on a 4.1.2 device, it gets clipped. I've tried using android:clipChildren with no success. Any ideas?
Code and layout below:
#Override
public boolean onTouchEvent(MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN){
mIsDown = true;
return true;
}
if(mIsDown && event.getAction() == MotionEvent.ACTION_MOVE){
PointF pointF = new PointF(event.getRawX(), event.getRawY());
setX(pointF.x - getWidth() / 2);
setY(pointF.y - getHeight() / 2);
return true;
}
if(event.getAction() == MotionEvent.ACTION_UP){
mIsDown = false;
return true;
}
return super.onTouchEvent(event);
}
Layout:
<FrameLayout
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/control_panel">
<FrameLayout
android:id="#+id/preview_holder"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<com.example.CustomView
android:id="#+id/target_view"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:background="#null"
/>
</FrameLayout>

Related

requestDisallowInterceptTouchEvent for Scrollview

I have a StreetViewPanoramaView inside a linearlayout inside a scrollview:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollview">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/linear">
<com.google.android.gms.maps.StreetViewPanoramaView
android:id="#+id/street_view_panorama"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<other views - textviews etc>
</LinearLayout>
</ScrollView>
The StreetViewPanoramaView allows a user to move the streetview camera up and down and left and right. I want the scrollview to stop intercepting the user touch events when the user is moving the camera. Currently, if the user moves the camera in the StreetViewPanoramaView, the scrollview intercept the touch and moves the scrollview instead.
I tried this code from https://mobiarch.wordpress.com/2013/11/21/prevent-touch-event-theft-in-android/ but its doesn't seem to be working (scrollview is still taking the touch events):
mStreetViewPanoramaView = (StreetViewPanoramaView) findViewById(R.id.street_view_panorama);
LinearLayout.LayoutParams streetViewLp =
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, displaymetrics.widthPixels/3);
mStreetViewPanoramaView.setLayoutParams(streetViewLp);
disableTouchTheft(mStreetViewPanoramaView);
public static void disableTouchTheft(View view) {
view.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
view.getParent().getParent().requestDisallowInterceptTouchEvent(true);
switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_UP:
view.getParent().getParent().requestDisallowInterceptTouchEvent(false);
break;
}
return false;
}
});
}
EDIT:
Things I have tried:
I have made a custom view and imported the code dispatchTouchEvent into my activity code:
#Override
public boolean dispatchTouchEvent(MotionEvent event) {
int[] loc = {0, 0};
mStreetViewPanoramaView.getLocationOnScreen(loc);
Rect rect = new Rect(loc[0], loc[1] , loc[0] + mStreetViewPanoramaView.getWidth(), loc[1] + mStreetViewPanoramaView.getHeight());
if (rect.contains((int) event.getRawX(), (int) event.getRawY())) {
Log.e("stretview", "dispatched");
return mStreetViewPanoramaView.dispatchTouchEvent(event);
/* return true;*/
}else{
//Continue with touch event
return super.dispatchTouchEvent(event);
}
}
public class CustomStreetViewPanoramaView extends StreetViewPanoramaView {
public CustomStreetViewPanoramaView(Context context) {
super(context);
}
public CustomStreetViewPanoramaView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomStreetViewPanoramaView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public CustomStreetViewPanoramaView(Context context, StreetViewPanoramaOptions options) {
super(context, options);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
return false; // Do not intercept touch event, let the child handle it
}
}
The code appears to half-work - it appears that the StreetViewParnoramaView will obtain the touch events for the top half of the view but the bottom half does not obtain any touch events.
My full layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:id="#+id/container"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollview">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/linearlayout">
<com.example.simon.customshapes.CustomStreetViewPanoramaView
android:id="#+id/street_view_panorama"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="500dp"
android:id="#+id/card"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello card"
android:layout_gravity="center" />
</android.support.v7.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Save panorama"
android:padding="8dp"
android:id="#+id/savepano"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
</ScrollView>
</LinearLayout>
The answer of Johann is the right path but still not working - this one will work
#Override
public boolean dispatchTouchEvent(MotionEvent event) {
if (streetView != null) {
streetView.getGlobalVisibleRect(rect);
if (rect.contains((int) event.getRawX(), (int) event.getRawY())) {
event.offsetLocation(-rect.left, -rect.top);
streetView.dispatchTouchEvent(event);
return true;
} else {
//Continue with touch event
return super.dispatchTouchEvent(event);
}
} else {
return super.dispatchTouchEvent(event);
}
}
dispatchTouchEvent of the activity and move the event after offsets it to the streetView
Can you try the following...
#Override
public boolean dispatchTouchEvent(MotionEvent event) {
int[] loc = {0, 0};
mStreetViewPanoramaView.getLocationOnScreen(loc);
Rect rect = new Rect(loc[0], loc[1] , loc[0] + mStreetViewPanoramaView.getWidth(), loc[1] + mStreetViewPanoramaView.getHeight());
if (rect.contains((int) event.getRawX(), (int) event.getRawY())) {
mStreetViewPanoramaView.dispatchTouchEvent(event);
return true;
}else{
//Continue with touch event
return super.dispatchTouchEvent(event);
}
}
This hopefully will check if the touch was on the panoramaview and handle accordingly.

How can I implement a chrome like "auto-hide navigation" for my Android app?

In Chrome, the address bar will be hidden/shown when user swipes up/down the content.
Can I implement the similar logic to my app?
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame">
<WebView
android:id="#+id/my_webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
I wonder if there is anything I can do by the following code, so that the ActionBar will be hidden/shown when user swipe up/down the webView.
WebView webView = (WebView) findViewById(R.id.my_webview);
webView.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch (View v, MotionEvent event) {
webView.onTouchEvent(event);
}
});
This pattern is called Quick Return.
Start with this blog post.
However, it is worthwhile reading this when considering its use.
First you need layout with alignParentBottom and match_parent WebView and some bar at top:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff" >
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true" />
<RelativeLayout
android:id="#+id/actionBar"
android:layout_width="match_parent"
android:layout_height="50dp" >
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="TextView" />
</RelativeLayout>
</RelativeLayout>
Then you need code:
1) Declare and set some internal values and resize WebView to make it below our bar:
private int baseHeight;
private int webViewOnTouchHeight;
private int barHeight;
private float heightChange;
private float startEventY;
barHeight = actionBar.getMeasuredHeight();
baseHeight = getView().getMeasuredHeight();
webView.getLayoutParams().height = webView.getMeasuredHeight() - barHeight;
webView.requestLayout();
webView.setOnTouchListener(listener);
2) Create resize method. Here we check new height with limits of screen top and bar height
private boolean resizeView(float delta) {
heightChange = delta;
int newHeight = (int)(webViewOnTouchHeight - delta);
if (newHeight > baseHeight){ // scroll over top
if (webView.getLayoutParams().height < baseHeight){
webView.getLayoutParams().height = baseHeight;
webView.requestLayout();
return true;
}
}else if (newHeight < baseHeight - barHeight){ // scroll below bar
if (webView.getLayoutParams().height > baseHeight - barHeight){
webView.getLayoutParams().height = baseHeight - barHeight;
webView.requestLayout();
return true;
}
} else { // scroll between top and bar
webView.getLayoutParams().height = (int)(webViewOnTouchHeight - delta);
webView.requestLayout();
return true;
}
return false;
}
3) Create custom onTouch listener where we will resize WebView and change Y-value of our bar
private OnTouchListener listener = new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
startEventY = event.getY();
heightChange = 0;
webViewOnTouchHeight = webView.getLayoutParams().height;
break;
case MotionEvent.ACTION_MOVE:
float delta = (event.getY()+heightChange)-startEventY;
boolean heigthChanged = resizeView(delta);
if (heigthChanged){
actionBar.setTranslationY(baseHeight - webView.getLayoutParams().height - barHeight);
}
}
return false;
}
};
There is now a really clean way to accomplish this without writing any Java code using the Design Support Library. See Dhir Pratap's answer below:
(I would have placed this as a comment but I don't have enough rep.)
How to Hide ActionBar/Toolbar While Scrolling Down in Webview
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
try the following code, hope it works for you:
private void init(){
WebView web = new WebView(this);
final Context context = this;
web.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View arg0, MotionEvent event) {
// TODO Auto-generated method stub
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// show action bar
((Activity) context).getActionBar().show();
break;
case MotionEvent.ACTION_UP:
// hide action bar
((Activity) context).getActionBar().hide();
break;
default:
break;
}
return false;
}
});
}

onTouch on a view not triggered when touching its ScrollView child

I can't get onTouch event triggered on a container when clicking on its ScrollView child.
I'm using API 12 on a Galaxy tab 10.1.
Anybody can help?
Thanks
Activity
public class TestActivity extends Activity{
#Override
public void onCreate(Bundle bundle) {
super.onCreate(bundle);
setContentView(R.layout.dude);
LinearLayout mylayout = (LinearLayout) findViewById(R.id.mylayout);
mylayout.setOnTouchListener(new OnTouchListener () {
public boolean onTouch(View view, MotionEvent event) {
// Only called when touched outside the ScrollView
if (event.getAction() == android.view.MotionEvent.ACTION_DOWN) {
/* do stuff */
} else if (event.getAction() == android.view.MotionEvent.ACTION_UP) {
/* do stuff */
}
return true;
}
});
}
}
Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mylayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:gravity="center"
android:text="Touch here trigger parent&apos;s onTouch"
android:textColor="#000000"
android:textSize="40sp" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="match_parent"
android:layout_height="1000dp"
android:background="#b00000"
android:gravity="center"
android:text="Touch here DOES NOT trigger parent&apos;s onTouch"
android:textColor="#000000"
android:textSize="40sp" />
</RelativeLayout>
</ScrollView>
</LinearLayout>
mylayout.setOnTouchListener(new OnTouchListener () {
public boolean onTouch(View view, MotionEvent event) {
// Only called when touched outside the ScrollView
if (event.getAction() == android.view.MotionEvent.ACTION_DOWN) {
/* do stuff */
return true;
} else if (event.getAction() == android.view.MotionEvent.ACTION_UP) {
/* do stuff */
return true;
}
return false;
}
});
this should work... but you no longer have auto-scroll when you fling it hard... it'll be a sticky scroll moving only as much as you drag.
Did u try to create ONE OnClickListener and add it to all childs?
Maybe this could solve your
As the ScrollView makes it childs scrollable it wouldn't have an own area to click in.
(Correct me if I'm wrong ^^)
You probably need this code
#Override
public boolean onInterceptTouchEvent(MotionEvent ev)
{
onTouchEvent(ev);
return false;
}

stop touch from passing to lower surfaceview

I have a SurfaceView "over" a GLSurfaceView in Android.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<my.project.ActionSurface
android:id="#+id/actionSurface"
android:layout_marginBottom="30dip"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
/>
<fi.harism.curl.CurlView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/larryMoeCurly"
/>
</RelativeLayout>
(Many thanks to harism for his page curl code!)
In my ActionSurface, I have this to detect touches:
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
newX = (int) event.getX();
newY = (int) event.getY();
diffX = newX - x;
diffY = newY - y;
Log.d(TAG, "touched at x:" + newX + " y:" + newY);
}
return true;
}
When I touch my ActionSurface, it responds correctly, but the touch goes through to the CurlView as well. How do I stop the touch from "passing through" to the other surface?
you could add an OnTouchListener to your surface view, and catch the event there (return true):
this.setOnTouchListener(new View.OnTouchListener()
{
#Override
public boolean onTouch(View v, MotionEvent event)
{
return true;
}
});

how to customize thumb of seek bar

I want to display a TextView just above thumb of the SeekBar that will display the current progress of seek bar. As we move the thumb forward and backward the TextView will also move with thumb (the TextView should also be above the thumb).
Please provide any clue, code snippet are always welcome.
Moving the text can even more easily done by setting the padding for the TextView as:
int xPos = ((SeekbarInstance.getRight() - SeekbarInstance.getLeft()) * SeekbarInstance.getProgress()) / SeekbarInstance.getMax();
textViewInstance.setPadding(xPos, 0, 0, 0);
Layout of your activity
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Main context -->
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<SeekBar android:id="#+id/skbSample"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:max="35">
</SeekBar>
</LinearLayout>
<!-- For display value -->
<AbsoluteLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:text="0"
android:id="#+id/txvSeekBarValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFFFF"
android:background="#FF777777"
android:visibility = "invisible">
</TextView>
</AbsoluteLayout>
</FrameLayout>
Initialize your controls on create:
mTxvSeekBarValue = (TextView) this.findViewById(R.id.txvSeekBarValue);
mSkbSample = (SeekBar) this.findViewById(R.id.skbSample);
mSkbSample.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN)
{
ShowSeekValue((int)event.getX(), mTxvSeekBarValue.getTop());
mTxvSeekBarValue.setVisibility(View.VISIBLE);
}
else if(event.getAction() == MotionEvent.ACTION_MOVE)
{
ShowSeekValue((int)event.getX(), mTxvSeekBarValue.getTop());
}
else if(event.getAction() == MotionEvent.ACTION_UP)
{
mTxvSeekBarValue.setVisibility(View.INVISIBLE);
}
return false;
}
});
Function will move your value:
private void ShowSeekValue(int x, int y)
{
if(x > 0 && x < mSkbSample.getWidth())
{
AbsoluteLayout.LayoutParams lp = new AbsoluteLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, x, y);
mTxvSeekBarValue.setLayoutParams(lp);
}
}
Found a better way. Derived from the sample:
mTxvSeekBarValue = (TextView) this.findViewById(R.id.txvSeekBarValue);
mSkbSample = (SeekBar) this.findViewById(R.id.skbSample);
mSkbSample.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN)
{
int progress = mSkbSample.getProgress();
mTxvSeekBarValue.setText(String.valueOf(progress).toCharArray(), 0, String.valueOf(progress).length());
}
else if(event.getAction() == MotionEvent.ACTION_MOVE)
{
int progress = mSkbSample.getProgress();
mTxvSeekBarValue.setText(String.valueOf(progress).toCharArray(), 0, String.valueOf(progress).length());
}
return false;
}
});
There you don't need any additional method and the ACTION_UP event has no important effect on the result.

Categories

Resources