Develop Reference

How to create doubled custom view for android?

I decided to try to created custom view. It is necessary to create editor with some capabilities(rotate, zoom, transform, adding overlays) on both layers(top, bottom) and make it possible to move devider to increase one layout for convenient image editing. Are there any similar works or may be someone have imagine how to start right?

I've made a custom layout that does what you asked for.
Use it programmatically, like in the example
git repository here
public class BicontLayout extends LinearLayout {
private View divider;
private View vTop, vBottom;
private LinearLayout.LayoutParams vTopParams, vBottomParams;
private int dividerClickableHeight;
public BicontLayout(Context ctx, View viewTop, View viewBottom) {
super(ctx);
this.vTop = viewTop;
this.vBottom = viewBottom;
setOrientation(LinearLayout.VERTICAL);
setWeightSum(1f);
vTopParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0, 0.5f);
vBottomParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0, 0.5f);
addView(vTop, vTopParams);
divider = new View(ctx);
divider.setBackgroundColor(Color.RED);
dividerClickableHeight = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50f, getResources().getDisplayMetrics());
addView(divider, LinearLayout.LayoutParams.MATCH_PARENT, 3);
addView(vBottom, vBottomParams);
}
private float yStartTouch;
private float yStartWeight;
private boolean isDragging;
private int[] dividerLocation = new int[2];
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if(onTouchEvent(ev)) return true;
return super.onInterceptTouchEvent(ev);
}
#Override
public boolean onTouchEvent(MotionEvent me) {
switch(me.getAction()) {
case MotionEvent.ACTION_DOWN:
yStartTouch = me.getRawY();
yStartWeight = vTopParams.weight;
divider.getLocationOnScreen(dividerLocation);
isDragging = Math.abs(dividerLocation[1]-yStartTouch) < dividerClickableHeight/2;
break;
case MotionEvent.ACTION_MOVE:
if(!isDragging) break;
float yDelta = me.getRawY() - yStartTouch;
float yDeltaProg = yDelta/BicontLayout.this.getHeight();
float yNewProg = yStartWeight + yDeltaProg;
if(yNewProg<0.1f) yNewProg=0.1f;
if(yNewProg>0.9f) yNewProg=0.9f;
vTopParams.weight = yNewProg;
vTop.setLayoutParams(vTopParams);
vBottomParams.weight = 1f - yNewProg;
vBottom.setLayoutParams(vBottomParams);
break;
case MotionEvent.ACTION_UP:
isDragging=false;
break;
}
if(isDragging) return true;
return super.onTouchEvent(me);
}
} // author Tiziano Munegato
Usage example
// vTop : top view
// vBottom : bottom view
BicontLayout doubleLayout = new BicontLayout(getContext(), vTop, vBottom);
setContentView(doubleLayout);
Happy coding!

how can we change image view background on swipe?

As a example,have to draw a layout of images.
I inflated an ImageView into a layout. When I swipe on the screen I need to change the color of the each circle to green. How should I do it. I tried with gesture detector, but I can't get what I need.
and this is my code.. I create this view by inflating an image view..
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().addFlags(1024);
setContentView(R.layout.test);
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
height = displaymetrics.heightPixels;
width = displaymetrics.widthPixels;
count = width/30;
totalCircles = count * (height/30);
horizontalSpace = width%30;
verticalSpace = height%30;
mRelativeLayout = (RelativeLayout)findViewById(R.id.fl);
mRelativeLayout.setPadding(horizontalSpace/2, verticalSpace/2, horizontalSpace/2, verticalSpace/2);
for(int i=1;i<totalCircles+1;i++){
myButton = new ImageView(this);
myButton.setId(i);
myButton.setImageResource(R.drawable.circle_grey);
LayoutParams lp = new LayoutParams(0,0);
if(i%count != 1){
lp.addRule(RelativeLayout.RIGHT_OF, imgViews.get(i-2).getId());
if(imView != null){
lp.addRule(RelativeLayout.BELOW, imView.getId());
}
if(i%count == 0){
imView = myButton;
}
}else{
if(imView != null){
lp.addRule(RelativeLayout.BELOW, imView.getId());
}
}
mRelativeLayout.addView(myButton,lp);
myButton.getLayoutParams().width = 30;
myButton.getLayoutParams().height = 30;
imgViews.add(myButton);
myButton.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN){
System.out.println("Inside touch listener");
ImageView imV = (ImageView)v;
imV.setImageResource(R.drawable.circle_green);
}
return false;
}
});
}
}

Jack K Fouani's answer is partially correct. Instead of imagView.onTouch you need to use gridview.onTouch.
Please check this sample.
gv.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
float currentXPosition = event.getX();
float currentYPosition = event.getY();
int position = gv.pointToPosition((int)currentXPosition, (int) currentYPosition);
//using the position obtained you can change the imageview color.
}
return true;
}
});

Instead of inflating one ImageView. You should fill a GridView where every GridCell contains a circle image. Now
set the OnTouchEvent of those Gridcells to change the ImageView within the GridCell.

my advice is to use GrideView with adapter , inside the adapter you will have position for each imagView the position allow you to check if image is touched or not depending on that you can change ImageView color to white or green

How to add ScrollView in Android cocos 2d?

I am Working on Android cocos 2d and i have 8-10 CCSprites which has to scroll horizontally by click of each sprite their is next CCLayer to load so need to Add ScrollView in CCLayer but i am not getting how to do this i am using cocos2d-android.jar
i am using this code but not working :-
final Activity mActivity=CCDirector.sharedDirector().getActivity();
final View view= LayoutInflater.from(mActivity).inflate(R.layout.level_scroll,null);
mActivity.runOnUiThread(new Runnable() {
#Override
public void run() {
// TODO Auto-generated method stub
mActivity.addContentView(view, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
}
});

This is the layer to which you have to add all sprites:
public class ItemScrollLayer extends CCLayer{
ArrayList<ExtraProjectileData> spirtes;
float scaleX,scaleY;
public ItemScrollLayer(float scaleX,float scaleY,ArrayList<ExtraProjectileData> sprites,float screensize)
{
this.scaleX = scaleX;
this.scaleY = scaleY;
this.spirtes = sprites;
float horizontal_distance = 140*scaleX;
for(int i = 0;i<sprites.size();i++)
{
CCSprite indi_sprite = sprites.get(i).getProjectile();
indi_sprite.setScale(GameActivity.aspect_Scale(indi_sprite, scaleX, scaleY));
indi_sprite.setPosition(horizontal_distance+(i*screensize),150*scaleY);
addChild(indi_sprite);
}
}
}
the code to move layer placed in on Touch of my MainLayer:
#Override
public boolean ccTouchesMoved(MotionEvent event)
{
System.out.println("Touches Moved Called for UpgradeMenu");
CGPoint LocationMoved = CCDirector.sharedDirector().convertToGL(CGPoint.make(event.getX(), event.getY()));
float difference = LocationMoved.x - PrevTouchLocation.x;
float posX = scroll_layer.getPosition().x + difference;
scroll_layer.setPosition(CGPoint.make(posX, 0));
if(posX > 0){
scroll_layer.setPosition(CGPoint.zero());
}
else if(posX < (-size.width)*(sprites.size()-1)){
System.out.println("Right Limit Exceeded");
scroll_layer.setPosition((-size.width)*(sprites.size()-1),0);
}
if(difference < -5*GameActivity.VEL_FACTOR){
direction = -1;
}
else if(difference > 5*GameActivity.VEL_FACTOR){
direction = 1;
}
PrevTouchLocation = LocationMoved;
return true;
}
#Override
public boolean ccTouchesEnded(MotionEvent event)
{
endLocation = CCDirector.sharedDirector().convertToGL(CGPoint.make(event.getX(), event.getY()));
if(!moving)
{
float total = startLocation.x-endLocation.x;
if(direction == 1 && !(counter <=0))
{
CGPoint move_pos = CGPoint.make(size.width+total, 0);
CCMoveBy go_left = CCMoveBy.action(0.5f, move_pos);
CCCallFuncN regulator = CCCallFuncN.action(this, "regulator");
CCSequence seq = CCSequence.actions(go_left, regulator);
moving = true;
scroll_layer.runAction(seq);
counter--;
projectilePriceLabel.setString(getCurrentPrice());
}
else if(direction == -1 && !(counter >= sprites.size()-1))
{
CGPoint move_pos = CGPoint.make(-size.width+total, 0);
CCMoveBy go_right = CCMoveBy.action(0.5f, move_pos);
CCCallFuncN regulator = CCCallFuncN.action(this, "regulator");
CCSequence seq = CCSequence.actions(go_right, regulator);
moving = true;
scroll_layer.runAction(seq);
counter++;
projectilePriceLabel.setString(getCurrentPrice());
}
}
PrevTouchLocation = CGPoint.zero();
return true;
}
you can edit as per your requirement

Check this, its for vertical scrolling. You just need to change little to achieve.
https://stackoverflow.com/a/12056450/1614340
Let me know if you can't get any idea from this I will provide code.

You can do by adding all sprites to a parent layer then move this parent layer by using MoveBy modifier in ccTouchesMoved

sorry for delay. You have to initialize PrevTouchLocation before you use that as mention below.
CGPoint PrevTouchLocation = CGPoint.zero();

How To apply click listener?

I am making an application by using page curl for that am using this link:-
https://github.com/harism/android_page_curl.
In that link implementing page curl using bitmap.But My requirement is that curl to View ,for that I convert
View(LinearLayout) into bitmap and set onclicklistener on child view, for more clarification please see
attached image
My code is as:-
public static LinearLayout createProgrammeView(final Context context,
int width, int height, String title, String time) {
// Upper layout of screen
LinearLayout objmainlayout = new LinearLayout(context);
if (height >= 320) {
objmainlayout.setLayoutParams(new LayoutParams(
LayoutParams.FILL_PARENT, (height -100)));
Log.e("chectttttttttttlayout",""+(height-71));
} else {
objmainlayout.setLayoutParams(new LayoutParams(
LayoutParams.FILL_PARENT, (height - 90)));
}
objmainlayout.setBackgroundColor(Color.WHITE);
objmainlayout.setOrientation(LinearLayout.VERTICAL);
objmainlayout.setPadding(10, 0, 10,0);
for (int mindex = 0; mindex <3; mindex++)
{
RelativeLayout.LayoutParams objparams;
// Layout Root View (RelativeLayout)
RelativeLayout objrelativeinnerlayout = new RelativeLayout(context);
if (height >= 320)
{
objparams = new RelativeLayout.LayoutParams(width-20,
((height - 71) / 3) - 10);
Log.e("chectt33333tlayout",""+(((height - 71) / 3) - 10));
} else {
objparams = new RelativeLayout.LayoutParams(width,
((height - 90) / 3) - 10);
}
//objparams.topMargin=10;
objrelativeinnerlayout.setLayoutParams(objparams);
// rlv.setBackgroundResource(R.drawable.sss);
// rlv.setBackgroundResource(R.drawable.sss);
ImageView objrow1img1 = new ImageView(context);
if (height >= 320) {
objrow1img1.setLayoutParams(new RelativeLayout.LayoutParams(
(width - 30) / 2,((height - 71) / 3) - 10));
}
objrow1img1.setScaleType(ScaleType.FIT_XY);
RelativeLayout.LayoutParams objlp = (RelativeLayout.LayoutParams) objrow1img1.getLayoutParams();
objlp.topMargin=10;
objlp.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
objrow1img1.setId(1);
objrow1img1.setBackgroundColor(Color.RED);
if (mindex == 0) {
objrow1img1.setImageResource(R.drawable.fblogin);
objrow1img1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(context,"onclick",Toast.LENGTH_LONG).show();
Log.e("check click","good");
//Intent objIntent = new Intent(context,
//FacebookAlbumList.class);
//objcoContext.startActivity(objIntent);
}
});
}
else {/*
if (data != null
&& data.size() > saveindex
&& data.get(saveindex) != null
&& data.get(saveindex).get(0) != null
&& data.get(saveindex).get(0).getImagepath() != null) {
objrow1img1.setVisibility(View.VISIBLE);
System.gc();
decodeBitMap(data.get(index).get(0).getImagepath(),
objrow1img1);
} else {
objrow1img1.setVisibility(View.INVISIBLE);
}
*/}
objrelativeinnerlayout.addView(objrow1img1);
ImageView objrow1img2 = new ImageView(context);
objrow1img2.setLayoutParams(new RelativeLayout.LayoutParams(
(width - 30) / 2,((height - 71) / 3) - 10));
objrow1img2.setScaleType(ScaleType.FIT_XY);
objrow1img2.setBackgroundColor(Color.RED);
RelativeLayout.LayoutParams objlrelativelayoutparam = (RelativeLayout.LayoutParams) objrow1img2
.getLayoutParams();
objlrelativelayoutparam.setMargins(10, 10, 0, 0);
objlrelativelayoutparam.addRule(RelativeLayout.RIGHT_OF,1);
objrelativeinnerlayout.addView(objrow1img2);
objmainlayout.addView(objrelativeinnerlayout);
}
return objmainlayout;
}
public static Bitmap loadBitmapFromView(LinearLayout v) {
v.measure(MeasureSpec.makeMeasureSpec(v.getLayoutParams().width,
MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(
v.getLayoutParams().height, MeasureSpec.EXACTLY));
v.layout(0, 0, v.getMeasuredWidth(), v.getMeasuredHeight());
Bitmap b = Bitmap.createBitmap(v.getWidth(), v.getHeight(),
Bitmap.Config.RGB_565);
Canvas c = new Canvas(b);
v.draw(c);
return b;
}
Here I put code of Myview and converting it into bitmap.Problem is that How I can get onclickListener on that?
Please anyone suggest me thanks in advance.

I ran into a similar problem and. To get it working I have a parent layout (contentContainer) which contains 2 subviews:
Content view which is converted to bitmap when curling
CurlView (OpenGL Surface)
I had to set an onClickListener to the parent layout to catch the events and send or not send them to the CurlView. When the events are sent to the CurlView, the CurlView is brought to front (using bringToFront() method). Otherwise, the content view is brought to front.
To decide if events are sent or not to the CurlView I use a method that returns true if the tap was within the page curl area (aprox. 1/6 of the screen, both sides). Additionally I have a gesture and scale detectors to detect singleTap and longPress, which is what we need for user interaction. When a singleTap or longPress is catched, the postion (x,y) tells me where the user touched so I can launch some activity, show a context menu or whatever.
Some sample code:
contentContainer.setOnClickListener(null); // DO NOT REMOVE THIS, IT'S A WORKAROUND
contentContainer.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
gestureDetector.onTouchEvent(event);
mScaleDetector.onTouchEvent(event);
int x = (int)event.getX();
int y = (int)event.getY();
boolean isMoving = event.getAction() == MotionEvent.ACTION_MOVE;
boolean isTouchDown = event.getAction() == MotionEvent.ACTION_DOWN;
boolean isTouchUp = event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_CANCEL;
boolean pageCurlArea = isPageCurlArea(x, y);
boolean sendEventToCurlView = false;
if (isTouchDown && pageCurlArea) {
downInPageArea = true;
sendEventToCurlView = true;
} else if (downInPageArea && isMoving) {
sendEventToCurlView = true;
} else if (downInPageArea && isTouchUp) {
downInPageArea = false;
sendEventToCurlView = true;
} else if (!downInPageArea && isMoving) {
return false;
}
if (downInPageArea && isMoving && !curlViewIsOnTop) {
bringCurlViewToFront();
}
if (sendEventToCurlView) {
MotionEvent mEvent = MotionEvent.obtain(event);
mCurlView.onTouch(v, mEvent);
}
return !sendEventToCurlView;
}
});
It is a work in progress yet, because I need to modify it to not use "page curl area" to discriminate between "curl event" and other events (singleTap, longPress...), for which I plan to use both the gesture and scale detectors to return if an event was catched and depending on the result, continue sending the event to the CurlView or not. This is necessary to perform "taps" and "longPress" within the 1/6 page curl area.
Hope it helps.

Is it possible to move the dropped object after drag and drop in android

I am able to drag and drop the button but after dropping the button the dropped button is not moving how to move the dropped button.
i want to move the copy of button image which i droped but i m trying to move after dropping the button but the image of button which dropped is not possible to move
public class Drop extends Activity implements OnTouchListener {
Button img;
ImageView image;
LinearLayout.LayoutParams lp ;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
img = (Button)findViewById(R.id.img);
img.setDrawingCacheEnabled(true);
lp = new LinearLayout.LayoutParams(
new MarginLayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT));
img.setOnTouchListener(this);
layout = (LinearLayout) findViewById(R.id.vg);
}
#Override
public boolean onTouch(View v, MotionEvent me) {
// TODO Auto-generated method stub
if (me.getAction() == MotionEvent.ACTION_DOWN) {
int x1 = (int)me.getX();
int y1 = (int)me.getY();
image = new ImageView(this);
image.setImageBitmap(img.getDrawingCache());
layout.addView(image,lp);
if(v==image)
{
lp.setMargins(x1, y1, 0, 0);
image.setDrawingCacheEnabled(true);
image.setLayoutParams(lp);
}
}
if (me.getAction() == MotionEvent.ACTION_UP) {
}
else if (me.getAction() == MotionEvent.ACTION_MOVE) {
int x1 = (int)me.getX();
int y1 = (int)me.getY();
image.setPadding((int) me.getRawX(), (int) me.getRawY(), 0, 0);
image.invalidate();
if(v==image)
{
lp.setMargins(x1, y1, 0, 0);
image.setDrawingCacheEnabled(true);
image.setLayoutParams(lp);
}
}
return false;
}
}

Look at the launcher code of how views are moved. Following this example, it should be possible.