I have a HorizontalScrollView with an ImageView and a RelativeLayout on top of the ImageView. The RelativeLayout gets multiple ImageButtons created and assigned on runtime dynamically.
<HorizontalScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:fillViewport="true"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
>
<ImageView
android:id="#+id/scene"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:contentDescription="#string/indoor_tour_scene_view"
android:adjustViewBounds="true"
>
</ImageView>
<RelativeLayout
android:id="#+id/coordinate_container"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_alignTop="#id/scene"
>
<!-- Mapstops will be added programmatically -->
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
</HorizontalScrollView>
In portrait mode, the ImageView fills the view port and HorizontalScrollView in height, and overlaps in width so you have to scroll left right to see everything.
In landscape mode, the height is still 100% but the width will be less than the viewport due to image scale. So I want to center the views within the HorizontalScrollView.
I experienced some problems with offsets when I used layout_gravity="center" on the RelativeLayout. I found this blog entry https://content.pivotal.io/blog/centering-a-view-within-a-scrollview that says its an android bug, and I added the workaround as described there. It works in terms of the offset, but now my RelativeLayout #+id/coordinate_container fills the entire frame. That is too large and should actually match the size of the ImageView, because the dynamically created ImageButton positions are relative to the ImageView.
How can I have the child of the HorizontalScrollView centered without the offset bug, but also have the coordinate_container relative to the content of the ImageView, so it does not fill the entire frame?
Related
I have a LinearLayout inside a ScrollView. At some point I collapse and expand the LinearLayout. After that the scrollview does scroll. Any ideas?
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="false">
<LinearLayout
android:id="#+id/detailsView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="visible"
>
........
</LinearLayout>
</ScrollView>
Expand and collapse is done using ValueAnimator over LayoutParams (height) of the LinearLayout.
Update: I think important is that it breaks down after animated expansion/collapse. Until that it works fine.
Update 2: For expanding again, I measured the expected height as follows:
int expectedHeight = detailsView.measure(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
and animate expansion to that height. This measured the height to 2000+ instead of expected 800 something. Thus the sizes were equal and scrollview didn't scroll, although it didn't show the full hierarchy.
As a quick-fix I save the current height before collapsing and use it as the target height on expanding. The question is, can this be done automatically without dirty-height saving?
your scrollview is android:layout_height="wrap_content" just make it match_parent. I'm not sure but you can remove android:fillViewport too
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/detailsView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="visible"
>
........
</LinearLayout>
</ScrollView>
I am attempting to make a card view with some text and an image inside it.
I want the card view to be just big enough for the textviews which each can wrap to multiple lines so I want the card to scale based on the text, I also want the image to fill the height of the card whatever it may be.
So I set the card view and the linear layout containing the textviews height to wrap_content, and the image views height to match_parent.
However setting the images to match_parent makes the whole card bigger meaning its much bigger than needed for the text?
Is there any way around this or some alternative method to achieve the same effect?
EXTRA INFORMATION:
I think I know why this is happening, Its because the image views desired size based on the size of the image is bigger than the card so if the cards height is match_parent it will get as big as its parent allows until it reaches the size of the original image. Because the height of its parent is wrap_content it lets the image view get that big. I'm still no wiser on how to stop this happening though other than scaling down the image but this would mean it gets pixelated?
So what ended up working for this was to have both items in a relative layout and then align the image view to the top and bottom of the linear layout containing the text kinda like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_alignTop="#id/text"
android:layout_alignBottom="#id/text"/>
<LinearLayout
android:id="#+id/text"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
</LinearLayout>
</RelativeLayout>
I don’t fully understand your problem but maybe you can do something like this
<LinearLayout
android:id="#+id/layout_Parent"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/layout_ImageView"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/layout_Text"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
This way the ImageView will only take the space left for it depending of the text.
In the following code I've got two main containers, a RelativeLayout and a ScrollView. I need the RelativeLayout to be on top fixed and below that I need the ScrollView with Images to be scrollable. I've got the following two questions:
Though my ScrollView is scrollable but it goes on top of the RelativeLayout. !important
The view of my images present within the vertical LinearLayout are thumbnail sized. If I have 15-20 images, they take a lot of vertical space. How do I have the images to fit the maximum in a row based on the screen size and then go to the next row?
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</RelativeLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView>
</ImageView>
<ImageView>
</ImageView>
<ImageView>
</ImageView>
<ImageView>
</ImageView>
</LinearLayout>
</ScrollView>
Follow these in simple way:
You need to use a fixed height for the parent, i.e., <RelativeLayout>.
Set the height of the ScrollView to match_parent.
Make sure you put everything inside a LinearLayout.
Finally you would end up with this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</RelativeLayout>
</LinearLayout>
First, you can set your RelativeLayout's height to a fixed value. Then set your ScrollView's height to match_parent, so it takes up all the available space. Then both of these should be contained in a vertical LinearLayout, to avoid any overlapping.
I use match_parent for height,but I don't want to use wrap_content or fill_parent for width. I want to set height as same as width. How can I do that in layout.xml?
Your question largely depends on whether you are in portrait or landscape.
If you are trying to make a layout width to match the height in portrait, then your layout will be going off screen, which does not seem possible in xml. And vice-versa, matching the height to the width in landscape would make the layout go offscreen as well.
If you are trying to make a square layout the same dimension as the smallest dimension of the screen, then a round about way to do that in xml is to make a shape drawable that is square, transparent and larger than your screen size. Then set the drawable to be an imageview inside a relativelayout and set your width and heights to the proper settings (match_parent or wrap_content). Then add views to the relativelayout as needed and reference them to the parent and not the image, making the new views reside "on top" of the imageview.
In portrait, the following relativelayout is square:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:src="#drawable/square_draw" />
</RelativeLayout>
</LinearLayout>
In landscape, the following relativelayout is square:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:src="#drawable/square_draw" />
</RelativeLayout>
</LinearLayout>
Also, make sure that adjustViewBounds is set to true. For some reason, this solution does not allow the image to grow larger than the screen size and it also uses more resources due to the overdraw.
I'm trying to get 2 (or more as needed) imageviews inside a linearlayout inside a horizontalscrollview, such that each image is scaled to fit the screen height without distorting the image ie one image showing as large as possible on screen, scroll to see next one.
once the second image is added, i get 2 small images next to each other (dimensions are 217 * 300px for both images). currently my activity_main.xml looks like the following..
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/image1"
android:src="#drawable/luke"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
/>
<ImageView
android:id="#+id/image2"
android:src="#drawable/luke"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
/>
</LinearLayout>
</HorizontalScrollView>
</FrameLayout>
I've tried various combinations of match_parent, fill_parent, wrap_content on the layouts, all the scaleTypes on the image views and spent over a day browsing the net looking for an example similar to what i want, but no luck.
I would say to set these two things:
<ImageView
android:layout_height = "match_parent"
android:layout_width = "10dp" />
This is the tricky part. Get the screen width at runtime, and set it to the imageView.
I'd be inclined to use a viewpager with a custom page adapter showing your scaled imageview instead of trying to do it in way you are currently.
The view pager / adapter would handle view recyling, page snapping etc for you.
how about using
android:width="0"
android:weight ="1"
android:height="match_parent"
In the imageViews
and match_parent else where in your layout.