A button shadow and text like the Apple App Store on Android

Question

Id like a button shadow and text like the Apple App Store. Does anyone know how I could achieve this in android studio?

Like the images below, id like to have a button with an image as a background with a greyed out section over the image and text over the top of the greyed out area with that nice shadowing like on the apple App Store.

I have a button I have created in Xcode to demonstrate what I mean.

I know how to do this in Xcode but I'm lost in android studio.

help would be much appreciated

@Khemraj thanks for the reply, but the image is the background and I want that to be 100% occupancy I only want the grey section above to be somewhat transparent with text over the top of that. Like the image above :) — BlackJack, Oct 27 '20 at 12:43

score 1 · Accepted Answer · answered Oct 27 '20 at 12:45

1

Put item in the cardView, with elevation

like this :

<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"
    android:layout_margin="6dp"
    card_view:cardUseCompatPadding="true"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="3dp">

answered Oct 27 '20 at 12:45

Alireza

446
4
15

1

Thanks for the answer! I will have to try it tomorrow when I get a chance (it’s 12am atm) – BlackJack Oct 27 '20 at 12:47
Would you know how to get the grey rectangle over the image with text over the top in card view? Would you nest another card view or something? – BlackJack Oct 27 '20 at 12:50
you should put ConstraintLayout in this cardview, then, put anything you want on it – Alireza Oct 27 '20 at 12:54
1

I have had a browse on the internet and card view is exactly what I want, and that shadow should look , I’ll need to watch a few vids but this is the right answer I was looking for, thanks – BlackJack Oct 27 '20 at 13:22

ardiien · Answer 2 · 2020-10-27T12:58:54.353

0

You can try to make it through the ConstraintLayout with shapes.

<ConstraintLayout>
  <ImageView/>
  <TextView/>
  <!-- bg for text in the bottom of the view -->
  <View/> 
</ConstraintLayout>

The main idea is providing ShapeAppearanceModel and setting it programmatically as backgroundDrawable for the ConstraintLayout (and apply some elevation in the XML).

edited Oct 27 '20 at 12:58

answered Oct 27 '20 at 12:51

ardiien

767
6
26

This is a another great way to do it. Thanks for putting in the time to answer :), I am gonna try card view as answered before but if I cant get it to work I’ll try this. – BlackJack Oct 27 '20 at 13:24
as you wish but `CardView` is a bit of an overhead (my personal opinion). – ardiien Oct 27 '20 at 13:31
An Overhead? Is it difficult to implement? I do want to use the easiest way possible because it just now worth it if it is to troublesome. – BlackJack Oct 27 '20 at 13:34
again, it's your choice. You should care not only about the difficulty lvl of implementation but also about performance. – ardiien Oct 27 '20 at 13:37
Which in you opinion preforms better and overall looks better? – BlackJack Oct 27 '20 at 13:38
definitely not the `CardView` :) – ardiien Oct 27 '20 at 15:26

score 0 · Answer 3 · answered Oct 27 '20 at 13:06

0

You can override ViewOutlineProvider with method setOutlineProvider and create any shape you want there. Then to add shadow you just need to apply elevation on it.

answered Oct 27 '20 at 13:06

Alexander Dadukin

504
3
12

A button shadow and text like the Apple App Store on Android

3 Answers3