My app shows a list of items, where each line is an item title with its image asides, the line reserves 70% of space for text and 30% for image. Imagine what iphone app store looks like. Which view/layout combo is recommended for this purpose?
I googled and find this article:
http://www.curious-creature.org/2009/02/22/android-layout-tricks-1/
Does this view sound good?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="6dip"
android:src="#drawable/icon" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_toRightOf="#id/icon"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:singleLine="true"
android:ellipsize="marquee"
android:text="Simple application that shows how to use RelativeLayout" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_above="#id/secondLine"
android:layout_alignWithParentIfMissing="true"
android:gravity="center_vertical"
android:text="My Application" />
If by the "what the iPhone app store looks like", you mean "pretty much every single list out there" (well, at least as far as I can judge by the description, having never actually seen the iPhone app store), there seems to be only one way which works. The 'ideal' solution would be to use a RelativeLayout as that allows you to have two lines of text next to the image without needing to a complex layout structure. However, as you can see in this question and this other question, there seems to be some issue with that. So, the fallback is to use a horizontal LinearLayout, and nest a second vertical LinearLayout in it if you need multiple lines of text. See those posts for more details about what your LinearLayout should look like.
Note: I'm assuming you know how to use a ListView. If you don't know how ListViews work, then I recommend this article as a good starting place. It's a bit old, but still good. Just make sure you read its sequels as well, which explain how to use the convertView optimisation.
Edit: For anyone else reading this, here is a tutorial on Lists with much better formatting, making it easier to read.
ListView with a custom layout for the row. When you create the ListAdapter(SimpleAdapter/ArrayAdapter) you can pass in a layout in the constructor. Its real easy if the image will always be the same, but if the image will vary you will need to override the getView method to create the view for the row.
Related
I am new to Android, and wish to do a layout as below:
A Logo on top.
Following with a Rectangle with Rounded corners
Within that Rectangle, I will have two EditText box for User ID and Password, plus one Login button
Below the Rectangle with Rounded corners (outside) I have a Html Link to Terms & Conditions
I have tried various ways of layout out
Using only layout. Different kinds of layouts. All seems to be very difficult to achieve what I need
Using Layout + Background. The background is not really a background, but is more like a template, it will affect your layout, and is very difficult to control where you wants your control located.
Using onDraw. Flexible but worried that it might have problem with different screen sizes.
So, someone please enlight which is the best way to achieve what I need?
No one can really tell you what is best, it depends on exactly what you want but I would suggest using a RelatvieLayout as they are typically the easiest and most efficient to use once you work with them a little, in my opinion. You can read Here to see how to do the rectangle. You basically will use shape drawable and adjust the radius of the corners.
As far as the logo on top, if it will be reused in other Activitys then you can put it in its own layout and use the include tag in your layouts to reuse the logo layout
If you are worried about different screen sizes then read the Docs and find what works for you.
Just start on it and adjust as you go. Don't be afraid to screw up and redo some of it. Hopefully this is enough information to get you started
Using a RelativeLayout will give you more flexibility and allow you to use less Layouts such as nested LinearLayouts and Layouts with only one child which can improve performance
this is how it should be done:
start with linear layout with vertical orientation :
<linearLayourt xmlns=............
android:orientation="vertical"
.....other stuffs goes here
......
.....
<LinearLayout ......this is the child linearlayout
.....other stuffs goes here like width and height
<ImageView ...this is where you are gonna put your logo in
/>
</LinearLayout> ....close your child linear layout
<RelativeLayout ...
.........other stuffs here
<EditText ....1st edit text
...you position your boxes here
/>
<EditText ....2nd edit text
...you position your boxes here
/>
</RelativeLayout>
<TextView
....
...
...put yout hyperlink for this text
/>
</LinearLayout> ...this is the parent linear layout
For your case of creating a Log in screen it's not really matter as it is a relatively easy screen to design. I personally like to use XML to design my layouts and never seen it done using the onDraw method.
My suggestion to you as #codeMagic said is to learn how to use and manipulated RelativeLayouts,as those will prevent you from creating cascaded layouts that are really not recommended and take long time to load.
When I started to program for Android I found LinearLayout to be the easiest to understand and use but using it would bring me to many LinearLayouts inside of a LinearLayouts on complex screen designz, later with the use of RelativeLayout I realized that in most cases one RelativeLayout can replace many cascaded Linear ones.
in your case you could do some thing like that:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/drop_down_icon" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/imageView1" >
</EditText>
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/editText1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText2"
android:layout_centerHorizontal="true"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button1"
android:layout_centerHorizontal="true"
android:text="TextView" />
</RelativeLayout>
All what left is to add the desired padings and margins.
I have a listview where each item has 2 images, one on the right and the other on the left. Between them there is a textview that is filled from data. If text is long then it can continue down but there is a lot of free space just as you can see in the image. I want to use this space also to display text. I have been looking around the web and I have seen things like this http://code.google.com/p/android-flowtextview/downloads/detail?name=FlowTextDemo.zip&can=2&q= but this is useless. I don't want to lose the control of the images because I need their click method. What is the best way to do it? I have thought that maybe I can put a textview between images and an other down and when the first is filled continue in the second one but how can I know how many letters can keep the first textview?
I don't understand why FlowTextView (that you linked to) won't work for you. It's derived from RelativeLayout and flows text around any child views. The child views can be your images, positioned as you normally would in a RelativeLayout. Their onClick methods should work just fine.
<com.pagesuite.flowtext.FlowTextView
android:id="#+id/tv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/the_text >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:onClick="onTopLeftClick"
android:src="#drawable/top_left_image" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="onTopRightClick"
android:src="#drawable/top_right_image" />
</com.pagesuite.flowtext.FlowTextView>
You will need to set the text in code, or else extend FlowTextView and define your own custom attribute(s) to do it from xml.
I've been spending some hours trying to figure this problem out, and maybe I'm missing something obvious...
I'm trying to get three TextViews placed side by side working. I want all of them to be equally large, no matter what text they contain, and if the text won't fit in one of them, the text should be replaced by "..." at the end in that particular textview (with help of ellipsize).
| <>TextView>> <>TextView>> <>TextView> |
As I said, I need them to be equally large at all times. This can "easily" be done by a LinearLayout using weights, however then ellipsize won't work (or at least I won't get it working), since it seems you need an absolute width size to get it to work.
I've been trying with LinearLayouts, RelativeLayouts, TableLayouts, and finally I went with a combination of an xml layout and a programatically approach (this seems far more advanced than it needs to be, but that was the only way I was able to become close). However, now I use an absolute width (setting it programatically), but although I'm multiplying it with a proper densitymultiplier, it will look different on different screens. On a 4.3" screen there will be some space over which I could have used, on the other hand on a 2.7" screen it looks pretty good.
So any ideas how I can achieve this with a layout? I've been looking around a bit on forums as well, the problem is that most people only want one textview to have the ellipsize function, and not all of them...
Below you'll find my first attempt to get it working, but since I think an absolute width is needed in order for ellipsize to work, it won't work. Setting the width to "1dp" for example won't really do the trick either.
Any suggestions would be highly appreciated!
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="10dip"
>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:editable="true"
android:ellipsize="end"
android:singleLine="true"
>
</TextView>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:editable="true"
android:singleLine="true"
android:ellipsize="end"
>
</TextView>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:editable="true"
android:ellipsize="end"
android:singleLine="true"
>
</TextView>
</LinearLayout>
It worked for me when I removed the android:editable="true" part.
If you want that to be a user-editable field use EditText instead. That one (afaik) does not support ellipsize though.
I am working with modified version of sample WeatherListWidget to get a better understanding of App Widgets. Things are fine - except when I try to replace the dark_widget_item and light_widget_item layout files with slightly more complex layout files. Here is original layout:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget_item"
android:layout_width="match_parent"
android:layout_height="46dp"
android:paddingLeft="25dp"
android:gravity="center_vertical"
android:background="#drawable/item_bg_light"
android:textColor="#e5e5e1"
android:textSize="24sp" />
I would like to be able to have multiple text lines. But:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget_item"
android:background="#drawable/item_bg"
android:layout_width="match_parent"
android:layout_height="46dp"
android:paddingLeft="25dp">
<TextView android:id="#+id/type_string"
android:textColor="#666666"
android:textSize="20sp" />
<TextView android:id="#+id/title_string"
android:textColor="#666666"
android:textSize="18sp" />
</LinearLayout>
fails.
In fact, it results in "Sorry! The application Launcher (process com.android.launcher) has stopped unexpectedly. Please try again. Force close".
Reinstating TextView widget_item.xml fixes this. I suspect that part of the problem is how I reference RemoteViews in WeatherWidgetService.getViewAt() - but I am getting very little help from DDMS or LogCat or anything else.
Thanks guys, I got the notification. (SO requires a username with length > 2, hence the dot)
Answer as per comment:
I don't see any layout_width and layout_height attributes for both of the TextViews in your LinearLayout - they are mandatory. Also, if you want the two TextViews to be above eachother, add android:orientation="vertical" to the LinearLayout. And just to the record, you can break a CharSequence to multiple lines in a single TextView by adding "\n" inbetween the different elements.
If you're going to include an image as well, then you're probably better off with a LinearLayout than a single TextView indeed, although you could potentially use the intrinsic drawable option of the latter. That could get a little messy though, especially if you're planning on using different styles for the different lines of text... Not impossible, but I'd stick with the LinearLayout. ;)
I'm trying to make an Android layout like the one below. I have a couple of questions:
1 - what is the element called that FB uses for posts? Ie, it doesn't look like a text view, but the element looks like it separates each post with a divider line. Also, the text style is different for a person's name and how long ago they posted. I'm looking to duplicate this (minus pictures) but I can't find the right UI elements.
What is the element called at the bottom? It's like a static menu. IE, it's the same as a menu but instead of pressing "menu" to access it, it's on the page at all times.
Finally, are there good tutorials/examples on how to make nice looking, professional layouts like the apps on the market? The tutorials that I've found on layouts are really basic. I'd like to understand what elements exist, what all of the attributes mean and see examples, etc. So far I'm only able to see the capabilities from other applications. I'd like to have a handbook or some type of some type of reference manual to go to.
For the "fancy" text views you can make a linear layout that hosts a <RelativeLayout>:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0">
<ImageView
android:id="#+id/userPhoto"
android:layout_height="64dip"
android:layout_width="64dip"
/>
<TextView
android:id="#+id/userFullName"
android:layout_height="25dp"
android:layout_width="fill_parent"
android:layout_marginLeft="70dp"
/>
</RelativeLayout>
Once you have a relative layout you can add different views inside of that to create a sort of customeized view.
As far as good examples I would look at this book. It's easy to understand and very helpful on such things.
I found a really helpful tutorial to solve a problem in ListView Row design a bit like yours. It goes a bit further explaining how to do Async Image loading but the first part should help you.
Also, I might be wrong (I am still a bit new to this) but I think the answer above lacks a TextView for the actual message besides the userName and the relative positions of the elements since it is a relative layout. Something like:
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/userPhoto"
android:layout_toRightOf="#id/userPhoto"
android:textSize="17dp"
android:textStyle="bold" />
<!-- actual message -->
<TextView
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/userName"
android:layout_marginTop="1dip"
android:layout_toRightOf="#id/userPhoto"
android:textSize="15dp" />
The key in organizing a relative layout is:
android:layout_alignTop="#id/userPhoto"
android:layout_toRightOf="#id/userPhoto"
and
android:layout_below="#id/userName"
android:layout_toRightOf="#id/userPhoto"
I might be wrong but if it helps, great! Just adding my bit to the other answer.
Cheers