I upgraded to Android 4.2 and all of a sudden the linear gradient on my home widget isn't behaving as intended. instead of a gradient i seem to get a constant band. then if i restart the device the gradient starts "working" again, which is very puzzling. I have talked to other team members and their devices don't seem to have an issue. Here is a screen shot of the problem:
The gradient is applied over the bottom half of the image and should go from semi-transparent at the bottom to fully transparent at the top. Instead you can see a basically constant semi-transparent area at the bottom half of the image. The layout is something like:
<RelativeLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#drawable/gradient"
android:orientation="vertical" >
...
while the gradient background is
<shape>
<gradient
android:angle="90"
android:startColor="#D0000000"
android:endColor= "#00000000"
android:type="linear" />
</shape>
i found that forcing s/w acceleration on the linear layout (setting android:layerType="software") fixed the issue.
Related
Somewhat similar question here but answer is to just remove elevation and shadow... not what I want: Android CardView with weird border when transparent
What I want is what is shown in the Pixel Launcher search bar... namely a shape which has a semi transparent background and also a shadow, but the shadow does not overlap with the white shape (which would end up making it look grey). I basically want a shadow but with a hole in the middle of it where my shape is...
This is what I want to achieve (the search bar down the bottom):
Here is what I have tried but you can see from the attached picture, that the grey shadow is coming through the semitransparent white background.
activity_main.xml
<FrameLayout
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/rectangle"
android:elevation="8dp" />
Rectangle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="4dp" />
<solid android:color="#aaffffff" />
</shape>
This is what my attempt looks like:
You can see that even though my shape is semi transparent white on a white background, it turns grey because of the shadow underneath which is not what I want.
I have also tried playing with View#setOutlineProvider with no success.
I have also tried playing with https://github.com/harjot-oberai/MaterialShadows
I don't want to do it with a 9patch image if I can avoid it.
One solution is to apply the transparency to the frame itself, not just the rectangle's background. This would create an effect similar to the one pictured.
For example:
<FrameLayout
android:layout_width="120dp"
android:layout_height="120dp"
android:elevation="8dp"
android:alpha="0.6" />
This of course has problems if you want non-transparent elements, to fix this you could extract out the background, and do something along the lines of:
<FrameLayout
android:layout_width="120dp"
android:layout_height="120dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rectangle"
android:alpha="0.6"
android:elevation="8dp" />
</FrameLayout>
I need to create white rectangle shape with red border (width 1px) and another red rectangle attached to it from below. Like this:
White rectangle will be EditText while red border and red rectangle will appear in order to notify the user about input errors. Nothing fancy.
I have already tried several approaches, but none of them looked good due to the same reason - the color changes towards the edge of a shape (looks like the outermost pixels are the ones that change). The issue can be seen in this magnified picture:
The hierarchy on this particular snapshot is LinearLayout with red background and padding of 1px, but I observed the same effect while attempted to use other approaches as well (including drawing the border around EditText programmatically).
This effect looks like the standard of Android, and my question is how can I disable it?
Check following example, hope it will help you.
rect_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="3dp"
android:color="#EF9A9A"/>
<solid android:color="#android:color/white"/>
</shape>
layout.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rectangle_shape"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:lines="3"
android:padding="5dp"/>
<View
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#EF9A9A"/>
<TextView
android:layout_width="match_parent"
android:layout_height="36dp"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:background="#EF5350"/>
</LinearLayout>
Output:
Just in case anybody stumbles upon this question - the described behavior was some emulator related artifact. On real devices the colors were just fine.
I am attempting to add rounding and shadows to some views on an app and am utilizing the card view library to achieve that. It is looking good on lollipop devices but am running into compatibility issues with anything pre-lollipop.
I will preface this by saying that I have looked at the answers in the questions below have found that none of them are working for me.
Appcompat CardView and Picasso no rounded Corners
Cardview - white border around card
Unnecessary padding in CardView?
The most popular answer was to add the attribute 'cardPreventOverlap=false' but this removes the rounded corners. I have tried variations of this flag and 'cardUseCompatPadding="true"' but none of them seem to do the trick. Has anyone else run into the same problem?
My code:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/selector"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:layout_width="44dp"
android:layout_height="match_parent"
android:layout_marginRight="4dp"
android:background="#color/mid_yellow"
android:padding="0dp"
android:src="#drawable/ic_add_white_24dp" />
<TextView
style="#style/Text.Primary.White"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:text="Button" />
</LinearLayout>
This is how it currently looks on Android 5.0:
The exact same code on 4.4.2 displays as:
With 'cardPreventOverlap=false':
Update Unfortunately we were not able to solve the issue; given that the app only had small install base pre5.0 we decided it was not important. We ended up going with the third option 'cardPreventOverlap=false'.
Content clipping is not supported, because is quite expensive on older devices. If you wish, you can use Carbon. It has its own CardView implementation, which correctly clip content to rounded corners. Carbon also adds content clipping and elevation to all other layouts so for your purpose you can use a LinearLayout with rounded corners and shadow. See the image:
Instead of using card_view:cardCornerRadius you can set the background of the cardview with a drawable like:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<corners android:radius="4dip"/>
</shape>
You can also do this for each element in your cardview such that you have for each element the correct background color.
In that case you can specify only certain corners with:
<corners
android:topLeftRadius="4dp"
android:bottomLeftRadius="4dp"/>
For your + button for example.
Use this in combination with cardUseCompatPadding="true"
I have a ListView. In each row I have a LinearLayout with items inside. The LinearLayout has a layout_margin of 10dp. I have placed it a selector background when pressed. But the problem is that at the border of the margin of 10dp an orange background color appears, while inside the LinearLayout black background appears correctly.
How I can remove that orange background in margin from appearing?
selector
<item android:state_pressed="true">
<shape>
<gradient android:angle="90" android:startColor="#color/negro" android:endColor="#color/negro" />
</shape>
</item>
<item android:state_enabled="true">
<shape>
<gradient android:angle="90" android:startColor="#color/grisOscuro" android:endColor="#color/grisOscuro" />
</shape>
</item>
xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#color/black"
android:orientation="horizontal">
<LinearLayout
android:baselineAligned="false"
android:id="#+id/fondoListviewRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/grey"
android:orientation="horizontal">
...
</LinearLayout>
code
holderName.fondo.setBackgroundResource(R.drawable.listview_negro);
I suppse there is a orange background behind your view.
Padding
is the space inside the border, between the border and the actual view's content. Note that padding goes completely around the content: there is padding on the top, bottom, right and left sides (which can be independent).
Margins
are the spaces outside the border, between the border and the other elements next to this view. Note that, like the padding, the margin goes completely around the content: there are margins on the top, bottom, right, and left sides.
Try using android:padding="10dp" insted. it should solve you problem.
EDIT:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#FF0000" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#00FF00" >
</LinearLayout>
</LinearLayout>
the above code gives me
Based on your description of the problem, I believe you should switch or alter the theme of your app, which is chosen in your app's manifest, under application » android:theme. Styles can be found under res » values. Or you should redefine styles related to elements of interest.
Before digging deep into this, switch theme to:
android:theme="#android:style/Theme.Black"
or
android:theme="#android:style/Theme.Light"
or
android:theme="#android:style/Theme.NoTitleBar"
... and see what happens. The latter shows no action bar.
I have LinearLayout with shape background and WebView inside. How to cut WebView along the border of the shape?
I want WebView fit in the shape and so WebView will not have any acute angles.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dip" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg_border"
android:orientation="vertical" >
<WebView android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</LinearLayout>
bg_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:height="1dp"
android:color="#color/border" />
<corners
android:radius="5dp"
android:bottomRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
I would bet you can only simulate that. Create another shape with a (smaller) radius, and make it white. Put that around your web view. This obviously won't work if the page you're looking at is not white.
Also, you don't need to define topLeft/bottomRight/etc if you already define "radius" and all the values are the same.
UPDATE
Ideas. Both of them involve a source image LIKE this: http://www.noiseindustries.com/downloads/misc/FxFactoryHelp/pluginguide/generators/roundedrectangle/files/ni-rounded-rectangle.jpg
Just make sure the border is MUCH smaller. 3-5 pixels. The white center should be transparent, not white.
1) Create a RelativeLayout, and create images for the sides and corners. With the layout and images, basically lay out the images so you "draw" a border. Don't put anything in the center. Create a FrameLayout, put the webview in, then put the RelativeLayout on top. Hopefully, the touch events in the center will fall through to the webview, but still give you a soft border around the edges.
2) Create a 9-patch image that basically looks the same as the border described in 1. Do the same FrameLayout described in 1, and add the Webview. On top of that, add a CUSTOM view. Set the background to the 9-patch, and make sure the custom view passes on all of its touch events.
I suspect #1 would be easier to implement, but who knows?