I have two TextViews in a RelativeLayout. One to the left and the other one to the right. Both of them shows a string which may become very long. I want to make a min space of 10dp between two TextViews and let the right one have ellipse if no enough space.
I have below layout definition which does not work. The right TextView may cover the first one if it is very lone.
<RelativeLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginLeft="3dp">
<TextView
android:id="#+id/left_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="7dp"
android:gravity="bottom"
android:text=""/>
<TextView
android:id="#+id/right_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
/>
</RelativeLayout>
The only way I can do is to set the max length to the right one. But this is not what I want because if the left one is short, i want the right one to be longer than the maxWidth.
And when I added "toRightOf" this work but the textView width becomes too long for a short string shown in it. That is not acceptable
add Add android:layout_toRightOf="#+id/left_one in right_one textview
remove android:layout_alignParentRight="true" from right_one textview
replace android:layout_marginRight="10dp" by android:layout_marginLeft="10dp" in right_one textview
For right_one textview to remain right if it is short replace right_one textview portion by
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="10dp"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/left_one>
<TextView
android:id="#+id/right_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
/>
</RelativeLayout>
You can do like this.
<?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="match_parent"
android:weightSum="1">
<TextView
android:id="#+id/left_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="7dp"
android:gravity="bottom"
android:layout_weight="0.3"
android:text="Left text "/>
<TextView
android:id="#+id/right_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
android:layout_weight="0.7"
android:layout_marginLeft="10dp"
android:text="edkjfcnrdskjvkjrdfvsxsdcndsjkvnjksdnvkj
sdjkvbksdbvkj zskjvn jsdnbjkvfdbde"/>
</LinearLayout>
Add:
android:layout_toLeftOf="#+id/right_one"
android:layout_marginRight="10dp"
to your left_one TextView.
Related
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"
Here's what I have:
There are options and there are content to every option. Option numbers (A, B, C, D) are in a separate textview and their contents are in a separate textview.
All I'm trying is aligning the option number with the first line of the option content. I tried setting the constant paddingTop, but as the number of lines in the option-content changes, it goes out of alignment. Any suggestions upon how to do it?
Here's part of the xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/options"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">
<TextView
android:id="#+id/option_number"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="10"
android:text="A"
android:paddingLeft="5dp"
android:textSize="17sp"
android:textStyle="bold"
android:textColor="#color/charcoal"/>
<TextView
android:id="#+id/option_content"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="100"
android:textSize="17sp"
android:gravity="center|left"
android:paddingRight="20dp"
android:text="option content...."
android:textColor="#color/charcoal"/>
Can I do it by getting the paddingTop of option content dynamically and setting the same padding to the option number?
Try with below.
Replace this in your xml.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/options"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="5">
<TextView
android:id="#+id/option_number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="5dp"
android:text="A"
android:maxLines="4"
android:textColor="#color/charcoal"
android:textSize="17sp"
android:textStyle="bold" />
<TextView
android:id="#+id/option_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:maxLines="4"
android:text="option content...."
android:textColor="#color/charcoal"
android:textSize="17sp" />
</LinearLayout>
And It's Done.
Surely it will help you.
Set android:gravity="top" for option_number TextView android:gravity="top|left" for option_content. Or, User a Relative Layout and use layout_aligntop
Try setting android:layout_alignBaseline="#id/option_number" on option_content
You can use Relative layout instead of linear layout, but you wll have to change your xml a bit. So if you decide to use it you can just set the next property to first TextView
android:layout_alignTop="#+id/option_content"
It should help you.
use: android:layout_centerVertical="true".
Suggestion, can use the following three in combination to easily achieve what you want:
1) CenterVertical
2) ToRightOf
3) RelativeLayout.
e.g:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/options"
android:layout_width="match_parent"
android:layout_height="80dp">
<TextView
android:layout_centerVertical="true"
android:id="#+id/option_number"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="A"
android:paddingLeft="5dp"
android:textSize="17sp"
android:textStyle="bold"
android:textColor="#color/charcoal"/>
<TextView
android:layout_toRightOf="#id/option_number"
android:layout_centerVertical="true"
android:id="#+id/option_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="option content...."
android:textColor="#color/charcoal"/>
I have the xml code shown below. Everything is working as it should except the final textView( id locationTextView) which won't stay right. I want it to stay as right as possible, but I can't do that(it still appears straight after the linear Layout).Should I set a left margin?. And for the textView1 how can I make it to show only a certain part of the whole text, because I have texts of different lengths and they ruin the layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/product_list_item_bg"
android:descendantFocusability="blocksDescendants">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/icon"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_margin="3dip"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#33CC33" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="TextView" />
</LinearLayout>
<TextView
android:gravity="right"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_marginTop="0dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/locationTextView"
android:layout_gravity="right" />
</LinearLayout>
</RelativeLayout>
Try android:layout_weight="1" or some other value for your locationTextView. You can also try out android:weightSum="3" (or that is appropriate instead of 3) on your root LinearLayout. Assign proper weights to your different child views. You can get help here
For showing text in a presentable way, you could use android:ellipsize="marquee" or other options available.
I am trying to setup a RelativeLayout where two TextView are shown on one line. The first TextView should be aligned to the left. The second TextView should be aligned to the right. If the second TextView text would expand to overlap the first TextView then I want to ellipsize the text in the middle. I don't want to ellipsize the first TextView.
This is what I have come up with. The problem is the second TextView is directly to the right of the first TextView instead of being aligned to the far right. It seems like I cannot use alignParentRight and toRightOf at the same time.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="[DetailedType]"/>
<TextView
android:id="#+id/Right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/Left"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:ellipsize="middle"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="[CustomerName]"/>
</RelativeLayout>
The basic idea to achieve this id to add a dummy invisible view in the horizontal center of your RelativeLayout and the tell the left TextView to be to the left of it and the right TextView to be to the right of it... see below
About your problem with aligning it to the right, you should stretch the TextView to take half of the screen and then set android:gravity="right" on the TextView
<?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">
<View
android:id="#+id/dummy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/Left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/dummy"
android:text="[DetailedType]"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<TextView
android:id="#+id/Right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/Left"
android:gravity="right"
android:ellipsize="middle"
android:singleLine="true"
android:text="[CustomerName]"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</RelativeLayout>
But you can always use LinerLayout to the job
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/Left"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="[DetailedType]"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<TextView
android:id="#+id/Right"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="middle"
android:singleLine="true"
android:text="[CustomerName]"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</LinearLayout>
From what I understand you only miss android:gravity="right" on your right view.
I have a LinearLayout with three RelativeLayout inside. The first two children layouts show. The third one does not show. When I change the children from RelativeLayout to LinearLayouts, the third one still does not show. Any ideas on how to fix this? The one not showing contains the ImageView.
Here is the code:
<?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="60dp"
android:clickable="true"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/back1" >
<View
android:id="#+id/fract"
android:layout_width="60dp"
android:layout_height="1dp"
android:layout_centerInParent="true"
android:background="#00a5e5"
android:paddingLeft="5dp"
android:paddingRight="5dp" />
<TextView
android:id="#+id/nume"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/fract"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:singleLine="true"
android:text="58 apple"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/denom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/fract"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:singleLine="true"
android:text="46 orange"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/back2" >
<TextView
android:id="#+id/red_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:singleLine="true"
android:text="11 apple "
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/red_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/red_1"
android:layout_centerHorizontal="true"
android:layout_marginRight="5dp"
android:ellipsize="end"
android:singleLine="true"
android:text="13 oranges "
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#ffffff" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:src="#drawable/guess" />
</RelativeLayout>
</LinearLayout>
Your second Relative Layout's height is
android:layout_height="match_parent"
try putting:
android:layout_height="wrap_content"
--edit - try adding a weight attribute.
</RelativeLayout>
<RelativeLayout
android:weight=1
>
</RelativeLayout>
<RelativeLayout
android:weight=1>
</RelativeLayout>
android:layout_centerInParent="true" remove this from the view, if you want to add a view you can add separately out of the RelativeLayout with this your Layout is already in the center of the parent, For debug purpose set the width of each view to certain level so that you can see. Your two RelativeLayout already took the width of the Linear Layout, so no space left for the third Layout.
I decide to do it programmatically. I get the width of the device using context.getResources().getDisplayMetrics().widthPixels. Then from there I layout my pieces pixels by pixels, so to speak.