I am building an android application which will send and recieve messages from a server (using JSON and HTTP sender).
Now i thought that it could be cool if the messages were displayed just like when you send or recieve an SMS.
for example:
Picture
I have been trying to google around for some hours now, but all i find is how to send an sms from your android application.
Does anyone know if this is possible?
To create this layout you will need an activity with two fragments. The first fragment will just contain the view of your editor. The second fragment will be a ListFragment that displays the message results. The list fragment will inflate a custom view, that consists of a background image (which is the little speech bubble) and 2 TextView widgets that contain the date and message respectivley, and an ImageView with an onClick listener (or a ImageButton) for the star.
Here is a sample of the overall activity layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:name="com.your.package.MessageListFragment"
android:id="#+id/message_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<fragment
android:name="com.your.package.EditorFragment"
android:id="#+id/editor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
And here is a sample of the fragment that is the message entry interface
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#252525"
>
<Button
android:id="#+id/attach_photo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/picture_attach_button"
android:onClick="onAttachPicture"
/>
<Button
android:id="#+id/send_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/attach_photo"
android:padding="8dp"
android:text="Send"
android:onClick="onSendClick"
/>
<EditText
android:id="#+id/message"
android:layout_alignParentLeft="true"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/send_buton"
android:layout_centerVertical="true"
android:hint="Enter messaage.."
/>
<ImageView
android:id="#+id/attached_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_above="#id/message"
/>
And for your ListView fragment make a slight modification to the default list view to add some margins (there are other ways to do this)
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#252525"
>
<ListView android:id="#+id/android:list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:marginLeft="8dp"
android:marginRight="8dp"
/>
<TextView android:id="#+id/android:empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="this is an empty list"
/>
And the adapter you attach to your ListView will have to return a custom UI element that looks like this see here how to implement a custom ListView:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/speech_bubble"
>
<ImageButton
android:id="#+id/favorite_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onFavoriteClick"
android:src="#drawable/star"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
/>
<TextView android:id="#+id/response_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/favorite_button"
android:text="this is an empty list"
/>
The speech_bubble drawable should be a 9patch image that does not scale the corners or the indent of the bubble.
You do all of the applications back end work in the onClickListeners (i.e. onSendClick, onAttachPicture, onFavoriteClick). You can populate your custom ListView in any number of ways, but one way is to use a BroadCastReceiver that listens for incoming SMS messages, or define your own receiver in your backend code.
Listview + 2 different layouts for list items (received and sent). Also check this to help you implement a listview with two item types.
Related
I'm writing an application and have come across a bit of an issue.
When working with a layout file, I have a 2 RelativeLayouts inside of a ViewFlipper.
The idea is that this page in particular is a welcome screen. The first RelativeLayout "welcomes" you to the app, and upon pushing a button, the user is led to the second RelativeLayout. In this layout there is a search bar that will allow the user to search for a certain criteria (specific to the app, not important) then display the results in a ListView.
Everything works correctly, but displaying the ListView seems to have some problems. The adapter is set properly, and I tested the method on another ListView in a test layout, and it worked fine. However something seems wrong with the ListView in the RelativeLayout. Here is the layout code
activity_welcome.xml
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/welcomeFlipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:animateLayoutChanges="true"
android:background="#color/white"
tools:context="com.jacemcpherson.announcer.WelcomeActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:padding="40dp">
...
<!-- This code irrelevant, all's well :) -->
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#color/white"
android:padding="40dp">
<TextView
android:id="#+id/textFirstThingsFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textYouNeedToSearch"
android:layout_centerHorizontal="true"
android:text="#string/first_things_first"
android:textColor="#color/app_color"
android:textSize="32sp" />
<TextView
android:id="#+id/textYouNeedToSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:gravity="center"
android:text="#string/you_need_to_search_for_your_school"
android:textColor="#color/black"
android:textSize="18sp" />
<EditText
android:id="#+id/schoolSearchEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textYouNeedToSearch"
android:hint="#string/search_hint" />
<ProgressBar
android:id="#+id/searchListProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/schoolSearchEditText"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:visibility="gone" />
<!-- This is the problem area -->
<ListView
android:id="#+id/searchResultsList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/schoolSearchEditText" />
</RelativeLayout>
</ViewFlipper>
I'm setting the adapter works like normal, but just in case I missed something, here's the line of code for that...
mListView.setAdapter(new ArrayAdapter<String>(
mContext,
android.R.layout.simple_list_item_1,
result // this is the array of results to be displayed in the list.
));
Thank you for your help, if I've missed something that in some way makes this unanswerable without further information, please let me know.
Change the layout_height from wrap_content to either match_parent or fill_parent.
This is explained very well by this answer.
I am creating a chatting app in Android.
I was able to create the normal text chat list view with the following as the list item layout:
<?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="wrap_content" >
<TextView
android:id="#+id/chat_msg_view"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<TextView
android:id="#+id/msg_send_time"
android:layout_width="250dp"
android:layout_height="20dp"
android:layout_below="#+id/chat_msg_view"
android:layout_margin="2dp"
android:paddingTop="2dp"
android:textColor="#android:color/holo_blue_dark" />
<TextView
android:id="#+id/msg_status"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_below="#+id/msg_send_time"
android:layout_margin="2dp"
android:paddingTop="2dp"
android:textColor="#android:color/holo_blue_dark" />
</RelativeLayout>
But now i am trying to send images as well via chat. So now i need to replace the first TextView in the above layout to ImageView if content being sent is IMAGE.
What is a good approach to do this.
There are lots of approaches you can use. If you are using a list view adapter you can use itemType to change the entire list item layout (good if you are changing the entire layout, but can be a bit complicated) or you can place an image view at the same location in your layout as the text view and show or hide which ever one you are using. I.E. If showing image, show the image view and hide the text view, if you are showing the text view, show the text and hide the image. Then you don't need to insert/remove views at run time, which is a little more complicated.
Your layout might look a bit like this...
<?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="wrap_content" >
<TextView
android:id="#+id/chat_msg_view"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<ImageView
android:id="#+id/chat_image_view"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:visibility="gone"/>
<TextView
android:id="#+id/msg_send_time"
android:layout_width="250dp"
android:layout_height="20dp"
android:layout_below="#+id/chat_msg_view"
android:layout_margin="2dp"
android:paddingTop="2dp"
android:textColor="#android:color/holo_blue_dark" />
<TextView
android:id="#+id/msg_status"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_below="#+id/msg_send_time"
android:layout_margin="2dp"
android:paddingTop="2dp"
android:textColor="#android:color/holo_blue_dark" />
</RelativeLayout>
Notice how chat_image_view is also aligned to parent left.. it will be on top of the text view, but it has visibility "gone" so you wont see it.
Hope this helps, good luck.
I want to create a list view layout with a image and title in it. I want a layout like listview in google io 2014 app. It should be a tiled listview with some colour till the image gets loaded, after the image is loaded it should be shown in the upper half of the listview and title should be shown below with some background colour. I am attaching the screenshot of google io app here.
Updated: If somebody can point me some template custom layout for this listview it would be helpful!
Create a custom list with all the needed controls in separate layout and inflate it using a custom adapter you can find a small example here
you could create a custom layout something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:background="#drawable/images"
android:layout_height="match_parent"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#862c10">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="15sp"
android:layout_marginLeft="10dip"
android:textStyle="bold"
android:text="HTML5 everywhere how and why android users use the webplatform" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="15sp"
android:layout_marginLeft="10dip"
android:layout_marginTop="10dip"
android:text="Wed 5 2001" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="15sp"
android:layout_marginLeft="10dip"
android:layout_marginTop="10dip"
android:text="Steven roberts and mark robinson " />
</LinearLayout>
</LinearLayout>
(this should not be the answer, but forgive me I could not add a comment, and actually I hope this will give him the answer).
First of all I guess you didn't get on well with using ListView and Adapter in Android. So I suggest you to read the following article first:
ListView tutorial 1
ListView tutorial 2
They will teach you how to use xml to define your custom row view. Then you will know how to use George Thomas's xml. Try how to implement the getView() method.
I set one Gribview and one listview in an Activity,In the Gridview there is a TextView and a Button,What I want do is ,when I click the button ,can add a data to the listView .and the button and listView in different layout files.
the xml code is :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:descendantFocusability="blocksDescendants"
>
<ImageView
android:id="#+id/image"
android:layout_width="180dp"
android:layout_height="160dp"
android:layout_gravity="fill"
android:padding="4dp"
android:scaleType="fitXY" />
<LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:orientation="vertical" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:text="prices"
/>
<TextView
android:id="#+id/prices"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:text="name"
/>
</LinearLayout>
<LinearLayout android:layout_width="0.0dip" android:layout_height="wrap_content" android:layout_weight="9" />
<Button
android:id="#+id/add"
android:layout_width="45dip"
android:layout_height="45dip"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:text="+"
android:layout_weight="0.2"
android:textSize="12pt"
/>
</LinearLayout>
</LinearLayout>
I want to realize when I click the button ,the sequence number of the image I pick can add to the listView.
ADD:
maybe I didn't say it clear.I have gridView and listView in one layout file.In the gridView I define an layout file ,which contain an ImageView and a Button.What I realize is ,when the app run,I have obtain the button's action in getView,What I want:in button events ,how to write the position values in listView.I haven't got the solution yet ,it really bother me ,thankx for any help.
ADD2:
Now I have achieved the adapter.notifyDataSetChanged()adding data in ListView.but I don't know how to obtain the string variable in Acitivity,the string variable is given by text(TextView android:id="#+id/prices") in ListView to Activity.When I refresh View(adapter.notifyDataSetChanged()),I get "0". why?could anyone help?thank a lot.
You'll need to begin by adding a ListView to your layout file, and adding a button handler.
Take a look at Dynamically add elements to a listView Android
This links to a Stack Overflow question/answer that should get you started
I want to display data from a very generic JSON string in my android app. One view/screen shall display an arbitrary number of "details" where each detail has an arbitrary number of "values".
I'm trying to use a ListView inside a Listview, and all the data is nicely put into each list, but the lists won't display fully (see image below).
In the lower part of the screen is the first ListView. It contains a number of TextView labels (e.g. Usage and Info), which in turn has a number of values (units, sw version etc). The values is put in a new list which displays a TextView.
The top part is also a ListView, but is displayed ok.
Looks like this:
First part, status tab with the two lists, first (fine) and second (problem):
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:id="#+id/tabStatus">
<ListView android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1" android:id="#+id/listThingStatus"/>
<ListView android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1" android:id="#+id/listThingDetails"/>
</LinearLayout>
The lower ListView with the label and the second ListView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="70px">
<LinearLayout android:orientation="vertical" android:layout_width="0dip" android:layout_weight="1" android:layout_height="wrap_content">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="30px" android:id="#+id/textDetails" />
<ListView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="#+id/listThingValues"/>
</LinearLayout>
</LinearLayout>
And finally the TextViews inside the second ListView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="70px">
<LinearLayout android:orientation="horizontal" android:layout_width="0dip" android:layout_weight="1" android:layout_height="wrap_content" android:gravity="center_vertical">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="30px" android:id="#+id/textValuesLabel" />
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="30px" android:gravity="right|center" android:id="#+id/textValuesUnits" />
</LinearLayout>
</LinearLayout>
The result is this (see image), where the content in the inner lists is mostly "hidden" (SW version and text below etc). I use "wrap_content" almost everywhere but the content is too wrapped here :(. How and where do I format my XML to make the content in the inner lists display properly?
Image (from emulator, but same result on phone):
http://i.imgur.com/8mcDq.png
Placing a ListView inside a ListView will only bring you headaches.
Try using an ExpandableListView instead.