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">
Related
This is the problem scenario:
I have an Activity including a ScrollView,
ScrollView has only one LinearLayout as a child and the LinearLayout has one TextView.
The XML file is here:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bubble_shape"
android:text="#string/TestLargeText"/>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
and the "bubble_shape" drawable is here:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
<padding
android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp"/>
<stroke
android:width="8dp"
android:color="#ff00ff"/>
</shape>
I have a large text in the TextView and here is the problem:
when the TextView has large text the background shape is not showing. You can see the problem in the pictures below:
how can I solve the problem?
I solved your problem in two ways .
1- set "bubble_shape" to your HorizontalScrollView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bubble_shape">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/TestLargeText" />
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
2- or just change corners tag in your "bubble_shape" like this :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="15dp" />
<padding
android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp" />
<stroke
android:width="8dp"
android:color="#ff00ff" />
</shape>
<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>
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!
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"
good day.
today i was encounted this next problem:
i have listview:
<ListView
tools:listitem="#layout/list_view_item"
android:listSelector="#android:color/transparent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:dividerHeight="0dp"
android:divider="#color/transparent"
android:cacheColorHint="#color/transparent"
android:id="#+id/items"/>
where list_view_item is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/listview_item_background">
...
</LinearLayout>
and listview_item_background next:
<?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="#color/black" />
<padding
android:right="1dp"
android:top="1dp"
android:bottom="1dp"
android:left="1dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/green"/>
</shape>
</item>
</layer-list>
now then i run my app i see next:
as you can see between adjacent items horizontal border are same with vertical border, but i was expected double-bordered
then i try to set listview divider to 1dp. as expected i have three-bordered result
then i test my background drawable not in listview, but simple three linearlayout. i have expected result with double-border...
<LinearLayout
android:orientation="vertical"
android:padding="10dp"
android:layout_width="100dp"
android:layout_height="100dp">
<View
android:layout_width="50dp"
android:layout_height="25dp"
android:background="#drawable/listview_item_background"/>
<View
android:layout_width="50dp"
android:layout_height="25dp"
android:background="#drawable/listview_item_background"/>
<View
android:layout_width="50dp"
android:layout_height="25dp"
android:background="#drawable/listview_item_background"/>
</LinearLayout>
but in listview i still have one border.
how i can create listview with horizontal double-border on adjacent item?
ok, i didn't fix it, but i find workaround (but in my opinion it is a cruch):
in my drawable i set bottom padding form 1dp to 2 dp