How do I put a CSS box-shadow-like effect on an Android layout?

Asked

Viewed 4,720 times

3

Ex.: 

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginTop="10dp"
    android:background="@drawable/bg_white"
    android:........ ?

>
</LinearLayout>

Like the OLX app:

Foto do APP da Olx

android android-layout
  • 1

    In versions smaller than 5.0 there is no notion of shadow, and it is a bit complicated to simulate it... My suggestion would be to create a FrameLayout encompassing the LinearLayout and put a <View> with dark and alpha background simulating a shadow or using a 9patch as background (http://stackoverflow.com/questions/4406524/how-to-set-shadow-to-a-view-in-android)... In version 5.0 there is property elevation, that this sensation of shadow (https://developer.android.com/training/material/shadows-clipping.html).

  • I tried to do it this way, but it didn’t work...<Linearlayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_marginTop="10dp" android:Elevation="2dp" android:background="@drawable/bg_white"

  • 1

    Running on a device/emulator with Android 5+? I would recommend using an Elevation of 6dp or more to get a good perception.

  • @Wakim Funciounou no 5.0 sim, mt thanks for the help.. But esseda OLX appears on my phone, and my Android is 4.4...

  • What kind of shadow do you say? From Card or Actionbar?

  • 1

    Use the Phonegap who can do this :)

  • 1

    Our @Jorgeb. migrate pro PhoneGap just to apply shadows is tense hehe. But Igor, the OLX must be using a CardView (Appcompat), I didn’t know it was this kind of shadow I wanted, this effect is very simple to achieve. If you can use the CardView da support library. If you cannot use this Drawable (https://gist.github.com/wakim/c68fcd7d13f98cc1e61b) as background.

  • @Wakim is not the case to migrate. But you should consider the phonegap :)

  • Sorry for the delay... @Wakim did not know Cardview, I will use it in my project. Thanks !

Show 4 more comments

1 answer

6


This type of effect is well used in Material Design. It is based on the CardView and/or RecyclerView.

Below I will show how easy it is to make this kind of effect.

drawable/layout_shadow_white.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#CABBBBBB"/>
            <corners android:radius="5dp" />
        </shape>
    </item>

   <item
       android:left="0dp"
       android:right="0dp"
       android:top="0dp"
       android:bottom="2dp">
       <shape android:shape="rectangle">
           <solid android:color="@android:color/white"/>
           <corners android:radius="5dp" />
       </shape>
    </item>
</layer-list>

layout/my_layout.xml 

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="80dp"
    android:layout_below="@+id/relativeLayout"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="-20dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:background="@drawable/layout_shadow_white"
    android:id="@+id/rel_anything"></RelativeLayout>

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="80dp"
    android:background="@drawable/layout_shadow_white"
    android:layout_below="@+id/rel_newgame"
    android:layout_centerHorizontal="true"
    android:id="@+id/rel_anything2"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp" />

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="80dp"
    android:background="@drawable/layout_shadow_white"
    android:id="@+id/rel_editor"
    android:layout_below="@+id/rel_culpado"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp" />

Use: android:background="@drawable/layout_shadow_white"

Upshot

inserir a descrição da imagem aqui

Browser other questions tagged android android-layout

You are not signed in. Login or sign up in order to post.