I'm trying to make a list where each row has a text at the top and bottom and another one image aligned right (like the image attached).
but I can not. Could anyone help me?
sample image:
http://www.freeimagehosting.net/uploads/fb6e2055f5.png
There are plenty of tutorial and questions about it.
Just to mention a few from a google search:
http://www.softwarepassion.com/android-series-custom-listview-items-and-adapters/
http://developerlife.com/tutorials/?p=327
http://tech-droid.blogspot.com/2009/07/custom-listview-for-android.html
I didn't test it, but your row xml should be something like this:
<?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">
<TextView android:id="#+id/green_title"
android:textSize="25sp"
android:textColor="#00FF00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Text1"/>
<TextView android:id="#+id/sub_title"
android:textSize="15sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/green_title"
android:text="Text2"/>
<ImageView android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image"
android:layout_alignParentRight="true"
android:layout_below="#id/green_title"/>
</RelativeLayout>
Related
I'm trying to define layout for listview item that looks like attached image (made in Photoshop). What layout(s) should I use?
i propose a LinearLayoutwith horizontal orientation first, and inside a RelativeLayoutto place other views from left / top to right / bottom using attributes : layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight etc ...
I would suggest using a RelativeLayout for this. Otherwise, you may up with too much nesting. I'm not going to write the layout but you should look through the RelativeLayout Docs and see all the possible properties you can give Views. You may possibly end up with child LinearLayouts also and that's ok. But I would use RelativeLayout for the parent.
If you are undecided a good thing to do is to draw it out really quick in xml how you think each might go and see with ViewGroup seems like the most efficient. Sometimes its hard to say until you get going on it by either writing the xml code or at least some pseudocode.
You only need to play now with paddings and margins.
<?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" >
<LinearLayout
android:id="#+id/gray_layout"
android:layout_width="40dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#888888"
android:layout_alignParentLeft="true"
android:gravity="center_vertical">
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="AUG"/>
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="18"/>
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="2011"/>
</LinearLayout>
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000088"
android:layout_toRightOf="#id/gray_layout"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="30dp"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/divider"
android:text="Title"
android:layout_marginBottom="5dp"
android:layout_alignBottom="#id/divider"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/divider"
android:text="18. aug 23:49"
android:layout_marginBottom="5dp"
android:layout_alignBottom="#id/divider"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/divider"
android:text="Short msg"
android:layout_marginTop="10dp"
android:layout_alignTop="#id/divider"/>
<ImageView
android:id="#+id/info_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="#ff0000"/>
<ImageView
android:id="#+id/arrow_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_above="#id/info_button"
android:layout_toLeftOf="#id/info_button"
android:background="#00ff00"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/arrow_button"
android:layout_toLeftOf="#id/info_button"
android:layout_alignLeft="#id/arrow_button"
android:gravity="center_horizontal"
android:text="30" />
</RelativeLayout>
You can nest multiple LinearLayouts with different orientation to achieve this.
I'm having a very difficult time figuring out how to lay out this element. Here's what I want to do (apologies for my MS Paint skills):
Here, the gray box is supposed to be an ImageView. The red lines here are just to make the sections more clear - not worried abot how to draw them. The features that I'm trying to get are:
The ImageView is aligned relative to the topmost red line, and to the left edge of the green box.
The "TEXT" is to the right of the image, and centered vertically in its section.
Without the ImageView, this is pretty straightforward - just a LinearLayout with three TextViews and some padding. I've tried doing this wit a RelativeLayout, but I'm unsure of how to center Text within the box without relying on guessing at the padding/margin.
I figured out how to get the box hanging over. I created my RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:background="#3AF">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:background="#AAA">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:padding="10dp"
android:id="#+id/textView"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:padding="10dp"
android:id="#+id/textView1"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:padding="10dp"
android:id="#+id/textView2"/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher"
android:id="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
</RelativeLayout>
But what I can't figure out is how to align the topmost TextView to the right of the ImageView. (Note - this is just my attempt. The layout type/style is entirely flexible at this point).
Here's a screenshot of how it looks in the designer:
Any ideas?
android:layout_toRightOf
Should work... If not, can you explain what's wrong and what are your issues, because it works fine here...
Try putting your first line into your LinearLayout and then everything else in your RelativeLayout. I haven't tried this code, but if I understand your scenario correctly, it should do the trick.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:background="#3AF">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_parent"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:background="#AAA">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher"
android:id="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:padding="10dp"
android:id="#+id/textView"/>
</LinearLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:padding="10dp"
android:id="#+id/textView1"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:padding="10dp"
android:id="#+id/textView2"/>
</LinearLayout>
</RelativeLayout>
If you have any knowledge of XML layouts in Android, please take a quick look. I have the following XML layout that displays an image, then displays an address and phone number below it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/mainbackground"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/view1">
<ImageView android:id="#+id/imageView1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50px"
android:padding="12dip"
android:background="#FFFFFF">
</ImageView>
<TextView android:id="#+id/addressView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20px"
android:padding="12dip"
android:textColor="#000000"
android:background="#FFFFFF">
</TextView>
<TextView android:id="#+id/phoneView"
android:textColor="#0000FF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/addressView"
android:layout_centerHorizontal="true"
android:padding="12dip"
android:background="#FFFFFF">
</TextView>
</RelativeLayout>
Currently, I am just using the android:padding and android:background tags to set a white background behind the ImageView and both TextViews. This works fine for me for the image view. For the text views, they obviously have 2 individual borders/backgrounds. However, I would like to set one white background image behind both text views instead of having two individual borders/backgrounds. See this image for more details on what I would like the final result to look like:
http://img84.imageshack.us/i/homeview.png/
I am just not sure how to "wrap" this white box around both text views. Obviously, the android:padding and android:background tags might not be the way to do this. If anyone could help, it would be greatly appreciated!
Set the image as a background for a LinearLayout that contains both TextViews and you are set.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/button_blue"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/view1">
<ImageView android:id="#+id/imageView1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50px"
android:padding="12dip"
android:background="#FFFFFF">
</ImageView>
<LinearLayout
android:id="commonBackgroundImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:layout_below="#id/imageView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20px"
android:padding="12dip"
android:orientation="vertical">
<TextView android:id="#+id/addressView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:text="text1">
</TextView>
<TextView android:id="#+id/phoneView"
android:textColor="#0000FF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text2">
</TextView>
</LinearLayout>
</RelativeLayout>
I have a scrollview ( mainly for landscape purposes, as I don't have a different xml file, I'm using android:configChanges="orientation")
which contains a RelativeLayout and within it there's a Linear Layout.
The code looks like this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:background="#color/background"
android:padding="10dip" android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout android:layout_height="fill_parent"
android:layout_width="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_gravity="center"
android:orientation="vertical">
<TextView android:textSize="24.5sp" android:textStyle="bold"
android:layout_height="wrap_content" android:layout_gravity="center"
android:text="#string/main_title" android:layout_width="wrap_content">
</TextView>
<ImageView android:src="#drawable/icon"
android:layout_marginTop="20px" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center" />
<TextView android:textSize="15sp" android:layout_marginTop="20px"
android:layout_height="wrap_content" android:text="#string/time_window_please_select_label"
android:layout_width="wrap_content"></TextView>
<Spinner android:layout_height="wrap_content" android:id="#+id/spinner"
android:prompt="#string/time_window_prompt" android:layout_width="fill_parent"></Spinner>
<Button android:layout_height="wrap_content"
android:layout_marginTop="20px" android:id="#+id/start_button"
android:text="#string/start_label" android:layout_width="fill_parent"></Button>
<TextView android:layout_height="wrap_content"
android:layout_marginTop="20px" android:id="#+id/status_label"
android:layout_width="wrap_content"></TextView>
<TextView android:layout_height="wrap_content"
android:layout_marginTop="20px" android:id="#+id/status_time_label"
android:layout_width="wrap_content">
</TextView>
</LinearLayout>
<ImageView android:id="#+id/info_button" android:src="#drawable/info"
android:layout_alignParentBottom="true" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="bottom|right" />
</RelativeLayout>
</ScrollView>
Everything works fine, both in portrait and loandscape mode except for the ImgView (info_button) at the very end.
I used a Relative Layout because I thought I'd be able to position it on bottom right hand corner (a bit of margin would be desirable bottom and right) of the screen...
This is what I get instead...
http://www.doc.ic.ac.uk/~am907/wrong.png
any help appreciated!
EDIT: The link to the full XML file http://pastebin.com/Cce4AC4v (for some reason I can't see it all in preview mode but it's there when I try to re-copy in the text form)
Thanks
andreas
Instead of:
android:layout_gravity="bottom|right"
Try:
android:layout_alignParentRight="true"
Edit: Reading your question again, I believe the problem is the ScrollView. I'm not sure why you are using this type of layout. You could get rid of it in favor of the relative layout and that should solve your problem. I'm not sure why you feel this activity needs to support landscape. If so, I would boil the ScrollView down to a single view object and try to troubleshoot that.
I have understood that u want to place that image at bottom - right location. If so, then give:
<ImageView android:id="#+id/info_button" android:src="#drawable/info"
android:layout_alignParentBottom="true" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentRight="true" />
If this is not the solution, could you place ur desired screen to be prepared, so that we can cross check ur layout.
been trying to figure out Android layouts and having a bit of an issue. i got as far as figuring out how to get the objects in the places i want, using a RelativeLayout (tried LinearLayout and TableLayout combinations, only to find that gravity and attributes weren't doing things i thought they would...) but i've run into an issue with text bleeding behind other text.
the second item demonstrates the problem. i'd like to have this same layout without the text bleeding. here is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="?android:attr/listPreferredItemHeight"
android:layout_width="wrap_content"
android:padding="6dip">
<TextView android:id="#+id/item_text_product"
android:layout_alignParentLeft="true"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_text_total"
android:layout_alignParentRight="true"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#00aa00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_text_count"
android:layout_alignParentRight="true"
android:layout_below="#id/item_text_total"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/text_count"
android:text="Count: "
android:textSize="12sp"
android:layout_toLeftOf="#id/item_text_count"
android:layout_alignBaseline="#id/item_text_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
Put first your item_text_count and text_count items (I mean, put them above the text_count in the XML)... then:
<TextView android:id="#+id/item_text_total"
android:layout_alignParentRight="true"
android:layout_toLeftOf="#id/text_count"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#00aa00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
As you see, the difference is android:layout_toLeftOf="#id/text_count".
Set a maxEms attribute on the product TextView so that it's width can never exceed n ems.
That way should be the best solution.
I think you just have to add android:layout_toRightOf="#id/item_text_product" to the second textView, but can't try it right now.
The issue is with wrap_content, with it the view is going to expand to fit its content.
What about shrinking the text and using nested Linear Layouts?
You might try and use a LinearLayout if you don't want overlapping behavior.
Something like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="?android:attr/listPreferredItemHeight"
android:layout_width="wrap_content"
android:padding="6dip">
<TextView android:id="#+id/item_text_product"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:id="#+id/item_text_total"
android:layout_alignParentRight="true"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#00aa00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_text_count"
android:layout_alignParentRight="true"
android:layout_below="#id/item_text_total"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/text_count"
android:text="Count: "
android:textSize="12sp"
android:layout_toLeftOf="#id/item_text_count"
android:layout_alignBaseline="#id/item_text_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>
layout_weight="1" causes that view to expand to fill the available space not taken up by the right-hand views.