I've got a need to display and TextView (label), EditText(Input) and TextView(suffix) in a line.
The issue I have is - if the label TextView is too long it The EditText and Suffix TextView and not drawn.
Here's my code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_weight="0"
android:padding="5dp"
android:text="Label"
android:id="#+id/label_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:layout_weight="1"
android:id="#+id/input_edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColorHint="#color/dark_grey"
android:textColor="#color/black"
android:hint="text.." />
<TextView
android:padding="5dp"
android:layout_weight="0"
android:text="Suffix.."
android:background="#color/lite_grey"
android:id="#+id/suffix_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
So what I want is - even if the label is over 2-3 lines, for an EditText to appear followed by another TextView.
Any pointers would be appreciated.
Thanks!
Edit:
I've added some 'diagrams' so you can understand what I want to do a bit better.
The label to the EditText can be arbitrary length(2/3 lines), so whenever the label finishes I want an EditText to start (which is followed by another TextView showing a suffix..)
..
![This shows a 2 line label and TextView..]
Edit 2: Thanks for the responses guys!! I think #questioner has really understood what I want to do i.e. I want your 3 views to move to other lines so that they behave like they were one view - and as he has suggested i'll have to find a library for this!
How about this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="5dp"
android:text="Label"
android:id="#+id/label_text_view"
android:layout_width="100dp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content"/>
<EditText
android:layout_weight="1"
android:id="#+id/input_edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColorHint="#color/dark_grey"
android:textColor="#color/black"
android:hint="text.."/>
<TextView
android:padding="5dp"
android:text="Suffix.."
android:layout_gravity="center_vertical"
android:background="#color/lite_grey"
android:id="#+id/suffix_text_view"
android:layout_width="100dp"
android:layout_height="wrap_content"/>
</LinearLayout>
If you want your 3 views to move to other lines so that they behave like they were one view - you should use external library for that.
Why not use a RelativeLayout instead of LinearLayout and then use android:layout_below="#+id/..." or android:layout_above="#+id/..." also android:layout_toRightOf="#+id/..." or android:layout_toLeftOf="#+id/..."
Set
android:layout_weight="1"
for each view so that they all occupy the same amount of horizontal space.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1">
Try this or please expand a little more.
Related
I'm attempting to create a a Heading + button similar to the Google Music App, e.g. where there is a "Songs" Header on the Left and then on the right there is a Button with the text "X more"..
I've using a RelativeLayout for the TextView and Button
My problem is that the button is taking up the size of the layout that contains the text the height is all wrong and the padding doesn't seem to do anything.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
[REMOVED for clarity]
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/list_foreground"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/photo_button"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#color/actionbar_background"
android:padding="10dp"
android:text="test" />
</RelativeLayout>
What am I doing wrong here?
RelativeLayouts are designed to have children in the layout "relative" to each other. In other words, if you want the Button to the right of the Textview, you need to tell it.
Because you are aligning relative to the parent LEFT / RIGHT, it appears that things are "kind of" working.
You may be better off with a LinearLayout, depending on your needs. LinearLayouts use "orientation" not RelativeLayouts.
You should look over some tutorials (like this one: http://mobile.tutsplus.com/tutorials/android/android-layout/) but ultimately you will probably put your button in first and then your text view so that the textview content will wrap appropriately.
To get the same effect as the Music App I ended up using a RelativeLayout but instead of a Button I'm using another TextView, this is giving the impression it's a button but it gives me more scope to format the background etc. I think just setup a OnClickListener in the code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/photo_title">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/more_photo_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:background="#color/actionbar_background"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="10 MORE"
android:textColor="#color/button_text"
android:textSize="12sp" />
</RelativeLayout>
I'm trying to set my TextView to the left of an ImageButton, but I can't seems to find this option.
I was expecting to use something like android:layout_alignLeft, but this option is missing.
I've tried to google the issue, but couldn't find any relative results.
Without it my TextView overlaps the ImageButton and I want to avoid it.
UPDATE
The full xml code is too complex, but here is the important part of it:
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:background="#color/white"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="#+id/frameLayoutBalanceClosed">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button_edit_nickname"
android:id="#+id/card_closed_control_editNickname" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/card_closed_description_nickname"
android:layout_margin="8dp" android:layout_gravity="left"/>
</FrameLayout>
I think what you need is a RelativeLayout. You can specify your TextView to the left of your ImageView with it's specifications. Your code would look something like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/imagebutton1" />
<ImageButton
android:id="#+id/imagebutton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
The reason FrameLayout isn't working is because it's purpose is to overlay items on top of each other, which wouldn't work at all!
If that isn't what you're looking for, you could also use a TableLayout in which items are arranged in columns.
I have a layout in which two TextViews are to be displayed on the same line such that
If TextView1 is a short text, TextView2 should be immediately right to TextView1(IMAGE1) and if the TextView1 is a long text, TextView2 should be at right corner of the Layout on the same line(IMAGE2)
How can I achieve this ?
i use simple horizontal LinearLayout with android:layout_weight attribute and it worked like you want.
Example:
<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/text1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="teeeeeeeext1"/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text2"/>
</LinearLayout>
Use a layout like this..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/editText2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="38dp"
android:layout_toRightOf="#+id/editText1" />
</RelativeLayout>
edittext 1 will push edittext2 to its right...depending on text in it..
You can set android:maxWidth property for first text view. So your layout would look like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:text="sdfksdofsdfsdfsdfsadfgwagrswargweqrgeqrgqwergeqrgeqrg"
/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/textView1"
android:text="text2"
/>
Edit:
I apparently misread (or did not read fully) your question. Just don't mind my answer - I vote for mxy's :)
The last time I had the same problem, I wasn't able to find or hack away a straightforward solution. Counting pixels was not an option (at least not for me). But I found a workaround that eventually led to the same display concept, and that was to use SpannableStringBuilder.
As I'm assuming you want two different TextViews because you want them to have different colors (or size, or style, or typeface).
The idea is to use a single TextView for the whole thing, and prepare a SpannableString before doing setText on your view.
By using combinations of ForegroundColorSpan, TextAppearanceSpan, etc, you can make your single TextView look like different TextViews with different styles, sitting side by side, wrapping to the next line as necessary.
Links:
Setting font color at runtime
TextAppearanceSpan sample
I have a TextView which I fill with text from a string resources in strings.xml. The string resource contains < li > elements to create a bullet list inside the TextView. My problem is that I want to control the indention of lines in the bullet list that span over more than one line. Default the text isn't indented past the bullet so it looks kind of ugly. Is it possible to do this with style parameters or to create bullets in some other way?
Thanks in advance.
edit:
Is it really answered? I don't have any problems producing the bullet list, as described in those links but I'm having problems getting the layout correct. The indentation is like this:
text that go beyond the width
of the line.
And I want the "of the line" to at least start indented as far as the text after the bullet. That's what I try to achieve.
I'm suprised that there seems to be noone with this problem. I mean, bullet list can't be that uncommon in about-dialogs, FAQ etc and a bullet doesn't have to contain too much text to span more than one row and run into this problem.
Anyway, I got to solve it like this for now:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:id="#+id/ScrollViewTipsLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/TipsLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_height="wrap_content"
android:id="#+id/TableLayout01"
android:layout_width="wrap_content"
>
<TableRow>
<TextView android:id="#+id/tvIngress"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#+string/tv_picking_content_ingress"
android:layout_span="2"
android:singleLine="false"
android:layout_weight="1"
/>
</TableRow>
<TableRow>
<TextView android:id="#+id/tvCleaningDot1"
android:layout_height="wrap_content"
android:text="•"
android:singleLine="false"
/>
<TextView android:id="#+id/tvCleaningFirst"
android:layout_height="wrap_content"
android:text="#+string/tv_picking_content_first"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="left"
android:singleLine="false"
/>
</TableRow>
<TextView android:id="#+id/tvCleaningDot2"
android:layout_height="wrap_content"
android:text="•"
android:singleLine="false"
/>
<TextView android:id="#+id/tvCleaningSecond"
android:layout_height="wrap_content"
android:text="#+string/tv_picking_content_second"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="left"
android:singleLine="false"
/>
</TableRow>
</TableLayout>
</RelativeLayout>
I use it to present static text in a bullet list so I don't bother to create the bullet + text dynamically in code. If anyone have any suggestion how to accomplish the same thing in a better way, please enlight me.
Btw, if going with the solution suggested in second link above:
android:text="<ol><li>item 1\n</li><li>item 2\n</li></ol>
The second, third etc. row in a bullet that span over more than one row won't get same indention as first line, which is quite ugly.
Thank you #Bjorn
You can also do something like bellow.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/point"
android:textAppearance="?android:attr/textAppearanceSmall"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Your Text Here"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="14sp" />
</LinearLayout>
The way I solved this problem was by using a RelativeLayout and marginLeft. The marginLeft will put a blank margin between it and the previous item.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbarTrackVertical="#drawable/scrollbar_vertical_track"
android:scrollbarThumbVertical="#drawable/scrollbar_vertical_thumb"
android:scrollbarSize="12dip">
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10sp">
<TextView
android:id="#+id/body_text3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="3sp"
android:text="Main paragraph of text, before the bulleted list"
android:textSize="15sp" />
<TextView
android:id="#+id/type1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="3sp"
android:text="• First bullet"
android:textSize="15sp"
android:layout_below="#+id/body_text3"
android:layout_marginLeft="25dp" />
<TextView
android:id="#+id/type2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="3sp"
android:text="• Second bullet"
android:textSize="15sp"
android:layout_below="#+id/type1"
android:layout_marginLeft="25dp" />
</RelativeLayout>
</ScrollView>
Just trying to point out the key answer of the question:
to create an bullet list, use TableLayout with two columns for each row. One column for TextView of a bullet and the other one for the text
to make text TextView fill the rest empty TableRow and indented at new line, set the weight to 1. You can set the bullet weight to zero or just simply not set the bullet weight and let it empty
based on my experience, changing width parameter do not affect the text and the bullet. So you can leave it empty or set it to anything you want.
Example:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/bullet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/bullet"/>
<TextView
android:id="#+id/TextView01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="this is the text of a bullet list"/>
</TableRow>
</TableLayout>
I have an EditText and a Button in my LinearLayout and I want to align them closely together so they see seem to belong together (edittext + micButton for speech input).
Now they don't have the same height and they aren't really aligned well (Button seems to be a little lower than the EditText). I know I can apply a negative margin like -5dp to make them come closer together, but is there perhaps a better way to do this?
Set them in a specific container/layout so that they will automatically have the same height and no margin between them?
Using relative layout you can stretch a view depending upon another views size without knowing the exact size of the other view.
Here is the code :
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:layout_width="100dp"
android:layout_height="100dp"
android:text="button"
android:id="#+id/but"/>
<EditText
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/but"
android:layout_alignBottom="#id/but"
android:layout_alignTop="#id/but"
/>
</RelativeLayout>
Check this link for reducing space between views :
https://groups.google.com/forum/?fromgroups#!topic/android-developers/RNfAxbqbTIk
Hmm, don't know why people bother so much with tables. Since the both Views are within a LinearLayout (presumable orientation=Horizontal), this command should center both within the layout:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
</LinearLayout>
Note: Since EditTexts and Buttons may orient their text slightly differently, you may have to do some tweaking (by changing margins or padding) to get the text to align properly.
I hope this solution might help for your scenario...Here is the code..
<RelativeLayout
android:id="#+id/rlLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="horizontal"
android:padding="3dp" >
<EditText
android:id="#+id/etId"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:background="#c8c8c8"
android:hint="Edittext"
android:paddingLeft="20dip"
android:paddingRight="10dip"
android:textColor="#000000" />
<RelativeLayout
android:id="#+id/rlLayoutid"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignRight="#+id/etId" >
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_marginRight="14dp"
android:layout_marginTop="10dp"
android:background="#drawable/calender" />
</RelativeLayout>
</RelativeLayout>
# Daniel Here You can use layout weight and weight sum
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:weight_sum=2
>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=1
android:text="button"
android:id="#+id/but"/>
<EditText
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=1
/>
</LinearLayout>
Android tries to automatically level everything off of the text and not the buttons themselves.
Took me forever to finally figure it out. Its really simple. Should fix it.
myButton.setGravity(Gravity.CENTER_VERTICAL);
or if they are in a row.. attach the buttons to a table row, then.
myTableRow.setGravity(Gravity.CENTER_VERTICAL);