Drag and Drop images on Custom View - android

I am planning to make and app in which I can drag and drop different types of ball images into a some sort of a field. To do so, I have made a simple example, in which I have examples of ball's images and I want to drag an drop multiple copies of it inside the field. This is the example I've been doing some research and I've found that to do so, the best way is to have a customview object that will act as the field. It will contain a list of all the images I have and their positions in the field.
I am missing last step where I drop the image inside the customview and it is added inside the list of images it contains with it X and Y position so I am able to recover the image later with all its balls.
How can I do it? Here is the code I already have:
Layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="10dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="LIST OF ITEMS TO DRAG"
android:textSize="25sp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ball"
android:layout_margin="10dp"
android:id="#+id/image_to_drag"
/>
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ball2"
android:layout_margin="10dp"
android:id="#+id/image_to_drag2"
/>
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ball3"
android:layout_margin="10dp"
android:id="#+id/image_to_drag3"
/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="CUSTOMVIEW WHERE DROP"
android:textSize="25sp"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<com.dragandrop.canvas.canvas.Salon
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/salon_1"
android:background="#96e29b"
/>
</FrameLayout>
</LinearLayout>
CustomView class
public class Field extends View
{
Context context;
public Salon(Context context, AttributeSet attrs)
{
super(context,attrs);
this.context = context;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Resources res = getResources();
float left = 0;
float top = 0;
}
}
Main Activity
public class MainActivity extends AppCompatActivity {
ImageView image;
ImageView image2;
ImageView image3;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
image = (ImageView) findViewById(R.id.image_to_drag);
image2 = (ImageView) findViewById(R.id.image_to_drag2);
image3 = (ImageView) findViewById(R.id.image_to_drag3);
image.setOnLongClickListener(new View.OnLongClickListener() {
#Override
public boolean onLongClick(View v) {
ClipData clipData = ClipData.newPlainText("","");
View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(image);
image.startDrag(clipData,shadowBuilder,image,0);
return false;
}
});
image2.setOnLongClickListener(new View.OnLongClickListener() {
#Override
public boolean onLongClick(View v) {
ClipData clipData = ClipData.newPlainText("","");
View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(image2);
image2.startDrag(clipData,shadowBuilder,image2,0);
return false;
}
});
image3.setOnLongClickListener(new View.OnLongClickListener() {
#Override
public boolean onLongClick(View v) {
ClipData clipData = ClipData.newPlainText("","");
View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(image3);
image3.startDrag(clipData,shadowBuilder,image3,0);
return false;
}
});
}
}

Related

How to enable/disable zooming at runtime?

I am working on images, I am going to display image in full screen, as user touches on screen then some controls will be shown. So I want to disable zooming when controls are on the screen.
Or somebody tell me how to detect the image is zoom or not?
activity_image.xml
<?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:gravity="center">
<ImageView
android:id="#+id/imgSelected"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:scaleType="centerInside"
android:src="#drawable/placeholder"
android:contentDescription="#string/image" />
<LinearLayout
android:id="#+id/imageControls"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:weightSum="9"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:orientation="horizontal"
android:visibility="gone"
android:background="#drawable/image_controls">
<Button
android:id="#+id/btnSetAsBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:gravity="left|center_vertical"
android:background="#00000000"
style="#style/ImageControls"
android:text="Set"/>
<Button
android:id="#+id/btnFavorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:background="#00000000"
style="#style/ImageControls"
android:text="Favourite"/>
<Button
android:id="#+id/btnShare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:gravity="right|center_vertical"
android:background="#00000000"
style="#style/ImageControls"
android:text="Share"/>
</LinearLayout>
</RelativeLayout>
activity_zoom.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center" >
</LinearLayout>
ImageActivity.java
public class ImageActivity extends Activity {
private int imageId;
private int categoryId;
private String imageUrl;
private ZoomView zoomView;
private ImageView imageView;
private LinearLayout main_container;
private boolean controlFlag;
private LinearLayout imageControls;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_zoom);
if (Build.VERSION.SDK_INT < 16) {
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
final View convertView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.activity_image, null, false);
convertView.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
imageControls = (LinearLayout) convertView.findViewById(R.id.imageControls);
controlFlag = false;
zoomView = new ZoomView(this);
imageId = getIntent().getExtras().getInt("image");
categoryId = getIntent().getExtras().getInt("category");
imageView = (ImageView) convertView.findViewById(R.id.imgSelected);
imageUrl = SplashActivity.urlList.get(categoryId).get(imageId);
Log.e(String.valueOf(categoryId),imageUrl);
Picasso
.with(this)
.load(imageUrl)
.placeholder(R.drawable.placeholder)
.into(imageView, new Callback() {
#Override
public void onError() {
}
#Override
public void onSuccess() {
imageView.setScaleType(ScaleType.FIT_CENTER);
}
});
zoomView.addView(convertView);
main_container = (LinearLayout) findViewById(R.id.main_container);
main_container.addView(zoomView);
convertView.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View arg0, MotionEvent arg1) {
if(controlFlag) {
imageControls.setVisibility(View.GONE);
controlFlag = false;
} else {
imageControls.setVisibility(View.VISIBLE);
controlFlag = true;
}
return false;
}
});
}
}
I am using android-zoom-view.jar library for zooming. I want to display LinearLayout (imageControls) only if image is not zoom Or disable zooming if LinearLayout (imageControls) is visible. Because ZoomView instance perform zooming on all over activity so the imageControls will also be zoom. This is not a good user friendly design.
So please help me to make this layout better.
Thanks...
In zoomview class thinking you using this https://github.com/Polidea/android-zoom-view/blob/master/src/pl/polidea/view/ZoomView.java
just add this
boolean isZoomEnable= true;
public void setIsZoomEnable(boolean value){
isZoomEnable = value;
}
#Override
public boolean dispatchTouchEvent(final MotionEvent ev) {
if(!isZoomEnable) return false;
// single touch
if (ev.getPointerCount() == 1) {
processSingleTouchEvent(ev);
}
// // double touch
if (ev.getPointerCount() == 2) {
processDoubleTouchEvent(ev);
}
// redraw
getRootView().invalidate();
invalidate();
return true;
}
Then in your code
convertView.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View arg0, MotionEvent arg1) {
if(controlFlag) {
imageControls.setVisibility(View.GONE);
controlFlag = false;
} else {
imageControls.setVisibility(View.VISIBLE);
controlFlag = true;
}
zoomView.setIsZoomEnable(!controlFlag);
return false;
}
});

How to make a list of square buttons with autoresize?

I am developing an app that displays a page with a variable number of square buttons, like the second picture of "Square MIUI":
Square MIUI on APP store
I need displaying only three columns of square buttons, and make the entire list scrollable.
I'm trying first with plain XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical" >
<ScrollView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1.19"
android:orientation="horizontal" >
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Title"/>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<!-- Icon buttons here -->
</TableRow>
</TableLayout>
</ScrollView>
<Button
android:layout_width="fill_parent"
android:layout_height="48dp"
android:text="Button" />
</LinearLayout>
For every button (4 TableRow of 3 buttons, images are square .png made with Eclipse icon generator)
EDIT: checked, icons of all screen densities are square
<Button
android:layout_margin="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="image"/>
but the buttons on my tablet are square, and on my phone are wider than tall (stretched on X-axis).
What I'm doing wrong?
TODO: code a variable button number.
Thanks in advance.
EDIT:
I tried this code:
private void squareButton() {
square(R.id.b1);
square(R.id.b2);
....
square(R.id.b<N>);
}
private void square(int id) {
ImageButton temp=(ImageButton) findViewById(id);
int l=temp.getWidth();
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int Measuredwidth = metrics.widthPixels;
l=(int) (Measuredwidth/4);
temp.setMaxWidth(l);
temp.setMaxHeight(l);
temp.setMinimumWidth(l);
temp.setMinimumHeight(l);
LayoutParams param = temp.getLayoutParams();
param.width = l;
param.height = l;
temp.setLayoutParams(param);
temp.requestLayout();
}
But I'm still getting weird buttons on phone (Gingerbread)...
I can't rely only on the auto-sized icons (too little on my tablet, too big on my phone)
EDIT:
I'm looking for a code that:
squares button
has user-definable width
works with Gingerbread
In my case, button_width = widthPixels/4;
Thank you in advance.
Implements you own square button class like this:
public class SquareButton extends Button {
public SquareButton(Context context) {
super(context);
}
public SquareButton(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SquareButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); // Snap to width
}
}
Finally, I found a solution using GridView.
First, I follow the GridView tutorial
Then I got some code from other answers.
Now this code creates a scrollable and clickable big square icon list, resized according to screen size. When one icon is clicked, changes his image.
Thank you Lubos for your suggestion.
[main activity]
public class Grid extends Activity {
public boolean audio=true;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_grid);
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
// load icons on grid
ImageAdapter.loadImages(new Integer[] {
R.drawable.ic_blu_voice_on,
R.drawable.ic_blu_help,
R.drawable.ic_blu_save,
R.drawable.ic_blu_load
});
gridview.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View imgView, int position, long id) {
ImageView image=(ImageView) imgView;
switch (position) {
case 0:
// switch voice icon on/off when clicked
image.setImageResource(voice());
break;
}
Toast.makeText(Grid.this, "" + position, Toast.LENGTH_SHORT).show();
}
});
}
private int voice() {
audio=!audio;
if (audio) return R.drawable.ic_blu_voice_on;
return R.drawable.ic_blu_voice_off;
}
}
[imageadapter.java]
public class ImageAdapter extends BaseAdapter {
private Context mContext;
// reference to images (dummy)
private static Integer[] mThumbIds = {0,0};
private float px;
public ImageAdapter(Context c) {
mContext = c;
//Calculation of ImageView Size - density independent.
Resources r = Resources.getSystem();
px = r.getDisplayMetrics().widthPixels;
px=px/3;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
public static void setImage(int position, int id) {
mThumbIds[position]=id;
}
public static void loadImages(Integer[] images) {
mThumbIds = images;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) { // if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams((int)px, (int)px));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
}
[activity_grid.xml]
<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
tools:context="${packageName}.${activityClass}">
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context="${relativePackage}.${activityClass}" >
<TextView
android:id="#+id/testo1"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:gravity="center_horizontal"
android:text="#string/hello_world"
android:textSize="30sp" />
<GridView
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:columnWidth="120dp"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="spacingWidthUniform">
</GridView>
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:textSize="30sp" />
</LinearLayout>
</RelativeLayout>

Compare 2 ImageViews in android

I currently working on a Drag 'n' Drop application.
My app has 2 layouts.
The 1st layout is 2 balls (Images) of different color.
The 2nd layout is 3 balls (Images) of different color.
When the user drags one ball onto any layout & drops that ball onto the other layout, the app then checks if a ball with the same color is in this layout: if so, it then removes those 2 balls, otherwise adds the ball to that layout.
My XML file
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:id="#+id/relative">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="150sp"
android:background="#00FF00"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ball_red" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ball_blue" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ball_pink" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/linearLayout1"
android:layout_centerHorizontal="true"
android:background="#0F0F0F">
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/ball_red" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/ball_yellow" />
</LinearLayout>
</RelativeLayout>
My Activity Class
public class MainActivity extends Activity implements OnTouchListener, OnDragListener{
ImageView i1,i2,i3,i4,i5,i6;
Drawable d1,d2;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
i1=(ImageView) findViewById(R.id.imageView1); i2=(ImageView) findViewById(R.id.imageView2);
i5=(ImageView) findViewById(R.id.imageView5); i6=(ImageView) findViewById(R.id.imageView6); i4=(ImageView) findViewById(R.id.imageView4);
findViewById(R.id.linearLayout1).setOnDragListener(this);
findViewById(R.id.linearLayout2).setOnDragListener(this);
i6.setOnTouchListener(this); i5.setOnTouchListener(this); i2.setOnTouchListener(this); i1.setOnTouchListener(this);
i4.setOnTouchListener(this);
d1=i1.getDrawable(); d2=i6.getDrawable();
}
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
#SuppressLint("NewApi")
#Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
if (event.getAction() == MotionEvent.ACTION_DOWN) {
DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(v);
v.startDrag(null, shadowBuilder, v, 0);
v.setVisibility(View.VISIBLE);
return true;
}
else {
return false;
}
}
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
#SuppressLint("NewApi")
#Override
public boolean onDrag(View v, DragEvent e) {
// TODO Auto-generated method stub
if (e.getAction()==DragEvent.ACTION_DROP) {
View view = (View) e.getLocalState();
ViewGroup from = (ViewGroup) view.getParent();
from.removeView(view);
LinearLayout to = (LinearLayout) v;
boolean comp=false;
comp=compareDrawable(d1, d2);;
if(comp == false)
{
to.addView(view);
view.setVisibility(View.VISIBLE);
Toast.makeText(getApplicationContext(), "Add.", Toast.LENGTH_LONG ).show();
}
else
{
to.removeView(view);
from.addView(view);
view.setVisibility(View.INVISIBLE);
Toast.makeText(getApplicationContext(), "Remove.", Toast.LENGTH_LONG ).show();
}
}
return true;
}
public boolean compareDrawable(Drawable d1, Drawable d2){
try{
Bitmap bitmap1 = ((BitmapDrawable)d1).getBitmap();
ByteArrayOutputStream stream1 = new ByteArrayOutputStream();
bitmap1.compress(Bitmap.CompressFormat.JPEG, 100, stream1);
stream1.flush();
byte[] bitmapdata1 = stream1.toByteArray();
stream1.close();
Bitmap bitmap2 = ((BitmapDrawable)d2).getBitmap();
ByteArrayOutputStream stream2 = new ByteArrayOutputStream();
bitmap2.compress(Bitmap.CompressFormat.JPEG, 100, stream2);
stream2.flush();
byte[] bitmapdata2 = stream2.toByteArray();
stream2.close();
return bitmapdata1.equals(bitmapdata2);
}
catch (Exception e) {
// TODO: handle exception
}
return false;
}
}
Get the 2 images ID then compare it,
if(img1.getId()==img2.getId())
{
//Your stuff
}
or try this
Bitmap bitmap = ((BitmapDrawable)img1).getBitmap();
Bitmap bitmap2 = ((BitmapDrawable)img2).getBitmap();
if(bitmap == bitmap2)
{
//Code blcok
}
I believe that what you actually need is to compare if two bitmaps are the same content.
For this you must use Bitmap.sameAs(Bitmap) look at it here
As an advice don't compare objects with "==" but using equals!
PS : sameAs method is starting from API 12

android - onClickListener causes a reset of my animation

I have an Activity with some elements like ImageView, Button, ToggleButton, ... . And a subview (LinearLayout) that contains an HorizontalScrollView of ImageView.
The subview is an element that I want to hide / show with an animation.
My animation works successfully. But when I touch a ToggleButton or I apply a Filter, the subview is reseted and back to its origin position.
I have deduce that the subview is replaced in its origin when an element of the view visually change.
But I don't understand why...
The Activity class
public class CameraActivity extends Activity implements PictureCallback
{
private ToggleButton flashButton;
private Button filterScrollButton;
private LinearLayout filterScrollView;
private LinearLayout filterScrollViewLayout;
private Boolean filtersIsOpened = false;
private ImageView filterImageView;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_camera);
// Show the Up button in the action bar.
getActionBar().setDisplayHomeAsUpEnabled(true);
flashButton = (ToggleButton)findViewById(R.id.button_flash);
filterScrollButton = (Button)findViewById(R.id.button_open_filters);
filterScrollView = (LinearLayout)findViewById(R.id.camera_scroll_filters);
filterScrollViewLayout = (LinearLayout)findViewById(R.id.camera_scroll_filters_layout);
}
...
private void initScrollFilters()
{
String[] filters = getResources().getStringArray(R.array.array_filters);
for (final String string : filters)
{
ImageView v = new ImageView(CameraActivity.this);
int imageFilterId = -1;
if (string != null && !string.isEmpty())
{
final int imageId = getResources().getIdentifier("#drawable/filter_" + string, null, getPackageName());
imageFilterId = getResources().getIdentifier("#drawable/filter_" + string, null, getPackageName());
v.setImageDrawable(getResources().getDrawable(imageId));
}
final int finalImageFilterId = imageFilterId;
v.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View view) {
Log.d(string + " filter image is touched");
CameraActivity.this.cameraManager.setImageFilter(finalImageFilterId); // Apply the new filter into filterImageView
}
});
filterScrollViewLayout.addView(v, 100, 100);
}
}
private void initListeners()
{
// Flash
flashButton.setOnCheckedChangeListener(new OnCheckedChangeListener()
{
#Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked)
{
// camera parameters is changed
}
});
// Filter scroll view
filterScrollButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v)
{
Log.d("You click the filter scroll button men!!");
final float direction = (CameraActivity.this.filtersIsOpened) ? -1 : 1;
final float yDelta = -100;
final Animation animation = new TranslateAnimation(0, 0, 0, yDelta * direction);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation)
{
TranslateAnimation anim = new TranslateAnimation(0.0f, 0.0f, 0.0f, 0.0f);
anim.setDuration(1);
CameraActivity.this.filterScrollView.startAnimation(anim);
int top = (int) (CameraActivity.this.filterScrollView.getTop() + (yDelta * direction));
CameraActivity.this.filterScrollView.setTop(top);
}
});
animation.setDuration(500);
CameraActivity.this.filterScrollView.startAnimation(animation);
CameraActivity.this.filtersIsOpened = ! CameraActivity.this.filtersIsOpened;
}
});
}
...
}
The xml view
<FrameLayout 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"
tools:context=".CameraActivity" >
<CameraPreview
android:id="#+id/camera_preview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="#+id/camera_preview_filter"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:rotation="90"
android:scaleType="center"
android:contentDescription="#string/content_desc_overlay" />
<LinearLayout
android:id="#+id/camera_scroll_filters"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="-40dp"
android:paddingTop="40dp"
android:orientation="vertical"
android:clickable="false"
android:longClickable="false" >
<Button
android:id="#+id/button_open_filters"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_gravity="top|center_horizontal"
android:text="Filters" >
</Button>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF00FF00"
android:scrollbars="none" >
<LinearLayout
android:id="#+id/camera_scroll_filters_layout"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
android:background="#FF000000" >
</FrameLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:onClick="onCaptureClick"
android:text="#string/button_capture_text" />
</FrameLayout>

drag and drop auto scroll with multiple layout in android

"auto scroll not working very well when i drag and drop the image with multiple layout"
I searched all over, but could not find a solution.
i got a solution from this link:
Make a scrollView autoscroll with drag and drop in Android
#thehayro thanks for such a nice example.
but it is working for only one layout and auto scroll is also worked. but i have more than 4-5 child layout in one linear layout and this layout is in the scroll view my layout file is like:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<com.example.dragvdropdemo.MyScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/scroll_view">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/lldrag">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dip"
android:id="#+id/ll1"
android:layout_marginTop="10dip"
android:background="#android:color/darker_gray">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dr_logo" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/fb" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dip"
android:id="#+id/ll2"
android:layout_marginTop="10dip"
android:background="#android:color/darker_gray">
<ImageView
android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/twitter" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ImageView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dip"
android:id="#+id/ll3"
android:layout_marginTop="10dip"
android:background="#android:color/darker_gray">
<ImageView
android:id="#+id/ImageView1_l3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/twitter" />
<ImageView
android:id="#+id/ImageView2_l3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ImageView3_l3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dip"
android:id="#+id/ll4"
android:layout_marginTop="10dip"
android:background="#android:color/darker_gray">
<ImageView
android:id="#+id/ImageView1_l4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/twitter" />
<ImageView
android:id="#+id/ImageView2_l4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ImageView3_l4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
</com.example.dragvdropdemo.MyScrollView>
i want to drag and drop image from one to another layout.i don't know how to solve it. i have tried but i could do it.i'm don't know veryand my code is:
public class MyActivity extends Activity {
ImageView img1,img2,img3,img01;
ImageView img02,img03,img1_l3,img2_l3,img3_l3,img1_l4,img2_l4,img3_l4;
LinearLayout ll1,ll2,ll3,ll4,lldrag;
MyScrollView myScrollView;
int mScrollDistance;
private static int oldvalue;
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.mylist);
//SCROLLVIEW
myScrollView = (MyScrollView) findViewById(R.id.scroll_view);
myScrollView.setOnScrollViewListener(new MyScrollView.OnScrollViewListener() {
#Override
public void onScrollChanged1(OnScrollViewListener listener) {
// TODO Auto-generated method stub
mScrollDistance = myScrollView.getScrollY();
}
});
img1 = (ImageView)findViewById(R.id.imageView1);
img2 = (ImageView)findViewById(R.id.imageView2);
img3 = (ImageView)findViewById(R.id.imageView3);
img01 = (ImageView)findViewById(R.id.ImageView01);
img02 = (ImageView)findViewById(R.id.ImageView02);
img03 = (ImageView)findViewById(R.id.ImageView03);
img1_l3 = (ImageView)findViewById(R.id.ImageView1_l3);
img2_l3 = (ImageView)findViewById(R.id.ImageView2_l3);
img3_l3 = (ImageView)findViewById(R.id.ImageView3_l3);
img1_l4 = (ImageView)findViewById(R.id.ImageView1_l4);
img2_l4 = (ImageView)findViewById(R.id.ImageView2_l4);
img3_l4 = (ImageView)findViewById(R.id.ImageView3_l4);
ll1 = (LinearLayout)findViewById(R.id.ll1);
ll2 = (LinearLayout)findViewById(R.id.ll2);
ll3 = (LinearLayout)findViewById(R.id.ll3);
ll4 = (LinearLayout)findViewById(R.id.ll4);
lldrag = (LinearLayout)findViewById(R.id.lldrag);
img1.setOnTouchListener(new ChoiceTouchListener());
img2.setOnTouchListener(new ChoiceTouchListener());
img3.setOnTouchListener(new ChoiceTouchListener());
img01.setOnTouchListener(new ChoiceTouchListener());
img02.setOnTouchListener(new ChoiceTouchListener());
img03.setOnTouchListener(new ChoiceTouchListener());
img1_l3.setOnTouchListener(new ChoiceTouchListener());
img2_l3.setOnTouchListener(new ChoiceTouchListener());
img3_l3.setOnTouchListener(new ChoiceTouchListener());
img1_l4.setOnTouchListener(new ChoiceTouchListener());
img2_l4.setOnTouchListener(new ChoiceTouchListener());
img3_l4.setOnTouchListener(new ChoiceTouchListener());
ll1.setOnDragListener(new ChoiceDragListener());
ll2.setOnDragListener(new ChoiceDragListener());
ll3.setOnDragListener(new ChoiceDragListener());
ll4.setOnDragListener(new ChoiceDragListener());
lldrag.setOnDragListener(new ChoiceDragListener());
}
private final class ChoiceTouchListener implements OnTouchListener {
#Override
public boolean onTouch(View view, MotionEvent event) {
// TODO Auto-generated method stub
ClipData data=ClipData.newPlainText("", "");
DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
//start dragging the item touched''
view.startDrag(data, shadowBuilder, view, 0);
return true;
}
}
/**
* DragListener will handle dragged views being dropped on the drop area
* - only the drop action will have processing added to it as we are not
* - amending the default behavior for other parts of the drag process
*
*/
class ChoiceDragListener implements OnDragListener {
#Override
public boolean onDrag(View v, DragEvent event) {
switch (event.getAction()) {
case DragEvent.ACTION_DRAG_STARTED:
//no action necessary
Log.i("", "DRAGSTARTED");
break;
case DragEvent.ACTION_DRAG_ENTERED:
//no action necessary
Log.i("","DRAGENTERED");
break;
case DragEvent.ACTION_DRAG_EXITED:
//no action necessary
Log.i("","DRAGEXITED");
break;
case DragEvent.ACTION_DROP:
//handle the dragged view being dropped over a drop view
Log.i("","DROP");
View view = (View) event.getLocalState();
LinearLayout ll=(LinearLayout) view.getParent();
ll.removeView(view);
LinearLayout dropTarget = (LinearLayout) v;
ImageView dropped = (ImageView) view;
dropTarget.addView(dropped,0);
Object tag = dropTarget.getTag();
if(tag!=null)
{
int existingID = (Integer)tag;
findViewById(existingID).setVisibility(View.VISIBLE);
}
//set the tag in the target view being dropped on - to the ID of the view being dropped
dropTarget.setTag(dropped.getId());
break;
case DragEvent.ACTION_DRAG_LOCATION:
//no action necessary
int y = Math.round(event.getY());
int translatedY = y - mScrollDistance;
Log.i("translated",""+translatedY+" "+ mScrollDistance+" "+y);
int threshold =50 ;
// make a scrolling up due the y has passed the threshold
if (translatedY < threshold) {
// make a scroll up by 30 px
myScrollView.scrollBy(0, -30);
}
// make a autoscrolling down due y has passed the 500 px border
if (translatedY + threshold > 200) {
// make a scroll down by 30 px
myScrollView.scrollBy(0, 30);
}
break;
case DragEvent.ACTION_DRAG_ENDED:
//no action necessary
break;
default:
break;
}
return true;
}
}
}
MySrollView
public class MyScrollView extends ScrollView {
public OnScrollViewListener mListener;
public MyScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
#Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
// TODO Auto-generated method stub
super.onScrollChanged(l, t, oldl, oldt);
if (mListener != null) {
mListener.onScrollChanged1(mListener);
}
}
public void setOnScrollViewListener(OnScrollViewListener listener) {
mListener = listener;
}
public static interface OnScrollViewListener {
public void onScrollChanged1(OnScrollViewListener listener);
}
}
i'm android beginner so don't know it very well so tell me how to solve it.
sorry for my bad english and grammer mistake.
thanks in advances
I solved this problem by myself. Here is the solution:
DragEvent.ACTION_DRAG_LOCATION:
//no action necessary
int y = Math.round(v.getY())+Math.round(event.getY());
int translatedY = y - mScrollDistance;
Log.i("translated",""+translatedY+" "+ mScrollDistance+" "+y);
int threshold =50 ;
// make a scrolling up due the y has passed the threshold
if (translatedY < 200) {
// make a scroll up by 30 px
myScrollView.smoothScrollBy(0, -15);
}
// make a autoscrolling down due y has passed the 500 px border
if (translatedY + threshold > 500) {
// make a scroll down by 30 px
myScrollView.smoothScrollBy(0, 15);
}
break;

Categories

Resources