android - How to arrange the two textviews side by side - android

I have two text views(TV_1,TV_2).I want to set the TV_2 is immediate right of the TV_1.
It means
suppose TV1 occupy the one entire line in the screen then TV2 will set below the TV1.
Suppose Tv1 occupy the one and half line then tv2 will occupy the rest of the space. How to implement this? i tried but i am not getting. It is similar to one paragraph.
<RelativeLayout
android:id="#+id/xrays_dicom_alert_TnC"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_marginTop="20dp">
<CheckBox
android:id="#+id/xrays_dicom_alert_cb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<TextView
android:id="#+id/xrays_dicom_alert_TnC_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/xrays_dicom_alert_cb"
android:text="I have read I agree to the following"
android:textColor="#color/black"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/xrays_dicom_alert_statement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/xrays_dicom_alert_cb"
android:layout_below="#id/xrays_dicom_alert_TnC_text"
android:layout_alignRight="#id/xrays_dicom_alert_TnC_text"
android:text="Statement"
android:textColor="#color/black"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>

Thats impossible act in Android.
A View occupies a rectangular area on the screen.
http://www.androidadb.com/class/android/view/View.java.html
Or you have to do something like this
To make clickable some text in TextView one can go with Spannable concept.
http://developer.android.com/reference/android/text/Spannable.html
use URLSpan http://www.androidadb.com/class/ur/URLSpan.html

I think it's not possible in the pattern what you have asked.

Related

How to make Android's RelativeLayout work correctly?

The title is a little provocative, but I observe some behaviour thats inexplicable for me.
I have three sets of views, each having one TextView tvX and one Spinner spX, X=A,B,C. The textview is a title, or prompt, for the spinner, so I want the Spinner layout_toRightOf it's respective TextView. Since they refer to each other, I also layout_alignBaseline the Spinner to the TextView. This works properly. Now I want the three sets stacked such that the TextViews have aligned right edges (each has a trailing colon, these should be aligned), and the Spinners have aligned left edges. So in the stack of
+----------+----------+
| tvA:|spA |
+----------+----------+
| tvB:|spB |
+----------+----------+
| tvC:|spC |
+----------+----------+
the B and C views get attributes referring to A and B, respectively; namely layout_below and layout_alignLeft/Right.
It now happens that tvB and tvC have texts that are longer than tvA's. I would have guessed the RelativeLayout indents tvA such that there is space for the longer texts of tvB and tvC, and such that they are right-aligned. What happens instead is that the whole left column gets the width of tvA's text, and tvB and tvC get broken into two lines each. I tentatively tried to rearrange things to make tvB the anchor, and layout_above tvA. This results in tvA completely disappearing. It would not be a proper solution anyway, as in another language the relative lengths of the texts might be the other way! If I add characters to tvA to make it longest, tvB and tvC do not get broken anymore, but the colons still do not get aligned! In fact it looks as if tvB gets centered beneath tvA, and tvC centered beneath tvC.
It sort of looks best if I left-align the tvX and right-align the spX. But even in that situation something strange happens: The Spinners do no obey the attribute layout_width="wrap_content" anymore, they expand instead to fill all the space left over by the TextViews. The ragged alignment in the middle still looks bad, that's why I want the alignment to happen in the middle.
Android Studio displays the resulting layout while editing the XML, and it also displays the Views edges if the cursor is in the XML definition of the View. There I can nicely observe how the layout hints in the attributes get ignored! On the actual phone the same thing happens.
Here is the XML code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/indented_margin"
android:layout_marginBottom="5dp">
<TextView
android:id="#+id/device_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="#string/settings_sb_device" />
<Spinner
android:id="#+id/device"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:spinnerMode="dropdown"
android:layout_toRightOf="#id/device_title"
android:layout_alignBaseline="#id/device_title" />
<TextView
android:id="#+id/can_speed_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_below="#id/device_title"
android:layout_alignRight="#id/device_title"
android:text="#string/settings_sb_speed" />
<Spinner
android:id="#+id/can_speed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:spinnerMode="dropdown"
android:layout_toRightOf="#id/can_speed_title"
android:layout_alignBaseline="#id/can_speed_title"
android:layout_alignLeft="#id/device"
android:entries="#array/can_speeds" />
<TextView
android:id="#+id/baudrate_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_below="#id/can_speed_title"
android:layout_alignRight="#id/can_speed_title"
android:text="#string/settings_sb_baudrate" />
<Spinner
android:id="#+id/baudrate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:spinnerMode="dropdown"
android:layout_toRightOf="#id/baudrate_title"
android:layout_alignBaseline="#id/baudrate_title"
android:layout_alignLeft="#id/can_speed"
android:entries="#array/baudrates" />
</RelativeLayout>
I have searched the sets of available attributes for the involved views, but could not find a clue. Can anybody explain this behaviour? What have I overlooked?
Use a GridLayout for this with columnCount as 2
For example:
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:alignmentMode="alignBounds"
app:columnCount="2"
app:orientation="vertical"
>
For the left side Tv + colon, use a RelativeLayout or even a LinearLayout will work for that matter.
<LinearLayout
android:gravity="center"
android:orientation="horizontal"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_gravity="fill_horizontal|fill_vertical"
app:layout_row="0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
tools:text="Label"
android:maxLines="2"
android:ellipsize="end"
android:textColor="#color/black"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
tools:text=":"
android:textColor="#color/black"/>
</LinearLayout>
It seem to me that a GridLayout would fit your needs way better...

Keep ImageView on the right size of the text and yet prevent long text to push it out of view?

The situation is the same no matter if I use LinearLayout or RelativeLayout. I think this is a old Android XMl bug, but I have no idea why it still exists.
Namely, in a layout where an ImageView is on the right side of a TextView can disappear from the screen when text becomes too long. It simply pushes it off the screen. I must NOT make TextView single line.
Here is the XML.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some long text blahblahblahblahblah"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="17sp"
android:layout_marginRight="10dp"
android:layout_centerVertical="true"
/>
<ImageView
android:layout_toRightOf="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/key"
android:layout_centerVertical="true"
/>
</RelativeLayout>
I cannot use layout_weight attribute as image will then stick to the right side of the screen. It HAS to be on the right side of the text.
Anyone has any ideas how to solve this bug?
Check images when the text is short and long. On the 2nd image the text is long and the image is being pushed away from the screen.
You can achieve your task, if you use the layout_weight properly. Please refer the code below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="The quick brown fox jumps over the lazy dog. As you can see it easily handles the long length of the text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="17sp"
android:layout_marginRight="10dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
The output for long text:
The output for short text:
EDIT:
This works because of the layout whose width is set as wrap_content. If it were match_parent then in all cases, all the extra space would have been given to TextView because of it's layout_weight but since the parent is wrap_content, there is no extra space for the TextView to fill when the text is small. But when the text is large, the weight property is applied to the TextView but since there is no layout_weight for the ImageView hence, it takes only the amount of space it has to.
Set
android:layout_marginRight="30dp"
for the TextView
and
android:layout_marginLeft="-20dp"
for the ImageView
You can change the values depending on your needs.
But, if the image can have different sizes, you will have to set margins programmatically.
there is 2 solutions for these
either set the image as a drawableRight to the textview
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="The quick brown fox jumps over the lazy dog. As you can see it easily handles the long length of the text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="17sp"
android:layout_marginRight="10dp"
android:drawableRight="#drawable/ic_launcher"
/>
or
alignt the image to right and make textview toleft of the image

TextView inside a TextView

I have something like "There are 200€" but I want to style the value (ex. textColor Red)
Is there any way of having two textViews to seem like an entire one?
A textView inside a textView or a textViewContainer or something.
I can achieve it on the run like this answer: Change text color of one word in a TextView
But I want to do from the layout file. Any chance?
Thanks
EDIT
<TextView
android:id="#+id/lastIncome"
android:text="Tu último ingreso fueron"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/dash_font_size"/>
<TextView
android:id="#+id/lastIncomeValue"
android:text="200€"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/dash_value_font_size"
android:textColor="#color/greensea"
android:layout_gravity="right"/>
You can achieve this with a horizontal LinearLayout. The LinearLayout is the container for the two side by side TextViews. This layout can be placed in any other container (LinearLayout, RelativeLayout, etc.) in your XML.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="There are " />
<TextView
android:id="#+id/amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="200€"
android:textColor="#ff0000"/>
</LinearLayout>
You can use a easy approach to do this within one textview using SpanableString Builder Click here to get this approach

android arranging text view in a layout

I need to have 3 text in layout. the textView in the center is red in color and the other 2 are black. so i added it to a relativelayout and set the layout as textView2 to the right of textView1 and textView3 to the right of textView2
But when the text in the 3rd text view is bigger it should come textview one. insted I get this.
now what should i do to get somthing like this?
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rel_lay"
android:background="#DFDFDF"
android:padding="2dip" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dip"
android:text="TextView"
android:textColor="#000000" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/textView1"
android:text="TextView"
android:textColor="#FF0000" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_toRightOf="#+id/textView2"
android:text="TextView when the third text is longer"
android:textColor="#000000" />
</RelativeLayout>
this is the relative layout with 3 textView.
Just use one TextView and set text as per you need. You know which text to set for Red color. So what you need to have is index of starting text and ending text.
Use following code.
SpannableString spanText = new SpannableString("My Name is Chintan Rathod");
spanText.setSpan(new ForegroundColorSpan(Color.parseColor("#FF0000")), 5 /*start index*/, 10 /*end index*/, 0);
textView.setText(spanText);
Here, I have passed 5 and 10, but you can pass your own indexes. But make sure index within range which will not fire IndexOutOfBoundException
You might have better luck with using Spanned classes and one TextView. The way you are trying to implement it, TextView #3 would have to fill_parent on the width and be able to know where TextView #2 ends.

TextView text aligment is horrible! How to work around it?

I always seem to have the biggest issues with aligning a text on a layout. Seems like the TextView doesn't measure its text properly. The reported TextView width and height are a lot bigger than the actual text. One would expect the TextView width and height to be tightly wrapped around the text.
The image below shows how the number 18 and the text "SEC" are not aligning on the same bottom baseline. This is due to the larger text height being a lot bigger than the text is. My xml layout can be seen below.
How to achieve better text alignment accuracy?
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/scan_block_1_bg" >
<LinearLayout
android:id="#+id/staticCountDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/tvStaticScanning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#ffffff"
android:shadowDy="1.0"
android:shadowRadius="0.01"
android:text="SCANNING"
android:textColor="#878787"
android:textSize="20sp" />
<TextView
android:id="#+id/tvCountDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#66000000"
android:shadowDy="-1.0"
android:shadowRadius="0.01"
android:text="03"
android:textColor="#b6b6b6"
android:textSize="81sp" />
</LinearLayout>
<TextView
android:id="#+id/tvStaticSeconds"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/staticCountDown"
android:layout_toRightOf="#id/staticCountDown"
android:gravity="left"
android:shadowColor="#ffffff"
android:shadowDy="1.0"
android:shadowRadius="0.01"
android:text="SEC"
android:textColor="#878787"
android:textSize="12sp" />
</RelativeLayout>
//use this attribute in your TextView
android:layout_alignBaseline="#id/staticCountDown"
and android:layout_marginBottom="-10dp"
As strange as it may sound if you look at the screen shot provided Both the textviews have the same bottom base alignment. Try putting letters "gj" in tv countdown. You can actually see both will come to have same bottom base alignment. Its better go with padma Kumar's answer.

Categories

Resources