I am new to android, I have a linear layout list item and would like the TextView itemName to fill the remaining blank space on the row while the other two views (itemIcon and itemTimestamp) just take up as much space as they require hence used wrap_content.
I have tried fill_parent and match_parent on ItemName android:layout_width but it ends up hiding itemTimestamp view. I have tried RelativeLayout but had no luck, would prefer to stick with Linearlayout if possible.
Appreciate your help.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemNotificationBuzz"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffff0000"
>
<LinearLayout
android:id="#+id/notificationHeader"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#ffff0000"
>
<ImageView
android:id="#+id/notificationIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:maxHeight="35dp"
android:maxWidth="35dp"
android:background="#FF000000"
android:padding="1dp"
android:src="#drawable/ic_action_place" />
<TextView
android:id="#+id/notificationName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="5dp"
android:textSize="18sp"
android:textColor="#android:color/white"
android:background="#A4C739"
android:typeface="sans"
android:textStyle="bold"
android:maxLines="1"
android:text="Fname Lname"
/>
<TextView
android:id="#+id/notificationTimestamp"
android:layout_width = "wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:background="#FF000000"
android:ems="10"
android:maxLines="1"
android:text="2m"
android:textColor="#android:color/white"
android:typeface="sans" />
</LinearLayout>
</RelativeLayout>
If you want to use the LinearLayout you can achieve what you want by using weightSum attribute in your LinearLayout and layout_weight for your item Name TextView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/notificationHeader"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffff0000"
android:orientation="horizontal"
android:weightSum="1">
<ImageView
android:id="#+id/notificationIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF000000"
android:gravity="left"
android:maxHeight="35dp"
android:maxWidth="35dp"
android:padding="1dp"
android:src="#drawable/ic_launcher"/>
<TextView
android:id="#+id/notificationName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#A4C739"
android:gravity="center"
android:maxLines="1"
android:padding="5dp"
android:text="Fname Lname"
android:textColor="#android:color/white"
android:textSize="18sp"
android:textStyle="bold"
android:typeface="sans"
android:layout_weight="1"/>
<TextView
android:id="#+id/notificationTimestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF000000"
android:gravity="right"
android:maxLines="1"
android:text="2m"
android:textColor="#android:color/white"
android:typeface="sans"/>
</LinearLayout>
This will make your item Name to fill all the space until it reaches the last element.
Note: When you use layout_weight you have to set the layout_width to 0dp. And also you should delete ems = 10 from your last element because it makes your notificationTimestamp element to have a larger width and it will push the Name element to the left leaving an empty space.
You can directly use RelativeLayout to achieve what you want. The answer is already here at How to make layout with View fill the remaining space?
If you want to still use the LinearLayout then that is also possible. In this case to achieve what you want, set the layout_weight property of the widgets that you want to just wrap content with to 0 (you should still set them to wrap_content) and then set the layout_weight of the widget that you want to occupy the remaining space to 1.
There is no reason to use RelativeLayout here. What you need to use is layout-weight. You need to set layout_width to 0dp and layout-weight to 1
Here is the updated layout (btw, I removed the parent RelativeLayout as it didn't have any use):
<ImageView
android:id="#+id/notificationIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:maxHeight="35dp"
android:maxWidth="35dp"
android:background="#FF000000"
android:padding="1dp"
android:src="#drawable/ic_action_place" />
<TextView
android:id="#+id/notificationName"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="5dp"
android:textSize="18sp"
android:textColor="#android:color/white"
android:background="#A4C739"
android:typeface="sans"
android:textStyle="bold"
android:maxLines="1"
android:text="Fname Lname"
/>
<TextView
android:id="#+id/notificationTimestamp"
android:layout_width = "wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:background="#FF000000"
android:ems="10"
android:maxLines="1"
android:text="2m"
android:textColor="#android:color/white"
android:typeface="sans" />
Related
I have a pretty simple layout (Linear) for my ListView item, just 3 widgets laid out horizontally: 2 TextView items then a Button. But even though the layout_height of all 3 is wrap_content it seems that that value used for the button forces the ListItem to expand a lot more than needed. But simply changing the value of the layout_height to 25dp eliminates this.
Why is the Button's wrap_content having this effect, and how to stop it?
Notice the background colors in my screenshots below, showing widget dimensions. The only difference between the two pics is that in my XML (at bottom) the layout_height of the Button has been changed from wrap_content to 25dp.
<?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="wrap_content"
android:orientation="horizontal"
>
<TextView
android:id="#+id/tvTotal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:text="0."
android:textSize="18sp"
android:maxLines="1"
android:layout_weight=".15"
android:background="#color/LightGreen"
/>
<TextView
android:id="#+id/tvName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:text=""
android:textSize="18sp"
android:maxLines="1"
android:layout_weight=".55"
android:background="#color/LightBlue"
/>
<Button
android:id="#+id/btnMyButton"
android:layout_width="0dp"
android:layout_height="25dp"
android:gravity="right"
android:layout_gravity="right"
android:textColor="#color/CornflowerBlue"
android:text="Questions"
android:textSize="16dp"
android:maxLines="1"
android:layout_weight=".3"
android:background="#color/black"
>
</Button>
</LinearLayout>
Using wrap_content for Button's layout_height:
Hardcoding 25dp for Button's layout_height:
The extra space are buttons default padding.
If you want to remove it use:
android:minHeight="0dp"
android:minWidth="0dp"
in your code
<Button
android:id="#+id/btnMyButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight=".3"
android:background="#color/black"
android:gravity="right"
android:maxLines="1"
android:minHeight="0dp"
android:minWidth="0dp"
android:text="Questions"
android:textColor="#color/CornflowerBlue"
android:textSize="16dp"></Button>
I have the next design:
Actual design app
CODE:
<LinearLayout
android:id="#+id/edit_name"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#99000000"
android:weightSum="1">
<FrameLayout
android:background="#color/tabIndicator"
android:layout_width="310dp"
android:layout_gravity="center"
android:clickable="true"
android:layout_height="wrap_content"
android:minHeight="136dp"
android:layout_weight="0.75">
<TextView
android:id="#+id/close_circle"
android:elevation="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="X"
android:background="#drawable/oval_corner"
android:backgroundTint="#color/colorPrimary"
android:layout_gravity="top|bottom|right"
android:layout_alignParentEnd="true"
android:paddingLeft="8dp"
android:paddingTop="3dp"
android:paddingRight="8dp"
android:paddingBottom="3dp"
android:textColor="#color/tabIndicator"
android:textStyle="bold"
android:layout_margin="2dp"
android:translationZ="2dp">
</TextView>
<TextView
android:id="#+id/textDescLarga"
android:layout_width="match_parent"
android:layout_height="208dp"
android:text="#string/text_placeholder_benefit"
android:textStyle="normal"
android:textSize="12dp"
android:textColor="#color/textDefault"
android:layout_gravity="bottom|center"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:maxLines = "12"
android:scrollbars="vertical">
</TextView>
<ImageView
android:id="#+id/imageMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/placeholder_benefit"
android:layout_gravity="top|left">
</ImageView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textTitulo"
android:layout_gravity="center"
android:layout_marginBottom="0dp"
android:text="Nombre hotel"
android:textAlignment="center"
android:textStyle="bold"
android:textSize="19dp"
android:textColor="#color/cardview_dark_background"/>
</FrameLayout>
PROBLEM:
When I need auto height, on the text, whether increases or decreases, I tried Fragment Layout layout_height: wrap_content but text overlap image.
What am I doing wrong? Is there another way to do this?
Thanks
FrameLayout renders it's children in a stack - one on top of the other unless you use layout_gravity to position them. FrameLayout is typically used with the entire available screen space - the layout_height and layout_width are set to match parent.
Your issue is because you have the layout_height set to wrap content, it will overlay widgets one on top of the other. Set the layout_height to match parent. Or better yet for your case, use a RelativeLayout.
I have the following LinearLayout below. I use it for a row in a ListView.
I have set the Textview's weight to 1 so they should all be of equal width.
The problem is when some of the textviews have more characters in, the width of the textview changes. This has an overall effect on how the ListView appears, as in each row the data in not lined up correctly. (i have headings above the ListView).
when some of the TextViews have more text in them, there is still space either side of the text and the textview just gets bigger, which i don't want as i've set the weights to 1 each.
Is there a way of fixing the width of each textview so it doesn't change according to the length of text in it?
thanks in advance
Matt
<?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="wrap_content"
android:orientation="horizontal"
android:paddingBottom="5dp"
android:paddingTop="5dp" >
<TextView
android:id="#+id/rowstarttimeweeksum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2" />
<TextView
android:id="#+id/rowplannedcallsweeksum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:layout_weight="1" />
<TextView
android:id="#+id/rowncrsweeksum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:layout_weight="1" />
<TextView
android:id="#+id/rowqasweeksum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:layout_weight="1"/>
<TextView
android:id="#+id/rowplannedhoursweeksum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2:33"
android:layout_weight="1"
android:gravity="right"/>
<TextView
android:id="#+id/rowactualcallsweeksum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:layout_weight="1"
android:gravity="right"/>
<TextView
android:id="#+id/rowactualhourssweeksum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2:01"
android:layout_weight="1"
android:gravity="right"/>
</LinearLayout>
One small change and your problem is solved
change width of all TextView from wrap_content to 0dp
android:layout_width="0dp"
Whenever you will set height/width to 0dp, it will manage height/width of view as per android:layout_weight
I have the following layout wrapped inside a linearlayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="horizontal">
<Lato_TextView
android:id="#+id/person_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="2"
android:text="Aadil Holy"
android:textColor="#000000"
android:textSize="16sp"
exaprojects:fontName="Lato-Regular.ttf" />
<Lato_TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="05dp"
android:layout_marginStart="05dp"
android:gravity="start|center"
android:text="(#884)"
android:textSize="14sp"
exaprojects:fontName="Lato-LightItalic.ttf" />
</LinearLayout>
The views are laid in horizontal alignment inside a cardview, the problem here is if the text in person_name is too long, the text in textView2 gets clipped and is shown vertically, which runs this layout. How to overcome this?
Try using RelativeLayout instead. Example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:id="#+id/person_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="2"
android:text="Aadil Holy"
android:textColor="#000000"
android:textSize="16sp"
android:layout_toLeftOf="#+id/textView2"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="05dp"
android:layout_marginStart="05dp"
android:gravity="start|center"
android:text="(#884)"
android:textSize="14sp"
android:layout_alignParentRight="true" />
First approach:
android:ems or setEms(n)
"Makes the TextView be exactly this many ems wide"
Note : but only when the layout_width is set to "wrap_content". Other layout_width values override the ems width setting.
You can also try this:
android:singleLine="false"
I'm developing what I thought would be a simple listview row layout, but I'm having some trouble getting my views to line up properly. There are 4 TextViews all using layout_weight within a LinearLayout to size themselves appropriately. What I can't figure out, however, is how to align them consistently so that each TextView begins in the same position as the one above and beneath it.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#AAAAAA88">
<TextView
android:id="#+id/quality"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_name"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_grade"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_distance"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="2px"
/>
</LinearLayout>
My attempts to use the :gravity tag don't seem to work. Is LinearLayout the wrong approach here?
As an edit, I'm making some headway using specific width values in dips. Now to test if it looks the same across different screens.
The gravity distributes the remainder of space available after minimum constraints not the total space.
So align different row above and below make sure the remaining space is equal on each row. A good way to accomplish this is to hard-code the minimum space each element needs:
android:layout_weight="2"
android:layout_width="1dip"
Make each TextView on every row 1dip width and split the remaining space according to weight.
you can try using RelativeLayout. Try 4 of the TextViews to be placed relatively, 3 can have fixed width in dp and the 4th can take up rest of the available space. that way each textview will start at a fixed position every time.
something like:
<?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="match_parent" >
<TextView
android:id="#+id/text_1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 1"/>
<TextView
android:id="#+id/text_2"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_1"
android:gravity="left"
android:padding="8dp"
android:text="Text 2"/>
<TextView
android:id="#+id/text_3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_2"
android:gravity="left"
android:padding="8dp"
android:text="Text 3"/>
<TextView
android:id="#+id/text_4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_3"
android:layout_alignParentLeft="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 4"/>
</RelativeLayout>