Develop Reference

Why does the orientation of a linearlayout determine the centering of a child element?

Why doesn't this center a button both horizontally and vertically on the screen?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#FFFFFFFF">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/red"
android:textColor="#color/white"
android:text="click"
android:layout_gravity="center"/>
</LinearLayout>
layout_gravity specifies alignment for the button within it's parent. But this only centers the button vertically, not horizontally. If I change the orientation of the linearlayout to vertical, the button is centered horizontally, not vertically. I don't see why the orientation matters here because I only have 1 child element.
I know I can achieve this by specifying the gravity in the LinearLayout with android:gravity="true" or using a RelativeLayout and have the Button android:centerInParent="true", but I'd like to know how android came up with the layout in the code above.
P.S. Why does the background color still show as gray if that's the hex code for white?

LinearLayout will only allocate the minimum amount of space needed for a view in the direction of its orientation. That's why you can't seem to center a view in the same direction as the orientation. LinearLayout generally assumes that you want to put multiple things adjacent to each other, not occupy an entire space unconditionally for a single item.
P.S. I see the entire background of the LinearLayout as white in my preview view in Android Studio, so I don't know what you mean in your P.S.

Don't use a linear layout to display items in the middle of the screen, as these are meant to list items in a row. Use a relative layout instead. So your code should look like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#FFFFFF">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/red"
android:textColor="#color/white"
android:text="click"
android:layout_centerInParent="true"/>
</RelativeLayout>

How can I overlay an ImageView with translucent views?

I have an ImageView in an activity that takes up the whole screen. What I want to do is have a few translucent buttons in the corner of this ImageView overlayed on top (like 30% transparency). Is this possible with an ImageView in android? If it is can someone point me in the right direction to get started?

Use a layout, and make your ImageView and two Buttons children within the layout.
Example using RelativeLayout:
<?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">
<ImageView
android:src="#drawable/image"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alpha="0.5"
android:text="Button 1"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button1"
android:alpha="0.5"
android:text="Button 2"/>
</RelativeLayout>
You can position your buttons better by using android:layout_marginTop and android:layout_marginLeft attributes.
The key parts to understand here are:
1/ The ImageView is set to match_parent, therefore it'll stretch to fill the RelativeLayout.
2/ By default, sub Views are positioned at the top left of RelativeLayouts, this is why button1 appears there.
3/ Button2 is positioned to the right of button1 using the RelativeLayout attribute layout_toRightOf. Its vertical position is still set to the default - top.

Centering elements in space remaining after placing another element

In my android app, I have a toolbar with an ImageView and two spinners. I would like the ImageView to appear flush with the left side of the screen, and the two spinners to be evenly spaced, horizontally centered in the remaining space (not horizontally centered on the screen, but horizontally centered in the space remaining after the ImageView is placed. What's the best way to achieve this?

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id\img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id\img"
android:orientation="vertical"
android:layout_gravity="center_horizontal" >
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
The relative layout fixes the relative positions of the image and spinners (as a group). The Linear layout sets the spinners and centers them within the layout horizontally by setting the layout gravity.
I'm assuming you want them one on top of the other. If you want them side by side, change the orientation.

About LinearLayout and how controls resize

Today I have been playing a bit with the LinearLayout and have been suprised with the results:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Big Text"
android:gravity="center_vertical|center_horizontal"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button"
/>
</LinearLayout>
This is a simple layout with a text view header, then a text view that I want it to cover all parent (but the space occupied by the bottom button) and a button that is placed at the botton side with the layout_gravity="bottom".
This produces a layout where header is shown correctly, center text view covers all remaining free space and the button does not appear. Why is this? Shouldn't the center text view just calculate its size taking into account the bottom button size?.

Use layout_weight="1" in your center TextView.

Always remember thumb rule
If you are using linear layout with vertical orientation as soon as it finds the control
with
android:layout_height="match_parent"
The layout will ignore all the controls present below it.
Hope this help
Vipul

In place of this
android:layout_width="match_parent"
android:layout_height="match_parent"
use 'wrap_content' like this
android:layout_width="wrap_content"/"fill_parent"
android:layout_height="wrap_content"/"fill_parent"

Shouldn't the center text view just calculate its size taking into account the bottom button size?.
No, because you tell the second TextView to match its parent's height, thus FILL_PARENT and hence it will fill up all remaining space, leaving none for the last TextView.
(...) and a button that is placed at the botton side with the layout_gravity="bottom".
Unfortunately, that's not how a LinearLayout works. If you set the orientation to vertical, basically only the left and right gravities will have effect. Vice versa, with the (default) horizontal orientation, only top and bottom work. The orientation determines in which direction the View children are dynamically positioned in order, which implies you cannot manually change the 'position' in that direction.
Now, to get the desired effect, you can give the second TextView a height of 0dp and a weight of 1, resulting in it dynamically filling up all remaining space without pushing the third TextView off the bottom. Alternatively, you can use a RelativeLayout, with which you can directly set the position, and simply instruct the middle TextView to sit below the first, but above the last.

Aligning center relative to others

So it's possible to align the top, bottom, left, and right of one view with another so that their edges are flush with each other. However, I've been wondering if it's possible to align the centers of two views of different sizes. My situation occurs when I have an ImageView side by side with a TextView, like this: [ImageView] [TextView]. The ImageView is bit taller than the TextView and so what I do is add padding/margins to the bottom of TextView to get it align and look like the ImageView and TextView horizontal centers are aligned. Problem is, when this view is displayed on larger tablet screens, the padding and margins don't work out right and the TextView doesn't look aligned with the ImageView. I'm sure there is an easy fix to allow this to always work out, so could someone provide me with some insights? Thanks!

This is how I did for a listview row:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:padding="5dp"
android:gravity="center_vertical">
<TextView android:id="#+id/questionItemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp"
android:textColor="#000000"
android:gravity="center_vertical"/>
<ImageView android:id="#+id/questionViewed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/eye"
android:layout_marginLeft="5dp" />
<ImageView android:id="#+id/questionAnswered"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
android:layout_marginLeft="5dp" />
</LinearLayout>

Use weightSum rather than padding in dips or pxs, that will make your layout look fine regardless of the size of the user's device.
or you could use gravity as well.
Or you can create a second xml file and insert that one into your res/xlarge file, the phone will pick which xml to read.