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?
Related
In my layout there is ProgressBar with
android:layout_width="30dp"
android:layout_height="30dp"
No margins or paddings set.
But ProgressBar does not occupy whole bounding box, strange gap present around the circle.
How can I make ProgressButton fit specified sizes?
you can use android:clipChildren="false" to make it overflow on parent
<?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="match_parent"
android:clipChildren="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="50dp"
android:background="#color/colorPrimary"
android:gravity="center_horizontal"
android:orientation="vertical">
<ProgressBar
android:layout_width="390dp"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="55dp"
android:layout_marginRight="50dp" />
</LinearLayout>
</RelativeLayout>
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.
Can someone help me? My ImageView gets huge spacing for no apparent reason. Xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fragment_container_3"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_marginTop="50dp"
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginBottom="6dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
card_view:cardElevation="10dp"
card_view:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginBottom="0dp"
android:padding="0dp"
android:src="#drawable/list_cli2"
android:contentDescription="123" />
<TextView
android:id="#+id/totalCli"
android:layout_width="300dp"
android:paddingBottom="10dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:textColor="#fff"
android:layout_marginTop="10dp"
android:text="Total de Clientes: Buscando..."
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/cliChar"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="21dp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
...
</RelativeLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom|right"
android:layout_marginRight="18dp"
android:layout_marginBottom="60dp"
android:clickable="true"
app:backgroundTint="#android:color/background_dark"
app:fabSize="normal"
app:srcCompat="#drawable/refresh"/>
</FrameLayout>
Stays like this:
If I set the android: layout_height = "" with a low value, type 200dp, the spacing goes away, but in this case, on smaller devices, the view will be out of date. Already tried:
Placing the image as the background of a LinearLayout but the spacing was both above and below.
Placing the ImageView inside the LinearLayout however has done the same thing as above.
Does anyone know how to solve it?
If I put it outside the ScrollView, ImageView is centered in the middle of the screen
Add this to your imageview:
android:scaleType="centerCrop"
The scale type property will tell how the image should fit within the available space. Center crop will make it fill the whole space, but as a trade off the image will seem zoomed. There are other scale types you can try here.
It looks like your list_cli2 drawable already has the white space. Check it by open it with the image editor and see if the white space is there.
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 have ImageView which needs to be shown in full height available. However at top i have created LinearLayout which contains Text and Image. I want it to display at top but also want to image to fit screen. I have linear layout at bottom and its working fine.
This is my code for LinearLayout which i want to show at top. I have hidden actionbar
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#android:color/black"
android:gravity="top"
android:orientation="horizontal"
android:visibility="visible" >
<ImageView
android:id="#+id/backbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="10dp"
android:src="#drawable/back_button" />
<TextView
android:id="#+id/titleofscreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Testing"
android:textColor="#22c064"
android:textSize="18sp" />
</LinearLayout>
<ImageView
android:id="#+id/imageShown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
</FrameLayout>
If i dont set imageView scale type to android:scaleType="fitXY" then it works but image doesnt fit screen.
I want to display image to fit between above bar which contains Text and below it has some icons. But if i make image scaletype ='fitXY' it doesnt display above text. Following is screenshot but i want image to occupy space
If you want the image to be below the actionbar you should not use the FrameLayout as a parent. You either should use vertical LinearLayout with weight or `RelativeLayout". Try following code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#android:color/black"
android:gravity="top"
android:orientation="horizontal"
android:visibility="visible" >
<ImageView
android:id="#+id/backbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="10dp"
android:src="#drawable/back_button" />
<TextView
android:id="#+id/titleofscreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Testing"
android:textColor="#22c064"
android:textSize="18sp" />
</LinearLayout>
<ImageView
android:id="#+id/imageShown"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/actionbar"
android:layout_alignParentBottom="true"
android:scaleType="fitCenter"
/>
</RelativeLayout>
Also I doubt that you use fitXY as android:scaleType, because it doesn't maintain the aspect ratio of the image - so your image will be deformed (stretched). In your case you should rather use fitCenter, but it depends on how exactly you want to scale your image - you can also play with centerInside or centerCrop.