Develop Reference

Unable to add TextView into main xml Layout

I've been working on an app and am looking to adding a text view below the Camera view so that I could display some text there.
But, for some reason when trying to drag a text view into the layout it doesn't show up on the final screen.
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
</LinearLayout>

Layout view com.google.android.CameraSourcePreview height is set as 'match_parent' , so its eating up all the space on the view-port.
Try giving particular height and you should be able to see textview added below CameraSourcePreview.
Hope it helps.

Most likely, you're not able to add the TextView due to there not being enough space on the screen.
You're using a LinearLayout which displays all of it's views one after the other in either a vertical or horizontal manner.
Your CameraSourcePreview has it's height and width set to match_parent, which means it'll stretch completely on the screen. However, in a LinearLayout, this also means that there's no space to place the next View because it'll be placed off the screen.
You can add android:layout_weight="1" to your CameraSourcePreview. This will allow your TextView to fit into the LinearLayout because it's basically your CameraSourcePreview telling others it'll resize itself to allow for other components to fit on the screen.
But if you don't want your CameraSourcePreview to resize itself based on other Views, then you should look into using some other Layouts instead of LinearLayout. Perhaps one such as ConstraintLayout or RelativeLayout will work better, since they allow overlapping Views on top of each other.

This is happening because the height of the camera view is taking the whole space on the display you can use layout_weight for LinearLayout to make some necessary space for your TextView.
Just make height of CameraSourcePreview equals to 0dp and add a property
android:layout_weight="1"
So this it would look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
android:orientation="vertical">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here" />
</LinearLayout>

Instead of using LinearLayout I suggest to use FrameLayout which is easy to control for your case. It is also possible to display textView on CameraSourcePreview by using following code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity ="center">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here"
android:layout_gravity ="center|bottom" />
</FrameLayout>

Align ImageView to the right with parent layout set to wrap_content

I have a list of items in a horizontal recycler view, and a fairly simple item that should only have a TextView set to wrap_content and an ImageView that should be aligned to the right of the layout.
Theoretically I should be able to just set a layout_weight of 1 on the TextView, but that causes a random space to randomly show up sometimes in the view depending on where it is in the recycler view.
Is there anyway to align the close icon to the right, while still keeping the layout/textview width as wrap_content? The amount of text can vary quite a bit, so I can't actually set a fixed width. I'm fairly certain that I can't just set a layout_gravity of end on the ImageView since the parent layout's set to wrap_content.
See layout attached.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corners"
android:minWidth="#dimen/min_width"
android:maxWidth="#dimen/max_width"
android:orientation="horizontal">
<WPTextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|end"/>
</LinearLayout>

With out knowing what the items are supposed to look like and how it needs to behave it is hard to judge what the problem you are having is.
If the image is just supposed to be a small image to the right of the text you could just add a right drawable to the text view:
https://developer.android.com/reference/android/widget/TextView.html#attr_android:drawableRight

If you can replace the LinearLayout by RelativeLayout then you are good to with
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corners"
android:minWidth="#dimen/min_width"
android:maxWidth="#dimen/max_width">
<WPTextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/tv" />
</RelativeLayout>
Spacing between TextView and ImageView can be adjusted with margin on them. The properties used in the above code are self-explanatory.

Nested View forcing it's parent's size to match_parent instead of wrap_content

I am wondering if it is possible to make one View adjust it's height to it's parent height when the parent has layout_height="wrap_content". In following example:
<?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="wrap_content"
android:background="#color/red"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/time"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello"/>
</RelativeLayout>
the nested ImageView makes RelativeLayout expand it's height to match it's own parent. What I would like to achieve is that RelativeLayout has height equal to the one of the inner TextView and ImageView should work here as a background spanning only behind the text. Is this possible in pure XML without Java code tricks?

If you use a RelativeLayout (as you do), you can have Views or ViewGroups layout referencing other Views or ViewGroups by id.
In your case, if you assign an id to your TextView android:ud="#+id/tvHello" then you can align the top and bottom of your ImageView to that TextView:
android:layout_alignTop="#+id/tvHello"
android:layout_alignBottom="#+id/tvHello"
For completeness, here's your 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="wrap_content"
android:background="#color/red"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignTop="#+id/tvHello"
android:layout_alignBottom="#+id/tvHello"
android:src="#drawable/time"/>
<TextView
android:id="#+id/tvHello"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello"/>
</RelativeLayout>
As you can see, I made the height of the ImageView 0dp. I could've chosen for wrap_content or maybe even match_parent, but because the alignTop and alignBottom overrules it's, it is better to give the view a fixed height. This is due to performance. Now android doesn't have to measure the height of the ImageView, before it's to decide to make it the same height as your TextView after all.
One other way (and perhaps better - depending on how you want your images to scale), is to attach a drawable as background to your RelativeLayout. As such:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/time"
android:orientation="vertical">
I hope this helps you out a little bit and it's helpful (it is my first time answering on stackoverflow).
happy coding!

Concatenating layouts during runtime

I am thinking to create a layout whose height is much more than the screen height. OK say, the parent layout is LinearLayout and it is set to provide a vertical scrollbar automatically.
Inside the parent layout, there are many controls (listview, gridview, listboxes, editboxes etc). To make it easier for design, can I put listview in one xml, gridview in one xml, listbox in one, editbox in one etc and then later use some defined function to concatenate and allocate them all in the parent layout ?
If this is not possible, how can I design a layout that has many controls allocated that design screen can't fit at design time ?

xml_common.xml
code:
<?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="#dimen/common_topheader_width"
android:background="#drawable/topheaderfor9patch" >
<ImageView
android:id="#+id/xml_common_header_imageLogotop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="2dp"
android:layout_marginRight="#dimen/common_left_right_margin"
android:src="#drawable/qarrow" />
</RelativeLayout>
///////////////////////////////////////////
Main_view.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/mainbg"
android:orientation="vertical" >
<include layout="#layout/xml_common" />
</LinearLayout>
you can set different images as per your choice set in runtime of common view.

How to make several RelativeLayouts each occupying a potion of the screen?

I want to have a relative layout inside another full-screen relative layout, occupying full width but 50% of its parent's height, preferably done with XML and not java code.
I have figured out how how to align parent's center, and how to fill up the width, but is there a way to get 50% of parent's height? What about 30%? 6.2834%?
<?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">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="??????????"
android:layout_centerInParent="true" >
The reason I'm trying to do percentage is that, if I specify it with "dip", while the object will remain the same size, the layout will look a lot different on different screen sizes (e.g. a phone and a tablet).
EDIT:
Thank you for all the answers about using LinearLayout and weighting. I have looked at that before, too. I feel I might have over-simplified the problem. Say I need something like this:
I suppose I could use complicated LinearLayout and weighting to outline the center square, then having the center square to fill_parent, like so:
But then what should I do with the other 3 squares (layouts)? Can I have another "layer" of LinearLayout for another square? Or should I divide up the whole screen into many, many small cells and having these sublayouts span over multiple cells (not sure if this is even possible)?

Try to use LinearLayout with weightSum
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2"
android:gravity="center_vertical"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FF0000">
</RelativeLayout>
</LinearLayout>

If you don't absolutely need it nested in one RelativeLayout you can use weight in a LinearLayout as others have pointed out. I just added in an additional RelativeLayout above and below so you can use the rest of the screen if you are trying to. If not, just remove the other RelativeLayouts.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/ParentLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10" >
<RelativeLayout
android:id="#+id/RelativeLayoutTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:background="#color/torange" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayoutMid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="5"
android:background="#color/tpurple"
android:padding="8dp" >
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/describe"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayoutBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:background="#color/torange" >
</RelativeLayout>

I usually go with a LinearLayout for this and set the weight to a certain percentage :
<?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">
<View
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="25"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="50">
</RelativeLayout>
<View
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="25"/>
</LinearLayout>
To your edit:
At some point you need to determine the layout. Start by taking the layout in groups. Look for patterns. In your simple explanation we have devised a way using a linearlayout to group 3 objects with one in the middle. With your new layout, could you group those items in any way?
Once you have simple layout patterns set, maybe add specific spacing that you are looking for by defining weights. Then you might want to add a relative layout and start anchoring views to specific views. Ask yourself do they overlap? Does one view always position on top of other views or on the sides. What defines the bounds of your views and then take it from there using linear layouts, weights, relative layouts, toLeftOf, toRightOf, bellow, above, margins, and padding.
Here is an example of what I mean by grouping like objects. It's by no means the best solutions but that all depends on how you define the positioning parameters.
Yellow = vertical linear layout
Green = horizontal linear layouts
You have 1 large vertical layout and inside two horizontal layouts with multiple objects inside of that. From there you can break it down into easier to manage portions on how to arrange and item within that layout. Now with relative layouts you could position items relative to another object, you could remove some of the work handled by the linear layouts but you will then be defining their distance relative to the other objects and might have to fiddle to get the layout to adjust properly on different screen sizes (reason to not use static positioning).

Maybe try using a LinearLayout with 3 layouts inside with android:layout_weight set to 1, 2, 1.
<?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" >
<RelativeLayout
android:background="#FF0000"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dip" >
</RelativeLayout>
<RelativeLayout
android:background="#00FF00"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="0dip" >
</RelativeLayout>
<RelativeLayout
android:background="#FF0000"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dip" >
</RelativeLayout>
</LinearLayout>

RelativeLayout does not support percentage of width and height for children. Use LinearLayout with android:layout_weight attribute.