Develop Reference

Scaling an ImageView when the soft keyboard opens

I'm creating a tabbed activity. As long as the first tab is selected, the soft keyboard should be visible. I achieved that by adding this line to my manifest file in the activity tag:
android:windowSoftInputMode="stateVisible|adjustResize"
As the keyboard opens, the space for the layout shrinks. The most space is occupated by an ImageView. I want it to shrink with the layout size to allow the other 2 views (which should remain the same size) to fit on the screen. However, although the soft input mode is set to adjustResize, the ImageView keeps its size after the keyboard opens. Here's a comparison of the current layout and the one I want to achieve (the ImageView is the red rectangle):
comparison
My fragment's layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".DataInputFragment"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/image"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"/>
<namespace.InputEditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<requestFocus/>
</namespace.InputEditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
</LinearLayout>
</RelativeLayout>
My activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/TabLayout">
<android.support.design.widget.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
How to force the ImageView to resize according to the screen size to make all of the views fit on the screen?
[EDIT]: My attempt to create a ConstraintLayout, which didn't solve the problem (the ImageView still keeps its original size):
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:orientation="vertical"
tools:context=".DataInputFragment">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitStart"
android:src="#drawable/image"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/input_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"
app:layout_constraintTop_toBottomOf="#id/img"/>
<namespace.InputEditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/input_label">
<requestFocus />
</namespace.InputEditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
app:layout_constraintTop_toBottomOf="#id/input_edit_text"/>
</android.support.constraint.ConstraintLayout>

I've created an Android Project from scratch on Android Studio 4.0, using the "Tabbed Activity" template and uploaded it to GitHub.
I've had no issues with the resize taking place when the activity is resized.
What Did I change?
In the manifest.xml I added android:windowSoftInputMode="adjustResize"
I modified the default layout for the fragment in the tab to include an ImageView (called imageToShrink) and an EditText (called editLayout).
I left the existing TextView untouched, except that since it's at the top, I made it the HEAD of the vertical Chain, and gave it a 0.0 BIAS to be aligned at the top, rather at the center.
When you tap on the cyan EditText at the bottom, the keyboard pops (I made it number only so it's even taller) and you can see how the image is re-drawn after its new size is recomputed.
This is how it looks when it opens: (beautiful color palette!)
And this is how it looks when I tap the "edit field" to pop the keyboard:

your ImageView should not have wrap_content attributes, because it will always have constant size and wont be able to resize automatically. I would suggest using ConstraintLayout and use app:layout_constraintDimensionRatio. Other option is use LinearLayout weight (not recommending).
Ant third option is to detect when keyboard is visible, when not with ViewTreeObserver.OnGlobalLayoutListener and do stuff programmaticaly.
Try this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".DataInputFragment">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="3:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/input_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"
app:layout_constraintTop_toBottomOf="#id/img" />
<EditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/input_label">
<requestFocus />
</EditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
app:layout_constraintTop_toBottomOf="#id/input_edit_text" />
</android.support.constraint.ConstraintLayout>

Make bottom layout stay on bottom when keyboard is displayed while other layouts move up

Under you will the screenshots illustrating the starting layout, my current result which I am NOT happy with, and the result I want to have:
This is the opening layout which is perfect:
Then comes the current layout I get when displaying the keyboard which I am NOT happy with:
Then the result that I WANT:
Is the a line of code that will make the bottom layout ignore the android:windowSoftInputMode="stateVisible|adjustResize"? Or how can I do this?
UPDATE:
This is what I get with adjustPan:

because you are using
adjustResize,
So the window is getting resize to make space for keyboard
you should use
android:windowSoftInputMode="adjustPan"
with this window will not resize and current focus will never obscured by the keyboard and users can always see what they are typing.

set android:layout_alignParentBottom="true"
in your Layout for example ScrollView in my layout
add in manifest
android:windowSoftInputMode="adjustResize"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:gravity="top"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="1">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/btn_search"
android:padding="10dp"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/btn_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:padding="15dp"
android:text="#string/test_search"
android:textAllCaps="false"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>

How to Control Visibility of items in a Linear Layout in my App?

I have a Vertical linear layout with 2 item. One is a is a customview which is extended from a framelayout and the 2nd one is a textview with a drawable as background. The visibility have to be controlled dynamically from gone to visible.
The issue is that when i change the visibility of the item from gone to visible the order is not coming as i intended. The the second item is below the customview. I want it to come as the 2nd item, below the customview
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:textureview="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:id="#+id/comment_holder"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.custom_views.CircularFrameLayout
android:id="#+id/comment_holder_circular_layout"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/user_avatar"
android:visibility="gone"
android:layout_gravity="center_horizontal"
android:layout_width="#dimen/comment_avatar_width"
android:layout_height="#dimen/comment_avatar_width" />
<com.custom_views.PlaybackTextureView
android:visibility="gone"
android:id="#+id/playback_texture_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
textureview:isAuthorMode="true"/>
</com.custom_views.CircularFrameLayout>
<LinearLayout
android:visibility="gone"
android:id="#+id/c_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="16dp"
android:paddingStart="4dp"
android:paddingEnd="4dp"
android:background="#drawable/chat_bubble_top_arrow_orange"
android:orientation="vertical">
<TextView
android:id="#+id/video_comment_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textColor="#color/black_50"
android:fontFamily="sans-serif" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
NOTE: I tried adding weight to the custom layout as 1. But it still didnt help.

Scroll up Relative Layout when scrolling up listview

I'm creating an application. and the user information is shown in a relative layout. Under the relative layout is a listview with items the user created. I want if you scroll down in the List View that the Relative Layout scroll up and eventually disappeared, and the list view is stretched over the whole screen.
Like you have in de facebook app.
Facebook Scrolling image
How do I do this, this is my layout file:
<?xml version="1.0" encoding="utf-8"?>
<merge 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="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="6">
<ImageView
android:id="#+id/BackgroundPictureOther"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#eeeeee" />
<ImageView
android:id="#+id/profileOther"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#444444"
android:scaleType="fitXY"
android:layout_gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"/>
<TextView
android:id="#+id/profileName"
android:layout_width="wrap_content"
android:minWidth="150dp"
android:layout_centerHorizontal="true"
android:textColor="#aaa"
android:textAlignment="center"
android:textSize="30sp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8"></ListView>
</LinearLayout>
</merge>
Thanks in advance!

You have 2 options here:
1) You should put your entire layout inside NestedScrollView and change ListView into RecyclerView.
2) Or you can set your layout with profile picture as header view for listview.
For this you need to put your layout with profile in other xml layout file, then inflate it in code and use listview.addHeaderView(view v)

Doesn't wrap_content adjust to the size of fonts?

My understanding was that the wrap_content take as much space as needed by its contents. But doesn’t this apply to TextViews as well?
In the following layout why when I change the font of TextView with id real_status to 24 the text is partially hidden? I was expecting that due to the wrap content the enclosing TextView it would wrap around the 24 sp and display the text fine. It is fine with 18sp.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<TextView
android:id="#+id/real_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/full_display_name"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/full_display_name"
android:gravity="center_vertical"
android:textSize="24sp"
android:textStyle="bold"
tools:text="Active"
/>
<TextView
android:id="#+id/full_display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/real_status"
android:gravity="center_vertical"
android:text="The real user status:"
android:textSize="16sp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/full_display_name"
android:gravity="right"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:visibility="gone"
tools:text="Just a text view"
tools:visibility="visible" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
With 18sp:
With 24sp:
UPDATE:
Following the answers I removed the layout top/bottom and the font adjusted but now I see that the TextView overlaps with the next widget. Adding red background is more visible.
I thought that by “growning” the TextView the rest would move down and not overlap

whenever You suffering from this type of problem You can LiniarLayout is best if You understand it very well. because of wrap_content and match_parent is simple to handle in LiniarLayout.
lets understand it.(For Your case)..
1.take two LiniarLayout(parent have verticle orientation..)
i give Id LL1(horizontal) and id LL2 for your case
2.in first layout two textview #+id/full_display_name and #+id/real_status
in real_status have match_parent in width so it easy to divide parent(fill_parent) and set its android:gravity="right"
3.LiniarLayout as it is without relate
See belove XML code...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LL1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/full_display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The real user status:"
android:textSize="16sp" />
<TextView
android:id="#+id/real_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Active"
android:textSize="26sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/LL2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/real_status"
android:gravity="right" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Just a text view" />
</LinearLayout>
</LinearLayout>
It will help you Your GUI give bestView in All devices with any size of text
Hope it help You

Remove these two line will fix your problem
android:layout_alignBottom="#+id/full_display_name"
android:layout_alignTop="#+id/full_display_name"

Yes the wrap_content will take as much space needed by the view. It will also applied to the TextView also. The problem here is you written android:layout_alignBottom="#+id/full_display_name" to real_status text view. This attribute is overriding the wrap_content So remove allignBottom attribute from the text view.
UPDATE
For your bottom linear layout update the line
android:layout_below="#+id/full_display_name"
with
android:layout_below="#+id/real_status"