Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android L Elevation Effect in Pre L (only using elevation property)

I'm working on an App and want to have an elevation effect on ImageView or any View (!CardView in support library) in Pre L APIs. But i'm not able to achieve that what i tried is used android:elevation property but it doesn't have any effect (No elevation).

I can't find any API, if someone point out any documentation to achieve this in Pre L or any snippet from Support library is highly appreciated.

like image 687
Nitin Misra Avatar asked Oct 20 '14 14:10

Nitin Misra


People also ask

How to set elevation programmatically in android?

To set the default (resting) elevation of a view, use the android:elevation attribute in the XML layout. To set the elevation of a view in the code of an activity, use the View. setElevation() method. To set the translation of a view, use the View.

What is android elevation?

Elevation (Android) Elevation is the relative depth, or distance, between two surfaces along the z-axis. Specifications: Elevation is measured in the same units as the x and y axes, typically in density-independent pixels (dp).

How to give shadow to view in android?

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. In the above tags indicates about shadow color, Axis's(X, Y) and shadow radius for text view.

Why doesn't the elevation style property work on Android?

The elevation style property on Android does not work unless backgroundColor has been specified for the element. With backgroundColor applied to instructions element: Unless I'm missing something elevation should get applied regardless of whether a view has a background color or not. React Native version: 0.33 Platform (s) (iOS, Android, or both?):

What is elevation in Android material design?

Android Elevation comes with Google material design this attribute gives us the facility to set relative depth or we can call that, distance between two surfaces along Z-Axis. So here is the complete step by step tutorial for Android Elevation Example with Tutorial. Android Elevation Example with Tutorial.

Is it possible to use elevation style without background color?

Android - elevation style property does not work without backgroundColor. · Issue #10411 · facebook/react-native · GitHub Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.


2 Answers

If you want to set views in 3D shape, View.setElevation() and View.setTranslationZ() is a good idea.

But unfortunately, the two attributes and methods are introduced since Android API 21. So, you can't use them on pre-L or API 21- devices.

But, there is still a way to custom your views' shadows and outlines.

The bounds of a view's background drawable determine the default shape of its shadow. Outlines represent the outer shape of a graphics object and define the ripple area for touch feedback.

Consider this view, defined with a background drawable:

<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />

The background drawable is defined as a rectangle with rounded corners:

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

The view casts a shadow with rounded corners, since the background drawable defines the view's outline. Providing a custom outline overrides the default shape of a view's shadow.

To define a custom outline for a view in your code:

  1. Extend the ViewOutlineProvider class.
  2. Override the getOutline() method.
  3. Assign the new outline provider to your view with the View.setOutlineProvider() method.

You can create oval and rectangular outlines with rounded corners using the methods in the Outline class. The default outline provider for views obtains the outline from the view's background. To prevent a view from casting a shadow, set its outline provider to null.

Hopefully it helps.

P.S.: yourAppNs:elevation="4dp" will be a good idea if you are using android-design-library.

like image 149
SilentKnight Avatar answered Oct 27 '22 01:10

SilentKnight


  • ViewCompat.setElevation()/getElevation() doesnt work on pre Lollipop.
  • There isnt anything worth checking out at the support library, at least until version 21.1.1
  • As for creating an elevation effect by yourself take a look at this
like image 22
EE66 Avatar answered Oct 26 '22 23:10

EE66