Develop Reference

How to setup a layout with ScrollView?

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

Android Soft keyboard float only specific layout

I have a layout, code below
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--some stuff here-->
<LinearLayout
android:id="#+id/layout1"
android:layout_alignParentBottom="true"
android:layout_above="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
/>
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:scaleType="fitStart"
android:layout_marginLeft="5dp"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:src="#drawable/ic_menu_send"/>
</LinearLayout>
<LinearLayout
android:id="#+id/layout2"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--some stuff here-->
</LinearLayout>
</RelativeLayout>
In the above code when keyboard is show i want layout2 to stay in the bottom and layout1 to go up with keyboard. if i add android:windowSoftInputMode="adjustPan|adjustResize" both layout stay in bottom. please help

as you can say this is not work
android:windowSoftInputMode="adjustPan|adjustResize"
just change it this
android:windowSoftInputMode="stateHidden"
and one more thing in your below layout
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--some stuff here-->
<LinearLayout
android:id="#+id/layout1"
android:layout_alignParentBottom="true"
android:layout_above="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
/>
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:scaleType="fitStart"
android:layout_marginLeft="5dp"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:src="#drawable/ic_menu_send"/>
</LinearLayout>
<LinearLayout
android:id="#+id/layout2"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/colorPrimary">
<!--some stuff here-->
</LinearLayout>
</RelativeLayout>
Keep in Mind :
When you have applied this property android:layout_above="#+id/layout2" to layout1 of your LinearLayout then remove this property android:layout_alignParentBottom="true" you don't require it.
So Now that look like this
<LinearLayout
android:id="#+id/layout1"
android:layout_above="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
Note : I am giving background color and specific height to
LinearLayout 2 for your Understandment.
Output :
Normal Screen
KeyBoard Open Screen.
ImProve :
see the upper Image I make Red Mark that property create the problem otherwise every thing is work fine.

Please use this, and tell me if you find any difficulties
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--some stuff here-->
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/layout2"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5" />
<ImageButton
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:scaleType="fitStart"
android:src="#drawable/ic_menu_send" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<!--some stuff here-->
</LinearLayout>
</RelativeLayout>

Use different themes for both the layouts.
such as:
One theme refers to adjustPan for windowSoftInputMode attribute.
and another theme refers to adjustResize for windowSoftInputMode attribute.

The fastest way is hide the layouts when soft keyboard is enable and show them again when the soft keyboard is disabled (layout2 on the xml)
Remove this Line as well
android:windowSoftInputMode="adjustPan|adjustResize"
it will work , this is just a simple way , I'm still searching for you

put this line in your manifest file.
android:windowSoftInputMode="stateHidden"

Remove the android:windowSoftInputMode="adjustPan|adjustResize"
And then Hide the layout2 programmatically when soft keyboard open. When soft keyboard close, again make the layout2 visible.
This will give user an experience exactly you want.I'm not shure there is any other way. But Keep searching. good Luck

How to make a "subLayout" fixed in Android

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.

Black line above keyboard

Somebody know how can avoid this black line above keyboard? It become after my keyboard shows prediction words line.
Line with help words
Line after help words
In my layer I use fragment and I need show line with EditText below. But when user ends typing, he sees black line above keyboard that is not need
Here is 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="match_parent"
android:orientation="vertical"
>
<!-- TODO: Update blank fragment layout -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/word_set_fragment_container"
>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Experimental layer"
/>
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/border"
android:paddingTop="5dp"
android:paddingBottom="3dp"
android:clickable="true"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="⇣"
android:layout_gravity="bottom"/>
<EditText
android:inputType="text|textCapSentences"
android:imeOptions="actionDone"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:hint="#string/hint_new_word"
android:text=""
/>
</LinearLayout>
</LinearLayout>
Sorry for my english.

In order to avoid black line in your keyboard, you should add layout_margin="0px" and android:padding="0px" to you keyboard layout xml file
<android.inputmethodservice.KeyboardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0px"
android:padding="0px"
android:layout_alignParentBottom="true"
android:keyPreviewLayout ="#layout/preview"/>

This looks like its the actual android keyboard.. Which isn't something to change.

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