Extra Layouts in View Hierarchy - android

I have a custom view in an activity that I want to stretch the full length of the screen. Unfortunately match_parent isn't working. I looked at the hierarchy and it seems there is and extra linear layout as you can see here
I don't know why the second linearlayout is there. I create the view like this.
public class TimeSlider extends LinearLayout {
private TextView timeHandleTv;
public TimeSlider(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
layoutInflater.inflate(R.layout.time_slider, this, true);
timeHandleTv = (TextView) findViewById(R.id.timeHandleTv);
}
}
time_slider.xml looks like this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/timeHandleTv"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#color/White"
android:paddingLeft="10dp"
android:paddingRight="12dp"
android:singleLine="true"
android:textSize="13sp"
android:background="#drawable/time_handle" />
</LinearLayout>
Where is the extra linearlayout coming from?
EDIT
To be clearer this view does only have one textview. However the text view will move to different positions within the linearlayout. So it is necessary to have the linearlayout parent. As you can see with this code
#Override
public boolean onTouchEvent(MotionEvent event) {
int Y = (int) event.getY();
if (Y < 1) {
Y = 0;
} else if(Y > getHeight() - timeHandleTv.getHeight()) {
Y = getHeight() - timeHandleTv.getHeight();
}
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_UP:
layoutParams.topMargin = Y;
timeHandleTv.setLayoutParams(layoutParams);
timeHandleTv.setText(getTime());
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
case MotionEvent.ACTION_MOVE:
layoutParams.topMargin = Y;
timeHandleTv.setLayoutParams(layoutParams);
timeHandleTv.setText(getTime());
break;
}
return true;
}
If I remove the linearlayout in the xml I do remove the extra linearlayout in the hierarchy. But if I had more than one view within the view how would I create it without having an extra linearlayout?

When you inflate the layout TimeSlider which is a LinearLayout becomes it's parent. In this line:
layoutInflater.inflate(R.layout.time_slider, this, true);
you ask to inflate the layout with the current object as parent. What you see in hierarchy is:
TimeSlider class layout - LinearLayout
LinearLayout from time_slider.xml
TextView from time_slider.xml

Related

Translate animation is behind other layout

I have four linear layouts in my screen.
The first layout contain a textview.
I'm trying to move my textView to the the fourth layout of the right with a translate animation.
But when i do that the text view move behind the other layout and if i move my layout from the fourth layout of the right to the first at the left it's ok.
Im my xml i have put : in all layouts
android:clipChildren="false"
image
Can you help me ?
Thank you
Use setZAdjustment to put your View in front of the other Views.
http://developer.android.com/reference/android/view/animation/Animation.html#setZAdjustment%28int%29
Pre-Kitkat :
yourLayout.bringToFront();
((View)yourLayout.getParent()).requestLayout();
((View)yourLayout.getParent()).invalidate();
KitKat :
yourLayout.bringToFront();
Android linear layout construction starts from first element from the beginning. So any element defined first will be created and then rest, so no matter what you do, you cannot achieve with linear layout. Try with relative layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/testAnimTranslate"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="30dp"
android:layout_height="70dp"
android:background="#0000dd"
android:orientation="vertical" />
<LinearLayout
android:layout_width="30dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:background="#0dd0dd"
android:orientation="vertical" />
<LinearLayout
android:layout_width="30dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:background="#ddd0dd"
android:orientation="vertical" />
<LinearLayout
android:layout_width="30dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:background="#44d0dd"
android:orientation="vertical" />
</LinearLayout>
<TextView
android:id="#+id/textAnimate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/testAnimTranslate"
android:layout_alignTop="#id/testAnimTranslate"
android:layout_toLeftOf="#id/testAnimTranslate"
android:gravity="center"
android:background="#00000000"
android:text="qweqwew" />
</RelativeLayout>
Define your translate anim in anim folder or programatically. make sure to add
LinearInterpolator
setFillAfter to true
and start the anim
I think you create the view in the code, so you should add setClipChildren(false)
in your constructor too.
Look at the docs:
ZORDER_TOP: Requests that the content being animated be forced on top of all other content for the duration of the animation.
Please check that setFillAfter(true) does not match this usage.
Does it help?
The main problem with what you are trying to do, is that you want to draw a View outside of its parent. It goes behind the other LinearLayouts because they are drawn after the LinearLayout parent of the View. Even if it is brought to the front, it seems that only relates to children within a single parent?
If you look at how Fragment animations work, you need to recreate the Fragment to translate a from one Frame into another. You also need two separate animations.
BlackBeard's solution will work because it makes the TextView a child of the outermost parent and declares it last. This means the TextView is drawn after everything else and therefore will be drawn on top of everything else.
This doesn't achieve what I think you are trying to do. If you want the TextView to belong to its destination LinearLayout after the animation you'll need to recreate the TextView and add it to the LinearLayout in the correct position in the hierarchy. You'll also need a second animation to move the new TextView into its position.
If done properly the animations should overlay each other perfectly and if in a LinearLayout one or the other of the animated Views will pass on top of everything else.
activity_main.xml
<LinearLayout
android:id="#+id/frame"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:orientation="horizontal"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FFAABBCC"
android:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:text="I'm some text"/>
</LinearLayout>
<LinearLayout
android:id="#+id/layout2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FFBBCCAA"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/layout3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FFCCAABB"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/layout4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FFBBAACC"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
MainActivity.java
private LinearLayout mLayout1;
private LinearLayout mLayout2;
private LinearLayout mLayout3;
private LinearLayout mLayout4;
private TextView mTextView;
private View.OnTouchListener mOnTouchListener;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLayout1 = (LinearLayout) findViewById(R.id.layout1);
mLayout2 = (LinearLayout) findViewById(R.id.layout2);
mLayout3 = (LinearLayout) findViewById(R.id.layout3);
mLayout4 = (LinearLayout) findViewById(R.id.layout4);
mTextView = (TextView) findViewById(R.id.textView);
mOnTouchListener = new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
// simple trigger to start the animation.
startAnimation();
mTextView.setOnTouchListener(null);
return true;
}
};
mTextView.setOnTouchListener(mOnTouchListener);
}
private void startAnimation() {
final LinearLayout origin = (LinearLayout) mTextView.getParent();
LinearLayout destination = null;
// I'm not sure what kind of behaviour you want. This just randomises the destination.
do {
switch (new Random().nextInt(4)) {
case 0:
destination = mLayout1;
break;
case 1:
destination = mLayout2;
break;
case 2:
destination = mLayout3;
break;
case 3:
destination = mLayout4;
break;
default:
}
// if destination == origin or is null, try again.
} while (destination == origin || destination == null);
// Create another TextView and initialise it to match mTextView
final TextView textViewNew = new TextView(this);
textViewNew.setText(mTextView.getText());
textViewNew.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextView.getTextSize());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
textViewNew.setLayoutParams(params);
textViewNew.setOnTouchListener(mOnTouchListener);
// Add the new TextView to the destination LinearLayout
destination.addView(textViewNew);
// Create animations based on origin and destination LinearLayouts
ObjectAnimator outAnimator = getOutAnimator(origin, destination);
// The in animator also requires a reference to the new TextView
ObjectAnimator inAnimator = getInAnimator(textViewNew, origin, destination);
// All animators must be created before any are started because they are calculated
// using values that are modified by the animation itself.
outAnimator.start();
inAnimator.start();
// Add a listener to update mTextView reference to the new TextView when complete.
inAnimator.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
origin.removeView(mTextView);
mTextView = textViewNew;
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
}
/**
* This method creates an ObjectAnimator to move the existing TextView out of its parent
* towards its destination
*/
private ObjectAnimator getOutAnimator(View origin, View destination) {
// Calculate the difference between x of destination and of origin
float layoutDifferenceX = destination.getX() - origin.getX();
// initialX is simply mTextView.getX()
// the distance moved == layoutDifferenceX
float finalX = mTextView.getX() + layoutDifferenceX;
ObjectAnimator animator = ObjectAnimator.ofFloat(mTextView, "x",
mTextView.getX(), finalX);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.setDuration(500);
return animator;
}
/**
* This method creates an ObjectAnimator to move the new TextView from the initial position
* of mTextView, relative to the new TextView's parent, to its destination.
*/
private ObjectAnimator getInAnimator(View newView, View origin, View destination) {
// Calculate the difference between x of destination and of origin
float layoutDifferenceX = destination.getX() - origin.getX();
// initialX relative to destination
float initialX = mTextView.getX() - layoutDifferenceX;
// finalX relative to destination == initialX relative to origin
float finalX = mTextView.getX();
ObjectAnimator animator = ObjectAnimator.ofFloat(newView, "x",
initialX, finalX);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.setDuration(500);
return animator;
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
EDIT: You could also declare the TextView in xml and inflate it to get rid of all the code initialising it.

Why my animation does not stop in the to-x given value?

I want to move a view on touch and when the user unholds this view, it is started an animation which moves my view to the end of its parent.
This is my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/time_view"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<AbsoluteLayout
android:id="#+id/slide_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_margin="20dp"
android:background="#0000FF" >
<View
android:id="#+id/slide_to_pause"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#00FFFF" />
</AbsoluteLayout>
</RelativeLayout>
This is how I set the view to move in my onCreate:
slideView = ((View) findViewById(R.id.slide_to_pause));
slideView.setOnTouchListener(this);
This is how I move the view and starts the animation:
#Override
public boolean onTouch(View view, MotionEvent event) {
AbsoluteLayout.LayoutParams layoutParams = (AbsoluteLayout.LayoutParams) view.getLayoutParams();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
mX = event.getRawX();
break;
case MotionEvent.ACTION_UP:
int endOfAnimation = findViewById(R.id.slide_layout).getWidth() - view.getWidth();
mSlideAnimation = new TranslateAnimation(0, endOfAnimation - layoutParams.x, 0, 0);
mSlideAnimation.setDuration(1000);
view.startAnimation(mSlideAnimation);
Log.d(TAG, "endOfAnimation = " + layoutParams.x + " | " + endOfAnimation);
break;
case MotionEvent.ACTION_MOVE:
layoutParams.x = (int) event.getRawX();
view.setLayoutParams(layoutParams);
break;
}
return true;
}
The problem is that when the view arrives at the end it comes back to a point in the midle of the screen, which is the point where the user unholds the view.
How can I fix this?
Thank you!
You need to use
mSlideAnimation.setFillAfter(true);
to make it not revert back to the start.
If that doesn't work you might have to follow the suggestion on Animation.setFillAfter/Before - Do they work/What are they for?
You can simulate animation manually (move views yourself, without animation framework) by using
View.offsetLeftAndRight(int offset)
View.offsetTopAndBottom(int offset)

Access variable inside same class

I have a custom view class with a button and I let the user touch the screen so I can retrieve the coordinates. What I want to do is, whenever he clicks the button, to set its text to the coordinates of his touch. How do I do this?
public class TargetView extends RelativeLayout{
.
.
.
public float x=0;
public float y=0;
public TargetView(final Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
((Activity)getContext())
.getLayoutInflater()
.inflate(R.layout.target_view, this, true);
Target=findViewById(R.id.target);
Undo=(Button)findViewById(R.id.undo_bt);
Undo.setOnClickListener(new OnClickListener(){
public void onClick(View v) {
Log.d("x,y",(String.valueOf(x)+","+String.valueOf(y)));
Undo.setText(String.valueOf(x)+","+String.valueOf(y));
}
});
#Override
public boolean onTouchEvent(MotionEvent event){
switch (event.getAction()){
case (MotionEvent.ACTION_DOWN): {
x = event.getX();
y = event.getY();
}
return false;
}
.
.
.
}
EDIT
I have added a Log.d inside the button listener and it seems that the button gets clicked only before the user touches the rest of the screen and changes x,y (text changes to "0.0").
My .xml files:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.archer.test.TargetView
android:id="#+id/myTargetView"
android:layout_width="300dip"
android:layout_height="300dip"
android:layout_gravity="center_horizontal"
android:background="#drawable/target" >
</android.archer.test.TargetView>
</LinearLayout>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<View
android:id="#+id/target"
android:layout_width="300dp"
android:layout_height="350dip" />
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/undo_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="-" />
</RelativeLayout>
- Return super.onTouchEvent(event) at the end of onTouchEvent method.
Eg:
#Override
public boolean onTouchEvent(MotionEvent event){
switch (event.getAction()){
case (MotionEvent.ACTION_DOWN): {
x = event.getX();
y = event.getY();
}
return super.onTouchEvent(event);
}
- Moreover, there is an hierarchy of views that Android maintains and the events are handled accordingly. Every View in the hierarchy gets the event, but only if the parent event has not consume it. Meaning - if you have a parent view that handles onTouchEvent() and returns true every time, then the child never receives the event.
Change return in your snippet:
#Override
public boolean onTouchEvent(MotionEvent event){
switch (event.getAction()){
case (MotionEvent.ACTION_DOWN): {
x = event.getX();
y = event.getY();
}
return false;
}
to return true;
And if possible, you can put log into your onTouchEvent to see if it can return the coordinates.

Android: Scrollable (horizontal and vertical) ImageView with Buttons overlayed

I want to implement an activity where the only thing you see is a big image, which can be scrolled horizontally and vertically.On Top of that image I want to display buttons, that can be clicked and trigger certain actions (like creating an intent to start a new activity).
First I was thinking about a ScrollView, that has a FrameLayout as a child. The FrameLayout could have the image as a background and can have the buttons as childs. Because I know the position of my buttons exactly I could place them with absolute coordinates. Here is my first code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:layout_width="1298px"
android:layout_height="945px"
android:background="#drawable/myimage">
<Button
android:id="#+id/mybutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="115px"
android:layout_y="128px"/>
</FrameLayout>
</ScrollView>
The Problem is, that you can only scroll a ScrollView vertically. HorizontalScrollView doesn't solve the Problem, cause it only scrolls in one direction either. Can I mix them somehow? Is there another solution?
I found some similar threads on stackoverflow, where people put the image into a WebView and get horizonzal/vertical scrolling for free (here). Or someone put the image in an imageview and gave the imageview an onTouchListener to handle scrolling (here). The Problem with both ways is, that I either way I dont think you can put Buttons on top of the image, which is what I need to do.
I would very appreciate if someone help me out.
Using the (deprecated!!!) AbsoluteLayout and giving it and onTouchListener solved my problem:
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/myImage"
android:layout_width="1298px"
android:layout_height="945px"
android:layout_x="0px"
android:layout_y="0px" />
<Button
android:id="#+id/myButton"
android:text="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="50px"
android:layout_y="300px"
android:tag="1"/>
</AbsoluteLayout>
private float mx;
private float my;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout);
final Button button = (Button)findViewById(R.id.myButton);
button.setOnClickListener (new View.OnClickListener(){
// OnClickAction
});
final AbsoluteLayout switcherView = (AbsoluteLayout) this.findViewById(R.id.myLayout);
switcherView.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View arg0, MotionEvent event) {
float curX, curY;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mx = event.getX();
my = event.getY();
break;
case MotionEvent.ACTION_MOVE:
curX = event.getX();
curY = event.getY();
switcherView.scrollBy((int) (mx - curX), (int) (my - curY));
mx = curX;
my = curY;
break;
case MotionEvent.ACTION_UP:
curX = event.getX();
curY = event.getY();
switcherView.scrollBy((int) (mx - curX), (int) (my - curY));
break;
}
return true;
}
});
}

Scrollview vertical and horizontal in android

I'm really tired looking for a solution for vertical and horizontal Scrollview.
I read that there are not any views/layouts in the framework which implement this feature, but I need something like this:
I need to define a layout within other, the child layout must implement scrolling vertical/horizontal for moving.
Initially implemented a code that moved the layout pixel by pixel, but I think that is not the right way.
I tried it with ScrollView and Horizontal ScrollView but nothing works like I want it to, because it only implements vertical or horizontal scrolling.
Canvas is not my solution because I need to attach listeners in someones child elements.
What can I do?
Mixing some of the suggestions above, and was able to get a good solution:
Custom ScrollView:
package com.scrollable.view;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;
public class VScroll extends ScrollView {
public VScroll(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public VScroll(Context context, AttributeSet attrs) {
super(context, attrs);
}
public VScroll(Context context) {
super(context);
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return false;
}
}
Custom HorizontalScrollView:
package com.scrollable.view;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.HorizontalScrollView;
public class HScroll extends HorizontalScrollView {
public HScroll(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public HScroll(Context context, AttributeSet attrs) {
super(context, attrs);
}
public HScroll(Context context) {
super(context);
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return false;
}
}
the ScrollableImageActivity:
package com.scrollable.view;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.HorizontalScrollView;
import android.widget.ScrollView;
public class ScrollableImageActivity extends Activity {
private float mx, my;
private float curX, curY;
private ScrollView vScroll;
private HorizontalScrollView hScroll;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
vScroll = (ScrollView) findViewById(R.id.vScroll);
hScroll = (HorizontalScrollView) findViewById(R.id.hScroll);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
float curX, curY;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mx = event.getX();
my = event.getY();
break;
case MotionEvent.ACTION_MOVE:
curX = event.getX();
curY = event.getY();
vScroll.scrollBy((int) (mx - curX), (int) (my - curY));
hScroll.scrollBy((int) (mx - curX), (int) (my - curY));
mx = curX;
my = curY;
break;
case MotionEvent.ACTION_UP:
curX = event.getX();
curY = event.getY();
vScroll.scrollBy((int) (mx - curX), (int) (my - curY));
hScroll.scrollBy((int) (mx - curX), (int) (my - curY));
break;
}
return true;
}
}
the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.scrollable.view.VScroll android:layout_height="fill_parent"
android:layout_width="fill_parent" android:id="#+id/vScroll">
<com.scrollable.view.HScroll android:id="#+id/hScroll"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="#drawable/bg"></ImageView>
</com.scrollable.view.HScroll>
</com.scrollable.view.VScroll>
</LinearLayout>
Since this seems to be the first search result in Google for "Android vertical+horizontal ScrollView", I thought I should add this here. Matt Clark has built a custom view based on the Android source, and it seems to work perfectly: Two Dimensional ScrollView
Beware that the class in that page has a bug calculating the view's horizonal width. A fix by Manuel Hilty is in the comments:
Solution: Replace the statement on line 808 by the following:
final int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(lp.leftMargin + lp.rightMargin, MeasureSpec.UNSPECIFIED);
Edit: The Link doesn't work anymore but here is a link to an old version of the blogpost.
I found a better solution.
XML: (design.xml)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent">
<FrameLayout android:layout_width="90px" android:layout_height="90px">
<RelativeLayout android:id="#+id/container" android:layout_width="fill_parent" android:layout_height="fill_parent">
</RelativeLayout>
</FrameLayout>
</FrameLayout>
Java Code:
public class Example extends Activity {
private RelativeLayout container;
private int currentX;
private int currentY;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.design);
container = (RelativeLayout)findViewById(R.id.container);
int top = 0;
int left = 0;
ImageView image1 = ...
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(left, top, 0, 0);
container.addView(image1, layoutParams);
ImageView image2 = ...
left+= 100;
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(left, top, 0, 0);
container.addView(image2, layoutParams);
ImageView image3 = ...
left= 0;
top+= 100;
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(left, top, 0, 0);
container.addView(image3, layoutParams);
ImageView image4 = ...
left+= 100;
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(left, top, 0, 0);
container.addView(image4, layoutParams);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
currentX = (int) event.getRawX();
currentY = (int) event.getRawY();
break;
}
case MotionEvent.ACTION_MOVE: {
int x2 = (int) event.getRawX();
int y2 = (int) event.getRawY();
container.scrollBy(currentX - x2 , currentY - y2);
currentX = x2;
currentY = y2;
break;
}
case MotionEvent.ACTION_UP: {
break;
}
}
return true;
}
}
That's works!!!
If you want to load other layout or control, the structure is the same.
I use it and works fine:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="#+id/ScrollView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<HorizontalScrollView android:id="#+id/HorizontalScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/ImageView01"
android:src="#drawable/pic"
android:isScrollContainer="true"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:adjustViewBounds="true">
</ImageView>
</HorizontalScrollView>
</ScrollView>
The source link is here: Android-spa
My solution based on Mahdi Hijazi answer, but without any custom views:
Layout:
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ScrollView
android:id="#+id/scrollVertical"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<WateverViewYouWant/>
</ScrollView>
</HorizontalScrollView>
Code (onCreate/onCreateView):
final HorizontalScrollView hScroll = (HorizontalScrollView) value.findViewById(R.id.scrollHorizontal);
final ScrollView vScroll = (ScrollView) value.findViewById(R.id.scrollVertical);
vScroll.setOnTouchListener(new View.OnTouchListener() { //inner scroll listener
#Override
public boolean onTouch(View v, MotionEvent event) {
return false;
}
});
hScroll.setOnTouchListener(new View.OnTouchListener() { //outer scroll listener
private float mx, my, curX, curY;
private boolean started = false;
#Override
public boolean onTouch(View v, MotionEvent event) {
curX = event.getX();
curY = event.getY();
int dx = (int) (mx - curX);
int dy = (int) (my - curY);
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
if (started) {
vScroll.scrollBy(0, dy);
hScroll.scrollBy(dx, 0);
} else {
started = true;
}
mx = curX;
my = curY;
break;
case MotionEvent.ACTION_UP:
vScroll.scrollBy(0, dy);
hScroll.scrollBy(dx, 0);
started = false;
break;
}
return true;
}
});
You can change the order of the scrollviews. Just change their order in layout and in the code. And obviously instead of WateverViewYouWant you put the layout/views you want to scroll both directions.
Option #1: You can come up with a new UI design that does not require simultaneous horizontal and vertical scrolling.
Option #2: You can obtain the source code to ScrollView and HorizontalScrollView, learn how the core Android team implemented those, and create your own BiDirectionalScrollView implementation.
Option #3: You can get rid of the dependencies that are requiring you to use the widget system and draw straight to the Canvas.
Option #4: If you stumble upon an open source application that seems to implement what you seek, look to see how they did it.
Try this
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="#+id/Sview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<HorizontalScrollView
android:id="#+id/hview"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView .......
[here xml code for image]
</ImageView>
</HorizontalScrollView>
</ScrollView>
since the Two Dimensional Scrollview link is dead I could not get it so I created my own component. It handles flinging and works properly for me.
The only restriction is that wrap_content might not work properly for that component.
https://gist.github.com/androidseb/9902093
I have a solution for your problem. You can check the ScrollView code it handles only vertical scrolling and ignores the horizontal one and modify this. I wanted a view like a webview, so modified ScrollView and it worked well for me. But this may not suit your needs.
Let me know what kind of UI you are targeting for.
Regards,
Ravi Pandit
Playing with the code, you can put an HorizontalScrollView into an ScrollView. Thereby, you can have the two scroll method in the same view.
Source : http://androiddevblog.blogspot.com/2009/12/creating-two-dimensions-scroll-view.html
I hope this could help you.
use this way
I tried this I fixed it
Put All your XML layout inside
<android.support.v4.widget.NestedScrollView
I explained this in this link
vertical recyclerView and Horizontal recyclerview scrolling together
If you want to scroll vertically and horizontally this is an example:
Horizontal scroll inside vertical scroll and both works:
<ScrollView
android:id="#+id/verticalScroll"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
<HorizontalScrollView
android:id="#+id/horizontalScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
*android:overScrollMode="never"*>
...
</HorizontalScrollView>
...
</ScrollView>

Categories

Resources