I have an TextView with a variable width, but maximum is 250dp. But somehow Android sets it always to maxwidth.
With a shorter text and without maxwidth it works, but then the text is long enough that the field exceeds the screen width, it overlaps the arrow.
I already tried this two variants, which give the same result as in the picture
<TextView
android:id="#+id/bubbleText"
style="#style/MarkerText"
android:maxWidth="250dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:layout_marginEnd="#dimen/defaultSpacing" />
<TextView
android:id="#+id/bubbleText"
style="#style/MarkerText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/defaultSpacing"
android:layout_weight="1"
android:background="#FF0000"
android:maxWidth="250dp"
android:singleLine="false" />
I want it to look like this:
Additional infos:
Complete XML
<LinearLayout
android:id="#+id/markerTextBubble"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:visibility="invisible" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/marker_text_background" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="#dimen/tinySpacing"
android:paddingEnd="#dimen/defaultSpacing"
android:paddingStart="#dimen/defaultSpacing"
android:paddingTop="#dimen/tinySpacing" >
<TextView
android:id="#+id/bubbleText"
style="#style/MarkerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/defaultSpacing"
android:background="#FF0000"
android:maxWidth="250dp" />
<mypackage.IconTextView
xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/MarkerTextIcon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/icon_map_arrow" />
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="-5dp"
android:layout_marginTop="-1dp"
android:src="#drawable/marker_text_background_rectangle" />
</LinearLayout>
<style name="MarkerText" parent="android:Widget.Holo.Light.TextView">
<item name="android:textColor">#color/myWhite</item>
<item name="android:textSize">#dimen/markerTextSize</item>
</style>
<dimen name="markerTextSize">22sp</dimen>
The problem occurs in this independent snippet too:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:maxWidth="250dp"
android:text="1. Willkommen bei meiner APP"
android:textSize="22sp" />
Not 100% sure, but I think the problem is that it is a multi-line text.
Does the view behave as expected when the text is shorter? i.e. "1. Welcome"
What I think happens is the following:
The view tries to make it on one line, then it expands until its maximum width, given that is not enough for rendering, makes it a multi-line, but does not stretch the view.
You could try with "1. Willkommen bei\nmeiner APP" to see if it shows the expected behaviour.
Hope this helps.
Using the maxWidth won't be causing it to stretch.
It would most likely be in your code for:
android:layout_marginEnd="#dimen/defaultSpacing"
and check any dimensions:
style="#style/MarkerText"
As setting the maxWidth alone will not cause this.
There must be some figure that is putting padding between your text and the right side textview, or possibly some peculiar margin mess up.
Using maxWidth should not force it out to the right like that, as I showed you in the image, I think it's the nested layouts and there is a lot of coding defining margins and padding within your layouts and elements, this could be forcing your texview to move to the right, and the text will automatically wrap, as it cannot fit in the first row, but the textview itself is still being pushed to the right.
Related
Right now my Log In button is wider than my app name text because it uses fixed padding of the relative layout, but I want it to automatically widen to line up with the left and right edges of the app name text. Is there any way to programmatically do this?
I want it to look the same on all devices. I'm afraid that if I just hard-code my own margins, it will look right on my device, but might not look right on other devices if they render the fonts differently.
Thanks!
layout.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#drawable/back_image"
android:padding="20dp" >
<TextView
android:id="#+id/AppNameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/margin_top"
android:fontFamily="Arial"
android:text="#string/app_title"
android:textColor="#color/white"
android:textSize="#dimen/text_size" />
<com.timey.widget.Button
android:id="#+id/signInButton"
android:layout_width="match_parent"
android:layout_height="65dp"
android:background="#color/green"
android:fontFamily="Arial"
android:text="#string/sign_in"
android:textColor="#color/white"
android:textSize="30sp" />
</RelativeLayout>
Mockup with red dash lines illustrating how I want the sides of the app name to line up with the sides of my log-in button:
I am not entirely sure if this would help, but let me give it a try.
<?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"
android:orientation="vertical" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="App\nTitle" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/title"
android:layout_alignRight="#id/title"
android:layout_below="#id/title"
android:text="Log In" />
</RelativeLayout>
However, the button would be just as wide as the textview, it may not be wide enough to display its own text.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2" />
</LinearLayout>
The first button will take as much space it will need. Then the next button(or what ever your case) will take as much space as it's parent (linear layout) will take which on the other side will wrap the content i.e. the width of first button. So both the buttons will take same width. You can use this to any other components.
Update1
Key to the success
1. A container with wrap_content
2. First component should have wrap_content
3. Second component should have match_content
Update2
for RelativeLayout use layout_alignLeft="#+id/button1" and layout_alignRight="#+id/button1"
It will align to the left and right of the first component i.e. button1 here.
I have the following :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:gravity="left|center_vertical" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:gravity="left|center_vertical" />
</LinearLayout
I want to get my button's text to align left. Right now its aligned in the center. The textview's text is aligned left without any problems. Is there something else I need to add? I don't really have to close and reopen my IDE because I use maven to build. Any suggestions?
ANSWER
Figured it out : set android:paddingLeft="0dp" . Done. No need for gravity there.
Instead of wrap_content give some value. Actually its working but you can't see because your width is set as wrap_content
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Button"
android:gravity="left|center_vertical" />
When you set an object's gravity property, you're telling that object where you want its contents to be aligned. In your code, you're trying to align the text in a box that only as big as the text itself, which does nothing.
There are 2 ways to solve this problem.
A) You can set the button's width to be not wrap the content.
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Button"
android:gravity="left|center_vertical" />
B) You can set the width of the text-view to not be wrap content.
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Text"
android:gravity="left|center_vertical" />
Otherwise, what you're doing right now should have some text in a button where there is no space between the edge of the text and the outside of the button. If there is space there, make sure you're not setting padding or margins in the button or text.
I have a linear layout with several buttons in it. The button images are all the same size and have the same attributes... except for one button. This one button has a smaller font size. All the buttons except for this one are in a perfect line exactly the way I want. For some reason, the button with the smaller font appears a little lower on the screen than the other buttons. I'm having a hard time wrapping my head around the idea of a button that requires less space taking up additional space.
Might someone give me a hint on what to read up on?
EDIT
Here's main.xml (seems like SO filters some of it, all the important stuff is here...)
<ScrollView android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="300px">
<TextView
android:id="#+id/the_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:typeface="monospace"
android:textSize="9pt"
android:background="#color/paper"
android:paddingLeft="20dp"
android:paddingBottom="20dp"
android:textColor="#color/type"
/>
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button style="#style/ASR33_button"
android:tag="Y"
android:text="Y"
/>
<Button style="#style/ASR33_button"
android:tag="N"
android:text="N"
/>
<Button style="#style/ASR33_button"
android:tag="E"
android:text="E"
/>
<Button style="#style/ASR33_button"
android:tag="W"
android:text="W"
/>
<Button style="#style/ASR33_button"
android:tag="S"
android:text="S"
/>
<Button style="#style/ASR33_button"
android:tag="F"
android:text="F"
/>
<Button style="#style/ASR33_button"
android:tag="R"
android:text="R"
/>
<Button style="#style/ASR33_button"
android:tag="M"
android:text="M"
/>
<Button style="#style/ASR33_button"
android:tag="T"
android:text="T"
/>
<Button style="#style/ASR33_button"
android:onClick="onEnterButtonClicked"
android:textSize="6pt"
android:text="RE-\nTURN"
/>
<Button style="#style/ASR33_button"
android:tag="U"
android:text="U"
/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/instructions"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="9pt"
android:paddingLeft="10dp"
android:typeface="normal"
android:text="Commands: (Y)es, (N)o, (N)orth, (E)ast, (W)est, (S)outh, (M)ap, (ST)atus, (Fight), (R)un, (SU)icide. All commands must be followed by RETURN."
/>
</LinearLayout>
The one that's wonky is the 2nd from the bottom, with the different onclick event. The style has 11pt for the character size. If I use it (and a 1 letter button name, like the others) it behaves. But that's not what the ASR33 'enter' key has on it. So if I reduce the font size to say 6 pt, the weirdness happens.
The style can be seen here.
Again, just reading references or ideas please, I can figure it out if I have a word or two to search on. It's hard to know what you don't know...
RESOLUTION
Anurag has it right, see his answer below. Here's an excerpt of the updated LinearLayout:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false">
maybe the re sizing has happened due to the wrap_content property of your button. so what you should do is have a fixed height to the linear layout holding all the buttons while its with is set to fill parents.
and inside the linear layout let individual buttons have height set to wrap content which will give all the buttons the same height as that of the linear layout and also set the attribute android:adjustViewBounds="true" for the small button. this attribute will resize your image button to maintain the aspect ratio. i hope this helps.
EDIT:
So here is the solution to your problem, something that was caused due to the base alignment property of the linear layout. A horizontal LinearLayout aligns the baselines of all its child controls by default. So the first line of text in your multi-line button is vertically aligned with the single line of text in the other buttons. set android:baselineAligned="false" on the LinearLayout. This worked perfectly on my HTC.
I need to create an XML with the following content:
* Two TextViews with varying text (1- 3 rows), one TextView below the other.
* One ImageView to the right of the 2 TextViews, centered vertically, 30x30 px.
One major limitation is that it can't take the whole screen when inflated into a PopupWindow, which means that I cannot use the attributes fill_parent in many places.
I tried a lot of different layouts, but the ImageView keeps getting pushed away by the TextViews when the text is long. When the text is "half long" the image gets tiny but is still visible. I want it to always be 30x30 px, the text can wrap and use another line instead.
I tried to specify values for width and minWidth. Also tried layout_weight="1" for the ImageView. Also tried wrapping the ImageView into a LinearLayout and give that the layout_weight="1" parameter. Nothing works.
Here's an example of what is not working:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView android:id="#+id/popupTitle" android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/popupContent"
android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</LinearLayout>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/img_30x30_px" />
</LinearLayout>
I've had a similar problem and i found that the TableView layout worked for me. It took a while but you can play with the stretch and strink columns proeprties to change the behaviour of how the columns expand to match there content.
Note that you should be able to set the linearLayout of your text to fill_parent (to fill the column space).
Read this on how TableRow works http://developer.android.com/resources/tutorials/views/hello-tablelayout.html
<TableRow>
<!-- Column 1 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
</LinearLayout>
<!-- Column 2 -->
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/img_30x30_px" />
</TableRow>
(Afraid i'm not on a machine with Android so i couldn't test the above code).
Thank you so much Emile! It works! You made my weekend! :)
I had to try it right away (althought it's friday evening), and here's what my xml now looks like:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:shrinkColumns="0">
<TableRow>
<!-- Column 1 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView android:id="#+id/popupTitle"
android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<TextView android:id="#+id/popupContent"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
<!-- Column 2 -->
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:src="#drawable/img_30x30_px" />
</TableRow>
</TableLayout>
I'm having issues with TextViews and centering the text within the text region. Specifically, I have a TextView, but when I have text inside that contains letters that straddle down the bottom margin (i.e. p, g, q, y, etc), those letters are getting cut off. I'm trying to center the text within the region but haven't had much luck.
[Updated] I now resolved the letters getting cut-off at the bottom using wrap_content as my height, but found another problem. It now appears that the text is positioned low in the region, leaving this gap at the top. I modified my layout to reflect the latest (see below). Basically, those characters that were getting cut off before (g, y, j, etc) are touching the region right below which is fine, but it appears to leave padding at the top. I tried to change the gravity to center_vertical or center, but don't have much luck:
Note, I have to work with the specs given the textSizes (i.e. I can't change the values for these)
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="43.3dip"
android:background="#drawable/custom_bg"
android:orientation="horizontal">
<ImageButton
android:id="#+id/headshot"
android:layout_width="43.3dip"
android:layout_height="43.3dip"
android:src="#drawable/sample"
android:background="#drawable/head_btn"
android:layout_gravity="center" />
<RelativeLayout
android:id="#+id/name_and_email"
android:layout_width="230.7dip"
android:layout_height="43.3dip"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/custom_color"
android:textSize="18.6sp"
android:singleLine="true"
android:ellipsize="end"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:background="#c5ff15"
android:lineSpacingExtra="0sp"
android:text="AaBbCcDdGgJjTtYy" />
<TextView
android:id="#+id/email"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/custom_color"
android:textSize="13.3sp"
android:singleLine="true"
android:ellipsize="end"
android:layout_centerInParent="true"
android:layout_below="#id/name"
android:gravity="center_vertical"
android:visibility="gone"
android:text="qypgj#gmail.com" />
</RelativeLayout>
<ImageButton
android:id="#+id/headshot2"
android:layout_width="43.3dip"
android:layout_height="43.3dip"
android:src="#drawable/sample"
android:background="#drawable/head_btn2"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
Can anyone help?
MB
Why are you trying to set the heights manually? You will have much better luck using layout_height="wrap_content". I'd imagine that the problem is that your text size of 14.3sp is too big for the area you are allowing it.
Also, a good resource for debugging complex layouts is the HeirarchyViewer, found under the tools folder.