Develop Reference

Approaches for implementing Android animation that re-apportions view

I have a LinearLayout that contains a couple of views. It doesn't have to be LinearLayout-based - this is negotiable - but it provides this simple example.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f00"
android:orientation="horizontal"/>
<LinearLayout
android:id="#+id/right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff0"
android:orientation="horizontal"/>
</LinearLayout>
This is rendered as follows:
What I want to do is produce an animation sequence that slides out the yellow view, off the right of the screen, whilst simultaneously enlarging the red view to fill the space left behind.
It strikes me that there are a few ways to do this:
Weight-Based Animation
I can change the layout weight - specifically, iteratively reduce the yellow view's weight to zero. This will do the job as far as the red view is concerned. However if the yellow view has content in it, it will be squashed as it resizes down. It also doesn't run very smoothly.
This is almost acceptable in some contexts, because I can fade out the yellow view and its content to an alpha of zero, and then clear the empty space. Still not that smooth, but no squashing. However when I need the content to stay visible while moving, it ceases to be appropriate anyway.
Translation Animation
I can slide out the yellow view, a bit like this. However the vacated space is left behind, as you might expect. It does run perfectly smoothly.
A combination of the above?
I haven't tried this yet. I guess I could slide out the view whilst simultaneously reducing the weight of the empty space. I don't know if this is actually feasible, i.e. whether the weight change would affect the animated slide, or whether the two can be coherently run at once, or whether it will operate smoothly anyway.
Or, of course, something entirely different.
Any suggestions please?

Animating a view to draw it from top to bottom

<View
android:id="#+id/top_vertical_line"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#color/white"
/>
Given a view, that is a vertical line, how would I animate it in. drawing it from top to bottom, or vice versa? I haven't been able to find any examples like I'm looking for. Any help would be appreciated.

You can for example scale your line with an Animation, something like this :
View view = (View) getViewById(R.id.top_vertical_line);
view.animate()
.scaleY(...)
.setDuration(2000)
.setInterpolator(new AccelerateDecelerateInterpolator);
You have to fill in the value of scaleY(...) to where you want it to animate to, or check other methods in ViewPropertyAnimator.
And perhaps you should align your View at the bottom in your xml :
android:layout_alignParentBottom="true"

View without Activity - Placement and Layout

I am using the Code from JawsWare - Overlay View to create a View that lays above everything.
This works fine, but I failed to adapt the given layout to my needs.
What I want: Two Phases.
First Phase: A button in the upper left corner that is always there above all other apps.
When this button is pressed, we enter the Second Phase:
The button is replaced by two images which are to be horizontally aligned at a certain distance from the top, again floating above everything else.
I have to admit that I dont really understand Android Layouting, but I've tried fiddling with a RelativeLayout and an ImageView but it seems buggy.
Additionally, I encountered a very strange behaviour: Even if the Image is only about 200x200 px in the upper left corner, nearly the whole screen is "blocked" by the View (it receives all TouchEvents, even though there shouldt be anything). It seems that if I position the Layout using Margins to float in the middle of the screen, everything to the left and top of the visible button is also receiving touch events and not letting them pass through to the underlying app (even though there is no visible content).
Any ideas to why this happens and how to circumvent that?
Secondly: How can I achieve the two layouts from earlier?
Edit 1: My Layout. (please keep in mind that I just copied this and then did what I thought was right)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:onClick="overlayTextClicked"
android:padding="0dp"
android:id="#+id/overlay_layout_id"
>
<ImageView
android:id="#+id/imageview_info"
android:layout_width="200px"
android:layout_height="200px"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:src="#drawable/picture_010512233437384578"
android:contentDescription=""/>
<TextView
android:id="#+id/textview_info"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:text="info"
android:textColor="#FFF"
android:orientation="vertical"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
Afterwards I am trying to set the RelativeLayouts Gravity to TOP | CENTER_VERTICAL with a Top-Margin of 200px.

I believe what's going on here is your TextView is filling out the entire screen.
wrap_content bounds the size of a View with its content. match_parent fills a view to as big as it can get (i.e., whatever size the container is bound to).
So in this case, your RelativeLayout is does not have a max size it's bound to. Your TextView is going to try to get as big as it can get, so it's going to fill the screen. Likewise, the RelativeLayout is going to blow up to that size to wrap around the TextView.
Also, RelativeLayout doesn't really respond to Gravity well. That is used in LinearLayout and FrameLayout containers a lot, but RelativeLayout relational rules like "CENTER_IN_PARENT" are going to override whatever Gravity you set (if you set Gravity.RIGHT and "CENTER_IN_PARENT", then one has to win out I guess).

What does FrameLayout do?

I'm new to programming. I was using Graphical Layout then when I was reading xml file, I saw FrameLayout. Then I searched, but I couldn't find something useful. What is FrameLayout and what does it do?

You use a FrameLayout to stack child views on top of each other, with the most recent child on top of the stack. In the example below, the TextView is the most recent, so it is automatically placed on top of the ImageView.
For example:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/backgroundImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/bitmapie" />
<TextView
android:id="#+id/descTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginTop="70dp"
android:background="#android:color/holo_blue_light"
android:padding="10dp"
android:text="TextView placed at the top of the Imageview"
android:textColor="#android:color/white"
android:textSize="22sp" />
</FrameLayout>
Output:

FrameLayout is the simplest implementation of ViewGroup. Child views are drawn are in a stack, where the latest added view is drawn at the top. Usually you can use one of the next approaches or combine them:
Add a single view hierarchy into FrameLayout
Add multiple children and use android:layout_gravity to navigate them
Another popular approaches of using FrameLayout:
as a Fragment container
as an ancestor of your custom ViewGroup

You can consider the word frame as regular photo frame. What you do with that frame? you can place photos in that frame by one top to another. Same as in FrameLayout we can place views ( Any layout, or widget like button, text, image so on) top of other as #ojonugwa shows you the textview top of the Image.

Are you sure that you googled it?
http://www.tutorialspoint.com/android/android_frame_layout.htm
Frame Layout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other.
You can, however, add multiple children to a FrameLayout and control
their position within the FrameLayout by assigning gravity to each
child, using the android:layout_gravity attribute.
http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/
The secret of FrameLayout is how it layouts its children. Although normally designed to contain one
item, it will happily stack up other element on top of each other.
Thus FrameLayout is essentially a way to manipulate the Z-order of
views on the screen.
This is super useful for a couple of UI tricks from HUD-like elements
to sliding panels to more complex animated transitions. In this post
we will see an example for each of those.
http://www.learn-android-easily.com/2013/05/frame-layout-in-androis.html
FrameLayout is designed to display a single item at a time. You can
have multiple elements within a FrameLayout but each element will be
positioned based on the top left of the screen. Elements that overlap
will be displayed overlapping. I have created a simple XML layout
using FrameLayout that shows how this works.

Basically it puts one view on top of another for example :
Inflating text on Image
<FrameLayout>
<ImageView>
<Textview>
</FrameLayout>

How do I give a gridLayout the ability to scroll vertically and horizontally at the start of the application in android?

So imagine a view with 9 tiles that looks something like this:
(tile1) (tile2) (tile3)
(tile4) (tile5) (tile6)
(tile7) (tile8) (tile9)
One tile takes up most of the screen. I have this set up already with a horizontalscrollgroup nested inside a scrollgroup to enable both horizontal and vertical scrolling but the problem is that the view starts off with tile1 in the center of the screen. I want the view to start off with tile 5 in the center and give the user the ability to scroll up, down, left, right, and diagonally. How can I implement this?
I guess my main issue is centering the view on tile5. Also is this is a good way to implement both horizontal and vertical scrolling or is there a more proper way of doing this?
Sorry I'm a beginner with mobile ui programming.

Try this :
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent">
</HorizontalScrollView>
</ScrollView>