I am learning Android and right now I have an issue with the ScrollView.
I am using ScrollView as the main container of the layout with a LinearLayout as a child because I would like my screens support portrait and landscape orientation but this is not working as I want.
As you can see in the images below, space before the image doesn't appear, even the image is cut because the keyboard push up the layout and it doesn't fit to screen, as well in landscape orientation.
Could anyone help me about how to set up a Layout to support scrolling without losing the original design of the layout?
Code of the layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/gradient_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".LoginActivity"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="30dp">
<ImageView
android:id="#+id/sign_in_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/trivia_wars_logo"
android:layout_gravity="center"
android:rotation="-8"
android:scaleX="0.75"
android:scaleY="0.75"
android:padding="5dp"/>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/sign_in_input_layout_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/TextInputLayoutStyle"
android:layout_marginTop="15dp">
<EditText
android:id="#+id/sign_in_input_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_email_username"
style="#style/EditTextStyle"
android:inputType="textPersonName"/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/sign_in_input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/PasswordInputLayoutStyle"
android:layout_marginTop="15dp"
app:passwordToggleEnabled="true">
<EditText
android:id="#+id/sign_in_input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_password"
style="#style/EditTextStyle"
android:inputType="textPassword"/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/sign_in_action_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:paddingTop="12dp"
android:paddingBottom="12dp"
style="#style/RoundedButtonStyle"
android:text="#string/sign_in"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/sign_in_sign_up_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="12dp"
android:paddingBottom="12dp"
style="#style/OutlineRoundedButtonStyle"
android:text="#string/sign_up"/>
</LinearLayout>
</ScrollView>
Preview of the layout:
Layout tested in my device:
Thanks.
Try adding
android:windowSoftInputMode="adjustPan"
in manifest file inside your activity.
<activity android:name=".YourActivity"
android:windowSoftInputMode="adjustPan">
</activity>
You will find the information about windowSoftInputMode
Change your LinearLayout Property
android:gravity="center"
instead of
android:layout_gravity="center"
It will work..
Related
I am trying to create a chat application. The chat layout currently looks like this
The corresponding layout file is
<?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:fillViewport="true"
android:layout_height="match_parent">
<RelativeLayout
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="match_parent"
tools:context="com.example.nirmal.chatadapter.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:src="#drawable/iconuser"
app:civ_border_width="2dp"
app:civ_border_color="#color/White"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="#dimen/marginLeftForToolbar"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/White"
android:text="UserName Here"
android:layout_marginTop="#dimen/marginTopBottomForBubble"
android:id="#+id/user_name"
android:textSize="#dimen/textMedium"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/White"
android:text="User details Here"
android:layout_marginTop="#dimen/marginTopBottomForBubble"
android:id="#+id/user_details"
android:textSize="#dimen/textSmall"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:layout_marginTop="#dimen/recyclerViewMargin"
android:isScrollContainer="true"
android:id="#+id/chatRecycler"
android:layout_above="#+id/chatBoxAndSend">
</android.support.v7.widget.RecyclerView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:layout_marginBottom="5dp"
android:id="#+id/chatBoxAndSend">
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:minWidth="50dp"
android:maxWidth="50dp"
android:id="#+id/chatBox"
android:paddingStart="#dimen/cardViewPadding"
android:background="#drawable/rounded_chat_box"
android:layout_margin="#dimen/marginForChatBox"
/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:background="#drawable/oval_button"
android:minWidth="50dp"
android:maxWidth="50dp"
android:text="Send"
android:imeOptions="flagNoExtractUi"
android:id="#+id/chatSendButton"
android:layout_margin="#dimen/marginForChatBox"
android:textColor="#color/Black"
/>
<!--<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:id="#+id/send_button"
android:src="#drawable/send"
android:background="#drawable/oval_button"
android:layout_marginBottom="#dimen/marginForChatBox"
android:layout_marginTop="#dimen/marginForChatBox"
android:layout_marginEnd="#dimen/marginForChatBox"
/>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:id="#+id/send_button"
android:src="#drawable/send"
app:civ_border_width="2dip"
android:layout_marginEnd="#dimen/marginForChatBox"
app:civ_border_color="#color/greenChatColor"/>-->
</LinearLayout>
</RelativeLayout>
</ScrollView>
When I open my soft keyboard the layout looks likes this
I have added this in my manifest file
android:windowSoftInputMode="adjustPan|stateHidden"
The output is not what I expected it to be. I want the recyclerview to dynamically resize in the center of the screen and the Toolbar and the edittext to stay fully visible.
As you can see the toolbar has been pushed up and is not visible even when scrolled. The edittext is hidden partially by the suggestions given by the keyboard. Some of the posts I saw asked me to add a scrollview which I did and still the same result. How can I solve this problem?
If you want to resize RecyclerView on SoftInput open or close then you can use below single line code
((LinearLayoutManager)myRecyclerView.getLayoutManager()).setStackFromEnd(true);
For more read this post: https://trinitytuts.com/tips/resize-recyclerview-on-android-softinput-keyboard-appear/
Hope this code helps you
The flag adjustPan is wrong. Use the adjustResize instead:
android:windowSoftInputMode="adjustResize|stateHidden"
What adjustPan does is equivalent to enlarging a picture more than the screen and then panning - i.e. moving the picture so you see different parts of it. (like a map in google map for instance).
I'm creating an app that gets some values, you click in a button and it returns some other values and this views are distributed in 2 subLayouts of a bigger vertical LinearLayout like this:
<?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"
android:padding="10dp">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="0.4">
<EditText
android:layout_width="70dp"
android:layout_height="wrap_content"
android:inputType="number"
android:id="#+id/number1" />
<EditText
android:layout_width="70dp"
android:layout_height="wrap_content"
android:inputType="number"
android:id="#+id/number2"
android:layout_below="#+id/number1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calc!"
android:id="#+id/calcButton"
android:layout_below="#+id/number2"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="0.6"
android:layout_alignParentBottom="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Answer"
android:id="#+id/Answer" />
</RelativeLayout>
</LinearLayout>
My problem is that when I click on my EditText and the keyboard appears the answer's TextView goes up with the keyboard and "overrides" my button (the entire RelativeLayout follows the keyboard), there's a way of setting the RelativeLayout fixed so that it stays where it is mean to be?
Here what is happening:
There's a way of fixing that RelativeLayout?
Try setting android:windowSoftInputMode="adjustPan" for the activity in Android Manifest file.
I've got a problem in my application.
My layout contains:
ImageView
Button
Four EditText
When I change the emulator in landscape mode the ScrollView goes to the third EditText. The last EditText is not displayed in landscape mode.
My layout.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="60dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="235dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/formulario_foto"
android:background="#00A8EC"
android:src="#drawable/person"/>
<Button
android:layout_width="56dp"
android:layout_height="56dp"
android:id="#+id/formulario_foto_button"
android:layout_alignParentBottom='true'
android:layout_alignParentRight="true"
android:layout_marginBottom="5dp"
android:layout_marginRight="20dp"
android:background="#drawable/formulario_foto_button"
android:elevation="5dp"
android:gravity="center"
android:textColor="#FFFFFF"
android:textSize="20sp"/>
</RelativeLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:hint="Nome"
android:id="#+id/editTextNome" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:ems="10"
android:hint="E-mail"
android:id="#+id/editTextEmail" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:hint="Endereço"
android:id="#+id/editTextEndereco" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:inputType="phone"
android:ems="10"
android:hint="Telefone"
android:id="#+id/editTextTelefone" />
</LinearLayout>
</ScrollView>
It looks like ScrollView does not respect the margin of its child. This behavior has been noted in
Android ScrollView not respecting child's bottom margin
Scrollview doesn't scroll to the margin at the bottom
Scrollview extends beyond screen bottom
The workaround is to wrap your LinearLayout in a FrameLayout, ie.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="60dp"
android:orientation="vertical">
...
</LinearLayout>
</FrameLayout>
This is slightly inefficient, since it uses an extra ViewGroup. If you are able to do so, the more efficient solution would be to use paddingTop on your LinearLayout instead of the layout_marginTop, ie.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="60dp"
android:orientation="vertical">
...
</LinearLayout>
Change linear layout height to wrap_content
I want to replicate this effect in my layout. But in my layout when the keyboard show up, my pop-up is not adjusted.
The device adjust me the main activity below and not the popup.
this is my popup layout.xml :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/sfondo_semi_trasparente_scuro">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#color/white"
android:orientation="vertical">
<EditText
android:id="#+id/textNomeGiocatoreNewTeam"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Nome giocatore"/>
<EditText
android:id="#+id/textNumeroMagliaGiocatoreNewTeam"
android:inputType="number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Numero Maglia"/>
<Button
android:id="#+id/buttonConfirmAddNewPlayer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Aggiungi giocatore"
android:layout_gravity="center"/>
</LinearLayout>
Can someone help me?
Try instead this:popupWindow.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
You can also add this to your AndroidManifest.xml
<activity
...
android:windowSoftInputMode="adjustResize"
</activity>
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