Android change Material elevation shadow color - java

is it possible to change the shadow color produced by the xml elevation property?
I want the shadow be dynamically changed by code.

I know that this question is very old and probably the author doesn't need the answer anymore. I'll just leave it here so others can find it.
Lollipop's elevation system doesn't support colored shadows.
But, if you need colored shadows, it's possible to get them using Carbon. It's a kind-of support library for Material Design and in the most recent version there is an option to change shadow color. There's a ton of nice designs on Behance featuring colored shadows and I thought it would be nice to have them despite lack of such feature in Android. It's important to note that colored shadows are emulated on all Android versions, on 5.0+ too.
https://github.com/ZieIony/Carbon
The following image and code can be found in Carbon's samples.
Code:
<carbon.widget.LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<carbon.widget.Button
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_margin="#dimen/carbon_padding"
android:background="#ffffff"
app:carbon_cornerRadius="2dp"
app:carbon_elevation="8dp"
app:carbon_elevationShadowColor="#color/carbon_red_700"/>
</carbon.widget.LinearLayout>
"CardView":
<carbon.widget.LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<carbon.widget.LinearLayout
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_margin="#dimen/carbon_margin"
android:background="#ffffff"
app:carbon_cornerRadius="2dp"
app:carbon_elevation="8dp"
app:carbon_elevationShadowColor="#color/carbon_red_700">
<carbon.widget.ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/test_image"/>
<carbon.widget.TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test text"/>
</carbon.widget.LinearLayout>
</carbon.widget.LinearLayout>

Starting API 28 (Pie) View#setOutlineAmbientShadowColor(int color) and View#setOutlineSpotShadowColor(int color) are available in the View class.
If you use elevation on your View, you can use both methods to change the color of the shadow.

You can use Shadow Layout. Check my answer.

I know I'm late but I want to share the solution as I searched hard for this issue, and the approved method as above ref: https://stackoverflow.com/a/42717993/18398843 is not working well, these shadows show some random shapes in small size of application..
BTW the solution is You have to use "ComplexView" to create your custom shadow,
dependency: implementation 'com.github.BluRe-CN:ComplexView:v1.1'
XML
<com.blure.complexview.ComplexView
android:id="#+id/shadow_card_1"
android:layout_width="#dimen/_65sdp"
android:layout_height="#dimen/_65sdp"
android:layout_centerInParent="true"
app:radius="#dimen/_30sdp"
app:shadow="true"
app:shadowAlpha="250"
app:shadowSpread="2"/>
//this will create the circular shadow for my need you can reduce the radius
Custom View
val shadow = ComplexView(context)
val radii = floatArrayOf(100f, 100f, 100f, 100f, 100f, 100f, 100f, 100f)//customise according to your requirement
val opacity = 150//customise according to your requirement
shadow.shadow =Shadow(
2,
opacity,
"#96B9BB",
GradientDrawable.RECTANGLE,
radii,
Shadow.Position.CENTER
)
val param: RelativeLayout.LayoutParams =
RelativeLayout.LayoutParams(
context.resources.getDimension(R.dimen._160sdp).toInt(),
context.resources.getDimension(R.dimen._160sdp).toInt()
)
shadow.layoutParams = param
shadow.addView(yourCustomView)
thanks :)

Related

Placing confetti to fall from top instead of top left only

I recently came across this library.
https://github.com/DanielMartinus/Konfetti
I tried to implement it in my application. I read the documentation and tried to implement it. Below is my code:
JAVA FILE:
final KonfettiView konfettiView = findViewById(R.id.viewConfetti);
konfettiView.build()
.addColors(Color.YELLOW, Color.GREEN, Color.MAGENTA)
.setDirection(0.0, 359.0)
.setSpeed(1f, 5f)
.setFadeOutEnabled(true)
.setTimeToLive(2000L)
.addShapes(Shape.Square.INSTANCE, Shape.Circle.INSTANCE)
.addSizes(new Size(12, 5))
.setPosition(-50f, konfettiView.getWidth() + 50f, -50f, -50f)
.streamFor(300, 1500L);
Below is my Layout file:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/folk"
tools:context=".TrueActivity">
<nl.dionsegijn.konfetti.KonfettiView
android:id="#+id/viewConfetti"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/CongoText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/congratulations"
android:visibility="invisible"
android:textSize="35dp"
android:textColor= "#FFF"
android:gravity="center"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
Everything is working fine for me. But the confetti is ejected from the top left only. I tried to change the KonfettiView object to different dimensions (i.e. trying to change the X-axis); but to no avail. I even read below answer on Stack overflow.
https://stackoverflow.com/a/46016959/13627957
But it doesn't seem to help. Is there any way I could get it ejected from full top as shown in the main library readme file instead of only top left.
Thanks.
You can use the DisplayMetrics class' constant widthPixels instead of konfettiView.getWidth() method to achieve your results.
Speaking about the two; your konfettiView.getWidth() uses the Konfetti width whereas DisplayMetrics.widthPixels uses device width. Information about width pixels.
Try the code below:
DisplayMetrics display = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(display);
final KonfettiView konfettiView = findViewById(R.id.viewConfetti);
konfettiView.build()
.addColors(Color.YELLOW, Color.GREEN, Color.MAGENTA)
.setDirection(0.0, 359.0)
.setSpeed(1f, 5f)
.setFadeOutEnabled(true)
.setTimeToLive(2000L)
.addShapes(Shape.Square.INSTANCE, Shape.Circle.INSTANCE)
.addSizes(new Size(12, 5))
.setPosition(-50f, display.widthPixels + 50f, -50f, -50f)
.streamFor(300, 1500L);

CLOSED How to set overScrollMode=never without disable fadingEdge?

I have a RecyclerView. I need to set the value of overScrollMode = "never" to remove this animation , but at the same time the fadingEdge option is disabled. Can you help me turn off the animation about which I wrote above, without disabling fadingEdge?
SOLUTION
If you do this in XML, then when you disable OverScrollMode - fading also becomes inaccessible, but if you do it programmatically, everything will work.
recyclerView.setOverScrollMode(View.OVER_SCROLL_NEVER);
recyclerView.setVerticalFadingEdgeEnabled(true);
recyclerView.setFadingEdgeLength(Math.round(30 * Resources.getSystem().getDisplayMetrics().density));
SOLUTION 2
#RakeshKumar proposed an option with XML. In order for fading not to disappear, you must also specify the background for RecyclerView.
android:background="YOUR COLOR"
android:fadingEdgeLength="30dp"
android:requiresFadingEdge="vertical"
android:overScrollMode="never"
You can use this like following:
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:overScrollMode="never"
android:background="#ffffff"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fadingEdgeLength="30dp"
android:requiresFadingEdge="vertical"/>

How can I modify all of a ProgressBar?

I'm able to modify the height, width, and outer color of a ProgessBar widget. But that doesn't seem to affect the inner part of the bar. The red line that progresses. Is there a way to modify that? Or do I need to create a custom widget for that?
Thank you
You can use android:indeterminateTint="#color/green" in your xml.
You can also try setIndeterminateDrawable(drawable) or setIndeterminateTintList() (I didn't check this solution)
You can increase the height of the progress indicator, it can be achieved by adding following parameter in your layout.xml for ProgressBar:
android:scaleY="5"
<ProgressBar
android:id="#+id/progressBar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleY="5"
/>
If you want to reduce the padding around the indicator, then modify layout_height attribute as follows:
<ProgressBar
android:id="#+id/progressBar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="5dp"
/>
You can use following on version older than Lollipop to change the indicator's color:
progressBar.getProgressDrawable().setColorFilter(
Color.RED, android.graphics.PorterDuff.Mode.SRC_IN);
For Lollipop and above, use following:
progressBar.setProgressTintList(ColorStateList.valueOf(Color.RED));
You can refer to this SO for progressBar color

Why does minHeight attribute not work in WebView Android?

This question has already been asked here, but it has no solution.
I have a WebView. I want to set minimum height to the WebView using minHeight attribute, but it doesn't work. The same attribute works for Button.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.example.anshul.webview.WebActivity">
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="400dp"></WebView>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:minHeight="150dp"
android:text="This is a Button. It's minHeight is set to 150 dp and it works !!"/>
Clearly from the below image, the WebView is not supporting the minHeight attribute. Does anybody knows a solution for this problem?
First, let's understand how other view's use android:minHeight attribute. Let's take Spinner for example. In AbsSpinner#onMeasure() code we see following chunk of code:
...
preferredHeight = Math.max(preferredHeight, getSuggestedMinimumHeight());
preferredWidth = Math.max(preferredWidth, getSuggestedMinimumWidth());
heightSize = resolveSizeAndState(preferredHeight, heightMeasureSpec, 0);
widthSize = resolveSizeAndState(preferredWidth, widthMeasureSpec, 30);
setMeasuredDimension(widthSize, heightSize);
...
So, getSuggestedMinimumHeight() should be regarded when computing preferred height.
Now, let's see how WebView is being measured.
WebView#onMeasure() delegates the job to WebViewChromium#onMeasure()
WebViewChromium#onMeasure() delegates the job to AwContents#onMeasure()
AwContents#onMeasure() delegates the job to AwLayoutSizer#onMeasure
AwLayoutSizer is the last component that is responsible for measuring WebView and we can clearly see, that its onMeasure() does not respect getSuggestedMinimumHeight() value.
I'm not sure whether this is an intended behavior or no. Nevertheless, I cannot find enough seams to somehow affect that measurement process. Here's the chuck of code in WebView class, where the object that eventually would return WebViewChromium (the first step in abovementioned order) is initialized.
private void ensureProviderCreated() {
checkThread();
if (mProvider == null) {
// As this can get called during the base class constructor chain, pass the minimum
// number of dependencies here; the rest are deferred to init().
mProvider = getFactory().createWebView(this, new PrivateAccess());
}
}
As you can see, this is not something that can be easily customized/changed.
Try it :
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webView = (WebView)findViewById(R.id.webView);
webView.loadDataWithBaseURL(null, "<html><body bgcolor=\"#E6E6FA\"> hehehe </body></html>", "text/html", "utf-8", null);
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#color/blue"
android:layout_height="match_parent">
<LinearLayout
android:minHeight="300dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
>
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:minHeight="150dp"
android:text="This is a Button. It's minHeight is set to 150 dp and it works !!"/>
</RelativeLayout>
I think webview dimensions work more according to content view port properties...
Check https://developer.android.com/guide/webapps/targeting.html#Viewport
The viewport is the area in which your web page is drawn. Although the viewport's total visible area matches the size of the screen when zoomed all the way out, the viewport has its own pixel dimensions that it makes available to a web page. For example, although a device screen might have physical a width of 480 pixels, the viewport can have a width of 800 pixels. This allows a web page designed at 800 pixels wide to be completely visible on the screen when the viewport scale is 1.0. Most web browsers on Android (including Chrome) set the viewport to a large size by default (known as "wide viewport mode" at about 980px wide). Many browsers also zoom out as far as possible, by default, to show the full viewport width (known as "overview mode").
use constraint layout .that will help to resolve all these types of errors and very easy to use.
if your android studio version is below 2.3.1 then add this dependency.
compile 'com.android.support.constraint:constraint-layout:1.0.0-beta1'

How do I make my ImageView a fixed size regardless of the size of the bitmap

So I'm loading images from a web service, but the size of the images are sometimes smaller or bigger than other images and the visualization looks silly when I put them in a ListView in android. I'd like to fix the size of my ImageView so that it only shows a portion of the image if it's larger than a preset amount. I've tried everything I can think of setting the setMaxWidth/setMaxHeight, setting the scale type to centerCrop, using ClipableDrawable wrapping my BitmapDrawable, setting using Drawable.setBounds(). I've tried setting in the XML and programmatically, but neither worked. I'm very surprised setting max width/height didn't do anything. Below is the XML I'm using ImageView definition in my layout file:
<ImageView android:id="#+id/recipeImage"
android:maxHeight="64px"
android:maxWidth="64px"
android:scaleType="centerCrop"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="6dip"/>
But,nothing has worked.
Just delete the maxHeight and maxWidth attributes and enter your units in layout_width and layout_height appropriately. But do not use the px unit - use dp instead, because these are device-independent.
This will fit the image in the specified height and width, irrespective of image size.
<ImageView
android:id="#+id/image5"
android:layout_width="300dp"
android:layout_height="200dp"
android:src="#drawable/image_1"
android:scaleType="fitXY"/>
Get ImageVIews as facebook posts.
Glide.with(context).load(link)
.placeholder(R.drawable.aboutlogo)
.fitCenter()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(imageView);`
<ImageView
android:id="#+id/img1"
android:src="#drawable/ic_menu_camera"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="center"/>

Categories

Resources