0

I want to recreate the style of the music album tiles that can be found in Google Play Music. They look like this:

Google Play Music Screenshot

In the above image as you can see, there are 'tiles' which contain the album art, title and artists of the songs.

So far I have got to this:

My Attempt

Using this XAML style:

<Grid Cursor="Hand" HorizontalAlignment="Left" Height="218" Margin="10" VerticalAlignment="Top" Width="170" Background="Transparent">
    <Grid.Effect>
         <DropShadowEffect Opacity="0.4" Direction="230" ShadowDepth="2" BlurRadius="2" RenderingBias="Quality"/>
    </Grid.Effect>
    <Image RenderOptions.BitmapScalingMode="Fant" Source="{Binding AlbumArt}" VerticalAlignment="Top"/>
    <Grid Height="48" VerticalAlignment="Bottom" Background="White">
        <TextBlock Text="{Binding Title}" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="Roboto" FontSize="15" Foreground="#FF2E2E2E" Margin="7,7,0,0" Width="140"/>
        <TextBlock Text="{Binding Artists}" VerticalAlignment="Bottom" HorizontalAlignment="Left" FontFamily="Roboto" Foreground="#FF6E6E6E" Margin="7,0,0,6"/>
        <TextBlock HorizontalAlignment="Right" Margin="0,8,7,0" TextWrapping="Wrap" Text="&#xF142;" VerticalAlignment="Top" FontFamily="FontAwesome" FontSize="17" Foreground="#FF9C9C9C" Width="3" Height="14"/>
    </Grid>
</Grid>

Now that might look just OK but I want to make it closer in resemblance. I want to know these as well:

  • Have I used the correct font, i.e., are they using Roboto too? As far as I know Google uses Roboto in most of their apps and it looks quite good but in my app it looks a little thin. I guess I'm not using the correct font weight or it might be I'm using the wrong font.
  • The shadow is probably the main thing wrong with my attempt. Seeking advice on that.

Thanks in advance.

  • 1
    I suggest you inspect the elements on the website itself for the CSS. You can find the font weight doing that or I like to use fontface ninja. – AndrewH Feb 16 '16 at 19:21
  • @AndrewH Hmm, I would do that but it's an android app and Google Play Music on Web is not available in my country... However thanks for your suggestion. Any opinion on the shadow/border? – Fᴀʀʜᴀɴ Aɴᴀᴍ Feb 16 '16 at 19:23
  • @FᴀʀʜᴀɴAɴᴀᴍ, I would recommend a VPN for when something isn't available in a certain country. However I can confirm that they use Roboto and their box shadow is ` 0 2px 4px rgba(0,0,0,0.1);` All that being said this question seems off-topic for GD.SE. – Hanna Feb 17 '16 at 0:06
1

Card Shadow

.card-content {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: #fff;
    height: 100%;
    position: relative;
    text-decoration: none;
    vertical-align: top;
}

Font Title (Roboto - Light)

.card .title {
    color: #212121;
    display: block;
    font-size: 16px;
    line-height: 18px;
    max-height: 36px;
    min-height: 18px;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}

Font Subtitle (Roboto - Light)

.card .subtitle {
    color: #616161;
    display: inline-block;
    font-size: 13px;
    line-height: 16px;
    margin: 1px 0;
    max-width: 132px;
    overflow: hidden;
    white-space: nowrap;
}

Here is a rough example https://jsfiddle.net/qtx5acfL/4/

How I got the values

I went to the website https://play.google.com/store?hl=en. This website may not be available in all areas. Right click on the webpage and select Inspect Element. Hover over the part you want to know and on the right you will see all of the CSS rules.

If I didn't have access to the website

There are conversions for the dropshadow that you can find searching Google that were made for Photoshop/Illustrator but you can use the values in any program. I think this is a level 1 shadow.

Google uses the font Roboto for Android.

  • Can you add a Codepen/JsFiddle recreating one of the tiles? Image... title.. don't matter. It would help me understand, as it is that I'm using WPF and not HTML. – Fᴀʀʜᴀɴ Aɴᴀᴍ Feb 16 '16 at 19:34
  • @FᴀʀʜᴀɴAɴᴀᴍ updated answer with rough example – AndrewH Feb 16 '16 at 19:54
  • @AndrewH You might include how you got these values – Zach Saucier Feb 16 '16 at 20:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.