I am trying to copy whatsapps UI for sending pictures, it opens a screen with a keyboard and a textfield at the bottom.
I have a relative layout with a textinputfield at the bottom. The relative layout has a background image. If the user clicks on the textinputfield the textinputfield must stay visible above the keyboard however the Relative layout background image needs to not resize.
Currently my layout looks like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/cover"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#drawable/newbg"
android:orientation="vertical"
>
<LinearLayout
android:layout_alignParentBottom="true"
android:id="#+id/chatFooter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ECEFF1"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/sendLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:weightSum="2"
android:paddingTop="#dimen/scale_5dp"
android:paddingBottom="#dimen/scale_5dp">
<LinearLayout
android:layout_width='0dp'
android:layout_height="wrap_content"
android:layout_weight="1.8">
<com.heyjude.heyjudeapp.customview.EditRobotoRegular
android:id="#+id/editChatMsg"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#drawable/linear_back"
android:hint="Add a message..."
android:padding="#dimen/scale_5dp"
android:inputType="textMultiLine|textCapSentences|text"
android:textColor="#5f6060"
android:textColorHint="#5f6060"
android:textSize="#dimen/text_14"
android:imeOptions="actionSend"
/>
</LinearLayout>
<ImageView
android:id="#+id/ivSend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_chat_icon"
android:layout_weight="0.3" />
</LinearLayout>
</LinearLayout>
And i have android:windowSoftInputMode="adjustResize|stateHidden"
Which is working great for the inputfield moving up above the keyboard, but the background image is distorting horribly.
Thanks for any help!
Here is how it looks on whatsapp which is what i want to recreate
Here is the keyboard down
and here is keyboard up
Related
I'm working on an activity that has ScrollView as it's main layout. Every time I make a change to something near the bottom, it will scroll back up to the top. Is there a way to disable this while I'm editing it?
Snapshot of activity
Here's a snapshot of the top of the activity. There are several more views below this. When I scroll down and make a change to any of the views below the ones shown in the picture, it will scroll back up to the top (to what's shown in the picture).
Here's a snippet of the XML. The rest of it is pretty much the exact same. Horizontal Linear layouts nested within a vertical linear layout, with TextViews and EditTexts in the Horizontal linear layouts.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:fillViewport="true"
android:focusedByDefault="false">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/dip_information_title"
android:layout_width="match_parent"
android:layout_height="150dp"
android:height="170dp"
android:gravity="center"
android:text="#string/dip_information_title"
android:textSize="35sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="10dp"
android:orientation="horizontal"
android:weightSum="100">
<TextView
android:id="#+id/topo_shot_number"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="35"
android:gravity="center"
android:text="#string/topo_shot_number"
android:textSize="18sp" />
<EditText
android:id="#+id/topo_shot_number_entry_form"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="65"
android:background="#drawable/edit_text_style"
android:ems="10"
android:gravity="center"
android:hint="#string/accessibility"
android:inputType="number"
android:digits="0123456789"
android:text="#string/form_entry"
android:maxLength="10"
android:singleLine="true"
android:nextFocusDown="#id/cover_type_drop_down"
android:nextFocusRight="#id/cover_type_drop_down"
android:nextFocusForward="#id/cover_type_drop_down"/>
</LinearLayout>
I am trying to create a screen where you have a ScrollView on top and under that you have a TextView and a Button.
The ScrollView contains a TableLayout which it self contains TextView's, Button's and EditText's.
What I would like to achieve is that when a EditText is focues and the input panel opens on the phone, the buttom footer would be moved on top of the panel and the scroll area resized smaller, so that you can click the calculate button at any moment.
Here is my current xml:
The activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/activity_germinative_scroll"/>
<TextView
android:id="#+id/textViewCalculationResult"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".70"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:gravity="center"
android:text="0.00 KG/HA"
android:textSize="35sp"/>
<Button
android:id="#+id/calculateGerminative"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".30"
android:text="#string/calculate_germinative"
android:textSize="25sp"
android:textAllCaps="true"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/menu_button_states"
android:nextFocusDown="#id/editSeedMass"/>
</LinearLayout>
Scroll activity:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:orientation="vertical"
android:showDividers="beginning|end"
>
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:padding="10dip"
>
<TableRow
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TextView
android:id="#+id/teraMass"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".40"
android:textSize="20sp"
android:editable="false"
android:text="#string/seed_mass_text"
android:textAllCaps="true"/>
<Space
android:layout_width="13dp"/>
<Button
android:id="#+id/seedMassInfo"
android:tag="seedMassInfo"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/info"/>
</TableRow>
<Space
android:layout_height="3dp"/>
... Many other TableRow's with the exact same layout...
</TableLayout>
</ScrollView>
So what happens right now is that when I focus on one of the input fields in my scroll area, the button at the bottom gets resized into a very thin little button and depending of the screen size, the text-field in the footer will get resized also.
I use this setting for the activity in the manifest:
android:windowSoftInputMode="stateHidden|adjustResize">
Is the problem because of the overall layout I use or what?
You should set fixed height for the Button calculateGerminative and TextView textViewCalculationResult, and set the scrollview height to dynamic, i.e.
android:layout_height="0dp"
android:layout_weight="1"
I have the following layout for an activity...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="vertical"
android:fillViewport="true"
android:background="#3ba4a4a4"
android:fadeScrollbars="true">
<TextView
android:id="#+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textIsSelectable="false"
android:text="#string/test_text"
android:textSize="40sp"/>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="2dp">
<EditText
android:id="#+id/edit_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/edit_text_hint"
android:layout_marginTop="8dp"
android:theme="#style/InputMethodTheme"/>
<ImageButton
android:id="#+id/button_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_send"/>
</LinearLayout>
When the soft keyboard is opening I want the end of the TextView to go up with the EditText...
Any Idea on How to do That?
The EditText is going up normally as it should but its blocking the text view
i have tried the following in the manifest file in my activity
android:windowSoftInputMode="adjustPan"
But the action bar disappears which i don't want...
UPDATE
I tried the following in the TextView
android:layout_gravity="bottom"
and it seems to react as i want it to but some of the
lines before it are getting removed and extra spaces are
being added after the last word...
Basically you need to listen to the keyboard opening event.
More How to capture the "virtual keyboard show/hide" event in Android?
Be careful when dealing with devices with soft navigation buttons e.g., Nexus 5, you may need to take the navigation bar height into consideration.
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"
In one Android-Activity, I have some Input-fields with some Buttons below that.
Because I don't the Softkeyboard to push everything up and want to give the user the ability to navigate to a different Input-field quite easy, i put the Input-fields and the buttons into a ScrollView.
Now I want the Buttons to be at the bottom of the screen, when the softkeyboard is closed
and just below the Input-fields in the ScrollView, when keyboard is opened.
If I add
android:layout_below="#id/input_fields"
the buttons are always below the input-fields, but not at the bottom of the screen.
android:layout_alignParentBottom="true"
aligns them to bottom, but when keyboard is open, they are in front of the last input-fields.
Does anybody know what to do?
A example of my layout-file:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/input_fields"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<!-- some input-fields -->
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_below="#id/input_fields"
android:padding="5dp">
<!-- 2 buttons -->
</LinearLayout>
</RelativeLayout>
If you need more information: just ask!
Thanks for any help in advance!
EDIT: some further information:
With "in front of" I mean, that the Buttons were "hiding" the input-fields, because they weren't aligned to the input-fields-layout, but to the end of the parent layout (which was a RelativeLayout inside a ScrollView). This is gone, when I use your suggestion, but then the buttons are always visible right above the keyboard (I did it that way before, but I would like to do it a little bit different, to save some space). I would like to have the buttons in that ScrollView right after the input-fields when the Keyboard is opened. So that you can just see the ScrollView and if you scroll to the end of it, at the bottom (after the input-fields) you should see the buttons. That wont be a problem, but I want the buttons to stay at the bottom of the screen when keyboard is closed regardless of whether the ScrollView fills all the space. Would be nice if you have some ideas!
Add your fields in ScrollView and place your buttons outside ScrollView like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/input_fields"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- some input-fields -->
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp" >
<!-- 2 buttons -->
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
Also use
<activity android:windowSoftInputMode="adjustResize" . . . >
in your activity tag. Please check this http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft