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>

Position the ImageButton after its inflated in ConstraintLayout

I already have ConstraintLayout and I want to add few buttons for colour pick. But the button I add is always at the very top left and can't seem to find a solution.. hot to put them under everything else
That's the .xml i have:
<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:id="#+id/activity_editor_main"
android:layout_height="match_parent">
<!-- Overview category -->
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view">
<!-- Label -->
<TextView
style="#style/PlayerTextStyle"
android:padding="16dp"
android:text="#string/player_1" />
<EditText
style="#style/InputTextStyle"
android:hint="#string/player_name"
android:inputType="textCapWords"
android:textAppearance="?android:textAppearanceMedium" />
</LinearLayout>
<!-- Label -->
<TextView
android:id="#+id/player_colour"
style="#style/PlayerTextStyle"
android:padding="16dp"
android:text="#string/player_colour"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2" />
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/player_colour">
</LinearLayout>
</android.support.constraint.ConstraintLayout>
That's the button i want to add in the last LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/colour_button_editor"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/a"
android:gravity="center_vertical|center_horizontal" />
</FrameLayout>
I want to use LayoutInflater to inflate like 10-12 different colours to pick from and add them under few TextViews. I don't want a dialog! Any suggestions how to make it work??

When you add view dynamically to a layout whose parent is ConstarintLayout the default position is top-left corner.
You can use ConstraintLayout.LayoutParams to set constraints dynamically.

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.

Android scrollable layout - views not visible on orientation change

My XML scrollable layout (work in progress) looks like this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_height="wrap_content"
android:layout_width="match_parent"
>
</ListView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/tvStatus"
android:text="0 SMS found"
android:textSize="15sp"
android:layout_width="120dp"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btnExport"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:text="Export"
/>
</LinearLayout>
</LinearLayout>
</ScrollView>
When load app on testing device in portrait mode, all views are presented and visible:
portrait mode
When device orientation is changed to horizontal, only listview part of layout is visible (?!?):
landscape mode
Does anybody has clue on what possibly is going on here? Thanks.

This is the layout you need:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</ListView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tvStatus"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="0 SMS found"
android:textSize="15sp"/>
<Button
android:id="#+id/btnExport"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:text="Export"
/>
</LinearLayout>
</LinearLayout>
You can also view how will your layout be in landscape mode while constructing it:

it seems you are missing closing tag of scroll view.

LinearLayout Buttons not appearing when device orientation changed to Horizontal?

Here is the xml in which ScrollView layout size will vary means it will zoom image on button click but my top headers and footer will always be in same position irrespective of zoom values.......
XML
<?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">
<LinearLayout
android:id="#+id/layout_zoom_buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/btn_zoomIn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/zoomin1" />
<ImageView
android:id="#+id/btn_zoomout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/zoomin1" />
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<com.example.imagetouchview.TouchImageView
android:id="#+id/imagezoom"
android:layout_width="fill_parent"
android:layout_height="400dp"
android:layout_gravity="center">
</com.example.imagetouchview.TouchImageView>
</ScrollView>
<LinearLayout
android:id="#+id/layout_buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/btn_email_fatwa"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/zoomin1"
android:layout_weight="1"/>
<ImageView
android:id="#+id/btn_share_fatwa"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/zoomin1"
android:layout_weight="1"/>
<ImageView
android:id="#+id/btn_save_fatwa"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/zoomin1"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
this layout is fine in vertical orientation while when device orientatio changes to Horizontal the bottom buttons are invisible.I am following Salmans Ayub Answer For Image Zoomin and Out

I think You have design your layout in portrait mode(verticaly). Now either you have to bound it for
portrait mode by adding this line android:screenOrientation="portrait" in your activity manifest,
OR
You have to design it for landscape mode by following this link-
Android: alternate layout xml for landscape mode