Develop Reference

Why view elements are going out of the page

I have a keyword search option with EditView and a button in my android app, which in ADT looks perfect.
But when i run the program, the EditView expand beyond the viewing area and search button disappears because it goes out of page.
Xml for this is:
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/detail_ll"
style="#style/search_bg_style"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/keyword_detail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:ems="10"
android:hint="#string/keyword" />
<Button
android:id="#+id/button_search"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="#string/search" />
</LinearLayout>
</TableRow>
Please help me in getting this in viewing area..

can you post the entire xml?
i mean with the
<TableLayout />
main tag
try setting android
android:layout_weight="1"
for both
or try android:layout_weight="1.5"
for edit text and
android:layout_weight="0.5"
for the button

I think you should make the android:layout_width="wrap_content" to android:layout_width="match_parent" or any fixed width (in dps) in the TableRow element.
layout_weight attribute divides a pre-known space according to its weight which is not present in this case.

Here you have to TableRow and LinearLayout height MatchParent and
give Weightsum="1" to LinearLayout it will fixed your problem and also remove android:ems property from Edittext
Hope this Help you.

view over layout and equal height columns

I've tried a couple of things and read many topics, but I didn't find any solution for my problem.
At the moment I have an xml file with the layout on the picture. This is how it should look like the design and I did it with LinearLayouts and works perfect.
The problem is that I want when I click somewhere on the screen to add a highlighted column from top to bottom.
I read that this should be done with RelativeLayout, but I tried to do it that way, but I can't arrange my other elements to be with equal size.
Do you know how this could be done ?
This is part of my xml:
<LinearLayout
android:id="#+id/chart1Layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:layout_weight="1"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="left"
android:layout_marginRight="4dp"
android:layout_weight="1"
android:background="#color/color"
android:gravity="bottom|center"
android:maxLines="4"
android:padding="3dp"
android:text="#string/cap"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/orange"
android:textSize="30sp"
android:textStyle="bold" />
<com.some.chart
android:id="#+id/result_widget_chartView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="8"
palette="grayscale"
android:background="#color/dark_header"
android:padding="0dp"
android:paddingBottom="0dp"
android:paddingLeft="10dp" />
</LinearLayout>
Design : http://i.stack.imgur.com/fkHvG.png
Thanks a lot.

see my pic:
if this what you want?

Thanks for your answers. It's not exactly what I tried to achieve, but you gave some direction and I did it as I want.
The solutions was to add Relative Layout as root and keep everything as-is, to keep the design.
http://i.stack.imgur.com/j18Dw.png
I was doing wrong when I tried to replace my Linear layout container with Relative layout - I just needed to add all my things in new Relative container (not to replace).
Thanks.

Why is this button placed here, not on the right side?

I'm doing Derek Banas' Android Development Tutorial 11 and I just wanted to move the save button to the right.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
...
<TableRow
android:id="#+id/tableRow7"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/save_button" />
</TableRow>
</TableLayout>
Here's how it looks like:
I expected this button to be on the right side, why does it stop awkwardly in the middle of the screen?

The Button is where you would expect it to be: on the right of the first column of that Row. If you set the layout_gravity of the Table to be "right", then the first column will push to the right in the absence of a second column, and you will get the desired effect.
A more systematic approach is to put a View (with no content) just before the "Button", ie. filling the first column of that view with nothing intentionally.
I think you can also add android:layout_span="2" to the Button to also achieved your desired effect.

<TableRow android:id="#+id/tableRow7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right">
<View android:layout_width="0dp"
android:layout_height="0dp"/>
<Button android:id="#+id/addButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/save_button"
android:onClick="addNewContact"/>
</TableRow>
Something has to go in the first cell of the row. For example, you can generate an empty view like this to achieve that or use one of these attributes in the <Button> tag.
android:layout_column - The index of the column in which this child should be.
android:layout_span - Defines how many columns this child should span.

I think it's because your row is not spanning the two columns (though it's strange that the edge of the button overlaps the start of the textfields), try adding android:layout_span=2 to the Button's TableRow.

Try android:layout_gravity="right"

Multiline TextView with width "wrap_content"

I am wondering how to have a TextView display its content on several lines without hardcoding the width in the XML.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="false"
android:text="Long multiline text"/>
<TextView
android:textColor="#color/text_color"
android:layout_width="130dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
Any thought welcome.
EDIT: my problem is that when the text exceeds the width set (because it reaches the end of the screen) a portion of the text is just not displayed. I would expect the text to be split on two lines

Though I cannot reproduce the not wrapping problem, you can fix the positioning problem by using a weight on the first TextView. Using the following XML gives the expected output in the graphical layout view in Eclipse:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:singleLine="false"
android:text="Long multiline text"/>
<TextView
android:textColor="#color/text_color"
android:layout_width="130dp"
android:layout_height="wrap_content"
/>
</LinearLayout>

Also add
android:minLines="2"
android:scrollHorizontally="false"

You could try
android:inputType="textMultiLine"
in your TextView XML. This worked for me.

I think I had very similar problem. I had a TextView with a text, where I was not sure how much lines will it take. It was encapsulated by a LinearLayout having android:layout_width="match_parent" to ensure my text will fill out all the space horizontally. However, the problem was that my text did not fit into 1 line and when it did break into a new line, the next view component below it did not move downwards to give enough space for the second line to be viewable fully.
I could achieve the solution by changing the LinearLayout that was containing my TextView into a RelativeLayout. By this way, the element below the text (actually below the Layout itself) was moved automatically to give enough space for the multi-line text.

Automatically truncate TextView text so as not to overlap another TextView

I have a ListView that displays a bunch of homework assignments. The ListView items use a FrameLayout to position two TextViews. The first TextView is aligned to the left, and the second is aligned to the right. (Both are aligned in the center vertically.) The first displays a snippet of the assignment description, and the second displays the due date.
What I want to do is make it so that the due date takes up as much space as it needs and the description fills up the remaining space, like so:
|----------------------------------------------------|
| Read pgs 15-35, update tim... Fri, May 4|
|----------------------------------------------------|
Right now the description text will continue on to overlap the date. It will truncate at the end of the line though.
Is there anyway I can do this in XML, or do I have to do it in code by shortening the string before I set the TextView value (presumably in my getView call)? If I did it in code, I'd have to calculate the amount of horizontal space the strings would take up figure out how short the description needs to be. That seems like it could get messy...
Any other suggestions on how to accomplish this are greatly appreciated!

Try using the ellipsize attribute like :
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"/>
Note that Android, or at least some versions, require both the "ellipsize" and the "singleline" attributes in order for the system to actually do the truncation and add the ellipsis.

Instead of a FrameLayout, this is the perfect place for a LinearLayout or RelativeLayout in combination with ellipsize:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
...
android:width="0dp"
android:height="wrap_content"
android:layout_weight="1"
android:ellipsize="end" />
<TextView
...
android:width="wrap_content"
android:height="wrap_content"
android:layout_weight="0" />
</LinearLayout>
Or alternately
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
...
android:id="#+id/secondTV"
android:width="wrap_content"
android:height="wrap_content"
android:layout_weight="0" />
<TextView
...
android:width="0dp"
android:height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/secondTV"
android:ellipsize="end"/>
</RelativeLayout>

Change the FrameLayout to a LinearLayout or RelativeLayout.
LinearLayout: Make the due date width "wrap_content" and the description width 0dp, then add layout_weight="1" to the description
RelativeLayout: Layout the due date first with width wrap_content, then layout the description with a rule that it should be to the left of the due date.

Both Anton and JRaymond were pretty much on (JRaymond helped me figure it out with his example). This is what I came up with:
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="#+id/due_date"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:singleLine="true" />
<TextView android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/due_date"
android:singleLine="true" />
</RelativeLayout>
(I needed to declare my due date label first so that I could reference it in the description. I also just realized that the android:ellipsize seems to be optional -- I guess it defaults to "end".)
Thanks a bunch!