Eu procurei e não consegui encontrar uma maneira adequada de fazer isso. Eu quero ter os seguintes efeitos de sombra em minhas visualizações:
Para ser sincero, não sei se este segundo é feito aplicando o efeito de sombra. Alguma ideia?
Eu procurei e não consegui encontrar uma maneira adequada de fazer isso. Eu quero ter os seguintes efeitos de sombra em minhas visualizações:
Para ser sincero, não sei se este segundo é feito aplicando o efeito de sombra. Alguma ideia?
Respostas:
Sei que essa pergunta já foi respondida, mas quero que você saiba que encontrei um drawable
em Android Studio
que é muito semelhante às fotos que você tem na pergunta: Dê uma olhada nisso:
android:background="@drawable/abc_menu_dropdown_panel_holo_light"
Se parece com isso:
Espero que seja útil
Editar
A opção acima é para as versões mais antigas do, Android Studio
portanto, talvez você não encontre. Para versões mais recentes:
android:background="@android:drawable/dialog_holo_light_frame"
Além disso, se você quiser ter seu próprio formato personalizado, sugiro usar um software de desenho como o Photoshop
e desenhá-lo.
Não se esqueça de salvá-lo como .9.png
arquivo (exemplo my_background.9.png
:)
Leia a documentação: Draw 9-patch
Editar 2
Uma solução ainda melhor e menos trabalhosa é usar um CardView
e definir app:cardPreventCornerOverlap="false"
para evitar que as visualizações se sobreponham às bordas:
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="2dp"
app:cardElevation="2dp"
app:cardPreventCornerOverlap="false"
app:contentPadding="0dp">
<!-- your layout stuff here -->
</android.support.v7.widget.CardView>
Além disso, certifique-se de ter incluído a versão mais recente no build.gradle
, a atual é
compile 'com.android.support:cardview-v7:26.0.0'
/<sdk-path>/extras/android/support
.
cardView
Estou usando o Android Studio 0.8.6 e não consegui encontrar:
android:background="@drawable/abc_menu_dropdown_panel_holo_light"
então eu encontrei isto:
android:background="@android:drawable/dialog_holo_light_frame"
e é assim:
colocar um fundo de @android:drawable/dialog_holo_light_frame
, dá sombra, mas você não pode mudar a cor de fundo nem o estilo da borda, então é melhor se beneficiar da sombra disso, enquanto ainda pode colocar um fundo através da lista de camadas
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--the shadow comes from here-->
<item
android:bottom="0dp"
android:drawable="@android:drawable/dialog_holo_light_frame"
android:left="0dp"
android:right="0dp"
android:top="0dp">
</item>
<item
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp">
<!--whatever you want in the background, here i preferred solid white -->
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>
salve-o na pasta drawable em dizer shadow.xml
para atribuí-lo a uma visão, no arquivo de layout xml defina o fundo dele
android:background="@drawable/shadow"
Crie card_background.xml na pasta res / drawable com o seguinte código:
<?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="#BDBDBD"/>
<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="#ffffff"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
Em seguida, adicione o seguinte código ao elemento para o qual deseja o layout do cartão
android:background="@drawable/card_background"
a linha a seguir define a cor da sombra do cartão
<solid android:color="#BDBDBD"/>
O CardView oferece a verdadeira sombra no Android 5+ e possui uma biblioteca de suporte. Basta envolver sua visualização com isso e pronto.
<android.support.v7.widget.CardView>
<MyLayout>
</android.support.v7.widget.CardView>
Requer a próxima dependência.
dependencies {
...
compile 'com.android.support:cardview-v7:21.0.+'
}
CardView
também possui níveis de sombra variáveis para diferentes elevações no modo de compatibilidade.
Use a propriedade de elevação para obter um efeito de sombra:
<View ...
android:elevation="2dp"/>
Deve ser usado apenas após a v21, verifique este link: http://developer.android.com/training/material/shadows-clipping.html
Isso pode ser tarde, mas para aqueles que ainda estão procurando uma resposta para isso eu encontrei um projeto no git hub e este é o único que realmente atende às minhas necessidades. android-materialshadowninepatch
Basta adicionar esta linha em sua dependência build.gradle
compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'
Felicidades. polegar para o criador! happycodings
Eu sei que isso é estupidamente hacky,
mas se você quiser oferecer suporte na v21, aqui estão minhas conquistas.
rectangle_with_10dp_radius_white_bg_and_shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Shadow layers -->
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_1" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_2" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_3" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_4" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_5" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_6" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_7" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_8" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_9" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_10" />
</shape>
</item>
<!-- Background layer -->
<item>
<shape>
<solid android:color="@android:color/white" />
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
rectangle_with_10dp_radius_white_bg_and_shadow.xml (v21)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="10dp" />
</shape>
view_incoming.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
android:elevation="7dp"
android:gravity="center"
android:minWidth="240dp"
android:minHeight="240dp"
android:orientation="horizontal"
android:padding="16dp"
tools:targetApi="lollipop">
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Hello World !" />
</LinearLayout>
Aqui está o resultado:
Sob v21 (isso é o que você fez com xml)
Acima de v21 (renderização de elevação real)
Se você precisar que as sombras sejam aplicadas corretamente, você deve fazer o seguinte.
Considere esta visualização, definida com um drawable de fundo:
<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
O drawable de fundo é definido como um retângulo com cantos arredondados:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
Esta é a maneira recomendada de aplacar sombras, verifique https://developer.android.com/training/material/shadows-clipping.html#Shadows
Use a propriedade de elevação para efeito de sombra:
<YourView
...
android:elevation="3dp"/>
Crie um drawable de plano de fundo como este para mostrar a sombra arredondada.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<corners android:radius="4dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp" android:top="1dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp" android:top="1dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp" android:top="1dp" />
<solid android:color="#20d5d5d5" />
</shape>
</item>
<item>
<shape>
<corners android:radius="6dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp" android:top="1dp" />
<solid android:color="#30cbcbcb" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp" android:top="1dp" />
<solid android:color="#50bababa" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="@color/gray_100" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
Esta pergunta pode ser antiga, mas para qualquer pessoa no futuro que queira uma maneira simples de obter efeitos de sombra complexos, verifique minha biblioteca aqui https://github.com/BluRe-CN/ComplexView
Usando a biblioteca, você pode alterar as cores das sombras, ajustar as bordas e muito mais. Aqui está um exemplo para conseguir o que você busca.
<com.blure.complexview.ComplexView
android:layout_width="400dp"
android:layout_height="600dp"
app:radius="10dp"
app:shadow="true"
app:shadowSpread="2">
<com.blure.complexview.ComplexView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:color="#fdfcfc"
app:radius="10dp" />
</com.blure.complexview.ComplexView>
Para alterar a cor da sombra, use app: shadowColor = "seu código de cor".
use esta forma como plano de fundo:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:drawable/dialog_holo_light_frame"/>
<item>
<shape android:shape="rectangle">
<corners android:radius="1dp" />
<solid android:color="@color/gray_200" />
</shape>
</item>
</layer-list>