Button Bottom Center Shadow Android

23 Views Asked by At

I am trying to add a shadow in the Button only at the bottom center. Using the Button does not change the color of the button so I used a Linear Layout. The result I got is not satisfactory. I used the following:

fragment_on_boarding.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.onboarding.OnBoardingFragment">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/curve_top_left_right"
            android:backgroundTint="@color/white"
            android:paddingLeft="@dimen/glob_padding"
            android:paddingTop="30dp"
            android:paddingRight="@dimen/glob_padding"
            android:paddingBottom="30dp"
            app:layout_constraintBottom_toBottomOf="parent">

            <Button
                android:id="@+id/btn_login"
                style="@style/Theme.Outlined.Button.White"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginEnd="10dp"
                android:text="@string/btn_text_login"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/btn_signup"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

<!--            <Button-->
<!--                android:id="@+id/btn_signup"-->

<!--                android:layout_width="0dp"-->
<!--                android:layout_height="wrap_content"-->
<!--                android:layout_marginStart="10dp"-->
<!--                android:background="@drawable/btn_shadow_bottom"-->
<!--                android:text="@string/btn_text_signup"-->
<!--                android:textColor="@color/white"-->
<!--                app:layout_constraintBottom_toBottomOf="parent"-->
<!--                app:layout_constraintEnd_toEndOf="parent"-->
<!--                app:layout_constraintStart_toEndOf="@id/btn_login"-->
<!--                app:layout_constraintTop_toTopOf="parent" />-->

            <LinearLayout
                android:id="@+id/btn_signup"
                android:background="@drawable/btn_shadow_bottom"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:gravity="center"
                android:paddingLeft="@dimen/btn_padding_left_right"
                android:paddingRight="@dimen/btn_padding_left_right"
                android:paddingTop="@dimen/btn_padding_top_bottom"
                android:paddingBottom="@dimen/btn_padding_bottom"
                android:orientation="vertical"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/btn_login"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/btn_text_signup"
                    android:textSize="@dimen/text_body_1"
                    android:textAllCaps="true"
                    android:textColor="@color/white" />

            </LinearLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

btn_shadow_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true">
        <layer-list>
            <item android:left="35dp" android:right="35dp">
                <shape android:shape="rectangle">

<!--                    <solid android:color="#1A0F345A"/>-->
                    <gradient
                        android:angle="90"
                        android:centerColor="#00000000"
                        android:centerY="0.1"
                        android:endColor="#01000000"
                        android:startColor="#09000000" />

                </shape>
            </item>
            <item android:bottom="4dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/glob_primary"/>
                    <corners android:radius="90dp"/>
                </shape>

            </item>

        </layer-list>
    </item>
</selector>

Preferred is if I can somehow show a shadow on Button but if not possible Linear layout or any layout works.

Desired Result Image

Desired Result Image

0

There are 0 best solutions below