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:

Percentage widths AND overlapping with xml

I'm trying to replicate this:
in my android app. I would like the three textviews to have a percentage based width (33%) across the screen. The triangle is a separate drawable I've created.
The issue is, I can create the percentage width in a LinearLayout, but I can't have nicely overlapping view in a LinearLayout- the Basic Info textview should be behind the triangle.
Below is the code I've got working without the triangle:
Styles:
<style name="status_selected_textview">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">#dimen/standard_line_height</item>
<item name="android:layout_weight">0.33</item>
<item name="android:gravity">center</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/font_size_medium</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:padding">5dp</item>
<item name="android:background">#color/green</item>
</style>
<style name="status_unselected_textview">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">#dimen/standard_line_height</item>
<item name="android:layout_weight">0.33</item>
<item name="android:gravity">center</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/font_size_medium</item>
<item name="android:textColor">#color/gray</item>
<item name="android:padding">5dp</item>
<item name="android:background">#color/light_header</item>
</style>
Layout:
<LinearLayout
android:id="#+id/activate_key_status_header"
android:layout_below="#+id/activate_key_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backround="#color/light_header">
<TextView
android:id="#+id/activate_key_textview"
android:text="Activate Key"
style="#style/status_selected_textview"/>
<TextView
style="#style/status_unselected_textview"
android:text="Basic Info" />
<TextView
android:text="Edit Profile"
style="#style/status_unselected_textview"/>
</LinearLayout>
Here is the code for my triangle that I'm trying to add somehow:
<View
android:layout_toRightOf="#+id/activate_key_textview"
android:layout_width="#dimen/standard_line_height"
android:layout_height="#dimen/standard_line_height"
android:background="#drawable/arrow_right" />
It seems like the solution is somehow a combo of a RelativeLayout and LinearLayout, but I can't seem to find the right way.
Any thoughts?

Can you wrap the 2nd TextView in a FrameLayout, and add the triangle view to it 2nd? That plus an android:gravity left would do it, I would think.
Something like this:
<FrameLayout
<!-- Whatever styles you need to make it fit 33%-->
>
<TextView
style="#style/status_unselected_textview"
android:text="Basic Info" />
<View
android:gravity="left"
android:layout_width="#dimen/standard_line_height"
android:layout_height="#dimen/standard_line_height"
android:background="#drawable/arrow_right" />
</FrameLayout>

Number Picker displays numbers out of margin

I've been trying to fix this issue for hours now but it looks like I'm the only one having it.
I shouldn't see the number above and below the blue line. Here is the XML
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:useDefaultMargins="true"
android:layout_margin="3dp"
app:columnCount="3"
app:rowCount="7">
........
<NumberPicker
app:layout_column="1"
app:layout_row="3"
android:id="#+id/n_of_dies"
style="#style/inputNumbers"
android:layout_width="wrap_content"
app:layout_gravity="fill_horizontal"
/>
<NumberPicker
app:layout_column="1"
app:layout_row="4"
app:layout_gravity="fill_horizontal"
android:id="#+id/carbon_content"
style="#style/inputNumbers"
android:layout_width="wrap_content"
app:layout_gravity="fill_horizontal"
/>
........
The content of Input numbers is
<style name="inputNumbers">
<item name="android:padding">10dp</item>
</style>
any ideas?

Given the problem is how you're using the paddings I'd recommend to take a look at the widget style (the Holo variation) if you want to change the default look:
...
<style name="Widget.NumberPicker">
<item name="android:internalLayout">#android:layout/number_picker</item>
<item name="android:orientation">vertical</item>
<item name="android:fadingEdge">vertical</item>
<item name="android:fadingEdgeLength">50dip</item>
</style>
...
<style name="Widget.Holo.NumberPicker" parent="Widget.NumberPicker">
<item name="android:internalLayout">#android:layout/number_picker_with_selector_wheel</item>
<item name="android:solidColor">#android:color/transparent</item>
<item name="android:selectionDivider">#android:drawable/numberpicker_selection_divider</item>
<item name="android:selectionDividerHeight">2dip</item>
<item name="android:selectionDividersDistance">48dip</item>
<item name="android:internalMinWidth">64dip</item>
<item name="android:internalMaxHeight">180dip</item>
<item name="virtualButtonPressedDrawable">?android:attr/selectableItemBackground</item>
</style>

android:button = #null in radiobutton

I made a RadioButton with images.
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/radioType"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/background_light"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/radioAlc"
style="#style/navbar_button"
android:checked="true"
android:drawableTop="#drawable/policeradio"
android:text="Barrage" />
<RadioButton
android:id="#+id/radioCrash"
style="#style/navbar_button"
android:drawableTop="#drawable/carcrashradio"
android:layout_marginLeft="-10dp"
android:text="Accidente" />
<RadioButton
android:id="#+id/radioMarch"
style="#style/navbar_button"
android:drawableTop="#drawable/marchradio"
android:layout_marginLeft="-10dp"
android:text="Manifestation" />
<RadioButton
android:id="#+id/radioRadar"
style="#style/navbar_button"
android:drawableTop="#drawable/radarradio"
android:text="Radar" />
</RadioGroup>
the problem is that with
<item name="android:button">#null</item>
I can remove the radio button, to let the user click the image, but it seems that it keeps the space to show it. In my case, I would like to remove that extra space that is bothering me !
Is it possible???
I apply that style
<style name="navbar_button">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:button">#null</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:layout_weight">1</item>
<item name="android:textSize">12dp</item>
</style>

I don't know if you use other styles we can't see here, but if I copy your code in a layout file and add this to my styles.xml:
<style name="navbar_button">
<item name="android:button">#null</item>
</style>
it works fine and there is no extra space.
EDIT:
You have to add the item <item name="android:padding">0dp</item> to your navbar_button style, then it works on Android 2.3, too.

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.