I'm having a problem whereby a string in textview is displaying each character on seperate lines. My code is as below. I am hoping to show the text on one line.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp" >
<NumberPicker
android:id="#+id/numberPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="#drawable/button"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/sectionPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_marginLeft="10dp"
android:text="AM"
android:textSize="18sp"
android:background="#drawable/button"
android:layout_toRightOf="#+id/numberPicker"
android:layout_centerVertical="true" />
</RelativeLayout>
The problem was that like #mbm29414 suggested I had another relative layout that the above was nested in and this layout had a left/right margin that was limiting this layouts size. The parent layout had a horizontal margin set to 40dp. I discovered this by rotating the screen and noticing a change.
Related
I have these two TextViews in my content_main, I am a beginner and i can't figure out why are they overlapping in the center, I tried chanign everything and it still doesn't work.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="top"
android:text=""
android:id="#+id/nameTextView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="35sp"
android:textColor="#1a237e" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="bottom"
android:text=""
android:id="#+id/temperatureTextView"
android:layout_alignParentTop="false"
android:layout_centerHorizontal="true"
android:textSize="50sp"
android:textColor="#00bcd4" />
Try adding this code on the second TextView(#tempratureTextView):
layout_below="#+id/nameTextView"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text=""
android:id="#+id/nameTextView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="35sp"
android:textColor="#1a237e" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text=""
android:id="#+id/temperatureTextView"
android:layout_below="#+id/nameTextView"
android:layout_centerHorizontal="true"
android:textSize="50sp"
android:textColor="#00bcd4" />
</RelativeLayout>
The layout xml above will work.
Besides that, I noticed that you are trying to use android:gravity to position your TextView on top and bottom. This will not work because android:gravity only set the gravity of the content(the text) in your TextView. Use android:layout_gravity to set the TextView's gravity within the parent container.
layout_alignParentTop makes sure that your view stays at top,regardless of other views.Same thing about layout_alignParentBottom it makes view stick to bottom.
In your scenario you want these TextView one below other, So you have to specify android using, layout_below for the bottom element.
Anyway you have the answers as others has provided it,just making it clear about reason.
I'm sorry I'm new to Android and this seems like an easy question but I just don't get it. I have two buttons (same size) and two images (different sizes). I want the buttons below the images but exactly centered to it. I searched a couple of forums but I just don't get it how that works. I also don't understand how to declare one of the images as a parent so the button could be the child.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/negativ"
android:background="#drawable/smiley"
android:layout_below="#+id/titlet"
android:layout_marginTop="50dp"
android:layout_marginLeft="500dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textnhelpful"
android:background="#drawable/nothelp"
android:layout_below="#+id/negativ"
android:layout_marginTop="20dp"
android:layout_marginLeft="500dp"
/>
In android SDK you can't add image view to button as child or reverse, my solution make relative layout and add image view as child to layout make button and layout "wrap_content" and add button as child to layout andmake gravity "center".
Here is xml code
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</RelativeLayout>
I have a relative layouts for some parts of my app, made up of a checkbox, a button, some text, and another button (please see first screenshot, ex: [5min] after screen off [except]).
The problem is for other languages, the text to the left of the last button could be much longer, pushing the "except" button slightly or completely off screen. How else could I do this so that the button (along with the text) wrap around to the next line? Right now only the text does. Here is the code:
<RelativeLayout
android:id="#+id/layout_after_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp">
<Button
android:id="#+id/button_set_time_turn_off"
android:layout_width="wrap_content"
android:layout_height="35sp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
style="?android:attr/buttonStyleSmall"
android:layout_centerVertical="true"
android:textSize="16sp"/>
<TextView
android:id="#+id/textView_data_check_minutes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginStart="3dp"
android:layout_toRightOf="#+id/button_set_time_turn_off"
android:layout_toEndOf="#+id/button_set_time_turn_off"
android:layout_centerVertical="true"
android:textSize="16sp"
android:textColor="#android:color/primary_text_dark"
android:text="#string/text_disable_after_time" />
<Button
android:id="#+id/button_set_disable_exceptions"
android:layout_width="wrap_content"
android:layout_height="35sp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
android:layout_toRightOf="#+id/textView_data_check_minutes"
android:layout_toEndOf="#+id/textView_data_check_minutes"
style="?android:attr/buttonStyleSmall"
android:layout_centerVertical="true"
android:text="#string/button_disable_except"
android:textSize="16sp"/>
</RelativeLayout>
Normal layout:
"except" button pushed off screen:
You can wrap these in a LinearLayout instead since, after all, they are just linear. Then position the LinearLayout how you need to according to your needs.
This will allow you to make use of layout_weight which will make sure that each View only takes up as much space as needed. You would need to play with the weights to get what you want but something like 1|2|1 looks close to what you want.
<LinearLayout
android:id="#+id/layout_after_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp">
<Button
android:id="#+id/button_set_time_turn_off"
android:layout_width="0dp"
android:layout_height="35sp"
android:layout_weight="1"
android:paddingTop="0dp"
android:paddingBottom="0dp"
style="?android:attr/buttonStyleSmall"
android:layout_gravity="center_vertical"
android:textSize="16sp"/>
<TextView
android:id="#+id/textView_data_check_minutes"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_marginLeft="3dp"
android:layout_marginStart="3dp"
android:layout_gravity="center_vertical"
android:textSize="16sp"
android:textColor="#android:color/primary_text_dark"
android:text="#string/text_disable_after_time" />
<Button
android:id="#+id/button_set_disable_exceptions"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="35sp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
style="?android:attr/buttonStyleSmall"
android:layout_gravity="center_vertical"
android:text="#string/button_disable_except"
android:textSize="16sp"/>
</LinearLayout>
Note that I made the width of each "0dp" because you typically need that when using weight for a horizontal layout. I also replaced the android:layout_centerVertical="true" with android:layout_gravity="center_vertical" to match the corresponding attributes of LinearLayout. I also removed the to_right_of and such attributes as those are no longer needed with a LinearLayout.
I haven't tested it but this should get you close.
LinearLayout docs
Another option may be to use the maxWidth property of TextView.
I'm designing a simple layout using a RelativeLayout, i would like to avoid nested LinearLayouts or other nested viewgroups.
There are 9 views, it all shows like this:
I don't know how to correctly align seekbars to avoid text overlapping or wrapping lines.
Aligning from right: rgb images width is fixed, seekbars width (all the same) depends on the labels width, i want it to depend on the largest one.
How to know what label to refer to with android:layout_toRightOf or what?
The above image also shows two behaviours i'd like to avoid:
--aligning refers to first label (#id/text1)--
2nd row: android:layout_alignRight missing make a longer text overlap.
3rd row: android:layout_alignRight is present but longer text wraps.
Here's what i would like:
Should i measure the TextViews width to find the largest one (programmatically, of course...)?
Any idea for an XML solution?
Here's the code:
<RelativeLayout
android:id="#+id/addon"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/semi_transparent_background_controls"
android:visibility="visible" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/seek1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Normal text"/>
<SeekBar
android:id="#+id/seek1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/img1"
android:layout_toRightOf="#id/text1"/>
<ImageView
android:id="#id/img1"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/img1"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/seek2"
android:layout_alignParentLeft="true"
android:layout_below="#id/img1"
android:text="Longer text overlaps"/>
<SeekBar
android:id="#+id/seek2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/seek1"
android:layout_alignParentLeft="false"
android:layout_alignTop="#+id/img2"
android:layout_below="#id/seek1"
android:layout_toLeftOf="#id/img2"/>
<ImageView
android:id="#id/img2"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/img2"
android:layout_alignParentRight="true"
android:layout_below="#id/img1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/seek3"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/text1"
android:layout_below="#id/img2"
android:text="or wraps to a new line"/>
<SeekBar
android:id="#+id/seek3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/seek1"
android:layout_alignParentLeft="false"
android:layout_alignTop="#+id/img3"
android:layout_below="#id/seek2"
android:layout_toLeftOf="#id/img3"/>
<ImageView
android:id="#id/img3"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/img3"
android:layout_alignParentRight="true"
android:layout_below="#id/img2"
/>
</RelativeLayout>
I'm trying to create a layout for a callout bubble that includes an image on the left, another image on the right and then a layout in the middle which includes a couple of TextViews.
If the length of either TextView is short enough, I want the whole callout to only be wide enough to show the text; if it's too long I want it trimmed with a '...'.
Here's a sample of the XML I'm dealing with (I've stripped out all the margins and padding etc. for clarity):
<RelativeLayout android:id="#+id/callout"
android:layout_width="wrap_content"
android:layout_height="54dp">
<ImageView android:id="#+id/callout_img_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<RelativeLayout android:id="#+id/callout_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/callout_img_left">
<TextView android:id="#+id/callout_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true" />
<TextView android:id="#+id/callout_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:layout_below="#id/callout_name" />
</RelativeLayout>
<ImageView android:id="#+id/callout_img_right"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/callout_info"/>
</RelativeLayout>
Originally I had the image on the right using android:layout_alignParentRight="true" but this made the whole callout fill it's available width. The XML shown above works for short text, but if the text is too long it pushes out (shrinks?) the image on the right.
Perhaps a nested LinearLayout with a zero width will do the trick:
<LinearLayout android:id="#+id/callout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="54dp">
<ImageView android:id="#+id/callout_img_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TextView android:id="#+id/callout_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true" />
<TextView android:id="#+id/callout_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true" />
</LinearLayout>
<ImageView android:id="#+id/callout_img_right"
android:layout_width="48dp"
android:layout_height="wrap_content" />
</LinearLayout>
If you don't mind the two text views always having the same width, you can dispense with the nested LinearLayout and just give each TextView a width of 0dp and weight of 1.