Develop Reference

How to align view relative to multiple views in RelativeLayout?

I have a parent RelativeLayout and 3 child views. View one and View two are align parent bottom. I want my view three to be aligned above view one if view one is visible, otherwise align above view two if view one is not visible.
Here's my layout:
<?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"
xmlns:tools="http://schemas.android.com/tools">
<View
android:id="#+id/one"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:background="#color/green"
tools:visibility="visible"/>
<View
android:id="#+id/two"
android:layout_width="250dp"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:background="#color/red"/>
<View
android:id="#+id/three"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="#id/one"
android:layout_marginBottom="10dp"
android:background="#color/yellow"/>
</RelativeLayout>
I know if I put view one and view two into another layer and align view three above the other layer it will work, but as of current architecture i am not allowed to do that. Is there any other way to achieve this? Would ConstraintLayout be able to solve this issue?

Try this:
<?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"
xmlns:tools="http://schemas.android.com/tools">
<View
android:id="#+id/one"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_above="#+id/two"
android:background="#android:color/holo_green_dark"
tools:visibility="visible"/>
<View
android:id="#+id/two"
android:layout_width="250dp"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:background="#android:color/holo_red_dark"/>
<View
android:id="#+id/three"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="#+id/one"
android:layout_marginBottom="10dp"
android:background="#android:color/holo_blue_bright"/>
</RelativeLayout>
The thing is you just add
android:layout_above="#+id/two"
to view one which will make it stay above view two and add
android:layout_above="#+id/one"
to view three which will make it stay above view one.
So if view one is visibility is gone view three will stay above view two.
You can test this by setting visibility to gone for view one.
Would ConstraintLayout be able to solve this issue?
Yes.

We can achieve this by doing it programmatically.
Find the below code to align the third view based on the first view visibility status.
final View view3 = findViewById(R.id.three);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(100, 100);
params.addRule(RelativeLayout.ABOVE, view3.getVisibility() == View.VISIBLE ? R.id.one : R.id.two);
view3.setLayoutParams(params);

If you want to go with your current Layout, then you can programatically set the height of view one to zero instead of changing its visibility. In this case, view 3 remains on the top of one and because of zero height, view 3 will appear on the top of view two.
RelativeLayout relativeLayout = (RelativeLayout) findViewById(R.id.one);
relativeLayout.getLayoutParams().height = 0;

Adding Button To LinearLayout

I'm trying to add a button to a LinearLayout dynamically. Here is my code:
JAVA
LayoutInflater inflater = mMainActivity.getLayoutInflater();
View layout = inflater.inflate(R.layout.browse_list_fragment, (ViewGroup) getView(), false);
LinearLayout breadcrumb = (LinearLayout) layout.findViewById(R.id.browse_list_fragment_previous);
Button button = new Button(mMainActivity);
button.setText(name);
button.setTextColor(mMainActivity.getResources().getColor(R.color.action_bar_breadcrumb));
button.setTextSize(22);
button.setTypeface(Typeface.createFromAsset(mMainActivity.getAssets(), "HelveticaNeueBold.ttf"));
button.setTag(mHashMap);
breadcrumb.addView(button, new LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT));
XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/browse_list_fragment_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#android:color/white">
<Button android:id="#+id/browse_list_fragment_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:text="#string/button_menu"
android:textColor="#color/grey"
android:background="#android:color/transparent"
android:drawableLeft="#drawable/carrot_grey"
android:onClick="buttonClick"/>
</LinearLayout>
<LinearLayout android:id="#+id/browse_list_fragment_previous"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical">
</LinearLayout>
<ListView android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingLeft="5dp"/>
</LinearLayout>
The Problem
I don't have any exceptions thrown and when I connect the debugger and step through the code I can see that the button is in fact added to the layout. I have tried inflating a button and adding it, different combinations of Java and XML code, stubbing out lines of code, using RelativeLayout as the root layout, removing different parts of the layout and using different widths and heights but I can't ge this button to show up on the screen. Can someone can see what I'm doing wrong or at least point me in the right direction? I'd greatly appreciate it.

You called inflater.inflate() with false as the last argument:
View layout = inflater.inflate(R.layout.browse_list_fragment,
(ViewGroup) getView(), false);
So you are not adding the layout to any view and thus can't see the button you added to this layout. Try to call inflate() with true or add the layout later to the view.

Framelayout with two Elements

I got a FrameLayout which has two elements, a TextView and a View with a Backgroundcolor.
Whithin eclips previw this shows up as expected, the view overlays the Textview.
Howewer when i am inflating this layout into another the colored view just disapears. any suggestions?
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<View
android:layout_width="wrap_content"
android:layout_height="10dp" android:background="#000" android:layout_gravity="bottom" android:id="#+id/viewActive"/>
<TextView
android:id="#+id/textViewName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</FrameLayout>
This is the code for include
LayoutInflater inflater = LayoutInflater.from(context);
ViewGroup view2 = (ViewGroup) inflater.inflate(R.layout.frame_layout, null);
anotherViewGroup.addView(view2);

Your plain view's width is set to "wrap_content". That means the view should be as big as my content but it doesn't have any content so the width is effectively 0, making it invisible.
Try setting the width to a hardcoded value like "10dp" or "match_parent". That should do the trick.

LinearLayout problem

I'm trying to create a layout containing, among other things, a LinearLayout. The XML for the whole screen is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="#+id/fileSelView"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Spinner android:id="#+id/dirListSpinner"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"/>
<Spinner android:id="#+id/fileTypeSpinner"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
<EditText android:id="#+id/fileNameTF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/fileTypeSpinner"/>
<LinearLayout android:id="#+id/centerBox"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_below="#+id/dirListSpinner"
android:layout_above="#+id/fileTypeSpinner"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true">
<ListView android:id="#+id/dirView" android:background="#f00"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="1"/>
<RelativeLayout android:id="#+id/buttonBox" android:background="#0f0"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_weight="0">
<Button android:id="#+id/upButton"
android:text="Up"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
<Button android:id="#+id/mkdirButton"
android:text="MkDir"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_below="#+id/upButton"
android:layout_centerHorizontal="true"/>
<Button android:id="#+id/okButton"
android:text="OK"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_below="#+id/mkdirButton"
android:layout_centerHorizontal="true"/>
<Button android:id="#+id/cancelButton"
android:text="Cancel"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_below="#+id/okButton"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
The result of this layout looks like this:
The LinearLayout itself is laid out the way I want, within its parent, but its contents come out all wrong. It has two children: a ListView on the left and a RelativeLayout on the right. The ListView should take up all the available height, and as much width as possible, while the RelativeLayout should be a small as possible and vertically centered within its parent. Instead, the ListView ends up being way too narrow, and the RelativeLayout grows to fill the space, despite the ListView having android:layout_weight="1" and the RelativeLayout having android:layout_weight="0". Also, the RelativeLayout is aligned with the top of its parent, despite having android:gravity="center_vertical".
What am I doing wrong?
UPDATE
OK, I changed android:gravity="center_vertical" to android:layout_gravity="center" on the RelativeLayout, and now it is vertically centered within its parent, as desired.
Regarding the layout weight issue, I tried changing android:layout_width="fill_parent" to android:layout_width="0px" on the ListView, but that didn't work; I'm getting the same result as before, with the ListView way too narrow and the RelativeLayout expanding to take up the available space.
The layout now looks like this: http://thomasokken.com/layout-problem2.png
Note that the buttons in the RelativeLayout are not correctly centered horizontally. It's as if the RelativeLayout got sized and laid out correctly at first, and then grew towards the left later, without re-laying out its children.
I haven't been able to get the ListView to get sized properly using a RelativeLayout parent, either. Could it be resizing itself in response to a setAdapter() call? I'm using a custom ListAdapter class whose getView() method returns RelativeLayout objects:
public View getView(int position, View convertView, ViewGroup parent) {
File item = items[position];
if (convertView == null) {
Context context = parent.getContext();
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.file_selection_dialog_row, null);
ImageView icon = (ImageView) convertView.findViewById(R.id.fdrowimage);
icon.setImageResource(item.isDirectory() ? R.drawable.folder : R.drawable.document);
}
TextView text = (TextView) convertView.findViewById(R.id.fdrowtext);
text.setText(item.getName());
return convertView;
}
The layout for the list rows looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ImageView android:id="#+id/fdrowimage"
android:layout_height="35dp" android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:paddingRight="5dp" android:paddingLeft="3dp"/>
<TextView android:id="#+id/fdrowtext"
android:layout_width="wrap_content" android:layout_height="35dp"
android:layout_toRightOf="#+id/fdrowimage"
android:layout_alignTop="#+id/fdrowimage"
android:layout_alignBottom="#+id/fdrowimage"
android:gravity="center_vertical"
android:textSize="23dp"/>
</RelativeLayout>

There are a few things going on here.
First as to the vertical centering of the RelativeLayout. android:gravity="center_vertical" indicates that the children of this view should have center_vertical applied. And it is actually working. As you can see by the size of the green background, your RelativeLayout is only as big as it needs to be to fit the buttons. You have two solutions. If you want the height of the view to stay the same and be centered inside its parent, you would use android:layout_gravity="center". If you want the RelativeLayout to fill the column then you need to set the layout_height of the RelativeLayout to be "fill_parent". android:layout_gravity applies to the view itself inside its parent. android:gravity applies to the view's children.
Second is the layout weight issue. The LinearLayout will first layout any wrap_content items (ie, your RelativeLayout), then it will apply children that have a layout_weight AND a size of 0. If you want your layout_weight to work properly, you need to set the layout_width of the ListView to "0px".

How can dynamically add a View to a ViewGroup and vertically align with one of its child

I have a ViewGroup and it has a few children. And one of them is a TextView ("+id/text").
In my code, I would like to know how can I add a new View or ViewGroup which will be positioned vertically aligned and below the TextView (+"id/text")?
Thank you.
I have followed the advice below and try to use TableLayout.
As a test, I try to layout statically to make sure things are aligned correctly.
Here is my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout android:id="#+id/panel" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/icon"
android:layout_column="0" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_column="1">
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left" />
</LinearLayout>
</TableRow>
<TableRow>
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#drawable/icon"
android:layout_column="1"/>
</TableRow>
</TableLayout>
But when i run in on emulator. The ImageButton on the 2nd row, does not align vertically with the textView in 1st row. Any idea why?

Consider using a TableLayout as your ViewGroup. With a TableLayout you can programmatically add a child at a specific location.
View view = new ViewIWantToAdd();
TableLayout layout = (TableLayout)findViewById(R.id.table_layout);
layout.addView(view);
Would add a view at the bottom of the TableLayout. Typically you would use a TableRow as the contents of the TableView, but you can add any view.

If your layout is not so complex, use RelativeLayout
A Layout where the positions of the children can be described in
relation to each other or to the parent...
When you insert a new child view, create a new LayoutParams then setRule
You can put the child view below the textView with this
:)