I have a problem with two Textviews on the same height in a RelativeLayout running into each other.
I use the following Layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#drawable/icon" />
<TextView
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="NameNameNameNameNameNameName"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/logo"
android:gravity="clip_horizontal"
android:lines="1" />
<TextView
android:id="#+id/information"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/nrcoupons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:layout_alignRight="#id/information"
android:layout_alignBottom="#id/logo" />
<TextView
android:id="#+id/subcategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subcategory"
android:layout_alignLeft="#id/name"
android:layout_alignBottom="#id/logo" />
</RelativeLayout>
This gives me this view:
alt text http://janusz.de/~janusz/view.png
Everything is as I need it except the two textviews name and information are displayed on the same screen space with the one on top of the other.
How can I avoid this?
For your #+id/name TextView, add android:layout_toLeftOf="..." for whatever TextView is on the right. The screenshot and the XML do not seem to line up (screenshot appears to have "Distance" in the overwritten TextView, but the XML does not), so I'm not completely certain which widget this is.
If you are targeting Android 1.5, you will need to order the widgets in the XML such that the widgets are defined before they are referenced from android:layout_toLeftOf or android:layout_toRightOf. If you are targeting Android 1.6 and newer only, you can have them be in any order, but the first occurrence of any distinct ID must have the + sign, even if that first occurrence is in an android:layout_toLeftOf attribute instead of an android:id attribute.
Your namenamename textview is set with width = fill_parent so you can't put anything to its right ;)
Related
I'm trying to have two TextViews side-by-side, and I want one to be touching the right-side of the screen and the other, the left-side. I don't want to define the widths using numbers because screens of different sizes would behave differently. So I'm trying to use layout_gravity, which is not working for some reason.
<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:textSize="16dp"
android:layout_gravity="left"
android:text="rrr"
android:textColor="#color/secondTextColor"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:textSize="16dp"
android:text="sss"
android:textColor="#color/secondTextColor" />
</LinearLayout>
Can anyone tell me why? Thanks!
You can create one LinearLayout for each TextView as follows :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="start">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:text="rrr"
android:textColor="#f2f2"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:text="sss"
android:textColor="#f3f3" />
</LinearLayout>
</LinearLayout>
And the important thing is that in your first LinearLayout you put android:gravity="start" and in your second one android:gravity="end", then it will work :)
Use end instead of right to ensure correct behavior in right-to-left locales.
Why is "end" better than "right"?
Using Gravity#LEFT and Gravity#RIGHT can lead to problems when a layout is rendered in locales where text flows from right to left.
Use Gravity#START and Gravity#END instead. Similarly, in XML gravity and layout_gravity attributes, use start rather than left.
For XML attributes such as paddingLeft and layout_marginLeft, use paddingStart and layout_marginStart.
NOTE: If your minSdkVersion is less than 17, you should add both the older left/right attributes as well as the new start/right attributes. On older platforms, where RTL is not supported and the start/right attributes are unknown and therefore ignored, you need the older left/right attributes. There is a separate lint check which catches that type of error.
(Note: For Gravity#LEFT and Gravity#START, you can use these constants even when targeting older platforms, because the start bitmask is a superset of the left bitmask. Therefore, you can use gravity="start" rather than gravity="left|start".)
You can try with android:layout_weight & android:gravity .
Read What does android:layout_weight mean & Layout Weight
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:gravity="left"
android:text="Intellij" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:gravity="right" // You can add end instead of right
android:text="Amiya" />
</LinearLayout>
You could use android:layout_weight="1" on TextView's and 0dp for width.
I have the following Android layout
<?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:paddingBottom="16dp"
android:orientation="vertical" >
<TextView
android:id="#+id/slideTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip"
android:padding="#dimen/px20"
android:text="#string/login_message"
android:textSize="#dimen/px25"
android:textStyle="bold" />
<TextView
android:id="#+id/slideDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/password"
android:drawablePadding="#dimen/px20"
android:drawableStart="#drawable/password"
android:padding="#dimen/px20"
android:text="#string/login_message_body"
android:textSize="#dimen/px20" />
<TextView
android:id="#+id/swipeMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="" />
</RelativeLayout>
But all the elements are positioned at the top of the screen one on top of the other, like if they didn't occupy any space.
That's not what what it seems to happen in the RelativeLayout documentation, where all elements are vertically positioned one below the other.
What's going on here?
So you need to use the id of the other components to align then properly.
For example the TextView with the id #+id/slideDescription should also have
android:layout_below="#+id/slideTitle" as one of the properties of the xml.
And the TextView with the id #+id/swipeMessage should also have
android:layout_below="#+id/slideDescription" as one of the properties of the xml.
In order to place one view below another in RelativeLayout you have to use layout_below property and set the ID of View you want to be above the specified one. But actually in order to place views vertically below each other it is more convenient to use LinearLayout with orientation set to vertical
layout_below is missed in the above xml code.I replaced the code with that please use that.
In Relative layout elemnets will be arranged relative to other elements in order to do this we should use id values of individual view elments
android:layout_below="#id/slideTitle" should be placed in description text view
android:layout_below="#id/slideDescription" should be placed in message text view
in order to get the output you desired please use the below code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="16dp" >
<TextView
android:id="#+id/slideTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip"
android:padding="#dimen/px20"
android:text="#string/login_message"
android:textSize="#dimen/px25"
android:textStyle="bold" />
<TextView
android:id="#+id/slideDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/slideTitle"
android:drawableLeft="#drawable/password"
android:drawablePadding="#dimen/px20"
android:drawableStart="#drawable/password"
android:padding="#dimen/px20"
android:text="#string/login_message_body"
android:textSize="#dimen/px20" />
<TextView
android:id="#+id/swipeMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/slideDescription"
android:text="" />
So, I'm currently in the process of creating my first Android app. It's been a difficult battle, but I'm somehow hanging in there. Stuck on the design now though.
<?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="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/phid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
<ImageView
android:id="#+id/color"
android:contentDescription="paintable circle"
android:layout_width="18dp"
android:layout_height="fill_parent"
android:layout_gravity="left"
android:layout_marginLeft="6dip"
android:layout_marginTop="6dip"
android:src="#drawable/circle" />
<TextView
android:id="#+id/datetime"
android:layout_width="wrap_content"
android:layout_height="60dip"
android:paddingBottom="6dip"
android:paddingLeft="6dip"
android:paddingRight="10dp"
android:paddingTop="10dip"
android:textSize="12sp"
android:textStyle="bold" />
This gives a nice list, with the title in the top left, and the date in the far top right. But I want a textview under the title, same font size as the datetime, and another textview under the datetime with the same font size. I've tried adding another LinearLayout, a RelativeLayout, without any extra Layouts, but it just doesn't seem to work. What am I missing here? Thanks.
You could use a RelativeLayout
place the title on the top left
android:layout_alignParentLeft = "true"
place the date time on the right with
android:layout_alignParentRight = "true"
Then for each of the TextViews you want to place under a component, use
android:layout_below = (give the id of the control )
Cheers
I have a rather simple ListView row:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/tournament_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textSize="25dp" />
<TextView
android:id="#+id/tournament_winner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:textSize="25dp" />
</RelativeLayout>
When the text of "#+id/tournament_name"is long - it overlaps with the one from "#+id/tournament_winner" and I don't understand why.
I tried using android:singleLine="false"to no avail. I also tried using android:inputType="textMultiLine"as the docu says android:singleLine="false" is deprecated but then I get the warning: Attribute android:inputType should not be used with <TextView>: Change element type to
<EditText> ? so no good here as well.
I also tried using android:ellipsize="end" but this doesn't work. I assume it is because the text in the left TextView ("#+id/tournament_name") is NOT long enough to fill up the full width of the ListView (which code is not sowing here).
I was sure that if I use android:layout_width="wrap_content"the two TextView fields shouldn't overlap.
Here is an example (see the second line):
Any further ideas how this could be fixed?
android:layout_toLeftOf="#id/tournament_winner" in First TextView.
Also set android:maxLines="1" and Fix width for tournament winner because when it gets long tournament name cant see...
row.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/tournament_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/tournament_winner"
android:maxLines="1"
android:text="NAMEEEEEEEEEEEEEEEEEEEEEEEEEEE"
android:textSize="25dp" />
<TextView
android:id="#+id/tournament_winner"
android:layout_width="wrap_content" android:layout_marginLeft="10dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="WINER"
android:textSize="25dp" />
</RelativeLayout>
Thank you very much for your answer - sorry it took me some time to respond. I ended up using your android:layout_toLeftOf="#+id/tournament_winner" but left the single line and the margin to the left unused, as the result seemed perfect to me (hope this is also the case for other devices).
One thing though - in the first text view (tournament_name) I had to use android:layout_toLeftOf="#+id/tournament_winner"and not android:layout_toLeftOf="#id/tournament_winner" - pay attention to the added +. For some reason I get an error using android:layout_toLeftOf="#id/tournament_winner": Error: No resource found that matches the given name... so it seems that it is possible and NEEDED to define the resource in the time of calling it because the system doesn't know it before it was defined.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/tournament_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/tournament_winner"
android:layout_alignParentLeft="true"
android:textSize="25dp" />
<TextView
android:id="#+id/tournament_winner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:textSize="25dp" />
</RelativeLayout>
You can use single text view in place of two and simply display both strings in one text view !!
What's the difference between "?android:" and "#android:" in an android layout xml file? They seem to be interchangeable ways of reusing android SDK resources.
The only difference I discovered is illustrated by the following example.
Here the TextView's right edge is rendered aligned with the left edge of the ImageButton
<RelativeLayout
android:id="#id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#888888">
<TextView
android:id="#android:id/text1"
android:layout_alignParentLeft="true"
android:text="blah blah"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#android:id/button1" />
<ImageButton
android:id="#android:id/button1"
android:layout_alignParentRight="true"
style="#style/PlusButton" />
</RelativeLayout>
Here, however, the right edge of the TextView is aligned with the right edge of the RelativeLayout. The TextView overlaps the ImageButton.
<RelativeLayout
android:id="#id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#888888">
<TextView
android:id="#android:id/text1"
android:layout_alignParentLeft="true"
android:text="blah blah"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="?android:id/button1" />
<ImageButton
android:id="?android:id/button1"
android:layout_alignParentRight="true"
style="#style/PlusButton" />
</RelativeLayout>
The only difference between the two layouts is the use of #android vs ?android. Both compile with no errors.
Thanks much.
Prefixing the ID with a question mark indicates that you want to access a style attribute that's defined in a style theme, rather than hard-coding the attribute.
See "Referencing Style Attributes" here: accessing-resources