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"
Related
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 want a basic button that has a completely transparent background (so the only thing visible is the text.)
As per other answers, I've set android:background="#0000", but still, it has a faded gray color.
Here is the complete layout code:
<?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="#3176C0">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:text="TRANSPARENT?" />
</RelativeLayout>
What it looks like:
What I want:
Turns out that it is not a background showing, but a shadow from the default button style.
Therefore, the answer is that the button style needs to be changed by adding this to the button:
style="?android:attr/borderlessButtonStyle"
Try this code ...
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:text="Transparent"/>
Answer is borderlessbutton.
Refer: https://developer.android.com/guide/topics/ui/controls/button#Borderless
Try this:
android:background="#android:color/transparent"
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"
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"/>
I'm trying to create a view in android that looks like:
Text
Radio Button 1
...
...
I thought it was simple enough but at least in the layout preview and emulator I'm seeing the text for the RadioButton appear on top of the actual radio button (the circle), see the attached screen shot. I'm guessing this is something very trivial but I'm messed around with gravity and every other setting I can think of and nothing. Android 3.1 if that matters.
Here's my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:id="#+id/question_text"
android:textColor="#color/primary_gray"
android:layout_width="match_parent"
android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
android:layout_height="wrap_content"/>
<RadioGroup android:id="#+id/multiple_choice_one_answer_group"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioButton
android:background="#color/primary_gray"
android:textColor="#color/black"
android:textSize="10sp"
android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
</RadioGroup>
</LinearLayout>
Screenshot:
The problem is setting the background. If you remove the background from the RadioButton and keep it on the RadioGroup, it has the effect you're looking for. In general, setting the background of a Button to everything removes the button look; try it on a regular Button and you'll see. This is because the background for a Button is already set to something, and you're replacing it with a flat color.
Try this instead:
<RadioGroup android:id="#+id/multiple_choice_one_answer_group"
android:background="#color/primary_gray"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioButton
android:textColor="#color/black"
android:textSize="10sp"
android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
</RadioGroup>
Setting the background in the java code instead of the layout solves this as well.