Home > Software design >  (Android) How can I put a drop shadow in a Custom View?
(Android) How can I put a drop shadow in a Custom View?

Time:11-20

I want to create a Custom Button with the following design using View and give it a drop shadow like the design below.1

The shadow options are: box-shadow: 10px 7px 25px 0px #0000001F

  • main_round_teamsbtn.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:padding="10dp"
            android:shape="rectangle">
            <solid android:color="@color/btn_color" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="105dp" />
        </shape>
    </item>
</layer-list>

  • teams_main_btn.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/main_round_teamsbtn"

    android:paddingStart="16dp">

    <TextView
        android:id="@ id/teamsHead"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/notosans_bold"
        android:includeFontPadding="false"
        android:text="원하는\n공모전을\n찾아보세요"
        android:textColor="@color/black"
        android:textSize="22sp"
        app:layout_constraintBottom_toTopOf="@ id/teamsSub" />

    <TextView
        android:id="@ id/teamsSub"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/notosans_regular"
        android:text="현재 구하고 있는 팀 둘러보기"
        android:textColor="#8C8C8C"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="parent" />

    <ImageView
        android:id="@ id/teamsImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_marginEnd="4dp"
        android:background="@drawable/findteams_btn"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0" />


</androidx.constraintlayout.widget.ConstraintLayout>
  • main.xml
...
<com.example.moizar.MainTeamsBtnView
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
...

I want an answer how to give a shadow

CodePudding user response:

I doubt you can achieve what you want by code, even if this is possible you will write a lot of code, probably involving RenderScript or some new APIs on Android 12...

consider using your image as 9-patch drawable with properly marked content/stretch areas. content (text?) would be full height and half width, stretch area only first pixels

CodePudding user response:

  • teams_main_btn.xml

You can use attributes elevation in TextView or ImageView.

android:elevation= "10dp"

You can watch this link for more:

https://www.youtube.com/watch?v=nNHChjTZCtw&ab_channel=CodeAndDesign

  • Related