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>
Related
I am developing an Android app. In my app, I am trying to set overlay on an image. But the size of the view in a relative layout is always zero in with and height even I set match_parent to both width and height.
This is my XML layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_width="match_parent"
android:id="#+id/di_card_container"
android:layout_height="wrap_content">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/di_iv_image"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:id="#+id/di_name_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_centerInParent="true"
android:background="#color/blue"
android:id="#+id/destination_item_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:padding="10dp"
android:textSize="15dp"
android:textColor="#color/white"
android:id="#+id/di_tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
This is the result
As you can see, there is no blue color background for name because width and height of view in relative layout is zero. But if I set width and height explicitly like below, it is working.
<View
android:layout_centerInParent="true"
android:background="#color/blue"
android:id="#+id/destination_item_overlay"
android:layout_width="300dp"
android:layout_height="30dp"/>
But it is not compatible with all devices. Why with and height is always zero? I am adding that view because I need to programmatically control that view. How can I set width and height of that background view to match the parent?
Thats because you have a circular dependency. The <RelativeLayout> is asking its child to tell the height and the <View> is telling its parent to make it as tall as himself. If we fix the height, we can fix the issue immediately.
Try this here:
<RelativeLayout
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:id="#+id/di_name_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_centerInParent="true"
android:background="#color/blue"
android:id="#+id/destination_item_overlay"
android:layout_width="match_parent"
android:layout_alightTop="#id/di_tv_name"
android:layout_alightBottom="#id/di_tv_name"
android:layout_height="match_parent"/>
<TextView
android:padding="10dp"
android:textSize="15dp"
android:textColor="#color/white"
android:id="#+id/di_tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
I don't know how to align 3 elements side by side. I would like to have :
One view with a thin width on the left
One linearLayout with text content on the middle
One imageView always on the right
Like this :
And today, i got this :
Here is my code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
</LinearLayout>
You can simplify your layout by setting the root LinearLayout to a horizontal orientation:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/gris_clair"
android:layout_margin="5dp"
android:orientation="horizontal" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="match_parent"
android:background="#color/green_normal" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
You may want to tweak the colors or sizes to fit your desired end result.
I set the parent View's height to wrap the content, first two Views to match the parent view's height and the image to your size. This means that your image will decide the parent View's height.
If you want to evenly space/scale the views horizontally on your screen and use up all the space they have available you should look at the android:layout_weight attribute. You would set android:layout_width="0dp" for each View you want to scale with screen size and add android:layout_weight="x" where x is a number.
The number you choose will depend on how you want to divide up the available space each View will use. As an example if you wanted one View to use 1/3rd of the available space with a second using 2/3rds then set the first to 1 and the second to 2. 1+2=3 so 1 of a total 3 units and 2 of a total 3 units.
For your textview use weight to fill up space:
<TextView
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView" />
You can use relative layout for that. and for the image view add alignparentright rule.
<RelativeLayout >
<View />
<LinearLayout/>
</LinearLayout>
<ImageView
android:alignParentRight="true" />
</RelativeLayout>
or use the weight for linearlayout, put 1 for textview and rest 0.
You can easy solve this problem using weight in LinearLayout, or make your parent RelativeLayout and place middle layout toLeftOf your left view and toRightOf your right view.
You can use relative Layout instead of linear layout to design custom design of your page.
It might help you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:scaleType="centerCrop"
android:src="#drawable/test2"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</LinearLayout>
check this it might help you
Hi I have an activity with an imageview and a row with buttons at the bottom.The buttons are added to the iconView layout programmatically.When I test my app on my HTC one the buttons are displayed correct.
Once I run it on a device with a smaller screen it is cropped i.e. only the top of the buttons is displayed.
How can I make my code device independent?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.95"
android:orientation="vertical"
android:paddingLeft="4dp"
android:paddingTop="4dp"
android:paddingRight="4dp"
android:paddingBottom="4dp"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_weight="0.05"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
Thanks in advance.
Try this layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" >
<RelativeLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:layout_above="#+id/iconView"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal" />
</RelativeLayout>
</LinearLayout>
Try this
make the first view with android:layout_weight="1"
and the with a static height without the layout_weight, this should solve it
Unfortunately the solutions did not work. Eventually I changed my code and add the buttons in the xml, not programmatically. This works fine. I don't know why...
When adding button either programmatically or in XML layout, try to use LinearLayout as the parent for button and leverage the "weightsum" property of that LinearLayout.
When you're going to share the real state of screen's width or height equally between a number of views such as buttons or textview or ..., you can set "layout_weight" property on those controls. Notice that, this is only possible when using LinearLayouts.
What happens at the end is that the linearlayout's real estate is calculated and allocated according to each child's element's "layout_weight" value.
The example below shows how to put two buttons beside each other and make them fill the screen's width equally :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
>
<Button
android:id="#+id/btn_left"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/btn_right"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<LinearLayout/>
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"
I am creating a layout as below but the checkbox element is not visible on the scren where am i goign wrong ?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SeekBar android:id="#+id/seek"
android:layout_width="300dip"
android:layout_height="wrap_content"
android:progress="50"/>
...and a few more elements here.
</LinearLayout>
<CheckBox android:id="#+id/CheckBox"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="somestring" />
</LinearLayout>
The LinearLayout before the CheckBox has its height set to MATCH_PARENT(and it fills all the parent's height) and the parent LinearLayout of both has the orientation set to vertical so the CheckBox is pushed out of the screen.
Set the height of the LinearLayout containing the SeekBar to WRAP_CONTENT for example.
You need to set your inner Linear Layout's height and width to wrap content.
Try this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<SeekBar
android:id="#+id/seek"
android:layout_width="300dip"
android:layout_height="wrap_content"
android:progress="50" />
</LinearLayout>
<CheckBox
android:id="#+id/CheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="somestring" />
</LinearLayout>
Try This :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="10" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="9"
android:orientation="horizontal" >
<SeekBar
android:id="#+id/seek"
android:layout_width="300dip"
android:layout_height="wrap_content"
android:progress="50" />
</LinearLayout>
<CheckBox
android:id="#+id/CheckBox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="somestring" />
</LinearLayout>
In your layout chose one element that you want to be flexible in size, say height wise. Then make its height="0dp" and weight="1". Make heights of rest of elements: height="wrap_content".
Also you may have given discreet size of some dp to your other elements, and hence their total height runs out of available screen space OR there are too many elements that they go beyond your screen height. In this case, wrap your layout in a ScrollView.
change your LinerLayout definition it cannot be android:layout_height="match_parent"
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">
if you set match_parent for linearlayout it consumes all content so wrap_content is better.
But if you set it as I wrote checkbox will be at bottom page a linearlayout will consumes remaing part of screen.