I am new to android programming so please bear with me...
I am trying to create a chat UI in android, for that I need to have an edittext field and send message button at bottom and listview (of message) at the rest of the screen (top to just above edittext and send message button). I am able to create the UI for that but when i show keyboard, the last message in listview overlaps the edittext field.
Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="codes.electrux.lets_start_android.PostAuthenticate">
<ListView
android:layout_width="wrap_content"
android:layout_height="410dp"
android:id="#+id/listView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">
<EditText
android:id="#+id/edit_msg"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/msg_to_send"
android:layout_gravity="bottom" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:layout_gravity="bottom"
android:onClick="sendMessage" />
</LinearLayout>
</RelativeLayout>
Here's what happens when keyboard shows up:
Here's what it looks like without keyboard:
I tried all solutions I could find on stackoverflow, but honestly, couldn't understand most of them.
Please help,
Thanks and Regards,
electrux.
Try like this.
Here your linear layout will be contains within the list view so it is overlaying last item of list. Just change as below and it will work.
Just replace this code with your xml.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="codes.electrux.lets_start_android.PostAuthenticate">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="410dp"
android:layout_above="#+id/linearLayout" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_alignParentBottom="true">
<EditText
android:id="#+id/edit_msg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:hint="Send Msg" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:onClick="sendMessage"
android:text="Send Data" />
</LinearLayout>
</RelativeLayout>
And it's Done.
Hope this will help you.
Try to do like the following,
Just change the list height from default to wrap_content,
And give a id to the linearLayout , make the listView to be placed above LinearLayout.
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_above="#+id/test"/>
<LinearLayout
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
The first thing you should do is set the ListView to match_parent widht and height.
The next, in your manifest you should declare your activity like this:
<activity android:name=".ConversationChatActivity"
android:windowSoftInputMode="adjustResize"
>
and in the activity the listView should apply this:
listview = (ListView) this.findViewById(R.id.listMessages);
listview.setTranscriptMode(ListView.TRANSCRIPT_MODE_NORMAL);
listview.setStackFromBottom(true);
Hope it helps you!!
Related
I am using a ScrollView and a RelativeLayout under it. I've a button at the bottom of the screen. I want the button to move with the screen while scrolling. Button should be present at the bottom right corner of the screen.
I've tried using FrameLayout as stated in one of the answers related to this issue but I want my button to be there at the bottom right corner of the screen.
As of now button is present at the bottom of the whole screen which means you will have to scroll down a bit to see it.
<ScrollView
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:fillViewport="true"
>
<RelativeLayout
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:layout_width="match_parent"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.example.android.app1.SecondScreen">
<TextView
android:text="Check all the Symptoms which apply - "
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:id="#+id/textView" />
<CheckBox1>
<CheckBox2>
<CheckBox3>
<CheckBox4>
<CheckBox5>
<CheckBox6>
<CheckBox7>
<CheckBox8>
<CheckBox9>
<CheckBox10>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:text="submit"
android:id="#+id/submitbutton"
android:layout_below="#id/Lastcheckbox"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</ScrollView>
How to achieve this ?
You will need a floating action button for that:
<RelativeLayout
...
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.FloatingActionButton
android:id="#+id/myFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_plus_sign"
app:elevation="4dp"
... />
...
In your app level gradle
compile 'com.android.support:design:23.1.1'
To get the whole working project
Update Android Studio to 1.5
Create a new project wit Blank Activity, it automatically generates for you!
Use FloatingActionBar instead of normal button it always at bottom right of the screen, Use Design Support library.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
You can separate your scrollview with button
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent">
<ScrollView
android:id="#+id/myScrollView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_above="#+id/submitbutton">
<RelativeLayout
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:layout_width="match_parent"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.example.android.app1.SecondScreen">
<TextView
android:text="Check all the Symptoms which apply - "
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:id="#+id/textView" />
<CheckBox1/>
<CheckBox2/>
<CheckBox3/>
<CheckBox4/>
<CheckBox5/>
<CheckBox6/>
<CheckBox7/>
<CheckBox8/>
<CheckBox9/>
<CheckBox10/>
</RelativeLayout>
</ScrollView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:text="submit"
android:id="#+id/submitbutton"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
You could use a FloatingActionButton like the others stated.
OR
you could place the ScrollView in a LinearLayout and place the button after the ScrollView, like so:
<LinearLayout ....>
<ScrollView
android:layout_width=".."
android:layout_height="0"
android:layout_weight="1">
<RelativeLayout>
.
.
.
</RelativeLayout>
</ScrollView>
<Button android:layout_gravity = "right" ..... />
</LinearLayout>
this is my XML code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/RelativeLayout01" android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/search_text"
android:layout_alignParentRight="true"
android:text="Download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText android:id="#+id/search_box"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/search_text"
android:layout_centerVertical="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Paste Link Here"
android:inputType="text"
android:maxLines="1" />
</RelativeLayout>
</RelativeLayout>
i need to clone the inner part of code, i mean i want to create 4 row like first row , and i need to show this link and download button of inner relative layout 4 time,under the first one, like a list
how can i clone and show 5 of this relative view in my main page?
i want to copy this relative view just under the first one,and third one just under the second one and ...
its better to add them dynamically from code. Tomorrow you might think to give 6 or 8 download links... :) Use addView() method.
See this http://developer.android.com/reference/android/view/ViewGroup.html#addView%28android.view.View%29
Create a new row.xml to represent each row
<RelativeLayout
android:id="#+id/RelativeLayout01" android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/search_text"
android:layout_alignParentRight="true"
android:text="Download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText android:id="#+id/search_box"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/search_text"
android:layout_centerVertical="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Paste Link Here"
android:inputType="text"
android:maxLines="1" />
</RelativeLayout>
And then use to replicate it in your main layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity"
android:orientation="vertical">
<include layout="#layout/row" id="#+id/row1" />
<include layout="#layout/row" id="#+id/row2" />
<include layout="#layout/row" id="#+id/row3" />
<include layout="#layout/row" id="#+id/row4" />
</LinearLayout>
For more information on reusing android layouts, have a look here Re-using layuts
As mentioned in a comment above, if you have no specific reason to do it this way, you should use a listview instead or a gridlayout or another UI element that fits your needs
I'm new to Android and having problems with ListView control. Whenever I add a ListView to the View, I face the following problems:
The ListView goes 100% width, 100% height, I want to add button on the top and can't do it because of this. I want to manually specify the width,height.
The ListView has some kind of padding enabled, I want it to be 100% width, but it looks like it's 90%
How can I solve these problems? I'm using Eclipse. Thanks!
ListView:
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp" >
</ListView>
Row:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rowTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp" android:textSize="12sp" >
</TextView>
Complete Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.kb.kl.MainActivity" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</RelativeLayout>
Use android:layout_weight to prevent listview from hogging all the available space. Example:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/someButton"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="0dp" />
</LinearLayout>
As for the padding problem, I'm not sure what you're describing.... is it the 10dp padding in your rowTextView that could be causing it?
If you want to put a button on the top of listview, you should use some layouts to help you, like linearLayout. Here is instruction. http://developer.android.com/guide/topics/ui/layout/linear.html
As for padding of ListView, I don't think there is such kind of setting. Usually, there is setting like divider/entries/dividerHeight in XML. But they all have nothing to do with padding.
I have a ListView inside a RelativeLayout and a small LinearLayouot with an EditText that should hover above the List. However when I click the EditText it registers a click on the ListView underneath. It seems it's a focus problem.
Here is code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/llSearchPlaces"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#dedede"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true" >
<EditText
android:id="#+id/etSearchPlaces"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:hint="Search for Places"
android:inputType="textCapWords" />
</LinearLayout>
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/nav_selector" >
</ListView>
</RelativeLayout>
It want focus to be on the id llSearchPlaces. But the two focus attributes I set do not work.
Try reordering the views in your XML layout. Ignoring the other views/viewgroups:
<RelativeLayout ...>
<ListView .../>
<EditText .../>
</RelativeLayout>
The reason is ViewGroups tend to draw their children in the order described and pass touch events down in the opposite order, so Views that are drawn on top have a chance to act on touches first. If you order them in the XML as I describe, EditText draws later (on top of) ListView and will receive touch events before ListView does.
Try this one:
First: Create layout xml for listview say listview.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/nav_selector"
android:paddingBottom="50dp" >
</ListView>
</LinearLayout>
Second: Create layout xml for edit text say edittext.xml
<?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="wrap_content"
android:orientation="vertical" >
<EditText
android:id="#+id/etSearchPlaces"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:hint="Search for Places"
android:inputType="textCapWords" />
<requestFocus />
</LinearLayout>
Third: Merge these two layouts in layout say mainlayout.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include
android:layout_alignParentTop="true"
android:id="#+id/lv"
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/listview"/>
<include
android:layout_alignTop="#+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/edittext"/>
</RelativeLayout>
Note: Replace ids and other attributes with your ones....
On second look, I don't see why you need a RelativeLayout at all. The effect you are achieving is a fixed EditText below your ListView. In actuality, the ListView and the EditText overlap, and you are working around this by giving the ListView padding on the bottom equal to the height of the EditText container.
A better choice would be to use a vertical LinearLayout to contain the ListView and the EditText container beneath it. Here the ListView will take up all the space available that is not used by the EditText container.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
... />
<LinearLayout
android:id="#+id/llSearchPlaces"
android:layout_width="match_parent"
android:layout_height="..."
android:orientation="horizontal"
... >
</LinearLayout>
</LinearLayout>
I have an activty that contains listview and on the bottom there is edittext andbottom aligned
similar to whatsapp default activty
when I click on the edittext on the bottom the soft keyboard pushes the bottom and the edit text up but it doest do the same for the list view so the bottom part of the list view disapear under the botton and the text view
here is my XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.test.testsms.app.SMSList">
<ListView
android:id="#+id/contactList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:dividerHeight="0px"
android:divider="#00000000"
>
</ListView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:text="#string/app_name"
android:id="#+id/Button"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<EditText
android:id="#+id/EditText"
android:layout_width="fill_parent"
android:layout_toLeftOf="#id/Button"
android:layout_height="wrap_content">
</EditText>
</LinearLayout>
</LinearLayout>
If you want to push edittext up with keyboard, you have to set RelativeLayout instead of main RinearLayout. so LinearLayout included with edittext and button will be located in bottom of activity. and when you click the edittext, the keyboard will be push up with it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
...<ListView>
<EditText
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:selectAllOnFocus="true"
android:textStyle="normal"
>
</EditText>
</RelativeLayout>
Edit your AndroidManifest.xml and add/modify your activity's android:windowSoftInputMode attribute. See http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft for a list of what each option can do. Sounds like you might want to try adjustPan