I am drawing custom header to input information in my app. I have drawn 2 shapes in xml and then positioned them in a layout. That layout is then put in my main layout using . However there is a black border that is drawn around each of the included headers. This seems to only be on api 21 devices. What is going on?
circle.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/icon_background"
android:shape="oval">
<padding
android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp" />
<solid
android:color="#color/color_primary"
android:angle="270">
</solid>
</shape>
line.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="5dp"
android:color="#color/color_primary"/>
<size android:height="10dp" />
</shape>
Header layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="5dp"
android:layout_width="match_parent"
android:layout_alignParentStart="true"
android:layout_marginTop="14dp"
android:src="#drawable/line">
</ImageView>
<ImageView
android:id="#+id/circle"
android:layout_height="32dp"
android:layout_width="32dp"
android:src="#drawable/circle"
android:layout_centerHorizontal="true">
</ImageView>
<ImageView
android:id="#+id/header_icon"
android:layout_height="32dp"
android:layout_width="32dp"
android:src="#drawable/ic_action_car"
android:layout_centerHorizontal="true">
</ImageView>
</RelativeLayout>
Included layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/header_horizontal_margin"
android:paddingRight="#dimen/header_horizontal_margin"
android:paddingTop="#dimen/header_vertical_margin"
android:paddingBottom="#dimen/header_vertical_margin">
<include
android:id="#+id/carSpecs"
layout="#layout/header"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</include>
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/header_vertical_margin"
android:paddingBottom="#dimen/header_vertical_margin"
android:layout_gravity="center_horizontal"
android:id="#+id/vehicleSpinner"
android:layout_below="#+id/carSpecs"/> ...
Try to add this <solid android:color="#00FFFFFF"/> in your line.xml.
Remove this:
<stroke android:width="5dp"
android:color="#color/color_primary"/>
From line.xml
This is adding the extra "border", using the color_primary color resource as defined in your colors.xml.
Figured it out! Using same basis as #Der Golem I removed the
<size android:height="10dp" />
from the line.xml. Since the stroke was half of the size I was receiving the border. Thanks for the help all!
Related
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/white" />
<corners
android:bottomLeftRadius="30dp"
android:topLeftRadius="30dp" />
</shape>
<Button
android:id="#+id/btn_list"
android:layout_width="#dimen/width_100dp"
android:layout_height="wrap_content"
android:background="#drawable/my_background"/>
Tried the above code but it does not work for me. do i need to make a custom class extending button class.
Very Easy!, Take CardView as root element. CardView rounds child elements edges according to itself.
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_margin="20dp"
app:cardCornerRadius="25dp"
app:cardElevation="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="#string/app_name" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ecb8ff"
android:gravity="center"
android:text="#string/app_name" />
</LinearLayout>
</androidx.cardview.widget.CardView>
Output:
Also if you need TabLayout. You can see this answer
Try this it's a little tricky but it works
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FFF" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="500dp"
android:topLeftRadius="0dp"
android:topRightRadius="500dp" />
</shape>
</item>
</layer-list>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<!--width here doesn't work-->
<item
android:gravity="left"
android:width="10dp"
>
<shape
android:shape="rectangle"
>
<stroke
android:width="1dp"
android:color="#color/black"
/>
<!--<gradient-->
<!--android:startColor="#00dddddd"-->
<!--android:endColor="#40404040"-->
<!--android:angle="0"-->
<!--/>-->
</shape>
</item>
<!--width here doesn't work-->
<item
android:width="10dp"
android:gravity="right"
>
<shape
android:shape="rectangle"
>
<stroke
android:width="1dp"
android:color="#color/black"
/>
<!--<gradient-->
<!--android:startColor="#00dddddd"-->
<!--android:endColor="#40404040"-->
<!--android:angle="180"-->
<!--/>-->
</shape>
</item>
Here is the example.
It works in Lollipop or higher, but it doesn't work in Kitkat, the width is being ignored, the rectangle will fill the whole view.
I also tried to remove the second item, only leaves the first item, the width is still being ignored.
The ImageView uses this drawable:
<!--Width will be changed dynamically-->
<ImageView
android:id="#+id/someid"
android:layout_width="100dp"
android:layout_height="#dimen/someheight"
android:src="#drawable/the_xml_above"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:clickable="false"
/>
How to solve this?
Alright, I'll answer my own question:
It seems that on Android 4.4 or below, size node or width/height attribute will be ignored.
So the best approach is: create different shapes in different drawable xml files, create a relative layout instead of ImageView, and combine them in relative layout.
<RelativeLayout
android:id="#+id/id1"
android:layout_width="30dp"
android:layout_height="#dimen/someheight"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:clickable="false">
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:src="#drawable/somesrc"/>
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:rotation="180"
android:src="#drawable/somesrc"/>
</RelativeLayout>
I want to draw a line as ImageView's background.But it doesn't work?
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
<solid android:color="#FF0000FF" />
<size android:width="10dp"
android:height="2dp"/>
</shape>
Just a demo.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dividing_line"
android:layout_marginLeft="10dp" />
ImageView has no content so size will be 0x0dp. If you want a divider try setting the width to match_parent and the height to whatever you feel comfortable with (2dp for example).
Update: Try this.
In your layout file:
<ImageView
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/dividing_line"
android:layout_marginLeft="10dp" />
The drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
<stroke android:width="2dp" android:color="#0000FF"/>
<size android:height="2dp" />
</shape>
It is working for me.
As pointed out by TheTool if you just want a divider the easier solution is to add
<View android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/yourColor" />
to your layout file.
After searching for a solution, I didn't find any to solve my problem.
I have some elevation which produces a shadow on a big part of my app.
But in a particular place, I'm not able to make it work.
(It's where I put an arrow on the picture below)
The white area below the toolbar is a Fragment which displays a LinearLayout
layout:
<LinearLayout
android:id="#+id/panelAddress"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/button_flat_white"
android:elevation="10dp"
android:orientation="vertical"
android:padding="20dp"
>
//some content
</LinearLayout>
The parent of the Fragment :
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/custom_toolbar"
layout="#layout/toolbar"/>
<RelativeLayout
android:id="#+id/mapLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<FrameLayout
android:id="#+id/fragment_container_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<FrameLayout
android:id="#+id/fragment_container_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
Do you have an idea about why I don't get my elevation?
As described here https://stackoverflow.com/a/27518160/2481494 there are several requirements so that the shadow is drawn:
Space for the shadow in the parents view Group. As bleeding182 mentioned, padding can cause the shadow to be clipped:
(Do NOT use a padding. A padding on the framelayout will also cut the shadow off)
However, this can be fixed with android:clipToPadding="false" in the parent.
The elevated view needs to have a background to cast a shadow. Without information about your #drawable/button_flat_white I can't tell whether this is a problem in your case.
To solve your problem you should modify your FrameLayout like this:
<FrameLayout
android:id="#+id/fragment_container_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:clipToPadding="false"
android:paddingBottom="10dp"/>
To check whether your #drawable/button_flat_white causes any problems try to change the background of your LinearLayout to a simple color temporarily:
<LinearLayout
android:id="#+id/panelAddress"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="10dp"
android:orientation="vertical"
android:padding="20dp"
android:background="#fff">
//some content
</LinearLayout>
Just make CardView as parent of your LinearLayout and you can achieve elevation.
<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="match_parent"
android:layout_height="match_parent"
card_view:cardUseCompatPadding="true"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="3dp">
<LinearLayout
android:id="#+id/panelAddress"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/button_flat_white"
android:orientation="vertical"
android:padding="20dp">
//some content
</LinearLayout>
</android.support.v7.widget.CardView>
If elevation is not working than you can create you XML by giving reference as a background on the LinearLayout :
shadowfile.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#18000000" />
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#05000000" />
<corners android:radius="7dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#10000000" />
<corners android:radius="6dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#15000000" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#20000000" />
<corners android:radius="4dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#FFFFFF" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
Add like that :
<LinearLayout
android:id="#+id/profileDetails"
android:layout_width="match_parent"
android:layout_height="125dp"
android:background="#drawable/shadowfile"
android:padding="15dp"
android:layout_below="#id/toolbar_title"
android:layout_marginTop="20dp">
Output :
This is a drawing issue.
The cast shadow is drawn outside of the actual views bounds, so if the Parent layout does not "give" the view enough space, it will be clipped.
Since the parent of the fragment (Linear layout) has the same size, the shadow is clipped. Add a margin on the bottom to the LinearLayout.
If this does not help try wrapping the layout with a FrameLayout with a little margin on the bottom (Do NOT use a padding. A padding on the framelayout will also cut the shadow off)
1-2dp should do.
I have used paddingRight and paddingBottom(for shadow at bottom and to right of layout) then it worked for me, it shows a shadow otherwise the drawable shadow will not work properly.
Do such thing if you facing same problem.
You should be aware of android:hardwareAccelerated="false", shadows will not show if you have this line in the manifest
If the above point is okay then try this in your layout android:clipToPadding="false" and android:outlineProvider="bounds"
i hope it help you, Just add"marginTop" in second layout.
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="90dp"
android:orientation="vertical"
android:elevation="5dp"
/>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="90dp"
android:orientation="vertical"
android:padding="5dp"
android:layout_marginTop="3dp"
/>
Please enable hardwardAccelerated option in manifest file,
<application
...
android:hardwareAccelerated="true">
I want to add a gradient on the bottom of my image . Something like this :
I tried something like this but I only get the gradient no image..
<ImageView
android:id="#+id/trendingImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/trend_donald_sterling"
android:src="#drawable/trending_gradient_shape"
/>
trending_gradient_shape:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#android:color/darker_gray"
android:startColor="#android:color/darker_gray" />
<corners android:radius="0dp" />
</shape>
You need two layers: An ImageView, and a View on top of that with your gradient as android:background. Put these two Views in a FrameLayout:
<FrameLayout
... >
<ImageView
...
android:src="#drawable/trend_donald_sterling" />
<View
...
android:background="#drawable/trending_gradient_shape"/>
</FrameLayout>
Simply set the alpha value in your gardient.xml:
Your imageView:
android:background="#drawable/trend_donald_sterling"
android:src="#drawable/trending_gradient_shape"
Your gradient xml file:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#aa000000"
android:centerColor="#00ffffff" />
<corners android:radius="0dp" />
</shape>
In the color value, the first two places after # correspond to the alpha value, while the rest are the actual color value in R G B format, two for each.
try using the "foreground" attribute in your imageview
<ImageView
...
android:src="#drawable/trend_donald_sterling"
android:foreground="#drawable/trending_gradient_shape" />
it worked for me.
Use android:foreground="..." instead of android:background="..."
Now you won't need to put ImageView and View inside a FrameLayout!
So your final code will be:
ImageView
<ImageView
...
android:foreground="#drawable/trend_donald_sterling"/>
Drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#aa000000"
android:centerColor="#00ffffff" />
<corners android:radius="0dp" />
</shape>
this is how im gonna do,
i used relative layout as my parent layout, use the following code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/img_sample"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradiant"/>
<LinearLayout
android:layout_marginLeft="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.55"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.25"
android:text="Events"
android:gravity="bottom"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#ffffff"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.25"
android:text="Some description about the events goes here"
android:textSize="14sp"
android:textColor="#ffffff"/>
</LinearLayout>
</RelativeLayout>
hope you can figure out, here i attach my gradiant code below.use it inside the drawable folder....
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#aa000000"
android:centerColor="#00ffffff" />
<corners android:radius="0dp" />
</shape>
This is an easy way that creates a similar effect yet doesn't actually have the image disappear. Sometimes using the foreground attribute is not the best for the gradient, especially if using a motionlayout or you have nested scrollviews. Create an entirely new imageview and set the background to the gradient.
XML With Both Imageviews
<ImageView
android:id="#+id/main_imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="#drawable/peakpx__1_"
ads:layout_constraintHeight_percent=".55"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/main_imageView_gradient"
android:layout_width="0dp"
android:layout_height="0dp"
ads:layout_constraintHeight_percent=".55"
android:background="#drawable/gradient_theme_background"
app:layout_constraintEnd_toEndOf="#id/main_imageView"
app:layout_constraintBottom_toBottomOf="#id/main_imageView"
app:layout_constraintStart_toStartOf="#id/main_imageView" />
Then for the gradient, I use black #000000 for darker themes, and white #ffffff for lighter ones. A lot of answers I see on this are not adding the center color. This is important if you want to have the gradient start closer to the edge of the image.
gradient_background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:type="linear"
android:endColor="#ff000000"
android:centerColor="#00000000"
android:startColor="#00000000"/>
</shape>
**1> Create file black_shadow.xml**
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="270"
android:startColor="#00000000"
android:centerColor="#9c000000"
android:endColor="#000000"
android:type="linear" />
</shape>
</item>bla
</selector>
**2> Just add below line in Imageview.**
android:foreground="#drawable/black_shadow"