I want to have a CardView which contains an ImageView which overlaps the left border of the CardView.
I want to do this by giving the ImageView a negative margin.
This works fine with all other layouts (LinearLayout/RelativeLayout/FrameLayout) by setting clipChildren="false".
However I can't get it to work with a CardView.
The ImageView will be clipped and does not overlap the CardView.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:clipChildren="false">
<ImageView
android:layout_marginLeft="-10dp"
android:background="#drawable/some_picture"
android:layout_width="50dp"
android:layout_height="50dp"/>
</android.support.v7.widget.CardView>
Ok, this seems to be a problem only with Android 5+, the solution is to set
cardView.setClipToOutline(false);
Source - https://www.reddit.com/r/androiddev/comments/2tccge/cant_draw_outside_of_cardview_parent/
Add this to your MaterialCardView xml file
android:outlineProvider="none"
wrap it in LinearLayout with param LinearLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false">
<android.support.v7.widget.CardView/>
</LinearLayout>
Add:
android:clipChildren="false"
to CardView's grandfather View.
Related
I am trying to place an ImageView inside my RelativeLayout that is positioned about 3/4 down the screen, but as soon as I add an ImageView to the RelativeLayout, the layout and the image get snapped to the top of the screen and I am not sure how to move it from there.
This is what it looks like whenever I add an ImageView to the RelativeLayout
But I want it positioned just above the "Ready" button
This is the .xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="74dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
</RelativeLayout>
This is happening because you don't understand RelativeLayout well enough.
All Views placed inside RelativeLayout will automatically be placed ontop of each other in the top left corner of the RelativeLayout.
If you want to move it, you need to 'align' it.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="74dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
</RelativeLayout>
By aligning the ImageView to the bottom of the RelativeLayout, it should be placed above the Ready button IF your RelativeLayout ends right above the Ready button.
If you want to center the ImageView, you can add in android:layout_centerHorizontal="true".
You can read more about RelativeLayout here: https://developer.android.com/guide/topics/ui/layout/relative
However, there's 2 curious things about your xml code.
Why are you placing an ImageView of height 80dp inside a RelativeLayout of height 74dp? It's basically purposely looking for trouble.
Why are you using a RelativeLayout if you're using ConstraintLayout already? One of the main benefits of using a ConstraintLayout is so you don't have to use nested layouts. With the power and control of ConstraintLayout, you can actually rearrange almost all views to any design you want without nesting another layout like RelativeLayout inside of it.
I'm just guessing that you're using ConstraintLayout because you used app:layout_constraintStart_toStartOf in your RelativeLayout and these types of 'constraints' only exist for ConstraintLayout.
So if you're already using a ConstraintLayout and your Ready Button is inside the ConstraintLayout, you simply need to do:
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
You don't need a RelativeLayout to place the ImageView above the Ready Button.
wrap the relative layout and button with linear layout orientation vertical and adjust gravity as you like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="74dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
</RelativeLayout>
</LinearLayout>
I've got an Image button and want to place on top of it a descriptive text. Also need the ImageButton to be 1/3 of the parent's width so can't use a ConstraintLayout nor a LinearLayout. Any ideas?
Try wrapping your ImageView and TextView in a RelativeLayout as:
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
and set android:weightSum=3 in the parent layout. Once you have the desired layout, make the RelativeLayout clickable instead of using an ImageButton.
when I remove gravity attribute then the image will set on top corner right but when it used it leave padding at the top why gravity leaves space ????
enter image description here
android:gravity="center" ---> center_horizontal+center_vertical
The center_vertical attribute leaves the padding at the top. Changing it to center_horizontal will make the view/views just align center horizontally so use
android:gravity="center_horizontal"
I think why should you use layout_marginTop in imageview?it's not necessory to set.you can set layout_gravity at imageview and remove gravity at top linear layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black">
<ImageView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:src="#drawable/android_ic"
android:layout_gravity="center"
/>
</LinearLayout>
When you have added android:gravity="center" your entire layout will be at center of the screen.Since you have added multiple views below the imageView, it has been managed to be at the top with some space.Change it to android:gravity="center_horizontal" and also if the image is small set the height as "wrap_content" instead of 200dp ,it may also have additional space.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:src="#drawable/coffee"
/></LinearLayout>
i have an imageview on a relative layout.
You can see in the screenshot :
How can i move the imageview(the weel) in the bottom-right corner, but display only 25 % part of it, like in the follow picture:
Thanks in advance !
<?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:background="#E0E0E0"
>
<com.androidsources.welcomescreen.MyRecyclerView
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:id="#+id/cardList"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<com.anupcowkur.wheelmenu.WheelMenu
android:id="#+id/wheelMenu"
android:layout_width="300dp"
android:layout_height="300dp"
android:src="#drawable/wheel"/>
</RelativeLayout>
You can try something like this:
<com.anupcowkur.wheelmenu.WheelMenu
android:id="#+id/wheelMenu"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:paddingLeft="150dp"
android:paddingTop="150dp"
android:src="#drawable/wheel"/>
alignParentRight and alignParentBottom attributes will move your widget at the right bottom corner. Also try to change padding to achieve desired visual effect.
I know that there is already an answer, but for those who can't make the accepted answer work here is an alternative.
For some reason, I can't place part of the view outside the parent if I'm using RelativeLayout but when I tried LinearLayout it worked. So the solution I used is to enclose the view in a LinearLayout then position the LinearLayout on bottom-end of the parent.
<LinearLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true">
<ImageView
android:layout_width="300dp"
android:layout_height="300dp"
android:src="#drawable/some_pic"
android:layout_marginStart="150dp"
android:layout_marginTop="150dp"/>
</LinearLayout>
Note the width and height of the image is not match_parent, using match_parent will shrink the image not displace it.
I have this LinearLayout that is going to be placed on the bottom of an activity layout. I want this LinearLayout to have a 4dp elevation, just like the top toolbar should have, however, since android:elevation places the shadow below the ui component and this specific component (linearLayout) is going to be on the bottom of the screen, I won't see any elevation at all..
This is my LinearLayout code, and an image of it with the default elevation implemented:
<?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:weightSum="3"
android:background="#android:color/transparent"
android:orientation="horizontal"
android:elevation="4dp"
android:layout_alignParentBottom="true">
<ImageButton
android:id="#+id/playButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="center"
android:clickable="true"
android:background="#drawable/bottom_toolbar_menu_selector"
android:src="#drawable/ic_play"
style="?android:attr/borderlessButtonStyle" />
<ImageButton
android:id="#+id/stopButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="center"
android:clickable="true"
android:background="#drawable/bottom_toolbar_menu_selector"
android:src="#drawable/ic_stop"
style="?android:attr/borderlessButtonStyle" />
<ImageButton
android:id="#+id/bookmarkButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="center"
android:clickable="true"
android:background="#drawable/bottom_toolbar_menu_selector"
android:src="#drawable/ic_bookmark"
style="?android:attr/borderlessButtonStyle" />
</LinearLayout>
Is there a way, using elevation to place a shadow on top of the ui component?
Thanks in advance!
You can't theoretically do it with android:elevation, in the sense that you can't choose the direction where the shadow is going to be cast.
There are two solutions.
1. Drawables
You could, for instance, put an ImageView right above your layout and set android:src="#drawable/shadow". This should be a vertical GradientDrawable defined in XML, as explained here.
2. Workaround
While most of the shadow is actually below the view, a subtle shadow is also above. A workaround might be using a very high value for elevation, like 40dp: the bottom part is going to be hidden due to your layout, while the top is going to be expanded and look like a common shadow.
In either case, you do not have control over the elevation value in dp, in the sense that you can't be sure your shadow is equivalent to the one cast by android:elevation=4dp.
use like as;
<LinearLayout
android:layout_width="match_parent"
android:layout_height="205dp"
android:background="#color/white"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="-5dp"
android:background="#color/white"
android:elevation="3dp"
android:paddingTop="5dp">
// CHILD VIEWS
</RelativeLayout>
</LinearLayout>
Add this code above of view in which you want top elevation or add android:layout_marginTop="-4dp" and add below of above view
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0.01dp"
android:layout_below="#+id/scrollbar"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="0dp"
app:cardElevation="#dimen/dp_4" />
Try this i am unable to set background through xml then i tried the programmatic way to solve that and i work perfectly refer this if facing problem on show shadow in Linear Layout
lprofile.setBackgroundResource(R.drawable.background_with_shadow);
lprofile is my ref of Linear layout and background_with_shadow is xml for applying shadow i hope i will for ur requirmement...thank u..