How to Display Medal in Android?

Medal in Android is used to give a medal effect to your Android App. You can get to see this MedalView in most of the mobile games. Where this medal view is displayed after completing levels. Also, MedalView can be displayed in most of the coding sites for giving the ranking to the participants. In this article, we are going to learn how to display Medals on Android. A sample GIF is given below to get an idea about what we are going to do in this article.

Applications of MedalLayout

• This MedalLayout can be used in some of the apps to rank their participants who have scored more.
• It can be used in most of the coding platform to rank their participants who have scored more points.
• This Medal Layout can be seen in most of the games. In which the player is awarded by medal after the completion of the level.

Attributes of MedalLayout

Attributes	Description
direction	The direction of medal animation
speed	Speed of Medal animation
degreeX	Rotation degree of X-axis
degreeY	Rotation degree of Y-axis
type	The target of Medal Animation to View Group
autoStart	Medal Animation starts automatically
loop	Loop of Medal Animation
turns	Number of turns per loop

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. 

Step 2: Add dependency of the library in build.gradle file

Navigate to gradle scripts and then to build.gradle(Module) level. Add below line in build.gradle file in the dependencies section.

implementation “com.github.skydoves:medal:1.0.4”

After adding dependency click on the “sync now” option on the top right corner to sync the project.

Step 3: Working with the activity_main.xml file

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.skydoves.medal.MedalLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_weight="1"
        app:direction="right"
        app:speed="1500"
        app:turn="1">

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:scaleType="centerInside"
            android:src="@drawable/medal1" />
    </com.skydoves.medal.MedalLayout>

</RelativeLayout>

Output: