I have a listview that consists three columns. The first one is an ImageView, the second and third one are textviews (see code blow).
I want the list to be aligned like this:
the icon and the date should always been shown completely !!
the text in the middle should show as much chars as possible
the date should always be on the right of the right side
With the XML below it looks ok on my Nexus 4. But on the asus tablet the date should be more on the right and the coloumn in the middle should show more text (screenshot 1). On the AVD (screenshot 2) the coloumn in the middle should be smaller and the date should be shown completely.
Can anyone tell me how to change the XML? Thanks!
<?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:padding="5dp" >
<ImageView
android:id="#+id/logo"
android:layout_width="50px"
android:layout_height="50px"
android:layout_marginLeft="5px"
android:layout_marginRight="20px"
android:layout_marginTop="5px"
android:src="#drawable/social_chat"
android:layout_weight="0"
>
</ImageView>
<TextView
android:id="#+id/label"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_marginTop="0px"
android:text="#+id/label"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_weight="50"
android:maxLines="1"
android:singleLine="true"
>
</TextView>
<TextView
android:id="#+id/last_changed"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_marginTop="15px"
android:layout_marginLeft="5px"
android:text="#+id/last_changed"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="50"
android:maxLines="1"
android:singleLine="true"
>
</TextView>
Off the top of my head your layout would look something like this.-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp" >
<ImageView
android:id="#+id/logo"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="20dp"
android:layout_marginTop="5dp"
android:src="#drawable/social_chat" />
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#+id/label"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_weight="1"
android:singleLine="true" />
<TextView
android:id="#+id/last_changed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginLeft="5dp"
android:text="#+id/last_changed"
android:textAppearance="?android:attr/textAppearanceSmall"
android:singleLine="true" />
</LinearLayout>
The key here is to use wrap_content for the views that just need to keep their size, and set a weight for the middle view, which you want to fill the rest of the row.
Some useful tips.-
fill_parent is deprecated, use match_parent instead
When a view has no children, you can just close it with />
singleLine="true" is enough to have a singleLined TextView
You'll usually want to use dp units instead of px
This should do your job. I have put the imageview on the parents left, the date on the parents right and the label to the rightof image and to the left of date.It should work fine for you. Margins , padding please put yourself
<?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" >
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/social_chat" />
<TextView
android:id="#+id/last_changed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:singleLine="true" />
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_toLeftOf="#id/last_changed"
android:layout_toRightOf="#id/logo"
android:singleLine="true" />
</RelativeLayout>
Related
I have the xml code shown below. Everything is working as it should except the final textView( id locationTextView) which won't stay right. I want it to stay as right as possible, but I can't do that(it still appears straight after the linear Layout).Should I set a left margin?. And for the textView1 how can I make it to show only a certain part of the whole text, because I have texts of different lengths and they ruin the 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="wrap_content"
android:background="#color/product_list_item_bg"
android:descendantFocusability="blocksDescendants">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/icon"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_margin="3dip"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#33CC33" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="TextView" />
</LinearLayout>
<TextView
android:gravity="right"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_marginTop="0dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/locationTextView"
android:layout_gravity="right" />
</LinearLayout>
</RelativeLayout>
Try android:layout_weight="1" or some other value for your locationTextView. You can also try out android:weightSum="3" (or that is appropriate instead of 3) on your root LinearLayout. Assign proper weights to your different child views. You can get help here
For showing text in a presentable way, you could use android:ellipsize="marquee" or other options available.
UPDATE
The problem has been solved. It seems like I need both the:
android:layout_alignParentLeft="true"
and:
android:layout_toLeftOf="#id/Image"
lines in the linearlayout.
<LinearLayout
android:id="#+id/Text"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dip"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/Image"
android:gravity="left">
I am trying to create a layout where on the left hand side there are two textViews, and on the right there is an image:
All is working fine except from when either of the textViews has a small amount of text in it.
When a textView has a smaller amount of text in it, it gets pushed further over to the right, and is no longer flush with the left hand side of the screen.
My question is, how to I make it so that no matter what, each of the textViews will always be flush with the left hand side of the parent; as opposed to it being pushed to the right if it has a smaller amount of text in.
I have included links below to images of the layout (I can't post images yet)
This first screen shot is of the layout working fine, and how I want it to look all the way through.
http://pbrd.co/1tZhJti
This second screenshot is of the layout braking. Can you see the highlighted row and how it is being pushed to the right, that is what I want to rectify.
http://pbrd.co/1tZhVss
Here is the code, if anyone can help me that would be great! Thanks!
<?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:padding="8dp">
<ImageView
android:id="#+id/Image"
android:layout_width="60dp"
android:layout_height="60dp"
android:padding="5dp"
android:src="#drawable/icon"
android:layout_alignParentRight="true" />
<LinearLayout
android:id="#+id/Text"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dip"
android:layout_toLeftOf="#id/Image"
>
<TextView
android:id="#+id/Text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FF7F3300"
android:paddingLeft="0dip"
android:textSize="20dip"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/Text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dip"
android:paddingLeft="0dip"
android:textColor="#FF267F00"
android:layout_alignParentLeft="true"
/>
</LinearLayout>
</RelativeLayout>
Just insert android:layout_alignParentLeft="true" in your Linear layout...works like a charm
<LinearLayout
android:id="#+id/Text"
android:orientation="vertical"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dip"
android:layout_toLeftOf="#id/Image"
>
Just remove this line
android:layout_toLeftOf="#id/Image"
There is no need of that. Since you are aligning your LinearLayout to the left of your image, so when the text is small, the LinearLayout align itself to the right(to the left of image). so If you remove above line, your LinearLayout along with TextView's will now automatically alligned to left. But in this case you have to set ems to both TextView's to avoid overlapping with the image.
<?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"
android:weightsum="5"
android:padding="8dp">
<LinearLayout
android:id="#+id/Text"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="wrap_content"
android:paddingLeft="10dip">
<TextView
android:id="#+id/Text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FF7F3300"
android:textSize="20sp"/>
<TextView
android:id="#+id/Text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#FF267F00"/>
</LinearLayout>
<ImageView
android:id="#+id/Image"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:scaleType="center"/>
</LinearLayout>
minimize the gap that I have between two TextViews (main text and subtext) that are in a linear layout and vertical. I tried to pad the subtext to the top, change the hight of the subtext and change the top margin but the gap remains, and I just get a row with an unnecessary hight. My XML is attached
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp">
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleType="fitStart"
android:layout_marginTop="5dp"
android:layout_marginRight= "10dp"
android:gravity="center_vertical" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:textColor="#000000"
android:textSize="20sp"
/>
<TextView
android:id="#+id/subString"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
this is a picture of what it should look like
but what I actually have is a big gap between IMDB and account
Your screenshot isn't showing up, but one thing you can try that's worked for me before is to set the bottom margin of your title and top margin of your subString to negative; i.e.
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginBottom="-10dp"
android:textColor="#000000"
android:textSize="20sp" />
The following is the XML of my layout. It explicitly states that the title, time and description TextViews should be under the image of the alarm. However, as the screen shot shows, the TextViews have moved into the ImageView. Why does this happen and how can I fix this? The problem only started happening when I added the scrollview.
XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/img_alarm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/alarm"
android:layout_centerInParent="true"
android:contentDescription="#string/content_description_layout_alarm"/>
<TextView
android:id="#+id/lbl_alarm_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_below="#+id/img_alarm"
android:layout_alignLeft="#+id/img_alarm"
android:text="#string/empty"
/>
<TextView
android:id="#+id/lbl_alarm_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_below="#+id/img_alarm"
android:layout_alignRight="#+id/img_alarm"
android:text="#string/empty"
/>
<TextView
android:id="#+id/lbl_alarm_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/lbl_alarm_title"
android:layout_alignLeft="#+id/lbl_alarm_title"
android:layout_alignRight="#+id/lbl_alarm_time"
android:maxLines="1"
android:ellipsize="marquee"
android:text="#string/empty"
/>
<Button
android:id="#+id/btn_stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lbl_alarm_description"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dip"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="#string/stop_layout_alarm"
android:gravity="center" />
</RelativeLayout>
</ScrollView>
Image
Cute app :)
hmm... not sure why it's doing it, looks like you have the right code, without busting out eclipse. but i've also had some weird bugs with relativelayout that i didn't understand and didn't have time to debug.
i do know of an alternative way you can accomplish what you're looking for -
have a scrollview that encases a linearlayout instead of a relative layout. Do these things:
For the linearlayout, you can set orientation = vertical so that it's still a top down order.
For the part where you need two textviews where one is aligned to the right and the other is aligned to the right, you need another inner linearlayout with its orientation=horizontal. then have one element align parent left, and the other align parent right. add a weightSum=1 attribute to this linearlayout and have each of the two textviews layout_width=0.5 so that each is half the width of the screen
Apply a weightSum=1 attribute to your outer most linearlayout, and see each element inside so that it's layout_weight sum adds up to 1. layout_weight will allow an element to take up that much % of real estate on the screen. like if you set your imageView to have android:layout_weight=0.8 then it'll take up 80% of the screen... since mathematically, (layout_weight/weightSum) = (.08/1) = 80%
try to use that mechanism instead, and if should work :) if it's confusing i can give code
example
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<ImageView
android:id="#+id/img_alarm"
android:layout_width="match_parent"
android:layout_height="0dip"
android:src="#drawable/alarm"
android:layout_weight="0.7"
android:contentDescription="#string/content_description_layout_alarm"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1">
<TextView
android:id="#+id/lbl_alarm_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:text="#string/empty"
/>
<TextView
android:id="#+id/lbl_alarm_time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:text="#string/empty"
/>
</LinearLayout>
<TextView
android:id="#+id/lbl_alarm_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.1"
android:maxLines="1"
android:ellipsize="marquee"
android:text="#string/empty"
/>
<Button
android:id="#+id/btn_stop"
android:layout_weight="0.1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dip"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="#string/stop_layout_alarm"
android:gravity="center" />
</LinearLayout>
</ScrollView>
i hope this deserves at least an upvote for the effort :D
I have been having problems creating a relative layout in XML for a list item to be used for a series of items in a ListView. I have tried for hours and am tearing my hair out trying to get it to look how I want but cannot get everything to appear in the correct spot and not overlap or mis-align. I can get the first image and next two textviews in place but cannot get the last textview and imageview.
I have attached a wireframe style image of how I am trying for it to look and was wondering if someone could help me out?
The ImageView on the right is a set icon of the full height of the row with padding around it?
The two TextViews take up the majority of the width. The Address textview has the possibility of the text being long so it may need to get truncated if it runs out of space, or ideally have the font size shrink?
The next TextView will just hold a small string of max 5 characters.
The last ImageView is a small arrow to imply that this list item is clickable for more infomation. It needs to be centred like shown.
I would like if the icon, last textview, and last image always be in the same place/alignment down the list.
If someone could offer some assistance on this I would be so grateful.
Cheers guys
For anyone interested I managed to get this working. I know how much of a pain it is to go searching for an answer to a problem and it was never completely resolved.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<ImageView
android:id="#+id/Icon"
android:layout_margin="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/topLine"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:lines="1"
android:layout_toRightOf="#+id/Icon"
android:layout_toLeftOf="#+id/distance"
android:textColor="#color/blacktext"
android:textSize="20dip"
android:text="Name" />
<TextView
android:id="#+id/bottomLine"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:lines="1"
android:layout_toRightOf="#+id/Icon"
android:layout_below="#+id/topLine"
android:layout_toLeftOf="#+id/distance"
android:textColor="#color/blacktext"
android:textSize="15dip"
android:text="Address" />
<TextView
android:id="#+id/distance"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/arrow"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:lines="1"
android:textColor="#color/blacktext"
android:textSize="12dip"
android:text="100m" />
<ImageView
android:id="#+id/arrow"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_margin="5dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/redarrow"/>
</RelativeLayout>
I've done something similar (except the image on left)
It might help you:
<?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:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/TextView01"
android:id="#+id/LinearLayout01"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dip"
android:layout_weight="1"
android:paddingRight="8dip"
android:layout_height="wrap_content"
android:id="#+id/LinearLayout01"
android:orientation="vertical">
<TextView
android:text="#string/Birthday"
android:id="#+id/txtTitlevalue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="end"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"></TextView>
<TextView
android:text="1960-01-01"
android:id="#+id/txtSubvalue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-4dip"
android:singleLine="true"
android:ellipsize="end"
android:layout_weight="10"
android:textAppearance="?android:attr/textAppearanceSmall"></TextView>
</LinearLayout>
<TextView
android:text="2"
android:id="#+id/txtNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold"
android:layout_marginRight="10dip"
android:layout_gravity="center_vertical|right"></TextView>
<TextView
android:text="weeks"
android:id="#+id/txtUnit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:layout_gravity="center_vertical|right"></TextView>
</LinearLayout>
<!-- <View
android:background="#drawable/black_white_gradient"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:clickable="true"
android:focusable="true"
android:layout_below="#+id/LinearLayout01" /> -->
</LinearLayout>