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>
Related
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>
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.
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>
I have a list, but it will occupy all the screen of the tablet. Is there a way to make it only occupy half , or 1/4 of the tablet screen?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_gravity="center_vertical"
android:layout_weight="1" />
</LinearLayout>
Add another blank view or the view that you want to place in another half. Set its layout weight to 0.5: android:layout_weight=".5".
Set android:layout_weight=".5" for ListView.
Note that setting layout_weight to .5, if there is a single view in a container would have no effect.
Good Luck!
You can use the following in your XML for vertical split of screen:
Here we are using weightsum and weight attributes.
You can adjust the weight property to get the desired results in terms of half or quarter etc.
<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"
android:weightSum="100" >
<RelativeLayout
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:background="#android:color/black" >
<!-- Your RelativeLayout Items -->
</RelativeLayout>
</LinearLayout>
In order to get the same in horizontal manner, the below would be useful:
<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:background="#android:color/darker_gray"
android:orientation="horizontal"
android:weightSum="100" >
<RelativeLayout
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"
android:background="#android:color/black" >
<!-- Your RelativeLayout Items -->
</RelativeLayout>
</LinearLayout>
EDIT:
To display as widgets, You can refer tutorials here http://www.vogella.com/tutorials/AndroidWidgets/article.html and here http://www.tutorialspoint.com/android/android_widgets.htm
I'm getting crazy with the android views. I want a layout with a bar on top (A) and one bar one the bottom (C) of my app with height="wrap_content". The full remaining space in the middle (B) should be the content area with another Layout or TextView or whatever. But i can't get this to work. I tried a lot with the layouts, but when i do android:layout_height="match_parent" to B, C disappears. Any ideas? Thanks in advance
You can use android:layout_weight property to achieve that, but your parent container has to be a LinearLayout, in my example I'm using just LinearLayout as children of the parent view but you can use another type of View:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:id="#+id/layout_a"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
<LinearLayout
android:id="#+id/layout_b"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:id="#+id/layout_c"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
</LinearLayout>
If you're curious and wanna know how it works... here is the explanation, good luck :)
Put the contents into a RelativeLayout with alignParentTop and alignParentBottom attributes for content A and C and also below and above related attribute to content B, as follows:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- create content A and C before -->
<LinearLayout
android:id="#+id/A"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical" > </LinearLayout>
<LinearLayout
android:id="#+id/C"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" > </LinearLayout>
<!-- create content B regarding the previous ids -->
<LinearLayout
android:id="#+id/B"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/A"
android:layout_above="#id/C"
android:orientation="vertical" > </LinearLayout>
</RelativeLayout>
You can try to change the content B's height with wrap_content instead of match_parent if this doesn't work. Let me know if this helps.
Use weight:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/A"
android:layout_width="match_parent"
android:layout_height="50dp">
<!-- Your view here or replace FrameLayout -->
</FrameLayout>
<FrameLayout
android:id="#+id/B"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">
<!-- Your view here or replace FrameLayout -->
</FrameLayout>
<FrameLayout
android:id="#+id/C"
android:layout_width="match_parent"
android:layout_height="50dp">
<!-- Your view here or replace FrameLayout -->
</FrameLayout>
</LinearLayout>
Setting height to 0 is good for performance reasons, since weight will change it anyway.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/top_bar"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"/>
<TextView
android:id="#+id/middle_area"
android:layout_weight="14"
android:layout_width="match_parent"
android:layout_height="0dp"/>
<TextView
android:id="#+id/bottom_bar"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"/>
android_layout_weight in combination with LinearLayout can do the trick for you. Try the above code and adjust the android_layout_weight according to your need.
In my example the top bar will take 1/16 th of the screen the bottom bar would take 1/16th of the screen and the middle_area would take 14/16 th of the screen. You can change the numbers to your custom needs.