Android: Scrolling an Imageview

Android: Scrolling an Imageview

@cV2 Thank you so much for that code. It got me going in the direction I needed. Here's my modified version which stops scrolling at the edges of the image...

    // set maximum scroll amount (based on center of image)
int maxX = (int)((bitmapWidth / 2) - (screenWidth / 2));
int maxY = (int)((bitmapHeight / 2) - (screenHeight / 2));

// set scroll limits
final int maxLeft = (maxX * -1);
final int maxRight = maxX;
final int maxTop = (maxY * -1);
final int maxBottom = maxY;

// set touchlistener
ImageView_BitmapView.setOnTouchListener(new View.OnTouchListener()
{
float downX, downY;
int totalX, totalY;
int scrollByX, scrollByY;
public boolean onTouch(View view, MotionEvent event)
{
float currentX, currentY;
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
downX = event.getX();
downY = event.getY();
break;

case MotionEvent.ACTION_MOVE:
currentX = event.getX();
currentY = event.getY();
scrollByX = (int)(downX - currentX);
scrollByY = (int)(downY - currentY);

// scrolling to left side of image (pic moving to the right)
if (currentX > downX)
{
if (totalX == maxLeft)
{
scrollByX = 0;
}
if (totalX > maxLeft)
{
totalX = totalX + scrollByX;
}
if (totalX < maxLeft)
{
scrollByX = maxLeft - (totalX - scrollByX);
totalX = maxLeft;
}
}

// scrolling to right side of image (pic moving to the left)
if (currentX < downX)
{
if (totalX == maxRight)
{
scrollByX = 0;
}
if (totalX < maxRight)
{
totalX = totalX + scrollByX;
}
if (totalX > maxRight)
{
scrollByX = maxRight - (totalX - scrollByX);
totalX = maxRight;
}
}

// scrolling to top of image (pic moving to the bottom)
if (currentY > downY)
{
if (totalY == maxTop)
{
scrollByY = 0;
}
if (totalY > maxTop)
{
totalY = totalY + scrollByY;
}
if (totalY < maxTop)
{
scrollByY = maxTop - (totalY - scrollByY);
totalY = maxTop;
}
}

// scrolling to bottom of image (pic moving to the top)
if (currentY < downY)
{
if (totalY == maxBottom)
{
scrollByY = 0;
}
if (totalY < maxBottom)
{
totalY = totalY + scrollByY;
}
if (totalY > maxBottom)
{
scrollByY = maxBottom - (totalY - scrollByY);
totalY = maxBottom;
}
}

ImageView_BitmapView.scrollBy(scrollByX, scrollByY);
downX = currentX;
downY = currentY;
break;

}

return true;
}
});

I'm sure it could be refined a bit, but it works pretty well. :)

Scrolling a wide image using imageview (Android)

You have a lot of problems in your layout first of all the nested layout within the ScrollView a LinearLayout that only holds ImageView which is unnecessary, Also ScrollView will automatically scroll the vertical axis of the Image not its Horizontal axis consider using HorizontalScrollView that fit in your needs.

I remake your layout with the use of HorizontalScrollView to scroll on it horizontally which work perfectly:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#0099cc"
tools:context=".FullscreenActivity" >

<TextView
android:id="@+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:keepScreenOn="true"
android:text="SAMPLE"
android:textColor="#33b5e5"
android:textSize="50sp"
android:textStyle="bold" />

<HorizontalScrollView
android:layout_width="500dp"
android:layout_height="fill_parent"
android:layout_marginTop="0dp" >

<ImageView
android:id="@+id/imageHelp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/lal" />
</HorizontalScrollView>

</FrameLayout>

Android: ScrollView with text scrolling over imageview

Even when you scroll, the padding of 300dp stays, and that's why your textviews go behind the image.
So instead of adding a padding to your scrollview, put an empty textview (or any layout) with the required height (300 dp here) inside the scrollview.
Code goes something like this:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.rcarb.testlayout.MainActivity">

<ImageView
android:layout_width="300dp"
android:layout_height="300dp"
android:src="@drawable/ic_android_black_24dp" />

<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="300dp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HELLO"
android:textSize="50sp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</FrameLayout>

How can I get my imageView to scroll horizontally as well as vertically?

Just do this.

<ScrollView
android:id="@+id/layout0"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:id="@+id/layout1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView
android:id="@+id/layout2"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:id="@+id/layout3"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
<!-- Your ImageVIew -->
</ImageVIew>
</LinearLayout>

</HorizontalScrollView>

</LinearLayout>

</ScrollView>

But as you see, it seems very unefficient. You can solve your problem by scale your image view to a appropriate scaleType and using one ScrollView.

Android scrollview with imageview not working

First of all use NestedScrollView as your scroll view. Secondly try this:

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>

<ImageView
android:id="@+id/theImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop" />

<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>

</LinearLayout>

</NestedScrollView>
</FrameLayout>

Hope it helps.

RecyclerView + ImageView scrolling

In your xml file

<RelativeLayout
android:layout_width="match_parent"
android:layout_width="match_parent">

<!-- TODO: This view should be part of the recyclerview scroll, we should find a solution for this -->
<ImageView
android:id="@+id/upArrow"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:src="@drawable/ic_my_up_triangle_vector"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />

<android.support.v7.widget.RecyclerView
android:id="@+id/my_rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:paddingBottom="40dp">

</android.support.v7.widget.RecyclerView>

</RelativeLayout>

What this code does is it places your RecyclerView on top of your ImageView and the padding at bottom is used to show the image at bottom. Change Height of the ImageView and Padding of the RecyclerView accordingly.

How to add imageView dynamically to scroll view which has linear layout?

Here's what your MainActivity.java would look like,

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.ArrayAdapter;

import android.widget.GridView;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements OnItemClickListener {

ArrayAdapter<String> nosAdapter;

GridView gridView;

int images[] = { R.drawable.one, R.drawable.two, R.drawable.three,

R.drawable.four, R.drawable.five, R.drawable.six, R.drawable.seven,

R.drawable.eight, R.drawable.nine, R.drawable.ten, R.drawable.zero,

R.drawable.blank };

MyGridViewAdapter adapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

gridView = (GridView) findViewById(R.id.GridView);

adapter = new MyGridViewAdapter(this, images);

gridView.setAdapter(adapter);

gridView.setOnItemClickListener(this);

}

@Override

public void onItemClick(AdapterView<?> arg0, View arg1, int pos, long arg3) {

Toast.makeText(this, "Item at pos "+pos+" clicked", Toast.LENGTH_SHORT).show();

}

}


Related Topics



Leave a reply



Submit