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>
Related
I am using PercentRelativeLayout for positioning a view on an image. However, it seems like that marginTopPercent always depends on the height of the entire view even if the height of my PercentRelativeView is smaller.
How can I make it dependent on the height of my RelativeLayout?
MarginLeftPercent does work fine tho.
Code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
>
<android.support.percent.PercentRelativeLayout
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
app:srcCompat="#drawable/apparea" />
<com.petarzoric.vr_feedback.PaintView
android:id="#+id/idk"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="40dp"
app:layout_aspectRatio="300%"
app:layout_marginLeftPercent="2.6%"
app:layout_marginTopPercent="50.65%"
app:layout_widthPercent="84.13%" />
</android.support.percent.PercentRelativeLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="75dp"
android:layout_marginStart="146dp"
android:text="Button" />
</android.support.percent.PercentRelativeLayout>
As you can see the parent view wraps the content. The topMarginPercent is set to 50%, but the image cleary shows, that it is more than 50% of the parent. It is 50% of the entire height of the view.
How can I solve this?
Thanks in advance.
It seems like it is not possible to assign a negative value bigger than view's dimensions. For example, lets say I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#color/colorPrimary"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#color/colorPrimary"
android:layout_marginTop="-2dp">
<ImageView
android:id="#+id/closeIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_margin="12dp"
android:src="#drawable/ic_close_white_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/closeIV"
android:text="GALERÍA"
android:textColor="#color/white"
android:textSize="17sp"
android:textStyle="bold" />
<View
android:layout_alignParentBottom="true"
android:background="#android:color/black"
android:layout_width="match_parent"
android:layout_height="0.5dp"/>
</RelativeLayout>
<ImageView
android:id="#+id/pictureIV"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_below="#+id/toolbar"
android:layout_height="wrap_content"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/galleryRV"
android:layout_below="#+id/pictureIV"
android:background="#android:color/black"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_marginTop="2dp"
android:textAppearance="?android:attr/textAppearanceLarge"/>
<View
android:layout_below="#id/pictureIV"
android:layout_width="match_parent"
android:background="#drawable/grid_layout_separator"
android:layout_height="10dp"/>
</RelativeLayout>
If I set the top margin of the toolbar bigger than the toolbar's height, let's say -200dp, the output in postlollipop devices would be the toolbar fully hidden, 144dp of the image view hidden and the recyclerview would be stretched by 200dp, you can see a similar behaviour on Instagram's gallery. But in pre lollipop devices the output would be, the toolbar fully hidden, the imageview on top and the recyclerview stretched by 56 dp. So it seems that it is not possible to set the negative margin bigger than the toolbar's height, is there a workaround to have a similar behaviour in prelollipop devices?
I have an ImageView, a TextView and another 'ImageView', grouped in a vertical LinearLayout.
The TextView should contain long text, so I wrapped it in a ScrollView. The first ImageView should be 100dp height, and the third 100dp height. The middle TextView should fill the entire available space, and if the text is too long the a scroll bar should appear.
The entire layout is part of a parent layout, so this layout has only part of the screen available. To demonstrate it i set the LinearLayout height to be 265dp.
The problem is that the the whole text appears, the scroll bar doesn't appear, and the third bottom ImageView height is squashed.
I'm following this post, and this is a screenshot.
My code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="265dp"
android:background="#BDBDBD"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FFFF00" />
<ScrollView
android:id="#+id/SCROLLER_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true">
<TextView
android:id="#+id/TEXT_STATUS_ID"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:text="bla\nbla\nbla\nbla\nbla\nbla\nbla"/>
</ScrollView>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FF00FF" />
</LinearLayout>
Try this layout :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BDBDBD"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FFFF00" />
<ScrollView
android:id="#+id/SCROLLER_ID"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/TEXT_STATUS_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="bla\nbla\nbla\nbla\nbla\nbla\nbla"/>
</ScrollView>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FF00FF" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="265dp"
android:background="#BDBDBD" >
<ImageView
android:id="#+id/imgtop"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:background="#FFFF00" />
<ImageView
android:id="#+id/imgbottom"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:background="#FF00FF" />
<ScrollView
android:id="#+id/SCROLLER_ID"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/imgbottom"
android:layout_below="#id/imgtop"
android:fillViewport="true"
android:scrollbars="vertical" >
<TextView
android:id="#+id/TEXT_STATUS_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="bla\nbla\nbla\nbla\nbla\nbla\nbla"
android:textColor="#color/black" />
</ScrollView>
</RelativeLayout>
<ScrollView
android:id="#+id/SCROLLER_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true">
<TextView
android:id="#+id/TEXT_STATUS_ID"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:text="bla\nbla\nbla\nbla\nbla\nbla\nbla"/>
</ScrollView>
the weight that you assigned to the TextView does not have any meaning: It's inside a ScrollView (which extends FrameLayout, not LinearLayout) and even if it did have a meaning it's not what you are looking for - It's just say that it should take most of the space inside the ScrollView
You gave the ScrollView height of wrap_content - in your case it means that it will take the full height of the TextView - thus if the TextView height is bigger than the height of the screen - It will take all the height of the screen - thus your last TextView will not have enough space.
You can solve it using 3 (or more) methods
Assign fixed height to the ScrollView
Assign weight to the ScrollView (and maybe also to the rest of the Views)
Use the New PercentRelativeLayout. just assign height percent for the ScrollView to capture.
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
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>