I have a imageView and a linear layout inside a linear layout. It looks like this:
What I want to happen is have the second linear layout with all of the buttons and params be a fixed height, and then have the image view height be dynamic depending on whatever the size of the screen is. So if there is a large screen then the image will be large and the button and sliders will always be the same.
Here is a snippet of what I have:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
>
<ImageView
android:id="#+id/imgPreview"
android:layout_width="match_parent"
android:layout_height="400dp"
android:visibility="visible"
android:layout_gravity="center_vertical|right"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:scaleType="centerCrop"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="fill_parent">
Is there an easy way to do this?
You can do this by giving the ImageView a layout_height of 0dp and setting its layout_weight to 1. The inner LinearLayout will have its layout_height set to wrap_content.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" >
<ImageView
android:id="#+id/imgPreview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="visible"
android:scaleType="centerCrop" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Your button and slider content here>
</LinearLayout>
</LinearLayout>
Yes, you can do this using:
android:layout_height="0dp"
android:layout_weight="YOUR VALUE"
Related
I have the following layout, and for some reason the ScrollView overlaps the over views.
I don't quite understand the whole use of the weight and layout_weight attribute in android.
I am thinking that has something to do with my problem.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/topbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
<ImageView
android:id="#+id/secondbar"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/topbarr"
android:scaleType="fitXY"
/>
<ScrollView
android:id="#+id/buttonlistview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_below="#+id/secondbar"
android:scrollbarFadeDuration="0"
>
</ScrollView>
</RelativeLayout>
Firstly, you should have only one view with android:layout_alignParentTop="true" if you want your views to be one below another.
Secondly, you only need to use #+id once for each variable. Once it's declared, you refer to it by #id.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/topbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
<ImageView
android:id="#+id/secondbar"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/topbar"
android:scaleType="fitXY"
/>
<ScrollView
android:id="#+id/buttonlistview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_below="#id/secondbar"
android:scrollbarFadeDuration="0"
>
</ScrollView>
</RelativeLayout>
android weight and layout_weight attributes can be only used for Linearlayout or its childLayout.
As for layout_weight is used with the child view of the LinearLayout which divides the child width or height in ratios.
if u give layout_weight you should set the corresponding width or height to 0dp.
layout_weightSum is used with the parent the Linearlayout to define how much ratio it can be divided.
This hasn't to do anything with your problem right now, because you are using a RelativeLayout all the childViews start from the topleft corner. you have to give constraints in relativeLayout to align your views
And for scrollview
A child that is often used is a LinearLayout in a vertical orientation, presenting a vertical array of top-level items that the user can scroll through.
You should never use a ScrollView with a ListView, because ListView takes care of its own vertical scrolling.
take linear layout and adjust the weight as your desired UI looks
here it will divide three equal halves for 2 imageview and scrollview
<ImageView
android:id="#+id/topbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/secondbar"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_below="#+id/topbarr"
android:scaleType="fitXY"
/>
<ScrollView
android:id="#+id/buttonlistview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_below="#+id/secondbar"
android:scrollbarFadeDuration="0"
>
</ScrollView>
I am trying to create a layout that would always display 2 images, splitting the screen length equally into half, leaving no whitespace on screen (even if the images are center cropped).
So far I have the following code, but this leaves a lot of empty white space at the bottom of the screen. The reason I use "RelativeLayout" within the "LinearLayout" is because I want my text1 view to come at the lower portion of my image 1 (overlapping the image1).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_marginBottom="3dp" >
<ImageView
android:id="#+id/img1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:contentDescription="#string/picture"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:padding="5dp"
android:textColor="#fff" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_marginBottom="3dp" >
<ImageView
android:id="#+id/img2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:contentDescription="#string/picture"
android:scaleType="centerCrop" />
</RelativeLayout>
You are hardcoding the height to 230dp for each layout which could be causing the problem. In the Linear layout you should use weights to distribute the screen area equally.
Use android:layout_weight="1" in both the relative layouts
Check here for more information
Android: 2 relative layout divided in half screen
The layout you are describing is a simple, weighted LinearLayout. Simply add the following attribute to your LinearLayout:
android:weightSum="2"
Then for each RelativeLayout, change the height attribute to:
android:layout_height="0px"
And add the following attribute to the same RelativeLayouts:
android:layout_weight="1"
try to use the frame layout if you want to overlap the textview on image view and use layout weight on the frame layout
Sample code for layout xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="3dp"
android:layout_weight="0.5" >
<ImageView
android:id="#+id/img1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Test"
android:gravity="center"
android:layout_gravity="center_vertical|bottom"
android:padding="5dp"
android:textColor="#android:color/black" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="3dp"
android:layout_weight="0.5" >
<ImageView
android:id="#+id/img2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:scaleType="centerCrop" />
</FrameLayout>
I have a following layout :
<LinearLayout //container, should adjust height based on CONTENT view height
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:clickable="false"
android:padding="20dp">
<RelativeLayout //this is the CONTENT view height
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="5">....</RelativeLayout>
...
<RelativeLayout //this is the button layout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2">
<Button android:layout_width="40sp" android:layout_height="40sp"/>
<Button android:layout_width="40sp" android:layout_height="40sp"/>
</RelativeLayout>
</LinearLayout>
I want the height of the container (LinearLayout) to be adjusted to contain all the views in the RelativeLayout (shown on the left, let's call it CONTAINER).
Then, there are two buttons in the RelativeLayout (shown on the right). I need to align them on top and bottom borders of RelativeLayot, correspondingly. What's really important, is that the height of the buttons' container should be the same (should correspond) to the height of the CONTAINER.
The problem is, if I try to use android:layout_alignParentBottom="true" and android:layout_alignParentTop="true" attributes for the buttons, they will stretch the container height, and it will take the whole screen height.
So, what magic should I use to do the trick? :)
Try to align your right relative layout top and bottom to the left one.
Try something like this:
<RelativeLayout //container, should adjust height based on CONTENT view height
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:clickable="false"
android:padding="20dp">
<RelativeLayout //this is the CONTENT view height
android:id="#+id/contentRL"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="5"
android:layout_alignParentLeft="true">....</RelativeLayout>
...
<RelativeLayout //this is the button layout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_alignTop="#id/contentRL"
android:layout_alignBottom="#id/contentRL"
android:layout_alignParentRight="true">
<Button android:layout_width="40sp"
android:layout_height="40sp"
android:layout_alignParentTop="true"/>
<Button android:layout_width="40sp"
android:layout_height="40sp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
Use this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:clickable="false"
android:padding="20dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="5"></RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="2">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</LinearLayout>
Ok, based on a hint provided by Damien R. above I successfully accomplished the task by doing following:
Use RelativeLayout as a root with paramters layout_width="wrap_content", layout_height="wrap_content"
Use LinearLayout as a "wrapper" around container RelativeLayouts. This is because I need to lay out these containers using layout_weight attribute.
RelativeLayout layout_height should be fill_parent. No need to use android:layout_alignBottom="#id/..." and android:layout_alignBottom="#id/..." in the RelativeLayout attributes. This will only work if RelativeLayout is a child View of another RelativeLayout, and that's not the case, because I need to use LinearLayout's weight
The code is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:clickable="false"
android:padding="10dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/ticketbackground"
android:id="#+id/ticket_layout"
>
<RelativeLayout
android:id="#+id/contentRL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
android:layout_alignParentLeft="true">
</RelativeLayout>
<!--second column-->
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3">
...
</RelativeLayout>
<!--third column with buttons-->
<RelativeLayout
android:id="#+id/sdfsdf"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2">
<Button...
android:layout_alignParentTop="true" />
<Button...
android:layout_alignParentBottom="true" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
I have a relative layout inside linear layout, inside relative layout i have a image view and glsurface stacked on top of it, i want glsurface to have same size as imageview, how to accomplish this task??
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.zibi.ResizableImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center_horizontal"
android:src="#drawable/notepad" />
<com.zibi.zGLSurfaceView android:id="#+id/surfaceviewclass"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.zibi.travelersnotepad.zGLSurfaceView>
</RelativeLayout>
Try to set layout_align* attributes. TextView will cover ImageView. More about relative layout attributes
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image"
android:scaleType="fitXY"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#AFFF"
android:layout_alignRight="#+id/img"
android:layout_alignLeft="#+id/img"
android:layout_alignTop="#+id/img"
android:layout_alignBottom="#+id/img"
android:text="sample text"/>
</RelativeLayout>
You cannot use RelativeLayout to force size properties for children views inside it.
If you dont have a particular need for it, you can use LinearLayout instead and give both views the same weight:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.zibi.ResizableImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center_horizontal"
android:src="#drawable/notepad" />
<com.zibi.zGLSurfaceView android:id="#+id/surfaceviewclass"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0">
</com.zibi.travelersnotepad.zGLSurfaceView>
</LinearLayout>
I have a RelativeLayout with some stuff in it, and I want a background view to fill the whole thing. This is what I would expect to work:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000" >
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_margin="1px"
android:background="#fafafa" />
<ImageView
android:id="#+id/im"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_blank_profile" />
.... and so on.
That doesn't work. It fills the width but the height gets set to zero. However, if I change layout_alignParentBottom to layout_alignBottom="#+id/im" then it does work (sort of; that's not a satisfactory solution but at least it isn't 0 height any more).
What's going on? Is this a bug?
You need to change the relative layout from
android:layout_height="wrap_content"
to
android:layout_height="match_parent"
Because you are wrapping the height of the parent to the child, and the child to match the parent, it will come up 0.
if you are wanting to have other things above/below the relative layout, then use android weights.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0px" <!-- or 0dip -->
android:layout_weight="1"
android:background="#000" >
Try setting the layout_height property of you relative layout to match_parent
And what happens if you remove all the alignParent properties from the view and just use match_parent for the width and the height of the view?
Rolf
Final Edit?:
Small example, something like this?
Using a container? When the content of the inner RelativeLayout grows the View will just stretch with it.
<?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="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/relativeLayout1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_margin="1px"
android:background="#fafafa" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/im"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_blank_profile" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>