Chat layout like whatsapp - android

Im trying to build a chat layout like whatsapp. I don't understand how they were able to place 'date' at bottom in rightmost corner of layout.
I saw their code, it uses horizontal LinearLayout in which there is
message and date side by side, but then how does the 'I love' part
of message print above date ?
Another problem is that if I use relativelayout to push date to extreme right using alignparentright = true, it expands the entire layout to match parent, which is obvious but undesirable
Please advice me on this

As sketchy as it seems, I can only see that end result being accomplished with four text views.
Name at the top, two lines for the message, and one for the date.
One message line extends all the way across and above the date, the other is below it and next to the date.
You would need to test the textview length to see how much text you can apply to it before it starts to cut off, and apply the remainder to the second message textview.
Gross.

You can try using a FrameLayout in which there is a LinearLayout at the bottom which contains the name of the sender and the message. Then, add a TextView whose layout_gravity is set to bottom|right

You can use the layout and code below to achieve the desired effect.
Source code gist
What I have used is get the width of the text + the time layout and check if this exceeds the container layout width, and adjust the height of the container accordingly. We have to extend from FrameLayout since this is the one which allows overlapping of two child views.
This is tested to be working on English locale. Suggestions and improvements are always welcome :)
Hope I've helped someone looking for the same solution.

I would recommend using the android:layout_gravity="bottom|right" tag on the date TextView. This will attempt to lay out the View as if the container was "pushing" it to the bottom and right corner.
This may or may not work for all Views. But as #codeMagic said, if you saw their code, then it should be apparent, right?

Related

Android Studio - Kotlin - how to display scrollable text

I am new to Android Studio and Kotlin.
I am outputting texts regularly to the display.
Think of an old-fashioned ticker-tape newsfeed, where the latest text is always at the top...
I want to update some field (e.g. TextView) on the display.
However, I want:
(a) the latest text to appear at the top, and
(b) as the number of texts will increase over time, I want the user to be able to scroll down to old texts if they want.
I thought a Scroll View would work for this but I haven't been able to get anything to work as described above.
Can anyone suggest a solution?
Thanks
Garrett
When a control such as a TextView contains more text than the visible one, you can make the view scrollable simply by setting the following two properties for it in the xml file relating to the layout
android:maxLines = "AN_INTEGER"
android:scrollbars = "vertical"
Subsequently, inside the code, just call the setMovementMethod method of the view
yourTextView.setMovementMethod(new ScrollingMovementMethod())

Why is my Android phone layout different then my layout on Android Studio?

The layout of my MainActivity on my phone appears very differently than the layout I see on the code editor. Images are included. I am using a TabbedView. However, the problem still exists on any layout I choose (empty/tabbed).
What can I do to solve this problem?
I am concerned about the text "Hello world" in the middle, not in the top left corner. I follow this tutorial and in the tutorial it is correctly positioned.
It works as expected, because section_label TextView width is wrap_content it changes, depending on what text it displays. And the 2nd TextViews position depends on it, so it changes too. You should be able to verify this by setting various length texts in your layout editor.
For what you want to achieve, RelativeLayout is not the best choice and you may want to use i.e. LinearLayout instead, with its orientation set to vertical and layout_gravity of second TextView set to right
This is happen because you are using the RelativeLayout in the relativelayout we can arrage our views in custom position wise by the help of give the android:id=#+id/some_id like this if you want your second view is shown just below the first view then give them the property android:layout_below="#id/view1" in your second view
Please read all the documentation of RelativeLayout form this link
https://developer.android.com/guide/topics/ui/layout/relative.html

Layout for chat app in Android

I'm making a chat for Android and I need to make a main xml layout.
There is going to be a TextView to display history, EditText and Send Button. All view should be positioned like in whatsapp. EditText and Button at the bottom of a screen. The rest of the space goes to the TextView.
So how is it possible to do it, so it would look nice at any screen and any orientation?
I tried to do it with android:layout_weight, but I don't think it's going to be very portable.
Thanks in advance.
I don't think a single TextView is the best way to achieve this.
I'd recommend using a ListView instead of a giant TextView to hold the entire conversation history. Each element in the ListView would hold a single TextView and any other required views to display each message in the history, and it will by default allow for scrolling up and down to view the entire history. You can then just adjust the text size to handle different screen sizes.
This is how the default Android Messaging app is implemented, but you can customize each item in the ListView to make it look how you want (like WhatsApp, for example).
Hope this helps.
because layout_weight sets the proportions, but the height of my editText/Button is fixed
So? Don't put android:layout_weight on the fixed portion.
So for different screen sizes, diffrerent height would be given to them, leaving some space.
Then don't put android:layout_weight on the fixed portion. You are hitting yourself on the head with a hammer, then complaining that your head hurts.
Step #1: Vertical LinearLayout.
Step #2: Transcript TextView inside the LinearLayout, with a height of 0 and a weight of 1.
Step #3: EditText and Button (in a horizontal LinearLayout?), inside the vertical LinearLayout, with a height of wrap_content and no weight specified (defaults to 0).
Your fixed-height stuff, with a height of wrap_content, will get its allocation of pixels, and your transcript TextView will get all remaining pixels, courtesy of its weight of 1.
I also echo physphil's suggestion to use a ListView in transcript mode for your chat transcript, rather than the TextView.

How to align views evenly and nicely ordered

I always face this problem and I feel that I design it bad.
if I want to display an activity (settings type of activity) where my user can input a name, choose an item, and check a toggle item. As follows I would like to align the EditText, spinner and button under neath each other in which they occupy the right half of the screen and the text occupies the left side.
Do I use
Nested linear layouts with weights (which I never seem to get it right)
Relative Layout where I align things and I use center in parent property to get it starting from half screen (too many IDs are defined in XML file even for lables that I won't use in the code)
Table layout
Which one you recommend? or maybe how?
For perfect alignment I think the TableLayout is the best option in your case. You can do this using other two options. But if the text length of the left side changes then you may need to change the xml layouts. But by using tableLayout that will be more easy to manage.
From the image you provided above, it seems you have TextDetails on left side and View on right such that right view must start from centerVertical. Is it right??
I suggest you use TableLayout... Add your views as you mentioned above..
You can set width hardcoded so that they remain intact always like this..
float screenWidth = ((Activity) context).getWindowManager()
.getDefaultDisplay().getWidth();
then your views both TextDetails and View's add setWidth(screenWidth / 2);
I think you need to go throw Android desing patters. There are some tips about how to do this better. On my opinion - just use LinearLayout and manipulate with their gravity/margin/padding. Or use RelativeLayout instead like google recommends.
Best wishes.

How to overlap views?

I am making a calendar. Each day is a textview with a number denoting the day of the month.
I'd like to overlay another view which signals that there is an event on that date. See below image or think about how the google calendar app looks. How do I do this?
One way is to make the two textview inside a Relative Layout or a Frame Layout. You can look at this for reference.
You could use a TableLayout to store the TextViews in rows and colums.
A possible way of marking a special day would be changing the background resource of the specific cell with one that has a marking on it, that does not overlap with the number.
If you want more fancy stuff, you could write your custom View subclassing TextView, which handles its onDraw calls and everything else.
As far as I know you can use a RelativeLayout to overlap views.
You can try setting left drawable (android:drawableLeft="") to the TextView. OR, you can use some transparent background images with indicators drawn in top-left.

Categories

Resources