Shift textview to next line if view boundary is reached - android

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"

Related

Adjust TextView to Vertically center in LinearLayout (horizental)

I have four TextView in LinearLayout with orientation="horizontal". Below in image, I want my fourth TextView to vertically center with respect to other views, In simple words, I want to move my fourth TextView a little bit up so it looks like in the center. I tried to add layout:gravity and margins but its not working.
Here is the code:
<LinearLayout
android:id="#+id/tv_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_main_feature_LL"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_food_and_restaurant"
android:padding="3dp"
android:text="Resturant"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_tv_black_24dp"
android:padding="3dp"
android:text="LCD Tv"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_local_parking_black_24dp"
android:padding="3dp"
android:text="Parking"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white"
/>
<TextView
android:id="#+id/tv_plus_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginBottom="20dp"
android:background="#drawable/round_background"
android:text="+15"
android:textColor="#android:color/white" />
</LinearLayout>
You could easily do that by adding android:layout_gravity="center_vertical" and removing your margin bottom.
<TextView
android:id="#+id/tv_plus_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_gravity="center_vertical"
android:background="#drawable/round_background"
android:text="+15"
android:textColor="#android:color/white" />
Add this prop to your #+id/tv_amenities LinearLayout
android:gravity="center_vertical"
Use android:layout_gravity="center_vertical" attribute in your TextView's
I checked your code inside a constraint layout and it's fine.
All I changed is in your last TextView:
android:layout_gravity="center"
Or
android:layout_gravity="center_vertical"
The layout_gravity=center looks the same as
layout_gravity=center_horizontal here because they are in a vertical
linear layout. You can't center vertically in this case, so
layout_gravity=center only centers horizontally.
This link can help you to fix your issue in LinearLayout or RelativeLayout.
You might find this link useful:What is the difference between gravity and layout_gravity in Android?

layout_gravity isn't working as expected - just partially

I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="#string/title_day"
android:textStyle="bold"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Tuesday"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="#+id/tv_fail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+22"
android:textSize="16sp"
android:layout_gravity="end|center_vertical" />
</LinearLayout>
</LinearLayout>
And this looks like this:
And I want the last TextView with id tv_fail to be pinned to right end of screen. I suppose that
android:layout_gravity="end|center_vertical"
should handle it, but this instruction centers TextView vertically, but doesn't move it to end. How to fix it?
I suppose that
android:layout_gravity="end|center_vertical"
should handle it, but this instruction centers TextView vertically, but doesn't move it to end.
This is due to how LinearLayout works; your understanding of layout_gravity is generally correct.
LinearLayout takes its children and lays them out in a line, and the children will all be packed towards the "start" of the LinearLayout. In other words, a horizontal LinearLayout will ignore the horizontal component of the layout_gravity attribute of a child.
There are a few ways to work around this. The one that I think works best for your scenario is to make the TextView stretch to fill all the remaining space in the LinearLayout (using layout_weight), and then have the TextView position its text at the end of its content area (using gravity).
<TextView
android:id="#+id/tv_fail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+22"
android:textSize="16sp"
android:layout_gravity="center_vertical"
android:gravity="end"/>
If you just want to set text inside of your last TextView to end then you should use :
android:gravity="end"
for TextView gravity use:
android:layout_gravity="center"
Difference between android:gravity & android:layout_gravity is that first one arrange content inside of any view with given gravity while second one arranges view according to given gravity.
Updated code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="title_day"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Tuesday"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="#+id/tv_fail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="+22"
android:textSize="16sp" />
</LinearLayout>

Fit 2 TextViews

I need to fit 2 TextViews in one line. I tried to use LinearLayout, and now my best approach is to use RelativeLayout.
Here you can see XML for it
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="start"
android:visibility="visible">
<TextView
android:id="#+id/partner_full_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_alignParentLeft="true"
android:textColor="#color/black"
android:maxLines="2"
android:textSize="12sp"
android:layout_toLeftOf="#+id/session_duration"
android:text="#string/dummy_text" />
<TextView
android:id="#+id/session_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:maxLines="1"
android:textSize="12sp"
android:layout_alignParentRight="true"
android:text="asdadsd"
android:textColor="#android:color/darker_gray"
/>
</RelativeLayout>
And the result
As you can see it's fit's okay, but second TextView is on the right side, when I want it to be after first TextView.
When I used LinearLayout I faced problem with size of first TextView (if it have to many text in it, second TextView will go off screen). Another approach with LinearLayout gave me similar results to RelativeLayout with same problem (wrong position of second view)
This happens because you are using wrap_content. If textView1 needs the space of the whole screen, then textView2 will get nothing. Instead you can use layout_weight to always give a View his space.
<?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:layout_gravity="start"
android:gravity="center"
android:visibility="visible"
android:orientation="horizontal">
<TextView
android:id="#+id/partner_full_name"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:gravity="left"
android:maxLines="2"
android:text="Super Long String"
android:textColor="#color/black"
android:textSize="12sp" />
<TextView
android:id="#+id/session_duration"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="I will always show"
android:textColor="#android:color/darker_gray"
android:textSize="12sp" />
</LinearLayout>
Remove this line from second TextView :
android:layout_alignParentRight="true"

Make 2 TextViews have the same height

I have 2 TextView one on top of the other. When they have the same text they have the same height but when one has more text from the other he will get bigger.
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:paddingLeft="8dp"
android:paddingTop="12dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Math, Civics"
android:id="#+id/teaches"
android:layout_weight="1"
android:background="#A4D34A" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Computer Science"
android:id="#+id/learns"
android:layout_weight="1"
android:background="#D22ACE" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="5$/hour"
android:id="#+id/rate" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_marginRight="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Start Chat"
android:id="#+id/textView9"
android:layout_marginRight="8dp"
android:textStyle="italic"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</LinearLayout>
How can I make them stay in the same height no matter what?
You have a couple of options: You can provide equal weights to the two textviews
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"/>
OR You can use give fixed heights to both views.
OR You can set MaxLines(Maximmum lines) attribute for the text view to be of a particular value.
Define a fixed value for yout layout_height like 24dp or something best in an dimens.xml like that:
<dimen name="textview_height">24dp</dimen>
and in your layout put both layout_height to :
#dimen/textview_height
Another option would be to set the first to set both to wrap_content and get the MeasuredHeight from both of them, then take the greater value and apply it to both TextViews

Android LinearLayout View item in xml does not fill empty space

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" />

Categories

Resources