Develop Reference

chat layout in Android

I am trying to create a layout like this (the blue bubble):
However, in my XML below, the blue bubble extends to the whole width of the fragment though I have specified the width as wrap_content everywhere. Any ideas ?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingRight="17dp"
android:paddingLeft="17dp"
android:layout_alignParentRight="true"
android:gravity="right"
android:layout_gravity="right"
android:paddingTop="5dp">
<RelativeLayout
android:layout_width="wrap_content" android:id="#+id/bubble_user" android:gravity="end" android:background="#drawable/chat_user_reply_background" android:layout_alignParentRight="true"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/user_reply_status"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_alignBottom="#+id/chat_user_reply"
android:layout_marginBottom="5dp"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:src="#drawable/ic_single_tick"
android:visibility="visible" />
<TextView
android:id="#+id/user_reply_timing"
style="#style/chat_timings"
android:layout_alignBottom="#id/chat_user_reply"
android:textColor="#color/gray"
android:paddingBottom="5dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="#id/user_reply_status"
android:text="17:10" />
<TextView
android:id="#+id/chat_user_reply"
style="#style/chat_text_message_style"
android:layout_toLeftOf="#id/user_reply_timing"
android:maxWidth="280dp"
android:autoLink="web"
android:text="Rahul Agrawal is a good boy but he does not know what he wants." />
</RelativeLayout>
</RelativeLayout>
<style name="chat_text_message_style">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#color/chat_message_text_color</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:textSize">18sp</item>
</style>
<style name="chat_timings">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">12sp</item>
</style>

Check the size of the image used as background for RelativeLayout or change the width of the Layout.Using the same xml with 100dp of width.
UPDATE
The maxWidth of the TextView adjust it according to design.
It looks like this:

Separator for a two column List view not working in Android

I want to separate data of two columns in a List View by a line or any block, as shown here
I tried following solutions, unfortunately they did not work
Solution 1
Solution 2
Please check code for my application and correct me if i missed any thing
Main Activity XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" tools:context=".Time" android:background="#color/accent_material_dark" android:orientation="horizontal">
<TextClock android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="#+id/textClock" android:layout_gravity="center_vertical" android:format24Hour="#android:string/yes" />
</LinearLayout>
Row Layout XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:orientation="horizontal" android:layout_height="fill_parent" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/rowTextView1" style="#style/clock1"></TextView>
<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/rowTextView2" style="#style/clock2"></TextView>
</RelativeLayout>
Styles XML
<resources>
<!-- Clock application theme. -->
<style name="clock1">
<!-- Customize your theme here. -->
<item name="android:background">#24598a</item>
<item name="android:padding">10dp</item>
<item name="android:textSize">16sp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_alignParentLeft">true</item>
</style>
<style name="clock2">
<!-- Customize your theme here. -->
<item name="android:background">#24598a</item>
<item name="android:padding">10dp</item>
<item name="android:textSize">16sp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_alignParentRight">true</item>
</style>
<style name="AppTheme" parent="android:style/Theme.Holo.Light.DarkActionBar"></style>
</resources>

try this example layout code for your list item view
<?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="50dp"
android:background="#color/white"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/divider"
android:gravity="left|center_vertical"
android:text="Some data info" />
<View
android:id="#+id/divider"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/clockInfo"
android:background="#android:color/black" />
<TextView
android:id="#+id/clockInfo"
android:layout_width="60dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center"
android:text="11:11" />
</RelativeLayout>

Refrencing a selector drawable from a style results blank imagebutton

I want to have a ImageButtons changing the image based on its state. (same as "like" button in nine gag and facebook apps).
I have defined a style for each of them that references a selector as a drawable but when I run the program, images doesn't appear. Can you tell me what's wrong with this approach? (sorry for my bad English)
comment_actions_style in values folder:
<style name="LikeStyle">
<item name="android:src">#drawable/like</item>
</style>
<style name="DislikeStyle">
<item name="android:src">#drawable/dislike_normal</item>
</style>
<style name="ReplyStyle">
<item name="android:src">#drawable/reply_normal</item>
</style>
<style name="ShareStyle">
<item name="android:src">#drawable/share</item>
</style>
</resources>
and like drawable in drawable folder: (other buttons are the same)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/like_clicked" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="#drawable/like_focused" android:state_focused="true"/>
<!-- focused -->
<item android:drawable="#drawable/like_normal"/>
<!-- default -->
</selector>
EDIT:
I forgot to mention, I have a list view that its items are user comments and comments have buttons described above.
here is my items layout (part of it)
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/comment_content"
android:orientation="horizontal"
>
<include
android:id="#+id/like"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
layout="#layout/comment_actions"
style="#style/LikeStyle" />
</LinearLayout>
and comment_actions layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/comment_action"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="5dip">
<ImageButton
android:id="#+id/comment_action_img"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#android:color/transparent"
/>
<TextView
android:id="#+id/comment_action_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/comment_action_img"
android:gravity="center"
android:layout_marginLeft="5dip"/>
</RelativeLayout>
These buttons also inherit from a layout if that's matter.

Here, your are setting style for comment_actions layout, and it is a Relative Layout, which won't be abled to response to your "android:src" attribute.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/comment_content"
android:orientation="horizontal"
>
<include
android:id="#+id/like"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
layout="#layout/comment_actions"
style="#style/LikeStyle" /> <!--here,you are setting a style for the RelativeLayout -->
</LinearLayout>

Align a label to text of first RadioButton

I have a TableLayout with 2 columns: label and input field (Spinner, EditText, RadioGroup). I want to align the label for the RadioGroup to be exactly in vertical alignment with the text of the first radio button. The Text "Take it" shall be on the red line. How to do that? Is it possible?
Here is the XML - stripped down to the relevant TableRow:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layoutEditMedication1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="16dp"
tools:context=".Main" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/buttons" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:shrinkColumns="1"
android:stretchColumns="1" >
<TableRow style="#style/EditMedicationTableRowT" >
<TextView
style="#style/EditMedicationLabel"
android:layout_gravity="top"
android:text="#string/i_need_to_take" />
<RadioGroup
style="#style/EditMedicationTableRowB"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RadioButton
android:id="#+id/radioScheduleDaily"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/schedule_daily" />
<RadioButton
android:id="#+id/radioScheduleSpecial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/schedule_special" />
</RadioGroup>
</TableRow>
</TableLayout>
</ScrollView>
</RelativeLayout>
and the used styles are:
<resources>
<style name="EditMedicationTableRowT">
<item name="android:paddingTop">8dp</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="EditMedicationTableRowB">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingBottom">8dp</item>
</style>
<style name="EditMedicationLabel">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_gravity">center_vertical</item>
<item name="android:paddingRight">16dp</item>
<item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
</style>
</resources>
I know that I could make two TableRows with two different RadioGroups each with one RadioButton and then programmatically code something that makes them look as if they where one RadioGroup. But maybe there is a simple solution.
API is 8 and up.

try this
<TextView
style="#style/EditMedicationLabel"
android:layout_gravity="top"
android:paddingBottom="0dp"
android:text="#string/i_need_to_take" />

scrollview is extremly slow on ics (android 4.0) when containing a long textview

Here's my problem, i'm developing a news applicaiton and i used scrollview wrapping a textview to show the content of the news.
But i found that scrolling is extremly slow on android 4.0 ics when the textview is quite long, and the longer the text, the slower the scrolling is. While on android 2.3 devices things just go as fast as expected.
I don't know whether this is really a system bug cause i found this similar problems reported on the android project
Here's my layout:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#id/lst_news_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/list_background"
android:fadingEdge="none"
android:gravity="center" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<TextView
android:id="#id/tv_news_details_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Detail_Title"/>
<TextView
android:id="#id/tv_news_details_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Detail_Category"/>
<TextView
android:id="#id/tv_news_details_created_at"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
style="#style/Detail_Time"/>
<include layout="#layout/detail_horizontal_divideline" />
<ImageView
android:id="#id/img_news_details_image"
style="#style/Detail_Picture"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/image_contentDescription"/>
<TextView
android:id="#id/tv_news_details_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
style="#style/Detail_Content"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="10dip" />
</LinearLayout>
</ScrollView>
<!-- actionbar shadow -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/action_bar_shadow"
>
</LinearLayout>
</FrameLayout>
And my style.xml
<style name="Detail_Title">
<item name="android:textColor">#color/list_item_title</item>
<item name="android:textSize">18sp</item>
<item name="android:shadowColor">#color/list_item_text_shadow</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">2</item>
<item name="android:shadowRadius">2</item>
</style>
<style name="Detail_Category">
<item name="android:textColor">#color/list_item_category</item>
<item name="android:textSize">14sp</item>
<item name="android:shadowColor">#color/list_item_text_shadow</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">2</item>
<item name="android:shadowRadius">2</item>
</style>
<style name="Detail_Time">
<item name="android:textColor">#color/list_item_time</item>
<item name="android:textSize">14sp</item>
<item name="android:shadowColor">#color/list_item_text_shadow</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">2</item>
<item name="android:shadowRadius">2</item>
</style>
<style name="Detail_Content">
<item name="android:textColor">#color/detail_content_text</item>
<item name="android:textSize">16sp</item>
<item name="android:autoLink">all</item>
<item name="android:shadowColor">#color/list_item_text_shadow</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">2</item>
<item name="android:shadowRadius">2</item>
</style>
<style name="Detail_Picture">
<item name="android:layout_gravity">center</item>
<item name="android:gravity">center</item>
<item name="android:background">#drawable/image_frame</item>
</style>
By the way, i've already set
android:minSdkVersion="7"
android:targetSdkVersion="14"
But haven't set the hardware accelerated flag yet.
Is there any solution? Please help me, thanks!

Well, i've found the solution on my own
just set android:hardwareAccelerated="false" in the manifest.xml
Still quite confused about the reason, waiting for an explanation.

Note that you can add the android:hardwareAccelerated="false" for a specific activity (or even a specific view) as seen here: http://developer.android.com/guide/topics/graphics/hardware-accel.html if you want to keep the rest of your app hardware accelerated.