Map view not loading fully - android

I have a scroll view inside which there is a relative layout containing a flexible sized content on top and a map view below it. If the entire content's height is smaller than the screen view port (Scroll View), I wanted the map view to fill the remaining space below. If the entire content is larger than screen view port then I wanted the map view to have at least a certain height. This is a stripped version of what I have done.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/flexContent"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentTop="true"
android:background="#086dd9"
android:gravity="center"
android:text="Flexible content here"
android:textColor="#android:color/white"
android:textSize="22sp" />
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_below="#id/flexContent"
android:background="#f73f3f"
android:minHeight="120dp"
map:mapType="normal"
tools:ignore="MissingPrefix" />
</RelativeLayout>
</ScrollView>
It works as expected when the entire content's height is smaller than the screen view port's height (Scroll view's height). However, when it is not, everything works good except the map is not loading to the mapview's full height. Please take a look at the images below
Content smaller than scroll view
Content larger than scrollview
As you can see in the second picture, the map view itself is respecting the minHeight 120dp constraint set in the layout (I have made the background of the map view red) but the actual map is not loading to its full height.
How can this be fixed?

I fixed the above problem by wrapping the MapView inside a LinearLayout. My final layout looks something similar to this now. Hope it helps anyone in the future :)
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/flexContent"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentTop="true"
android:background="#086dd9"
android:gravity="center"
android:text="Flexible content here"
android:textColor="#android:color/white"
android:textSize="22sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_below="#id/flexContent"
android:orientation="vertical"
android:minHeight="120dp">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#f73f3f"
map:mapType="normal"
tools:ignore="MissingPrefix" />
</LinearLayout>
</RelativeLayout>
</ScrollView>

Related

Initializing ImageView position within layout

I have a RelativeLayout with a custom ImageView named ZoomieView that allows me to pinch-to-zoom on an image. I want to allow the image to grow the entire size of my screen so I set the width and height of ZoomieView to match_parent. Now I want to also add a header and footer to the RelativeLayout such that the ZoomieView sits in between the header and footer like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBgBlackTintDarkest"
android:id="#+id/full_displayer_master_container"
android:orientation="vertical">
<!-- Submission header -->
<LinearLayout
android:id="#+id/big_display_title_container"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:orientation="vertical">
</LinearLayout>
<!-- Image zoom view-->
<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"/>
<!-- footer -->
<LinearLayout
android:id="#+id/full_display_snack_bar_container"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#drawable/snack_bar_selector"
android:clickable="true"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
If I have a small image, this works fine as the image is small enough that it does not cover up the header/footer but when I try loading a large image, the header and footer are covered up since my height/width are match_parent.
I need the height/width to remain match_parent but I also do not want the header/footer to be covered when the view is loaded (it's fine if the header/footer is covered later when the user zooms in on the picture, though).
Is there a way I can resize my image such that ZoomieView is centered between my header and footer when the view loads but allows the ZoomieView to cover up the header/footer when I zoom in to the image?
Adding android:layout_below="header" android:layout_above="footer" to my ZoomieView would not work because it would not allow the ZoomieView to grow the entire screen size when zooming in.
This is what I have now (bad):
This is how I want the views to be loaded(better):
Change the Layout and use android:layout_weight="0" property
Try This hope it will work...!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBgBlackTintDarkest"
android:id="#+id/full_displayer_master_container"
android:orientation="vertical">
<!-- Submission header -->
<LinearLayout
android:id="#+id/big_display_title_container"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:layout_weight="0"
android:orientation="vertical">
</LinearLayout>
<!-- Image zoom view-->
<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_weight="1"
android:layout_gravity="center"/>
<!-- footer -->
<LinearLayout
android:id="#+id/full_display_snack_bar_container"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#drawable/snack_bar_selector"
android:clickable="true"
android:layout_weight="2"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
Try this...it might help you.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBgBlackTintDarkest"
android:id="#+id/full_displayer_master_container"
android:orientation="vertical">
<!-- Submission header -->
<LinearLayout
android:id="#+id/big_display_title_container"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:orientation="vertical">
</LinearLayout>
<!-- Image zoom view-->
<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_above="#+id/full_display_snack_bar_container" //add this line
android:layout_below="#+id/big_display_title_container" //add this line
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"/>
<!-- footer -->
<LinearLayout
android:id="#+id/full_display_snack_bar_container"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#drawable/snack_bar_selector"
android:clickable="true"
android:orientation="horizontal">
</LinearLayout>

Right way to have a scrollable bottom view

What is the right way to have a scrollable bottom view?
<ScrollView 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:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/wrnTextP1"
android:text="Ok , batatas "/>
<android.support.v4.widget.Space
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1" />
<Button
style="#style/FullWidthButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Chega por hoje!" />
</LinearLayout>
at the preview its looke fine, but when I run it on the emulator the view(in this case: the button) its not at bottom at all.
I think you are misunderstanding how ScrollView is meant to be used. The LinearLayout child of your ScrollView has a match_parent height... if your ScrollView is the same height as the screen, and the LinearLayout is the same height as the ScrollView, then there's nothing to scroll (all the content is the size of the screen).
The direct child of a ScrollView should either have a fixed height (like 2000dp) or use wrap_content.
If you use a fixed height, then the rest of your code "works"; you can have a Space element that uses layout_weight to push the last view down to the bottom of your LinearLayout. However, if you're using wrap_content, this is impossible (since there's no "extra" space for the layout_weight to consume).
Instead, you could consider putting the "bottom" view outside of the ScrollView. Something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
...
</ScrollView>
<Button
style="#style/FullWidthButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Chega por hoje!" />
</LinearLayout>

Place imageview with fixed footer android

I want to place image approx full height and a fixed footer.
I tried this code.
Image is dynamically update using from gallery
<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.aaaa.com.EditView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp"
android:layout_alignParentBottom="true"
android:id="#+id/footerEdit"
android:weightSum="2">
<Button
android:id="#+id/addBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/takePhoto"
android:background="#drawable/icon_camera"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imgview"/>
</RelativeLayout>
I want to scale image entire screen but leave footer area
Please guide
When you are working with relative layouts, you still can manage Header and Footer (this last for you) indicating and order between the layouts.
For your main content area add:
android:layout_above="#id/lytFooter"
to be set stacked over your footer
and
android:layout_below="#id/lytHeader"
to be set stacked below your header.
For your main content area set height to match_parent.
Hope it helps.

Android VideoView not expanding when populating inside a ScrollView

This video view doesn't expand and put my video in the view. If I set static height and width (e.g 640dp 400dp) the video successfully populates the view and works as expected.
This problem arose after I moved into the ScrollView setup - it used to work fine when it was in its own parent LinearLayout.
XML of VideoView:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/gray">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/top_video"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:visibility="gone">
<VideoView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_centerInParent="true"
android:id="#+id/video_view" />
</RelativeLayout>
<!---- many more layouts and views that all get hidden when setting above to visible -->
<!---- many more layouts and views that all get hidden when setting above to visible -->
</LinearLayout>
</ScrollView>
add android:fillViewPort=true to your scroll view and match parent height
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fillViewPort=true
android:layout_height="match_parent"
android:background="#color/gray">

How to make View fill remaining space

So I have a two "sections" to my screen. I have the top section which is a ScrollView and a bottom section which is random text. The random text at the bottom will always be changing sizes, so sometimes it can take 40dp, sometimes 20dp, etc.
My question is, is there a way to make the bottom part dynamic (without loss of text) and make the top scrollview adapt to the new size and restricts its own size to "fill the remaining space" based on what portion the bottom part is using?
Like this:
As you can see, the scroll view just fills the remaining space available.
I'm searching for a solution using XML only
Need HELP!
You can try this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomTextView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#android:color/holo_red_dark"
android:text="Test" />
</LinearLayout>
</ScrollView>
<TextView
android:id="#+id/bottomTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/darker_gray"/>
Or
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#android:color/holo_red_dark"
android:text="Test" />
</LinearLayout>
</ScrollView>
<TextView
android:id="#+id/bottomTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"/>
Wrap both Views in a vertical LinearLayout;
The view which is at the top: height = "0dp", weight = 1
And the view which is in the bottom: height = "wrap_content"

Categories

Resources