Align TextView correctly with a Spinner in a ConstraintLayout? - android

I have a activity layout which represents a form. The form contains a few form fields including an Spinner.
The layout is of type ConstraintLayout.
Because the Spinner control doesn't have a baseline i can't vertical align my "Kind" label correctly. I used 24 dp at the top as a temp. solution, but because the Spinner will increase in height i don't like this solution.
Is there a better solution to get the Kind label aligned correctly?

<TextView android:id="#+id/video"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lorem Ipsum"
app:layout_constraintBottom_toBottomOf="#+id/spinner"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/spinner" />
When you anchor the bottom and top of a view to another, it will be centered relatively. This is valid vertically and horizontally.
Hope this helps.

In my experience, the TextView and the Spinner aligned better when using baseline alignment (layout_constraintBaseline_toBaselineOf).
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Repeat"/>
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#id/textview"
app:layout_constraintBaseline_toBaselineOf="#id/textview"
android:layout_marginLeft="50dp"/>

Related

How to set text leading or shift a text position on a TextView

How do you set a text leading on a TextView? Or how do you shift a text position relative to a view that it is in?
I want the height of the textview to be less than what wrap_content would set at default without cutting the text from the bottom.
I've tried using the layout_height tag on its xml layout but it would clip the text from the bottom just like the image I've provided on the link below, and I also have tried using the lineSpacingExtra tag but it seems to only work for the distance/leading between two lines.
Here is my xml file:
<TextView
android:layout_width="0dp"
android:layout_height="30dp"
android:text="clipped text"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lineSpacingExtra="-18dp"
android:text="a text longer than usual to demonstrate line spacing"/>
Image for clarity: https://i.stack.imgur.com/QGV4B.png
Why you can use wrap_content? Or can you share what are you trying to achieve?
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="clipped text"/>
Did you try to do it using padding or paddingTop ? Try it with different values to get your desired result.
<TextView
android:layout_width="0dp"
android:layout_height="30dp"
android:paddingTop="0dp"
android:text="clipped text"/>

How can I maximize the space my control occupies while maintaining horizontal order?

I have the following linear layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/SearchBox">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Search: "
android:id="#+id/SearchText"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_le="#+id/SearchBox"
/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Search"
android:id="#+id/SearchButton"/>
</LinearLayout>
As you can see, the EditText is between the view and the button. Is there any property I can set that makes the edit text fill the space between the other two controls? (Which have a fixed size, based on their static content).
Setting the Edit Text's layout width to "Fill_parent" pushes off the button (since there's no more room in the parent).
Ideally, I guess the thing to do would be to add the edit text last, specify that it should be between the other two controls, and then set it to fill width.
But I'm not sure how to do that. Any help?
use property android:weight='1' on the EditText once you have fixed the widths of the other views

How to center a text vertically in a narrow textview in Android?

I have a TextView which has a height of 30px and a textsize of 40px. Since the text is taller than the View, I only want to display the middle part of the text.Like this:
But with android:gravity="center_vertical", I only can display the upper part of the text with some bottom part cut off.
And this is my code:
<TextView
android:layout_width="wrap_content"
android:layout_height="30px"
android:textSize="40px"
android:text="ABCDEFG"
android:gravity="center_vertical"
/>
Anyone knows of any way to do that? Thanks!
Can't you simply wrap it in a LinearView set to the appropriate size and adjust the margin within the textview to about half (depending on padding) the font size?
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:background="#android:color/white">
<TextView
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:text="Sliced in half"
android:textSize="60dp"
android:layout_marginTop="-30dp"/>
</LinearLayout>
Resulting in:
http://i.stack.imgur.com/jEdxx.png
I highly doubt whether you can do that. All the options that I have come across while dealing with TextView are for when the Text is smaller than the View. This is the first question that I have come across which has the requirement otherwise.
One option which I had used before was android:scrollHorizontally="true" where in you specify whether the text is allowed to be wider than the View.
Interesting question. It would be great if you could add some code though.

Multiline TextView with width "wrap_content"

I am wondering how to have a TextView display its content on several lines without hardcoding the width in the XML.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="false"
android:text="Long multiline text"/>
<TextView
android:textColor="#color/text_color"
android:layout_width="130dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
Any thought welcome.
EDIT: my problem is that when the text exceeds the width set (because it reaches the end of the screen) a portion of the text is just not displayed. I would expect the text to be split on two lines
Though I cannot reproduce the not wrapping problem, you can fix the positioning problem by using a weight on the first TextView. Using the following XML gives the expected output in the graphical layout view in Eclipse:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:singleLine="false"
android:text="Long multiline text"/>
<TextView
android:textColor="#color/text_color"
android:layout_width="130dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
Also add
android:minLines="2"
android:scrollHorizontally="false"
You could try
android:inputType="textMultiLine"
in your TextView XML. This worked for me.
I think I had very similar problem. I had a TextView with a text, where I was not sure how much lines will it take. It was encapsulated by a LinearLayout having android:layout_width="match_parent" to ensure my text will fill out all the space horizontally. However, the problem was that my text did not fit into 1 line and when it did break into a new line, the next view component below it did not move downwards to give enough space for the second line to be viewable fully.
I could achieve the solution by changing the LinearLayout that was containing my TextView into a RelativeLayout. By this way, the element below the text (actually below the Layout itself) was moved automatically to give enough space for the multi-line text.

Android TextView offset downwards

I have an activity with two Buttons and a TextView in a LinearLayout. My TextView is offset downwards and the text doesn't fit inside the box. Can you explain what is happening? I think it is related to padding, and I've read several discussions about the perils of TextView padding, but that doesn't explain why the text is cut off at the bottom.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#800080">
<Button
android:text="This"
android:background="#drawable/button_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="That"
android:background="#drawable/button_green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:text="Copious amounts of text that overflows onto several lines on a small screen, causing the TextView to dangle below the buttons. Why it does this I can't imagine. I only hope someone can help me with this."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#533f93"
/>
</LinearLayout>
This code produces this display:
The purple is the LinearLayout, the blue is the TextView. As you can see, the TextView's top is below those of the buttons and its bottom is below the bottom of the LinearLayout. As I add text to the TextView, the LinearLayout increases its height appropriately, but because the TextView is offset, I always lose the bottom of the last line.
I ran Hierarchy Viewer and it gave me this wireframe:
Which shows the vertical offset at the top, but misses the bottom of the TextView. The same wireframe with the LinearLayout selected looks like this:
According to Hierarchy Viewer, the top of the buttons is at 0, but the top of the TextView is at 7. I've tried various fixes, mostly culled from this site:
android:paddingTop="0dp"
android:background="#null"
android:includeFontPadding="false"
None of these fixed my issue.
Set android:baselineAligned property of your LinearLayout to false.
From documentation:
When set to false, prevents the layout from aligning its children's
baselines. This attribute is particularly useful when the children use
different values for gravity. The default value is true.
give the layout_gravity of the Textview to be center_vertical
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#800080">
<Button
android:text="This"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="That"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:text="Copious amounts of text that overflows onto several lines on a small screen, causing the TextView to dangle below the buttons. Why it does this I can't imagine. I only hope someone can help me with this."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#533f93"
android:layout_gravity="center_vertical"/>
</LinearLayout>
Try setting the layout_gravity for the TextView like this:
<TextView
android:text="Copious amounts of text that overflows onto several lines on a small screen, causing the TextView to dangle below the buttons. Why it does this I can't imagine. I only hope someone can help me with this."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#533f93"
android:layout_gravity="top"
/>
If you have this problem with several TextViews you can add android:gravity="center_vertical" to LinearLayout

Categories

Resources