Android text clipping problem with EditView inside a TableLayout - android

I've got a small clipping problem that I haven't been able to solve using an EditText view in a TableRow. Whatever I try, the EditText view is either clipped (attached screenshot), or, if I set shrinkColumns to either 0 or 1, the label text disappears (and the EditText view takes up the whole width). The layout is as follows:
<?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" android:padding="10dip">
<TableLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TableRow android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView android:paddingRight="10dip" android:layout_column="1"
android:text="Label Text" />
<EditText android:text="Very long text that makes the text view go on clipping frenzy"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
</LinearLayout>
I've tried it on a 2.2 emulator running at QVGA and HVGA, a HTC Hero on 2.1 and the Wildfire on 2.1 as well. I've also played around with the clipToPadding attribute which doesn't seem to help in my case. The same issue appears if I set the hint attribute with a long text and leave the text value empty.
As I am doing nothing particularly complex, I suspect a simple error on my side. Any ideas, hints or suggestions are highly appreciated.
Cheers!

Set android:shrinkColumns="1" on your TableLayout, and remove android:layout_column="1" from the TextView.

Add android:layout_weight="1", to your EditText, It took a while to resolve it..........
But don't know the reason for it.......

Related

Android Textview with width 0 is forcing content to disappear below it

I have a TextView whose width should not exceed the ImageView above it. Both image and text are downloaded from server and I don't know their dimensions (can't make assumptions either). I went through the logic to wrap the text content using this SO post.
Here is my layout XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parentLL"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout android:orientation="vertical"
android:id="#+id/LL1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:width="0dp"
android:text="This is a string whose width may or may not be more than the image downloaded" />
</LinearLayout>
<TextView android:background="#android:color/holo_red_dark"
android:id="#+id/text2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Second Text"/>
</LinearLayout>
With this code, the TextView at the end (text2) does not even show up. There are 2 solutions to this issue :
Apply android:maxLines="5" to the text1. Problem with this approach is that Text1 view would always be 5 lines high (I understand 'lines' is not a unit of height, but that's what I see visually). So if the text content is just one word, there would be a big white space below. And then text2 shows up.
Change topmost linear layout (parentLL) to RelativeLayout. text2 can then be used with alignBelow=LL1. This works as expected. But I cannot migrate the topmost view to RelativeLayout, because this view is from a library not in my control. I can only modify LL1 and it's children. Due to my code, other views below (like text2) are suffering (by not showing up).
There is a third approach for setting the textview as a compound drawable on ImageView. I guess that might work (haven't tested), but my requirement is to show the TextView if image download has failed (which can be detected only after a while). So I need to have a TextView. Also, my LinearLayout LL1 can have other children too.
I would request for some help understanding :
Why is my code not showing up the content below the textview 'text1'? With width=0 on textview it seems to set the height of the parent to be match_parent.
How is RelativeLayout able to handle this smoothly ? Can I replicate any of that behavior in TextView's onMeasure ? Assume I have callbacks to detect image has been downloaded, and I can get image width also.
I think what you are running into is a conflict of setting the width and height but not setting the layout weight, which is a key factor in how Linear Layouts work. If you add one more vertical LinearLayout in there and then move #id/text2 into it, you should be set. You'll need something like the following (obviously modified to your specs, this was just a quick test). Note my use of android:layout_weight,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/textView3" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/textView2" />
</LinearLayout>
</LinearLayout>
Which splits the screen in half vertically as shown in this picture,
Photo of resulting layout
I had to wrap the TextView in a RelativeLayout, which was wrapped by a LinearLayout. Not happy with this solution, but this is the only way for now.

How to vertically align text within TextView

I am trying to get some text vertically aligned within a TextView, but for some reason it just sticks to the top edge of such TextView.
Trust me, I've read several questions here on Stack Overflow regarding the same, or similar, questions and tried applying the provided solutions, but nothing seems to make a change.
For instance, what I thought would solve the issue right away was to add the attribute android:gravity="center_vertical|left", but that didn't help either.
This user's question describes almost exactly my issue, except that his TextView is inside a RelativeLayout which in turn is inside a ScrollView, which I don't (and don't need or want to) use. And the images he provided are also perfectly applicable to what I'm trying to describe and achieve.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2" >
<ImageView
android:id="#+id/account_server_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/account_server_icon"
android:paddingLeft="16dp"
android:gravity="left" />
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:gravity="left|center_vertical" />
</LinearLayout>
The problem is that your TextView's height is set to wrap_content. This means that the size of the text's container will be the same as the height of the text, thus there really is nowhere within the view to center the content (it is effectively already centered vertically).
If the LinearLayout that you posted only contains the ImageView and the TextView, then you can simple change the height to match_parent and it should work fine.
If the LinearLayout contains other Views, you might want to consider using a RelativeLayout and setting the TextView to align with both the top and bottom of the image.
as your achievement suggest, you only need to change your gravity to layout_gravity
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2" >
<ImageView
android:id="#+id/account_server_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/account_server_icon"
android:paddingLeft="16dp"
android:gravity="left" />
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:layout_gravity="left|center_vertical" />
</LinearLayout>
You need to set gravity then you set text alignment to gravity
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:gravity="left|center_vertical"
android:textAlignment="gravity"
/>

Android Scroll View is Too Long

I'm super new to Android -
I've dropped in a scrollview on my screen and am just placing some text inside of it. I'm doing this because on some phones the text runs off the screen.
The problem I'm having is that the scrollview I've dropped onto the page is longer than the content it holds -- the more narrow the phone screen is, the longer the scrollview.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/app_background"
android:orientation="vertical"
android:padding="10dp" >
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="20"
android:inputType="textMultiLine"
android:lineSpacingExtra="3dp"
android:text="Get ready to melt fat and burn calories with Fit Body Boot Camp&apos;s 14 Day Fat Furnace Workout Program! This is a detailed 14 Day Workout plan based on Fit Body Boot Camp&apos;s Unstoppable Fitness Formula that has been implemented in close to 300 boot camps worldwide by hundreds of thousands of clients who made the decision to lose weight and get healthier."
android:textColor="#FFF"
android:textColorLink="#FFF"
android:textSize="20sp" >
</EditText>
There are some more edittexts after this one, but this is the gist of it. Let me know if you see something stupid.
Your background is in the linear layout that is in the ScrollView.
If you put the scroll view in another linear layout that is parent to the ScrollView and contains the background and remove the background from the Linear layout that is a child to the Scroll View the issue will be solved.
It will look like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/app_background" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp" >
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="20"
android:inputType="textMultiLine"
android:lineSpacingExtra="3dp"
android:text="THE LONG TEXT YOU'VE TYPED"
android:textColor="#FFF"
android:textColorLink="#FFF"
android:textSize="20sp" >
</EditText>
</LinearLayout>
</ScrollView>
</LinearLayout>
I think scrollview should fill the parent, and children views wrap content since layout_height is the size that the view will actually have on the screen, the scrolling thing happens inside the view
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
//...
android:layout_height="fill_parent"
//...
>
EDIT
as pointed out by dbalaouras better use "match_parent" instead of "fill_parent" since the latter is deprecated. The result is the same, just the name has been changed just because "fill" was confusing, if you set that it won't fill the remaining space but just set the dimension according to its parent

Android layout:weight doesn't work on device

I'm getting two differents behavior for a ListActivity row. Eclipse Graphical Layout show the right behavior, but at runtime, on the device, the layout:weight doesn't seem to work properly and the Textview is resized to the minimum width, depending on the text property.
This is how I had setup the layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#color/defaultBg"
android:orientation="horizontal">
<ImageButton
android:id="#+id/myButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_marginLeft="5dp"
android:layout_weight="2"
android:src="#drawable/ic_launcher"/>
<TextView
android:id="#+id/myText"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#2288EE"
android:layout_weight="6" android:text="Hello" android:textColor="#android:color/white"/>
</LinearLayout>
EDIT: I just found that the LinearLayout doesn't fill the listRow width. I'm still trying to find how to solve
Any help will be very appreciated.
I fix the issue myself. The problem wasn't in the table row layout posted above. The problem was in the android:layout_width of the parent ListView which was set to 'wrap_content' instead of 'fill_parent'.
Thanks to everyone who offered his contribute!
In your LinearLayout put android:weightSum="8". It should do the trick, on my device works fine.
Try adding android:scaleType="fitCenter" to your ImageButton. If I'm not mistaken, your source Drawable is too big, therefore making the ImageButton take too much horizontal space.

TextView Top Padding Issue?

Padding issue?
Update Sample of the issue:-
(Why is there a gap above the word "Late")
Update 2
Others gave reported similar issues here:- http://code.google.com/p/android/issues/detail?id=22493
So it seems that a textview doesn't reduce in size once it's been bigger. Any ideas for workarounds for this? setting the height explicitly causes the text to be cropped as it's lower than it should be.
I have a layout as follows:-
<?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="wrap_content"
android:padding="1dp"
android:orientation="vertical"
android:background="#color/Green">
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/datetext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/DateCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40sp"
android:textStyle="bold"
android:background="#color/Red" />
</LinearLayout>
and it is populated into a this GridView to form a calendar:-
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="7"
android:verticalSpacing="2dp"
android:horizontalSpacing="2dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
The adapter used to populate the gridview with the items changes the text size of #+id/DateCode to fit the text to the width of the available space. it then invalidates the textview and forces a re-layout (I know this works as the bottom of the textview does come up to the bottom of the resized text).
The top of the text within DateCode seems to start at least halfway down the TextView (which is clear as a red box. I don't understand why the area is not shrunk to fit the text in.
I assume it's a padding issue or something I don't understand, but it doesn't seem to be the font padding given how big it is.
Any ideas why the textview is positioning the text so far down, and not wrapping it into a much smaller space?
Anthony
If you are using ADT in Eclipse, then use the Hierarchy Viewer perspective to inspect live Views. That way you can know for sure what is going on with the layout; but to me the two TextViews look suspicious (i.e. where is the other? is it empty?)

Categories

Resources