For some reason a small shadow appears on top of my floating action button as seen here but only on the debugging device but not in the Android Studio preview.
The button is nested in a relative layout to position it in the bottom of the screen like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_margin="16dp"
android:src="#drawable/baseline_play_circle_outline_white_36" />
</RelativeLayout>
Update:
This is what it looks like when clicked.
The problem is also caused by adding an alpha value to the FAB like here
but in my case, as the shadow color is almost the same as the original, adding 0.9 alpha makes it way less obvious.
try adding following attributes to fab :
android:clipChildren="false"
android:clipToPadding="false"
Related
I'm trying to make a layout with a main area and a bottom button bar. Unfortunately, the main area always overlaps the bottom bar. What am I doing wrong?
The simple code below just contains the main area and the bottom bar, but I can see in the designer that the main area goes to the bottom of the window, despite the constraint
app:layout_constraintBottom_toTopOf="#+id/layout__bottomButtons"
This is presumably because I also have to put in the following line:
android:layout_height="match_parent"
Android complains if you don't have this, so I am wondering how the constraints are supposed to work in this case?
Note: I have tried using "wrap_content" instead but in my real view the content is in a ScrollView, and the ScrollView overlaps the buttons unless I hack around with margins. I have to think I am missing aomething?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layout__main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
app:layout_constraintTop_toTopOf="#+id/layout__main"
app:layout_constraintBottom_toTopOf="#+id/layout__bottomButtons"
app:layout_constrainedWidth="#+id/layout__main"
app:layout_constraintStart_toStartOf="#+id/layout__main"
app:layout_constraintEnd_toEndOf="#+id/layout__main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:backgroundTint="#color/black"
>
</LinearLayout>
<LinearLayout
app:layout_constraintBottom_toBottomOf="#+id/layout__main"
app:layout_constraintStart_toStartOf="#+id/layout__main"
android:id="#+id/layout__bottomButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:backgroundTint="#color/teal_200"
>
<Button
android:id="#+id/btn__reset_all_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="0dp"
android:minWidth="0dp"
android:text="Reset"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
app:layout_constraintTop_toTopOf="#+id/layout__main"
app:layout_constraintBottom_toTopOf="#+id/layout__bottomButtons"
app:layout_constrainedWidth="#+id/layout__main"
app:layout_constraintStart_toStartOf="#+id/layout__main"
app:layout_constraintEnd_toEndOf="#+id/layout__main"
android:layout_width="match_parent"
android:layout_height="0dp"//match constraints is appropriate here
android:orientation="vertical"
android:backgroundTint="#color/black"
>
you used match parent on the layout__main. Now since the parent is the constraint layout it is going to cover the whole screen. Match constraints( denoted by 0dp) will solve your problem. Match constraints translates as cover as much screen that is available to me defined by the constraints i have
I'd like to add some padding to my recycler view so the status bar doesn't cover the first item. The problem is when I apply top padding, a solid white shows on top preventing the full screen experience.
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/RecentVizzyView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="48dp" />
<ProgressBar
android:id="#+id/progressbar"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_gravity="center"
android:indeterminate="true"
android:indeterminateTint="#color/lightGreen"
android:indeterminateTintMode="src_atop" />
</android.support.design.widget.CoordinatorLayout>
and I'm setting no limits flag to my screen:
getActivity().getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
Set android:clipToPadding="false" on your RecyclerView.
That will allow the paddingTop (and bottom, if you want), to be part of the scrollable part.
A better description is found here:
Android what does the clipToPadding Attribute do?
current situation
So as you can see on the picture there is a shadow on the border of my button. Is there a way to remove the shadow so that that the color of the button corresponds with the color of my action bar. right know it looks ugly because you can see the shadow. This is my code:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TableRow
android:gravity="end">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/logInButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:borderWidth="0dp"
app:backgroundTint="#color/faviconColor"
app:srcCompat="#drawable/ic_person_black_24dp" />
</TableRow>
</TableLayout>
Try setting android:elevation="0dp" to your floatingaction button.
Nevertheless, why even use a FloatingActionButton, and not just a normal button? FloatingActionButtons are afaik not made to be used like this, and if you need e.g. a round ripple effect, there are more elegant ways to do this.
EDIT:
If this does not work (as sometimes) use app:elevation="0dp" instead
I am just beginning with Android. I am making a layout with buttons, but a very strange thing is happening — there is a small gap between them. Setting margin and padding to 0 is also not helping.
Here is my simple layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
It is looking like this:
Make your own flat Button style with ripple effect [lollipop] and without it [pre-lollipop]:
https://gist.github.com/dmytrodanylyk/3513e42839ae4309d2b5
You have to use android:background to change the background of button. For example if you use android:background = "#FFFFFF" your visual problem is fixed. In reality , there is no space between the buttons, their background creates an "illusion"
I am using a cardview as the root of a custom view I am writing. I using the v7 support library. My XML looks like this:
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="6dp"
card_view:cardElevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- some other views -->
</LinearLayout>
</android.support.v7.widget.CardView>
My problem is that I am getting a white border around my card view. It looks like it is there to indicate elevation as it is thicker on the right side. I've tried adjusting cardElevation and MaxCardElevation in my XML like so :
card_view:cardElevation="0dp"
and in code in my custom view that extends CardView and uses this layout:
setCardElevation(0);
setMaxCardElevation(0);
But the white border persists. I'm not sure how to get rid of it. If anyone had any input into why this is happening or suggestions on how I can remove the white border it would be appreciated. Thanks much.
I know it's a bit late, but for anyone having a similar problem:
I had the same issue: A white border was shown on pre-lollipop devices.
I solved it setting the cardPreventCornerOverlap to false on your XML.
Like this:
<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:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="6dp"
card_view:cardPreventCornerOverlap="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- some other views -->
</LinearLayout>
</android.support.v7.widget.CardView>
Support CardView doesn't support content clipping, because it's expensive on older devices. It's possible to clip content using Canvas.saveLayer/restoreLayer and PorterDuff modes. This is how Carbon implements rounded corners with correct content clipping. See the image:
I might be late in the game, but I had the same issue. Just wanted to share a simple solution!
My custom view extended a CardView and I had a margin applied to the root element (i.e. CardView) in the XML just like in the original question. This ended up giving me the extra white border like this:
Solution was to move the margin from root of the Custom View XML to the declaration of your custom view (check comments in the snippet)
Code snippet:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cvSettings"
style="#style/DefaultCardViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin" <!-- Remove this -->
app:cardElevation="#dimen/default_card_elevation">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
.
.
.
</android.support.v7.widget.CardView>
Ended up just moving over the margin to my custom view declaration which got rid of the extra white border:
<com.example.android.custom.MyCustomView
android:id="#+id/custom_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin" <!-- Move it here-->
cv:pt_widgetColor="#color/colorAccent" />
After the change, much cleaner :) :
use cardBackgroundColor="color" in xml card_view
sample code :
<android.support.v7.widget.CardView
android:id="#+id/card_view_khaterat"
android:layout_width="250dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
app:cardBackgroundColor="#f56f6c"/>