Develop Reference

TextView overlap in ListView implementation android with 2 textviews

I am implementing listview with 2 textviews , and for reference used Basic Layout and Formatting
Instead of stock names which are short i am using long text, so when i use a long text, it overlaps with the second .
So how to get it right, so that the 2 textviews don't overlap each other.

You can used following code to solve your problem:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="1">
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:id="#+id/ticker_symbol"
android:text="sdasd sadas"
android:layout_weight=".5"/>
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:id="#+id/ticker_price"
android:text="dfsd"
android:layout_weight=".5"
android:gravity="right" />
</LinearLayout>
Output:

To avoid overlapping, you could set the second textview to align to right (android:layout_toRightOf).
For example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/ticker_symbol"
android:layout_alignParentLeft="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/ticker_price"
android:layout_toRightOf="#id/ticker_symbol"
android:layout_alignParentRight="true" />
</RelativeLayout>

I guess you mean due to long length of text it goes to next line or on next TextView
So i suggest you to use textView property android:ellipsized="end" and also use android:single_line="true" instead this you can directly specify the maxline=1
I'm not sure with names spelled correctly so check while typing
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/ticker_symbol"
android:ellipsezed="end"
android:singe_line="true"
android:layout_alignParentLeft="true" />
Hope this explanation woks for you let me know..

Create a Chat Bubble In Android

I am trying to create a chat bubble with some text.For this I am create Three Layoutouts,Inside of main Linear Layout I am using FramLayout,I am setting a 9-patch background To this Framlayout.Inside of Framlayout I am adding one more RelativeLayout where I am placing my three textViews and one imageView.but type long text it goes outside of FramLayout border.I don't know what I am doing wrong or what I am missing.When I am using small text it remain fit but with big text it goes out from even Background Border of FramLayout.In attachment I am showing my bubble and yahoo IM bubble.I am trying to create same like yahoo but with some different style.Please give me your suggestion.I try a lot with different ways but not get success.Thanks in advance . .
Here I am placing my Layoutfile
<?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:id="#+id/linearListLayout1">
<FrameLayout
android:id="#+id/frameLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bubbleblue" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minHeight="100dp">
<TextView
android:id="#+id/chattitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"/>
<TextView android:id="#+id/chatdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"/>
<TextView android:id="#+id/chatText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chatstatus"
android:layout_below="#+id/chattitle"
android:layout_toLeftOf="#+id/chatstatus"
android:text="TextView" />
<ImageView
android:id="#+id/chatstatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/add_picture"
android:layout_alignParentRight="true"
android:layout_below="#+id/chatdate"
android:minHeight="2dip"
android:maxWidth="2sp"
android:maxHeight="2sp"
android:layout_marginRight="2dp"/>
</RelativeLayout>
</FrameLayout>

When creating your .9patch image, you also must specify a content area, which you define with the left, and bottom pixels. Check out this.

Use
and
for background of your root layout item.
right click on images and select Save target as.

Android View background layout problem

I am trying to use a empty View to indicate the color for each item in a ListView.
The idea is that the rowColor View is just a 3dp wide line that should automatically size to the height of secondLine and thirdLine (note that all of the content is set in code including the background color of rowColor and that firstLine and thirdLine are often set to GONE).
It shows up perfectly in Eclipse's Graphical Layout but the rowColor does not show up at all on my phone (running 2.3.3) and all the views are stacked. Any idea how to fix it?
The following code for the list_row was adopted from here. I've provided all the code that I would think works based on that layout, but not even close. Does that layout still work?
list_row.xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<TextView
android:id="#+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:singleLine="true"
android:text="First Line" />
<View
android:id="#+id/rowColor"
android:background="#FF0000"
android:layout_width="3dp"
android:layout_height="fill_parent"
android:layout_below="#id/firstLine"
android:layout_alignParentBottom="true" />
<TextView
android:id="#+id/thirdLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rowColor"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:singleLine="true"
android:text="Third Line" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rowColor"
android:layout_alignParentRight="true"
android:layout_below="#id/firstLine"
android:layout_above="#id/thirdLine"
android:layout_alignWithParentIfMissing="true"
android:gravity="center_vertical"
android:singleLine="true"
android:text="Second Line" />
</RelativeLayout>
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
ListViewTest.java Activity here: http://pastie.org/2035822
Thanks.

I tested your layout in several emulators (from 2.1 to 2.3.3) and it works fine, with or without setting the first TextView visibility to View.GONE.
It must be either a problem in your code elsewhere or a glitch of your specific device.
As a workaround, you can use:
android:layout_height="0dp"
for your rowColor View. Since you are already defining the position of the top and bottom limits with android:layout_below="#id/firstLine" and android:layout_alignParentBottom="true", the actual value of layout_height is irrelevant.

I ran into this recently, and I found that a View with no content apart from a background color will not appear in a RelativeLayout.
If you can, try converting your layout to a LinearLayout. This seems to work for me.

How to represent this in Android Layout

I need to represent the following diagram:
Each X will be an image button. I was thinking of making three tables with one column each and have each cell height be half the height of the table. The problem is that the table needs to be able to stretch or shrink because I am worried about getting everything on the screen and the tables are the only part that can change size and have the entire thing still look ok. The problem I am having is that the rows are only as big as the image buttons. While all the image buttons are the same size, the left and right table in particular, need to have some padding around the image buttons to make it alright. I would add margins to the buttons but that defeats the reshaping problem I am having...I think. Any suggestions?

There may be a better way, but below is one way to accomplish this. Do the buttons need to stretch to fit the cells? Or will they just be centered within? Assuming the latter, here's a suggestion (I am not confident on this, but I believe it should work):
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center"
>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:src="#drawable/drawable11"
/>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:src="#drawable/drawable12"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center"
>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:src="#drawable/drawable21"
/>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:src="#drawable/drawable22"
/>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:src="#drawable/drawable23"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center"
>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:src="#drawable/drawable11"
/>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:src="#drawable/drawable12"
/>
</LinearLayout>
</LinearLayout>
I unfortunately don't have Eclipse right now to test this, but this should be close to what you need. There's probably a cleaner way using a RelativeLayout (using fewer nested views) but this is off the top of my head, gives you something to start with.

Try using grid view.
Link to android developer reference

You may have an easier time putting this together if you use a UI drawing tool such as DroidDraw. When you're done with drawing, the application will generate the appropriate source code to use for your app.

Two misplaced lines in UI for Android activity

I have a problem with designing an UI Android activity. There are two blocks of misplaced graphics on the left and right of the activity - they are two lines just bellow the titlebar with 1px height and about 5-10px width. They cause buttons to break at their left and right parts. I cannot figure out what the problem is. I am using Eclipse with Android SDK 0.9.9. The lines appear not only with the emulator but in a HTC Wildfire (Android 2.1). These lines are also visible in a newly created Android project (HelloWorld).
Sorry, but I was not allowed to post images, being too new here :)
Link to the Broken widgets - note the button's left and right sides
XML layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="fill_parent" android:layout_width="fill_parent" android:fitsSystemWindows="true">
<TextView android:layout_height="wrap_content" android:text="This text view should act as header " android:id="#+id/expenseHeaderTxt" android:layout_width="fill_parent" android:paddingLeft="5px" android:paddingRight="5px"/>
<ScrollView android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_marginBottom="50dip" android:id="#+id/expenseScrollView">
<RelativeLayout android:id="#+id/RelativeLayout01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scrollbars="none" android:paddingLeft="5px" android:paddingRight="5px">
<EditText android:layout_height="wrap_content" android:id="#+id/expenseAmountEdit" android:hint="#string/ExpenseAmountHint" android:layout_width="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentRight="true" android:selectAllOnFocus="true" android:digits="0123456789" android:inputType="number|numberDecimal" android:maxLines="1"></EditText>
<EditText android:layout_height="wrap_content" android:id="#+id/expenseTypeEdit" android:layout_width="fill_parent" android:layout_toLeftOf="#+id/expenseAmountEdit" android:hint="#string/ExpenseSpendTypeHint" android:inputType="text|textCapSentences" android:maxLines="1"></EditText>
<ToggleButton android:layout_below="#id/expenseTypeEdit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/expenseTypeSignToggle" android:textOn="#string/ExpenseTypeSignPlusToggle" android:textOff="#string/ExpenseTypeSignMinusToggle"></ToggleButton>
<EditText android:layout_below="#id/expenseTypeSignToggle" android:layout_height="wrap_content" android:id="#+id/expenseNoteEdit" android:layout_width="fill_parent" android:hint="#string/ExpenseNoteHint"></EditText>
</RelativeLayout>
</ScrollView>
<RelativeLayout android:layout_marginTop="-50dip" android:gravity="bottom" android:layout_height="wrap_content" android:layout_width="fill_parent" android:paddingLeft="5px" android:paddingRight="5px">
<Button android:id="#+id/expenseAddBtn" android:layout_width="fill_parent" android:text="A button that should always be at the bottom" android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>

Funny, I also had the ListView dividers disappearing when scrolling and during the hunt I found the code here:
Disappearing dividers in Spinner drop-down list
It not only fixed the issue with the disappearing separators but also fixed the broken layout.