The following code is rendering with undesired view boundaries on devices with android versions pre lollipop:
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardBackgroundColor="#color/transparent"
app:cardCornerRadius="#dimen/card_corner_radius"
app:cardElevation="0dp"
app:cardUseCompatPadding="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.makeramen.roundedimageview.RoundedImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
app:srcCompat="#{radio.radioLogo}"
app:riv_corner_radius="#dimen/card_corner_radius"
android:alpha="#{radio.playing}"/>
<LinearLayout
android:id="#+id/overlay_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#color/transparent"
android:gravity="center"
android:orientation="vertical"
android:visibility="#{radio.recording?View.VISIBLE:View.GONE}">
<TextView
android:id="#+id/recording_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:text="#string/recording"
android:textAppearance="?android:textAppearanceLarge"
android:textColor="#color/white" />
<TextView
android:id="#+id/recording_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:text="#{radio.recordingElapsedTime}"
android:textAppearance="?android:textAppearanceLarge"
android:textColor="#color/white" />
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.CardView>
ps: I tried card_view:cardPreventCornerOverlap="false"
and it doesn't solve my problem.
lollipop render
Pre lollipop render
Thanks in advance for any interest in helping.
I found a solution that worked for me and I wanted to post it in case any one else came across this situation.
I set the maximum elevation to 0dp and now rendering is perfect on API level 16 too.
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardBackgroundColor="#color/transparent"
app:cardCornerRadius="#dimen/card_corner_radius"
app:cardElevation="0dp"
app:cardMaxElevation="0dp"
app:cardUseCompatPadding="true">
If you need to keep elevation on v21 devices and remove cardview weird boundaries on pre21 devices - create values-v21/dimens.xml with:
<dimen name="card_elevation">2dp</dimen>
And values/dimens.xml with:
<dimen name="card_elevation">0dp</dimen>
Then add property to CardView:
app:cardElevation="#dimen/card_elevation"
Related
My current constraint layout gives me even spacing in the layout preview and also on my api 28 + 29 emulators, it displays even spacing. However when I use my real api 19 device to test the spacing, it gives me uneven spacing (check picture below). What's the cause for the uneven spacing and how can I fix it so that it's even for all devices?
I ended up using guidelines and margins and that fixed the issue:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/fragevent_threephotolayout_image1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#id/guideline"
android:layout_marginEnd="4dp"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.65"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<ImageView
android:id="#+id/fragevent_threephotolayout_image2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/guideline2"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#id/fragevent_threephotolayout_image1"
android:layout_marginBottom="4dp"
android:layout_marginStart="4dp"/>
<ImageView
android:id="#+id/fragevent_threephotolayout_image3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/guideline"
app:layout_constraintBottom_toBottomOf="#id/fragevent_threephotolayout_image1"
app:layout_constraintTop_toBottomOf="#id/guideline2"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
you must check some ways for it:
Don't use percents for width and height
Use margin left and right instead of start and end
Use padding instead of margin
As you see in your images, margin top or bot between 2 images of right side don't have an issue, so you can do what happen between them on others.
different devices have a different screen size that's why uneven space occurs, with
help of SDP master we can rectify this issues, below i gave sdp master link kindly add
this to yous "res" folder
kindly go to the link copy dimen value file inside the res folder and paste to
you res folder, and use this dimen values instead of manually given size(like 10 dp
12 dp)
You can use with Linear Layout as Below
<?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="200dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:orientation="horizontal"
android:weightSum="1">
<ImageView
android:id="#+id/fragevent_threephotolayout_image1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher"
android:layout_marginRight="6dp"
android:layout_weight="0.4"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2"
android:layout_marginLeft="5dp"
android:layout_weight="0.6">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:layout_marginBottom="5dp"
android:src="#mipmap/ic_launcher"
android:layout_weight="1"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:layout_marginTop="5dp"
android:src="#mipmap/ic_launcher"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
CardView is not working in api 22 and below. It's showing blank, but in Android 6 and above, it's working fine. I have used weights for row and columns, and I think it is not supported in Android 5.1 and below. Give any alternative for this.
<GridLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:alignmentMode="alignMargins"
android:columnCount="3"
android:layout_weight="9"
android:columnOrderPreserved="false"
android:rowCount="3">
<android.support.v7.widget.CardView
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
android:elevation="6dp"
app:cardBackgroundColor="#660000"
app:cardCornerRadius="12dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/About"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:textColor="#fff"
android:textSize="12sp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:orientation="vertical"
android:padding="7dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/aboutaul" />
</LinearLayout>
</android.support.v7.widget.CardView>
I had the same problem.
Removing the 'app:cardCornerRadius="n"' fixed the CardView going blank for me.
It seems there is no limit for the radius on api22 and lower, so it can end up covering the entire CardView, if too high.
Just figured this out, so I have had no time to try working out rounded corners without this yet.
Instead of this line in cardView
android:elevation="6dp"
Use this
app:cardElevation="6dp"
I want to remove extra space inside the CardView so the buttons does not have a white border as shown in the picture . This image was captured from my tablet but the Layout looks well in 5 Inch Mobile devices
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
app:cardCornerRadius="20dp"
app:cardElevation="10dp">
<com.balysv.materialripple.MaterialRippleLayout
style="#style/RippleStyleWhite"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/twitter_button"
android:drawableStart="#drawable/ic_twitter"
android:drawableTint="#android:color/white"
android:paddingStart="10dp"
android:text="Twitter"
android:textColor="#android:color/white"
android:textStyle="bold" />
</com.balysv.materialripple.MaterialRippleLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="25dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
app:cardCornerRadius="20dp"
app:cardElevation="10dp">
<com.balysv.materialripple.MaterialRippleLayout
style="#style/RippleStyleWhite"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/facebook_button"
android:drawableStart="#drawable/ic_facebook"
android:drawableTint="#android:color/white"
android:paddingStart="10dp"
android:text="Facebook"
android:textColor="#android:color/white"
android:textStyle="bold" />
</com.balysv.materialripple.MaterialRippleLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
This is the code for the CardViews and the buttons. I didn't paste the whole layout code because I don't think it has effect on my problem and by the way I tried changing margins of the buttons but it didn't solve my problem
From library documentation it is nowhere mentioned that you need to use can completely remove the cardview as it seems unnecessary. You can remove your cardview and enclose your button directly in MaterialRippleLayout to achieve your ripple effect. Check library description here https://github.com/balysv/material-ripple.
I want to create a cardview where the cards have simple one photo and an upper right bottom to remove them. So in order to the bottom be completelly visible i need to make the card bigger than the photo, but i dont want to show it. So i try to set the background to transparent and at design time everything seams fine
This is a screenshot of android studio at design time:
A) shows how the card looks like
B) is the same card when i click on it, showing that the card is a bit bigger than the photo itself (the blue borders are the normal android studio border when you select an element)
but during the runtime the cards are getting some weird elevation:
Here goes the code:
influencer_card.xml
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardView"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_gravity="center"
android:layout_marginBottom="#dimen/smallMargin"
android:elevation="0dp"
card_view:cardBackgroundColor="#android:color/transparent"
card_view:cardCornerRadius="0dp">
<ImageView
android:layout_width="#dimen/influencerCardSize"
android:layout_height="#dimen/influencerCardSize"
android:layout_gravity="bottom"
android:scaleType="centerCrop"
/>
<TextView
android:layout_width="#dimen/influencerCardSize"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:alpha="0.7"
android:background="#color/colorPrimaryDark"
android:gravity="center"
/>
<ImageButton
android:layout_width="#dimen/removeButtonSize"
android:layout_height="#dimen/removeButtonSize"
android:layout_gravity="right|top"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/ic_remove" />
</android.support.v7.widget.CardView>
new_influencers.xml
<?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">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="#dimen/influencersViewHeight"
android:layout_gravity="center"
android:layout_margin="#dimen/smallMargin"
android:background="#android:color/transparent"
android:elevation="0dp"
android:scrollbars="vertical"
android:visibility="visible" />
</LinearLayout>
I don't change any style related thing on the java code...
how can i remove this annoying elevation
If you don't want the elevation, you should consider not using CardView since CardView brings the elevation by default.
Instead, replace the CardView with a container like ConstraintLayout or RelativeLayout. These options don't carry any elevation by default, are transparent, and you can still add foreground ripple effects to them if you wish to do so.
want to card make invisible ,make "alpha" attribute 1
If you want to remove elevation in CardView,
Use app:cardElevation = "0dp" instead of android:cardElevation="0dp".
Use card_view:cardElevation="0dp" instead of android:elevation="0dp". Hope this helps you
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardView"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_below="#+id/linearLayout"
android:layout_centerHorizontal="true"
card_view:cardElevation="0dp"
card_view:cardBackgroundColor="#android:color/transparent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_marginEnd="10dp"
android:layout_marginTop="10dp"
android:src="#drawable/img"
android:scaleType="centerCrop"
android:layout_marginRight="10dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:alpha="0.7"
android:text="text"
android:layout_marginEnd="10dp"
android:background="#color/colorPrimaryDark"
android:gravity="center"
android:layout_marginRight="10dp" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="right|top"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/img" />
</android.support.v7.widget.CardView>
I need to arrange 4 FloatingActionButtons evenly, horizontally.
After reading many answers on SO, it turns out that the best way to do it is to have them in a LinearLayout with a layout_width of 0dp and all the buttons with a layout_weight of 1. After many attempts, layout_width of 0dp never worked.
Here's what I did:
<android.support.v7.widget.CardView
:
: >
<RelativeLayout
:
: >
<LinearLayout
android:id="#+id/toolbarBack"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/rlDetailLayoutBack"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"
android:gravity="center"
android:weightSum="4">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabDirections"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/directions1"
android:borderWidth="0dp"
android:elevation="8dp"
android:layout_weight="1"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCallMobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/mobile"
android:borderWidth="0dp"
android:elevation="0dp"
android:layout_weight="1"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCallLandline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/landline"
android:borderWidth="0dp"
android:elevation="0dp"
android:layout_weight="1"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabWebsite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/website1"
android:borderWidth="0dp"
android:elevation="0dp"
android:layout_weight="1"/>
</LinearLayout>
:
:
</RelativeLayout>
</android.support.v7.widgetCardView>
The rendering in Android Studio (v1.5.1) with API 21 (Android 5.0.1) is like this:
...and with API 17 (Android 4.2.2), it is like this (the images in the FAB appear correctly on a physical device, so that's not a problem):
My questions are:
Why are the buttons not uniformly laid out in API 21?
How can even even distribution (in fact, overall consistency) be achieved irrespective of the API?
How to get rid of the ugly lines bordering the buttons in API 21?
Many thanks in advance!
Courtesy the answer below from Nolly J, this is how the layout looks now on API 21, and works as well on API 17.
What's going on is you're seeing how the elevation is applied to the FAB on pre-lollipop.
In short, all FABs on API levels before v21 have 16dp padding where as FABS on v21+ have 0dp padding. This is inbuilt to support elevation pre-lollipop.
You should be able to add 16dp padding left/right in your styles-v21 and apply that as the padding to your FABs.
-"How can even distribution be achieved irrespective of the API".
I have recreated your LinearLayout in a way that four horizontal columns are place beside which other using layout_weight
<LinearLayout
android:id="#+id/toolbarBack"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/rlDetailLayoutBack"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="8dp"
android:gravity="center|center_horizontal"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabDirections"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/direction1"
android:borderWidth="0dp"
android:elevation="8dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="8dp"
android:gravity="center|center_horizontal"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCallMobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mobile"
android:borderWidth="0dp"
android:elevation="0dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="8dp"
android:gravity="center|center_horizontal"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCallLandline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/landline"
android:borderWidth="0dp"
android:elevation="0dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|center_horizontal"
android:padding="8dp"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabWebsite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/website1"
android:borderWidth="0dp"
android:elevation="0dp"/>
</LinearLayout>
For other questions, refer to #Charles Durham solution