Develop Reference

Drag & drop animated indicator between carousel elements

I'm quite new to the Android development world, and need some ideas regarding some ways (if it's possible) in which I can implement the following:
Starting from a central element, I want to display other elements (icons) in a carousel style around it, and be able to initiate an action by a drag & drop gesture between the central element towards one of its satellites, and this action should be displayed as an animated arrow that is spawned upon starting the drag & drop gesture, follows the user movement, and is destroyed upon dropping on one of the satellites.
Is there a library or engine that allows such behavior? I looked it up on Google but with no success.
Many thanks!

How do I learn to design a UI like this?

I was recently using the app Secret and was observing the amazing user-interface that it has. If you are opening Secret's webpage, please scroll down a little to see the UI.
Being someone who is still a novice in Android and wants to learn, I would like to ask how that UI has been designed. I could ask a lot many questions in this one post but I will limit myself to just one for now.
Whenever you click on one of those tiles, it opens up and shows the comments for that particular tile. The other tiles below and above disappear. When you click on the tile again, it smoothly animates back to its position and the tiles above and below come into view. How is this achieved?
What have I tried so far? Nothing, because it is a "where do I begin?" question.

This is probably an instance of a custom activity transition (and a particularly well polished one).
In general, you can use the overridePendingTransition() to specify an animation that must be run when the current activity is changed (a classic example is sliding in a new Activity from a direction, while the previous Activity exits in the opposite direction). However, these transitions generally do not share UI elements.
Chet Haase has done a few DevBytes (in particular this one) to "simulate" an activity transition that shares an UI element (i.e. a view) between the caller and called activities. For example, if you have a Gallery, and you click on an image to show it full-screen, you would probably want the image to "grow" smoothly until it occupies this new position. The trick to achieve this is to actually disable the standard transitions entirely and include in the Intent used to start the activity the information about the current position and dimensions of the view that you want to "share":
Intent subActivity = new Intent(this, PictureDetailsActivity.class);
subActivity.putExtra(PACKAGE + ".left", screenLocation[0]);
subActivity.putExtra(PACKAGE + ".top", screenLocation[1]);
subActivity.putExtra(PACKAGE + ".width", v.getWidth());
subActivity.putExtra(PACKAGE + ".height", v.getHeight());
startActivity(subActivity);
overridePendingTransition(0, 0);
Therefore, the new activity can extract this data, and with this information and the knowledge of where on the screen the view should end up, can build and execute an animation that simulates the desired effect.
This technique can be difficult to implement if you want a complex animation, so in Android L this was baked into the platform itself: Activity Transitions can handle this automatically and provide a few built-in animations to act on the remaining (i.e. non shared) views. For example, the explode transition seems to be very much like the one you describe.

Regarding layouts:
You might find it helpful to use hierarchy viewer, which offers a function to capture the layers of the UI and store them in a Photoshop file. This gives you a good idea how the layout of a particular app you are was created and what kind of views were used.
Regarding animations:
Checkout videos by Chet Haase and Romain Guy who discuss graphics and animations in detail.

You can start with the Android training guides.
This one is an overview of designing with media and animation, but this one uses a ViewPager to achieve the effect you want.

Sliding button or text across the screen

Sometimes you see in android applications that the move the button from one side of the screen to another (cosmetic stuffs) and it looks nice. Kind of like powerpoint presentation when you slide in text.
I was wondering, are these done typically using Animations in android classes or is it moved using coordinates/draw function in a loop. I am not sure which way is typically this done.
Thank you

I am not sure what exactly you mean (maybe you can give a specific example/app), but usually you use the Animation class to create an animation. There are some specific animations (subclasses) that can be used, but you can also create your own (by subclassing or via xml).
The one you describe sounds like the TranslateAnimation, that just translates the coordinates of a view at the beginning of an animation to coordinates at the end of the animation.
Also take a look here, for further reference.
http://developer.android.com/training/animation/index.html
http://developer.android.com/guide/topics/graphics/view-animation.html

How to add panels in android using cocos2d

I want to add a sliding panel view using cocos2d for android. Any suggestions.

The way i've achieved this in one of my previous android market apps for paintball field designing is to have a separate CCLayer class added as a child to the main scene, and have the main scene responding to the CCTouchesBegan. if the location of the touch is within the co-ords of the visible panel, then call a 'touched' method inside it passing the touch co-ords, so that it can deal with it's own content.
On another panel at the bottom I had a button, which showed or hid the side panel, so it didn't 'slide' or support being 'flung' across the screen, but rather was shown or hidden.
Sliding it or flinging it on/off the screen could be written relatively simply i believe, using a combination of CCTouchesMoved and CCTouchesEnded to track the slide/fling and perform translation on the layer co-ords.
There's nothing to have prevented me implementing a slide in/out using some simple animation, but I had no requirement for it in the app, and hence didn't implement it.
Hope this is at least of some use,sorry i can't provide some worked examples right now, busy with work.

Fragment animation question

In the Honeycomb sample gallery app, there's a layout that uses a two-fragment setup: one on the left of the screen showing titles, and one on the right showing the selected content. The titles fragment can be hidden with an animation.
During the hiding animation, the app asks the framework to recalculate the layout on every single frame. This way the content-fragment can take up the empty space that the titles-fragment leaves behind while it moves off-screen. This produces a great, dynamic effect, but is terribly inefficient I think.
I have fairly complex layouts, and I'd rather not ask the system to re-layout on every single frame. But I'd like a smooth transition animation like in the sample. Are there any alternative solutions to this problem?
P.s.: Just to be clear, I'm not asking how to do basic fragment-transaction animations. I know those, and AFAIK, those animations can't produce the behaviour found in that sample gallery app (another example would be the Honeycomb Gmail app, it has similar transitions that I'd like to achieve).

You can provide custom animations to the fragment system that do whatever you want. You can move the fragments around, fade them, etc. If these animations do not explicitly or implicitly cause layout (by changing properties that trigger a layout), then you should not get a layout on each animation frame. There maybe still be a layout call at the beginning/end as the fragments are added/removed, but the layout/invalidation process during the animation is up to your animations and what they do.