I'm trying to build a LisView item that contains a LinearLayout with two TextView objects. The first object needs to be 70% of the screen width, and the other needs to be fixed at a 125dp width.
I am using the layout_weight attribute to tell the layout to make the first TextView scale appropriately, but I'm not able to get it working correctly. It looks fine in the preview box (Screenshot 1), but in the emulator the TextView on the left is always resized to just fit it's contents (Screenshot 2).
Does anyone know what's going on? I'm new to Android development, so this is just baffling me.
Thanks!
<?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="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<TextView
android:id="#+id/TitleTextView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="Headling Rent (pa)"
android:textSize="16sp" />
<TextView
android:id="#+id/ValueTextView"
android:layout_below="#id/TitleTextView"
android:layout_width="125dp"
android:layout_height="fill_parent"
android:layout_weight="0"
android:gravity="center_vertical"
android:text="20,000"
android:textSize="16sp" />
</LinearLayout>
When providing a weight, width (or height for vertical layouts) has to be 0dp.
Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:weightSum="10"
android:padding="6dip">
<TextView
android:id="#+id/TitleTextView"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="7"
android:gravity="center_vertical"
android:text="Headling Rent (pa)"
android:textSize="16sp" />
<TextView
android:id="#+id/ValueTextView"
android:layout_below="#id/TitleTextView"
android:layout_width="125dp"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:text="20,000"
android:textSize="16sp" />
</LinearLayout>
Ok, so I've figured out the issue. Two things were incorrect. First, the answer from #user3249477 is correct that I needed to include the weightSum in the parent LinearLayout tag, and I also needed to set the width to 0dp for the text elements that should scale.
However, this still did not actually fix my problem. The actual problem was the parent ListView had it's width and height set to "wrap_content" instead of "fill_parent". I updated this and the layout started to work.
I will am accepting the answer from #user3249477 as he was correct but I also would appreciate it if anyone could up-vote this answer as it did allow the fix above to work.
Thanks!
Related
I've tried to track down what's going wrong here, and I'm coming up with nothing. If i change my layout weight from 1 to 2, on the first view in my horizontal linear layout, the resulting width actually decreases. Here is the code.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:weightSum="7">
<TextView android:id="#+id/filterButton"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:padding="0dp"
android:textColor="#android:color/white"
android:text="filter"></TextView>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="fill_parent"
android:gravity="center" >
<AutoCompleteTextView
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:ems="14"
android:imeOptions="actionDone"
android:inputType="textAutoComplete|textAutoCorrect"
android:textColor="#FFFFFF"
android:singleLine="true"
android:gravity="left">
</AutoCompleteTextView>
<ImageView android:id="#+id/clear"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/close"
android:layout_alignParentRight="true"
android:scaleType="fitEnd"
android:adjustViewBounds="true"
android:padding="12dp"
android:visibility="invisible"
android:tint="#android:color/white"/>
</RelativeLayout>
<ImageView android:id="#+id/listButton"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:src="#drawable/list"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:padding="9dp"
android:tint="#android:color/white"></ImageView>
</LinearLayout>
Here is what my action bar looks like with the TextView's layout weight set to 1.
You can see I'm already getting some overflow on the right element. It's getting bumped off screen. Here is what it looks like with the TextView's weight set to 2.
Which is odd because the TextView has actually decreased in size. Here is the action bar without the TextView. The sizes are behaving well here.
Any help would be greatly appreciated!
It looks similar to problem i have sometimes.
For layout with weight 7 it would give space like that [[..2..][.5]].
Like in your example making weight smaller actually give more space for layout.
Try to change background color of the middle layout to have better grasp what space exacly is given to your layouts.
Unlucky on my computer your code works normally so I can't help more than that.
Before someone says that I should google this, I want to point out that I did and then i tried all the different methods to see what would work and nothing did for me. So, now that ugly business is out of the way on with my questions.... :)
I cannot seem to get a text view to wrap for me. Dont know why. Here is my XML code for the layout. It is a table layout that will be used for a listview in another xml layout.
<?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:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/ot_color_priority"
android:layout_height="fill_parent"
android:layout_width="20dp"
android:gravity="center_vertical"/>
<RelativeLayout>
<TextView
android:id="#+id/ot_ticket_number"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textStyle="bold"/>
<TextView
android:id="#+id/ot_ticket_details"
android:layout_alignParentBottom="#id/ot_ticket_number"
android:layout_height="wrap_content"
android:layout_width="300dp"
android:layout_marginTop="15dp"
android:scrollHorizontally="false"
android:ellipsize="none"
android:maxLines="10"
android:text="This is a long dang string that never wants to freaking wrap worth a crap!"/>
</RelativeLayout>
</TableRow>
</TableLayout>
The data that is in the textview just continues to write off the screen to the right. I cannot get it to wrap. The only way I can seem to get it to work is if I set a DP value to the layout_width. I dont want to do that because it will be used on different devices screen resolutions and I am afraid that may cause some problems later on.
So please someone help me :(
You should set android:shrinkColumns="1" to your TableLayout.
It will shrink the second column which is occupied by RelativeLayout.
It's probably your RelativeLayout which does not have any width specified, so it is defaulting to "WRAP_CONTENT" :
http://developer.android.com/reference/android/widget/RelativeLayout.html#generateDefaultLayoutParams()
I should also point out that inside that TextView you have a child with a "match_parent" width, but the relative layout will sit next to an element with a "20dp" width.
<?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:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/ot_color_priority"
android:layout_height="fill_parent"
android:layout_width="20dp"
android:gravity="center_vertical"/>
<!-- this is the problem, the layout has no parameters set -->
<RelativeLayout>
<TextView
android:id="#+id/ot_ticket_number"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textStyle="bold"/>
<TextView
android:id="#+id/ot_ticket_details"
android:layout_alignParentBottom="#id/ot_ticket_number"
android:layout_height="wrap_content"
android:layout_width="300dp"
android:layout_marginTop="15dp"
android:scrollHorizontally="false"
android:ellipsize="none"
android:maxLines="10"
android:text="This is a long dang string that never wants to freaking wrap worth a crap!"/>
</RelativeLayout>
</TableRow>
</TableLayout>
I have posted the exact layout below. I want to show an image and text vertically centered inside the footer. I have applied:
android:gravity="center_vertical|center"
To both the LinearLayout containing these elements and the TextView inside but nevertheless the whole line image and text appears way too far towards the top of the footer. I want it centered vertically but instead it is in the top 30 % of the footer at all times.
<?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:orientation="vertical" >
<TextView
android:id="#+id/someMessageMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_margin="10dip"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical|center"
android:paddingBottom="2dip"
android:paddingTop="16dip" >
<ImageView
android:id="#+id/myImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dip"
android:paddingTop="3dip"
android:src="#drawable/picimg" >
</ImageView>
<TextView
android:id="#+id/myMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:gravity="center_vertical|center"
android:text="This message appears way to close to the top of the footer. It should be along with the image in the center:"
android:textStyle="bold"/>
</LinearLayout>
<Button
android:id="#+id/myButton"
style="#style/mybuttonstyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:text="#string/lbl_send"
android:visibility="gone" />
</LinearLayout>
After seeing your layout it seems you haven't given android:paddingTop to your TextView. Thats why its appearing to the top.
Moreover you can also remove android:paddingTop from ImageView if that suits to your layout.
Hope that helps.
How big is the image? I think the problem is in your second LinearLayout. You're setting the height to be "wrap_content" so that means that it will only be as big as the biggest child. If the image and the text are about the same height, then it won't seem as if anything is getting centered. You can test this theory by forcing the height to be something big enough.
This is the layout I am using:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/background"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="30dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent" >
<RelativeLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="fill_horizontal"
>
<TextView android:id="#+id/poi_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_alignParentLeft="true"
/>
<ImageView android:id="#+id/internet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/internet"
android:adjustViewBounds="true"
android:maxHeight="20sp"
/>
</RelativeLayout>
...
</LinearLayout>
</ScrollView>
However, the text appears aligned to the left but the image appears at the same height than the text (as expected), but horizontally centered in the screen. Why is it not aligned to the right ?
I tried with different combinations of the android:gravity attribute at the RelativeLayout without success.
The maxHeight attribute of the image is set using 'sp' units because I want the image to be proportional to the text it is accompanying. Is that correct ?
Thanks for your feedback.
UPDATE:
Thanks to the answer of #danh32 I managed to solve this using a LinearLayout instead of a RelativeLayout. But just out of curiosity: if someone knows what was the problem with the RelativeLayout of my example, I will be grateful.
Have you tried using textview's drawableRight attribute to display the image, instead of a standalone imageview? You should be able to change the textview's width to fill parent and set the drawableRight as your internet drawable.
<TextView android:id="#+id/poi_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_alignParentLeft="true"
android:drawableRight="#drawable/internet"
/>
I am trying to use a empty View to indicate the color for each item in a ListView.
The idea is that the rowColor View is just a 3dp wide line that should automatically size to the height of secondLine and thirdLine (note that all of the content is set in code including the background color of rowColor and that firstLine and thirdLine are often set to GONE).
It shows up perfectly in Eclipse's Graphical Layout but the rowColor does not show up at all on my phone (running 2.3.3) and all the views are stacked. Any idea how to fix it?
The following code for the list_row was adopted from here. I've provided all the code that I would think works based on that layout, but not even close. Does that layout still work?
list_row.xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<TextView
android:id="#+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:singleLine="true"
android:text="First Line" />
<View
android:id="#+id/rowColor"
android:background="#FF0000"
android:layout_width="3dp"
android:layout_height="fill_parent"
android:layout_below="#id/firstLine"
android:layout_alignParentBottom="true" />
<TextView
android:id="#+id/thirdLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rowColor"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:singleLine="true"
android:text="Third Line" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rowColor"
android:layout_alignParentRight="true"
android:layout_below="#id/firstLine"
android:layout_above="#id/thirdLine"
android:layout_alignWithParentIfMissing="true"
android:gravity="center_vertical"
android:singleLine="true"
android:text="Second Line" />
</RelativeLayout>
main.xml:
<?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">
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
ListViewTest.java Activity here: http://pastie.org/2035822
Thanks.
I tested your layout in several emulators (from 2.1 to 2.3.3) and it works fine, with or without setting the first TextView visibility to View.GONE.
It must be either a problem in your code elsewhere or a glitch of your specific device.
As a workaround, you can use:
android:layout_height="0dp"
for your rowColor View. Since you are already defining the position of the top and bottom limits with android:layout_below="#id/firstLine" and android:layout_alignParentBottom="true", the actual value of layout_height is irrelevant.
I ran into this recently, and I found that a View with no content apart from a background color will not appear in a RelativeLayout.
If you can, try converting your layout to a LinearLayout. This seems to work for me.