Is there an Answer for EditText cutt off inside TableLayout?

Question

Android EditText within TableLayout runs off Note I am posting this because the accepted answer was in the comments and involved switching to a LinearLayout. Is listed as answered but I am having similar problem, one of chopping off the right, but not running off. Setting TableLayout width to fill_parent does NOT solve this issue. The right side of EditText looks cutoff inside a table_layout.

Update: Please note the EditText does not run off the the edge. It has a 10dip margin but gets chopped off. By this I mean right edge has no highlight color when selected. Right corners are without shape.

 <?xml version="1.0" encoding="UTF-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/bluebg"
 android:id="@+id/loading_page_lin_layout"
 >
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/roundtable"
    android:layout_gravity="center"
    android:gravity="center"
    android:layout_margin="10dip"
    android:padding="10dip"
    android:stretchColumns="*">
    <TableRow>
         <TextView
        android:id="@+id/description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:paddingRight="15dip"
        android:text="Name:" />
        <EditText  
        android:id="@+id/txtUserName"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#85AFBE"                              
        android:hint="Email"
        android:text=""

        android:paddingRight="15dip"
        android:layout_marginRight="10dip"
        android:gravity="left"

        />
     </TableRow>
    <TableRow>
        <EditText  
            android:id="@+id/txtPassword"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="#85AFBE"                              
            android:text=""
            android:hint="Password"
            android:password="true"
            android:gravity="left"  
            android:layout_gravity="center"                     
            />
    </TableRow>
    <TableRow>
        <!--  <Button
        android:id="@+id/btnSignIn"
        android:text="Sign In" 
        android:layout_width="fill_parent"
        android:paddingTop="10dip"
        android:gravity="center"
        />-->
        <ImageButton 
         android:id="@+id/btnSignIn"
         android:src="@drawable/signbig"    
         android:scaleType="fitCenter"   
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"                
         android:adjustViewBounds="true"
         android:layout_marginLeft="3dip"
         android:background="@null"
         android:layout_marginRight="3dip"
         android:layout_gravity="center"
         />
    </TableRow>
    <TableRow>
        <Button
        android:id="@+id/btnSignUp"
        android:background="@null"
        android:text="Sign Up" 
        android:textStyle=""
        android:layout_width="wrap_content"
        android:paddingTop="10dip"
        android:textSize="20dip"
        android:gravity="center"
        android:onClick="SendToSignUp"
        />                          
    </TableRow> 
    <TableRow>
        <Button
           android:id="@+id/btnFillData"
           android:text="Fill Fake Data" 
           android:background="@null"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:paddingTop="10dip"
           android:gravity="center"
           android:onClick="FillFakeData"
           />
       </TableRow>

Can you provide your XML layout, any applicable code, and a screenshot? There's not information here for us to be able to do anything. — Cat, Sep 10 '12 at 23:19
I've posted it. The only difference with previous question is that I have text view to the left of the EditText otherwise exactly the same issue. — Code Droid, Sep 10 '12 at 23:26
Please note the accepted answer to the previous question involved doing away with TableLayout and replacing it with LinearLayout a good idea but I want to know if TableLayout can handle EditText or not. — Code Droid, Sep 10 '12 at 23:30
Hmm, it looks like your first row has 2 columns (2 elements, TextView and EditText) Also can you post a screenshot? perhaps you button is just too large? Is signbig a .9.png? — pjco, Sep 11 '12 at 08:24
Well just picture a perfectly placed edit text except for one thing. The right most edge looks chopped. That is it does not get the focus line like the other edges, and generally looks to linear, its corners are not rounded etc. — Code Droid, Sep 11 '12 at 21:51

score 1 · Answer 1 · answered Dec 01 '12 at 13:41

I had a similar issue and found the solution was simply to remove the android:layout_width attribute from the EditText field. See the following distilled layout:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1">
<TableRow>
    <TextView android:text="Username"
        style="@style/DkTextStyle" />
    <EditText android:id="@+id/userText"
        android:layout_width="wrap_content"
        android:inputType="text" />
</TableRow>
</TableLayout>

Using the above layout, if you type in lots of text in the EditText field, it causes the box to extend beyond the right of the screen appearing cutoff. If you remove the android:layout_width attribute altogether from EditText, it behaves properly -- meaning the box will scroll the text and the right edge remains visible.

score 0 · Answer 2 · answered Sep 11 '12 at 00:04

0

I would try playing with the last 3 parameters in the TableLayout.

android:layout_margin="10dip"
android:padding="10dip"
android:stretchColumns="*"

TableLayouts are a bit finicky, unlike an HTML table. I suspect it is measuring the children before applying the padding and margins. Try setting them to zero, or 100, and see what happens.

Also, if you set match_parent to the TableLayout width, then you shouldn't need to stretch the columns since you are using a single column. I would set one or the other.

Hope that helps

answered Sep 11 '12 at 00:04

pjco

3,826
25
25

Still not working. Its not that this EditText runs off the edge though. Its that their is margin but the right edge looks chopped off. For example it does not have highlight color even though left, top and bottom edges do. It also does not have cured corners etc at the right edge – Code Droid Sep 11 '12 at 02:48
I have edited top layout to show current setting for TableLayout and EditText. – Code Droid Sep 11 '12 at 02:52

score 0 · Answer 3 · answered Apr 14 '13 at 19:47

TableLayouts consist of TableRows, but the columns in a tablerow have the same width of every other tablerow in in the tableLayout. Columns are populated in order, so the first thing you put in a tablerow is in the first column. If you are having trouble with the width of a view in a tablelayout, check the width of other views in other rows in that column.

Is there an Answer for EditText cutt off inside TableLayout?

3 Answers3