Develop Reference

Changing ImageView size dynamically?

I have an ImageView sandwhiched between two LinearLayout. The ImageView has zoom capability which allows me to zoom in and out of the image - this means the image can grow up to the entire size of the screen (match_parent).
If I load a very tall (height) image, the image overlaps the two LinearLayout which is NOT ok when arriving at the screen but is ok if user has decided to zoom in later. Is there a way to "limit" the height of the ImageView on initialization but also allow it to grow the entire screen size?
The following is an example of a "tall" image being loaded incorrectly as it covers the top LinearLayout text:
And this is how I would like the image to be loaded, with the ability to grow to the size of the previous image:
This is my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBgBlackTintDarker"
android:orientation="vertical"
android:paddingTop="20dp">
<!-- Title at the top -->
<LinearLayout
android:id="#+id/big_display_title_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical">
<!-- Title stuff here-->
</LinearLayout>
<!-- Middle custom ImageView with ability to zoom-->
<com.sometimestwo.moxie.ZoomieView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/full_displayer_image_zoomie_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"/>
<!-- Bottom toolbar-->
<LinearLayout
android:id="#+id/big_display_snack_bar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/transparent"
android:orientation="horizontal">
<!-- Bottom toolbar stuff-->
</LinearLayout>
</RelativeLayout>
EDIT: Here's a GIF to illustrate what I am experiencing:
https://imgur.com/2Uqy4ZG
The Image zooms in and out as desired but I need the image to fit in between the title and the bottom toolbar at initialization so it does not cover anything (until the user decides to zoom).

You should sandwich the ImageView between two LinearLayouts in parent RelativeLayout. Change your code as below:
<!-- Middle custom ImageView with ability to zoom-->
<com.sometimestwo.moxie.ZoomieView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/full_displayer_image_zoomie_view"
android:layout_below="#id/big_display_title_container"
android:layout_above="#id/big_display_snack_bar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"/>

You can try to use a ConstraintLayout.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="16dp">
<LinearLayout
android:id="#+id/big_display_title_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical">
<!-- Title stuff here-->
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/big_display_snack_bar_container"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/big_display_title_container"/>
<LinearLayout
android:id="#+id/big_display_snack_bar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/transparent"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
</LinearLayout>
</android.support.constraint.ConstraintLayout>

Android layout place a layout in the middle of another two layouts

Hello I have to create the UI like bellow,(picture attached) using regular Android layouts. I got header, footer and middle areas along with a image view.
According to the picture : Area A and Area C is similar height (20% of screen) and image view should be placed always in the middle of Area B and Area C.
My current xml code is like this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/show_contact_bottomArea"
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
</LinearLayout>
<LinearLayout
android:id="#+id/show_contact_middleArea"
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="vertical"
android:background="#color/grayContact"
android:layout_below="#+id/show_contact_headerArea"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_above="#+id/show_contact_bottomArea">
</LinearLayout>
<LinearLayout
android:id="#+id/show_contact_headerArea"
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"></LinearLayout>
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark_focused"
android:id="#+id/imageView2"
android:layout_marginBottom="40dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
I gave
marginBottom="40dp"
for image view to push it upwards, which is not a good practice. what is the best way to place the image view in the center of Area B's and Area C's border.
Also currently I gave
android:layout_height="120dp"
for Area A & Area B's height but ideally both should be 20%(each) of the screen, how to achieve that also?

You can give weights 20 % to each A and C. This way they will occupy 20% of top and bottom respectively. Assign rest 60% of height to B.
For imageView, you can place entire layout in Coordinate layout and assign anchor to footer.
Her is code snippet
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
<LinearLayout
android:id="#+id/show_contact_bottomArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_weight="2"
android:background="#color/primary_light"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/show_contact_middleArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="#+id/show_contact_bottomArea"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/show_contact_headerArea"
android:layout_weight="6"
android:background="#color/holo_blue_light"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/show_contact_headerArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_weight="2"
android:background="#color/primary"
android:orientation="vertical"></LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"
app:layout_anchor="#+id/show_contact_headerArea"
app:layout_anchorGravity="center_horizontal|top"
app:srcCompat="#drawable/header_record" />
</android.support.design.widget.CoordinatorLayout>
Result :- I have colored different section with different color code.

use weight for giving exact portion of Area and Frame Layout
for eg:
weight sum =4 have to give in parent Linear layout
Area A give 1
Area b give 2
Area c give 1
After Area B add image View with top -(height you want to appear in B's portion)

Eliminate space in Android Layout

I am trying to make a very simple Layout like this:
An image occupying the width of the screen, and a button occupying the width of the screen coming right next to it without any space.
Here is the code I have, it is next to trivial
<?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="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
</LinearLayout>
The problem is, the button does not show up, it shows the image with some space
The emulator is running with screen size 1080 x 1920, and the image has size 720 x 990, if we scale that up, it should be 1080 x 1485, leaving a lot of space for the button, but the image occupied in the middle of the screen somehow that I do not understand.
This is how a screen capture on the emulator look like:
Next, I tried to swap the order of the button and the image (just for the sake of experimenting), I see something like this:
I get this:
<?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="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
</LinearLayout>
Now I figured what happened, it appears that we have lot of spaces between the button and the image and therefore the button have no space. But where does those spaces come from? I wanted them to stick together.
The full source code of this experiment can be found in
https://github.com/cshung/MiscLab/tree/master/Question

The problem occurs here because the LinearLayout container has a height with wrap_content and the system extends the ImageView at its max and then display the TextView below it (thus below the screen height).
To get the right layout, you have to use layout_weight in the child views as follows:
<!-- fill the entire height -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
...>
<!-- take 90% of container -->
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
... />
<!-- take 10% of container -->
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
... />
</LinearLayout>
Then, in order to have "no space" for the image, you have to play with the attribute scaleType (see this example) as the following:
Either force the image to fit the widht/height:
<ImageView
...
android:scaleType="fitXY"/>
Or show the center and fill the w/h:
<ImageView
...
android:scaleType="centerCrop"/>

Your drawable/bg is being scaled to fit in id/imageView. The space you're getting is just the window's background not being covered by the image. Change ScaleType of your ImageView to FIT_XY, CENTER_CROP or other and watch a result. See: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html

Your easiest option will probably be to use a RelativeLayout instead of a LinearLayout. I think this is the direction Android has been going lately. Everything seems to be RelativeLayout based. For instance, when you make a new layout in Android Studio, I believe it defaults to RelativeLayout. It used to be LinearLayout in the eclipse extension a while back.
Relative Layout
Using a relative layout instead you should have the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_below="#id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
</RelativeLayout >
Note that I simply changed LinearLayout to RelativeLayout, removed the setOrientation and then added the following line to your button.
android:layout_below="#id/imageView"

First of all your image is too big so it basically takes up all of the screen space in the first place and pushes the button down the viewable region.There is no need to modify the padding or margin as it is in the LinearLayout and it places all child views one after the other.
Set a desired height to the image view and also a scale type to get what you are expecting.
<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"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:scaleType="centerCrop"
android:layout_height="300dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
Screen shot

Android XML Layout - ImageView taking all space

This is my first post on Stackoverflow.
My question is related to ImageViews : I have a simple XML layout file composed of two LinearLayouts included in a general LinearLayout.
The first LinearLayout contains a simple ImageView, and the second one contains three buttons.
My problem is that the ImageView takes all the space on the screen and therefore the three buttons aren't displayed.
I've done quite a lot of research, I've tried to change everything I could to make it work and the only thing that did the trick was to turn the ImageView layout_width attribute into a dp value.
Why do I have to do that? Is it somehow related to the dimension of the original picture (1280 x 800)?
The XML file is :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>

For anyone having this issue, there is a quick solution for that.
In your imageView XML add the following property:
android:adjustViewBounds="true"
for. eg
<ImageView
android:adjustViewBounds="true"
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"/>
If you are using a Constraint Layout, don't forget to add the constraints.

You could use android:layout_weight in order to define how much space should be taken by the layouts:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>
In the example above both inner layouts have the same weight, so they bot fill 50% of the height.
If all views reserve the entire available height (match_parent) then the first one wins. So in your case the top level layout (linearMainCreateTape) fills the whole height and the layout which contains the ImageView does the same. So there's nothing left for the three buttons below it.

ScrollView adds large space at the bottom

My main Activity has a number of buttons, that fit below each other on a large Tablet screen, but not on a smaller Phone screen. I added a ScrollView, so that the user can scroll down to the other buttons if the screen size requires it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/bg"
android:gravity="center_horizontal">
<TextView
android:id="#+id/trackSelectorText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="foo" />
<!-- More buttons -->
</LinearLayout>
</ScrollView>
</LinearLayout>
This kinda works, however I have a large blank space below the last button (i.e. the ScrollView can scroll down too far). Both on an actual Tablet and on the emulator with a Phone configuration. If I center the inner LinearLayout (instead of center_horizontal), the space is evenly spread between the top and the bottom, which I don't want neither. How do I fix this layout?
I hope this image makes it more clear, imagine that the ScrollView has been completely scrolled down and showing the last buttons. The blank space I mean is the one below Button 6 on the right image:

Try adding this attribute to your ScrollView element.
android:fillViewport="true"
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:fillViewport="true" > ... </ScrollVIew>
Ref: ScrollView Ref

Actually, it wasn't really related to the layout (unless I'm missing something). I tried commenting out the background attributed, and it suddenly worked. The background imaged (#drawable/bg) was simply too big and caused the scrolling. I converted the background into a 9-patch image, so it could be scaled automatically, and voilà, the additional space was gone.
Still, if this would've been achievable without 9-patch, I'd still be interested to hear if this can be done in the XML file.

you can use this attribute in scrollview to avoid extra padding at bottom of view
android:overScrollMode="never"

I have checked with my code..Work perfectly:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bg"
android:gravity="center_horizontal">
<TextView
android:id="#+id/trackSelectorText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="foo" />
<!-- More buttons -->
</LinearLayout>
</ScrollView>
</LinearLayout>
May be Help you.......!!