Layout for chat app in Android - 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.

Related

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

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.

Layout Form with Long Labels

I am having some difficulty with an Android layout problem. I am trying to make a form for users to fill out. This form is defined programmatically (from a server-provided configuration over which I have no control) and thus I must implement it programmatically. The form has several different field types, but for simplicity we can assume they are all simple text fields (EditText).
I currently have the form implemented as a vertical LinearLayout. For each field I have a horizontal LinearLayout that contains a TextView for a field label and an EditText for the user to enter a value for the field. I have the EditText set to fill the width using LinearLayout.LayoutParams(FILL_PARENT, WRAP_CONTENT).
This works well when the TextView label is short, but when it is long it causes the EditText to be very small and makes it hard for the user to enter a value. Ideally I would like the EditText to be at least half the width of the screen with the TextView label wrapping if necessary. I've tried a TableLayout with TableRows but I still had difficulty. I would also rather not force a grid and thus waste the space on the lines with short labels (assuming the other requirements are met I'm flexible on this). I would have tried something like a FlowLayout to force the EditText to wrap onto the next line but it's not supported on Android.
Any suggestions for how I can make this work better? XML-based solutions will be accepted assuming I can port them to a programmatic approach. I would also like to make this as flexible with respect to screen size and orientation as possible, so this means avoiding hard-coding any widths.
Thanks in advance.
Try playing around with layout weights. You should be able to tell your two items to each take up half the screen, for example, by setting the width=0 and layout_weight=1 for both.

How to layout TextViews side-by-side with spacing in android?

I have a very simple layout with two side by side textviews. Both have the same parent layout that fills the screen horizontally.
I need them to have a visible space between them so that they are visually seperated when both have text. I also need the left textview to take up about 2/3 the screen width and let the other have the rest.
This is fairly easy to do with LinearLayout and a few margin settings, but if either one of the views has no text, I need the other one to fill the entire width.
I'm not quite sure how to have the layout do that without setting the empty view's visibility to GONE in code. Is there any good, efficient way to do all of these things at once? Feel free to use any layout you wish to make it work.
have you tried this using a relative layout? there is a property for layout_alignWithParentIfMissing that might give you what you need...

Linear Layout Issue at Runtime

I am trying to build a layout dynamically which display some text and image for the most part, but has a series of buttons placed next to each other in the bottom.
I have a linear layout that carries the text, another linear layout that carries the image. And yet another linear layout that carries the buttons that get created in a for loop. I have a main layout aligned vertical that adds the text, image and buttons layout, in that order. To finally generate something like this:
Text ....
Image ...
Button1 Button2 Button3....
The problem is the number of buttons get decided at runtime, so if there are more than 4 buttons, the 5th button gets displayed really tiny. Also, when I tilt the phone, I get only the text and image showing, but no buttons coz the image covers the entire screen.
Layoutting seems to be pretty complicated to me, any help is appreciated!
Thanks
George
You do not need to wrap single views in a linear layout, so add the text and image directly to the root linear layout. You might consider using a relative layout instead of linear for the root.
Using FILL_PARENT and WRAP_CONTENT for the LayoutParams width or height can give some useful results. For example, using FILL_PARENT for the image height might scale it down to leave room for the buttons.
Be careful with LayoutParams because there are lots of them and only the one that matches the ViewGroup class should be used.
One option would be to implement an onLayout method of your own in a custom ViewGroup. You will be passed the dimensions you have to work with and be able to position all the views as you see fit.

Categories

Resources