Android activity like whats app default activity - android

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

Related

How to listview"s under set button with edittext in LinearLayout

I want to design one layout in LinearLayout. My purpose is; Setting one ListView full layout_width. ListView goes to end of others height. After that; There are an EditText and a button. EditText is layout_width 4/3 button . 4/1. How can I do these?
Here is my layout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/colorAccent">
<ListView
android:layout_width="match_parent"
android:layout_height="500dp"
android:id="#+id/mesajlaşma_listview"
>
</ListView>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent"
android:background="#FFFFFF"
>
<EditText
android:id="#+id/EditText01"
android:hint="Mesaj Yaz."
android:layout_height="40dp"
android:layout_weight="1"
android:layout_gravity="bottom"
android:background="#FFFFFF"
android:layout_width="fill_parent">
</EditText>
<Button
android:text="Gönder."
android:layout_gravity="bottom"
android:background="#FFFFFF"
android:id="#+id/Button01"
android:layout_width="wrap_content"
android:layout_height="match_parent">
</Button>
/>
</LinearLayout>
</LinearLayout>
Create the Button and EditText in a LinearLayout first, then create a ListView and let it fill the remaining space of the screen.

Android listview overlaps edit text field when keyboard shows

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!!

Top view in RelativeLayout ignoring clicks

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>

Adapting component when virtual keyboard appears

I'm designing a simple login activity. I've used the following xml layout:
<?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="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_vertical|center_horizontal"
android:layout_margin="15dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My application title"
android:textSize="30sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_vertical"
android:layout_margin="15dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:layout_marginTop="15dp"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="Login"/>
</LinearLayout>
</LinearLayout>
And I've obtained this result:
But If the focus is on the first EditText I obtain this:
and If the focus is on the second EdiText the result is the follwoing:
Considering I've used the following line in the Manifest, for my activity:
android:windowSoftInputMode="adjustPan|adjustResize"
I want that when the virtual keyboard appears, the two edittext, the button and the textview are visible and correctly centered in the available screen.
What I have to change in my code?
NOTE: I've the same result If I remove the line in the manifest:
android:windowSoftInputMode="adjustPan|adjustResize"
You can replace the parent LinearLayout to a ScrollView :
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout ...>
....
....
</LinearLayout>
</ScrollView>
try this, it works for some of my apk !
Edit : sorry didn't see about center the text automaticaly, so with this you can adjust manually your editext to center with swipe your finger.. hope that will help

Scroll vertically through the whole view when the soft keyboard is shown

I'm working on a screen that has a LinearLayout with a TableLayout inside, in order to show texts, some EditTexts and some buttons.
The problem is that on the smartphone, when I click on a EditText that is on the top of the layout, a button that is on the bottom hides behind the soft keyboard. The only way to make the button appear again is to hide the soft keyboard.
Is it possible to make my layout on top of the soft keyboard to scroll to the button of my view, so the user can see the soft keyboard and the bottom on the button?
I tried to use a ScrollView around the TableLayout, but it does not scroll to the button of my layout, so the user can not see to bottom.
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/linearLayoutMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<include layout="#layout/login_container"/>
<LinearLayout
android:orientation="horizontal"
android:background="#drawable/_grey_rounded_bottom"
android:layout_width="match_parent"
android:layout_height="30dp"/>
</LinearLayout>
</ScrollView>
</LinearLayout>
Thanks in advance.
I have a similar view and it runs for me. See my code:
<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"
tools:context=".MainActivity"
android:orientation="vertical" >
<LinearLayout ... /> <!--Have an image that I want to stay on the top -->
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" ... >
<RelativeLayout ... >
<!-- EditText of username and EditText of password and a CheckBox -->
<LinearLayout
android:id="#+id/linearLayoutEntrar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/checkBoxRecordarDatos"
android:gravity="center"
android:layout_marginTop="7dp"
android:weightSum="1.0">
<Button
android:id="#+id/buttonEntrar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="#string/login_entrar"
android:textColor="#android:color/white"
android:textStyle="bold"
android:textSize="#dimen/textSize"
android:onClick="entrar" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutJugar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayoutEntrar"
android:layout_marginTop="7dp"
android:gravity="center"
android:weightSum="1.0" >
<Button
android:id="#+id/buttonJugar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:onClick="jugar"
android:text="#string/login_jugar"
android:textColor="#android:color/white"
android:textSize="#dimen/textSize"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
</LinearLayout>
Try changing height as I put on each layout. And if not success, I think the problem is TableLayout, try not using it as I do.
Adding android:windowSoftInputMode="stateVisible|adjustPan" to your activity tag in manifest should do the work.
try android:windowSoftInputMode="adjustResize"
if the scrollView has sibling view element, try this on ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"

Categories

Resources