Building a simple Group Chat View in Android - android

I'm building a very simple online chat room App. What I have achieved is something like below right now:
Robert:blah..
Tom: yes blah..
David(You): That sounds cool!
Lily: Do you know blah...
Robert:blah..
Robert:blah..
David(You): Wow! Blah...
The new feature/problem I'm facing is that I want current user's talks to show on the right.
Like below(this is what David see on his screen):
Robert:blah..
Tom: yes blah..
That sounds cool! : David(You)
Lily: Do you know blah...
Robert:blah..
Robert:blah..
Wow! Blah... : David(You)
Each line above is a TextView, and I'm dynamically creating TextView whenever there's new message, then adding them to the LinearLayout that contains these TextView. In order to make David(current user)'s talk on the right, I tried to set align right and I change the LinearLayout to RelativeLayout. But then I realize once I use RelativeLayout, all talks are in the same line overlapping each other since I didn't set their height.. Can anyone shed some light on how to achieve this please? My codes below:
...
//new messages are stored in lines[]
for (int i = 0; i < lines.length; i++) {
TextView newLine = new TextView(getBaseContext());
newLine.setText(lines[i]);
// check if the speaker of this line is user himself
if (speakerName.equals(userName)) {
//change the layout of this textView to make it align right..
}
myLinearView.addView(newLine);//add to linearView that contains these talks
}

You definitely need to use a ListView, as Chor WaiChun mentioned. However, the way you would do this with a relative layout would be to set the RelativeLayout.layoutParams for the view with a rule that sets it to layout_below the previous view. Just like you would in XML.
Also, even if you insist on adding 1 view per line (which as previously stated is wrong, use a ListView), there's no reason not to use the LinearLayout. You can have a LinearLayout with right justified text, just set the gravity to right.

Related

How to make a zig-zag layout?

I want to create zig-zag layout same as following attached image:
I tried a lot by creating diagonal lines and arranging them with icon but couldn't make it same.
I implemented diagonal lines with the help of accepted answer from following questions:
Diagonal line across view
How rotate line in Android XML?
However I'm stuck to arrange lines with icons exactly same as in image.
I created this custom ZigZagLayout.java file to cater your requirement. You just have to update the package name in the 1st line.
It basically extends RelativeLayout, so you can use it in your layout-xmls just like any other ViewGroup class. Once you have instantiated this layout, just add child-views to it like it is done for RelativeLayout via addView(View child).
Example code snippet with dynamically created view:
ZigZagLayout zigZagLayout = (ZigZagLayout) findViewById(R.id.layout_zigzag);
Button btn = new Button(this);
btn.setText("Test Button");
btn.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT));
zigZagLayout.addView(btn);
I've also added few interfaces to this ZigZagLayout for your easy interaction like ability to set the connector-line stroke width, visibility, color, margins, etc.
Try it out and let me know if it suffices your requirement. Cheers.
If you have layout for each circular item , you may use relative layout to align them, using align_below, align_left with margin, align_right with margin tags.
Please provide further detail, what are the lines connecting them and exactly what all are requirements for UI and functionality.

Handling an EditText that was added programatically

I've been making all of my views dynamically, and now I've come to the point where I want to add an EditText for people to write in.
I've been able to accomplish this for the most part, but it doesn't look right. I have a linear layout that I'm adding a relative layout to. I'm making the relative layout have a white background, then adding the EditText. Problem is, it always adds it to the direct center of the relative layout, and options to align it vertically to the top have so far failed.
I also need to be able to pull the text from it later when a separate button was pressed (I know how to make the button work, it's the pulling text from it part I'm a bit iffy on). Here's my code so far:
public void addEditText(LinearLayout L){
EditText myEditText = new EditText(c);
myEditText.setSingleLine(false);
RelativeLayout l1 = new RelativeLayout(c);
LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(scWidth1, 300);
lp.gravity=Gravity.CENTER;
l1.setLayoutParams(lp);
l1.setBackgroundColor(Color.WHITE);
l1.setGravity(Gravity.CENTER_VERTICAL);
l1.addView(myEditText);
L.addView(l1);
}
l1.setGravity(Gravity.CENTER_VERTICAL); places the EditText in center vertical of the parent container i.e RelativeLayout, remove that line.

How to add TextView at below in a RelativeLayout when there is no space at right?

I've seen many of questions for how to add TextView in a RelativeLayout programatically, but everybody adding it in LinearLayout with orientation vertical. Can any one suggest me or give me a link that how to add multiple TextView in RelativeLayout at right until it has space and then change the line.
I want a layout like this..
May be this works for you !
You can customize chips-edittext-library for your need. Customizing by setting background to transparent, and editable to false.
-> Or you can use any other library which is used for displaying emoticon in EditText and customize it according to your need. Like android-emoticon-edittext-spike
You can use the Flow Layout library that manages the view arrangement itself.
When there is no space left the added View is moved to the next line

Add Buttons Into layouts one by one on serval Lines

I want to develop the Messaging application like native Application. The Problem is when i add buttons after adding two or three buttons depending on name size will become like this
My Code is as below
RelativeLayout tr = (RelativeLayout) findViewById(R.id.contacts_div);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
Button b = new Button(MainActivity.this);
b.setText(name);
b.setId(id);
tr.addView(b,params);
if(prev_id!=0)
{
params.addRule(RelativeLayout.RIGHT_OF,prev_id);
}
I want if the enough space is not available the it will add on Next Line.
i try many posts in stack overflow but fail to solve this problem
Thanks in advance
You should use a gridview for this.
try setting your button position through yout code once the text is set then you can see if the total width of your buttons is too big. Then you'll know when to place a button on the next line.
And as #Snicolas said use a GridView, the placement will be easier.
I hope this will help you.
You should use FlowLayout. It's not standart android component, so you should find implementation you like. E.g. this one is nice.

Setting button alignment programmatically

I'm creating some 50 button dynamically.
Text is getting set as followed:
btn.Text=result.Rows[i]["Col1"].ToString()+"\n"+result.Rows[i]["Col2"].ToString()
+"\n"+result.Rows[i]["Col3"].ToString();
where result is DataTable & btn is object for button.
Now the problem is some of the buttons are not getting displayed appropriately.
Referring to screenshot below,
in img1 - An unnecessary blank line is getting displayed after the first row.
in img2 - Text is not center aligned.
in img3 - TATAMOTORS is not getting displayed in single line even though there is a space on either side of t he button.
Please note that I'm not setting padding which can be the reason for this.
Any idea how to solve this?
Also, how alignment of text of a button can be set programmatically?
I know that this is not the Best of the question, but after spending hours on it, I'm unable to crack it.
Any help appreciated...
You can set the gravity of the button to customize how the text is aligned. This is exposed on the button by using the Gravity property. From the docs:
Sets the horizontal alignment of the text and the vertical gravity that will be used when there is extra space in the TextView beyond what is required for the text itself.
The values you can assign are found in the GravityFlags enum. For example:
button.Gravity = GravityFlags.Center;
Alignment of button content can be set with .setGravity(int)
In the original question, I wonder if the source text contained some extra space characters? That would explain img1 and img2.
Anyway, my need to left-align the text in a button led me to this page, and here's the solution I ended up with, based on Alix Bloom's answer:
Button myButton = new Button(getActivity());
myButton(Gravity.LEFT);
Button myButton = new Button();
myButton.setGravity(Gravity.RIGHT); //LEFT
Hope this help you. Worked for my (i was also strugling with this issue for some time)

Categories

Resources