android special button theme with shape above

Question

I'm trying to create a button that looks like that:

So I have created this style:

<style name="button_main" parent="@android:style/Widget.Button">
    <item name="android:gravity">center_vertical|center_horizontal</item>
    <item name="android:textColor">#FFFFFFFF</item>
    <item name="android:shadowColor">#FF000000</item>
    <item name="android:shadowDx">0</item>
    <item name="android:shadowDy">-1</item>
    <item name="android:shadowRadius">0.2</item>
    <item name="android:textSize">16dip</item>
    <item name="android:textStyle">bold</item>
    <item name="android:background">@drawable/button_main</item>
    <item name="android:focusable">true</item>
    <item name="android:clickable">true</item>
</style>

and applied this to the button:

<Button
    android:id="@+id/btnConnect"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="CONNECT"
    style="@style/button_main"
    android:drawableTop="@drawable/ic_connect"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/text_home" />

but this is my result:

any idea how I can add the green background to the text as well? and how can I add the white tint to the icon?

Answer 1

how can I add the white tint to the icon?

app:drawableTint="@color/white"

Edit:

Create separate TextView inside root layout below to button

Try This:

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:background="@color/green">

    <Button
        android:id="@+id/btnConnect"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/button_main"
        android:drawableTop="@drawable/ic_wifi_24"
        app:drawableTint="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_margin="@dimen/margin_12dp"
        app:layout_constraintTop_toBottomOf="@+id/text_home" />

        <TextView
            android:id="@+id/tvConnect"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            app:layout_constraintTop_toBottomOf="@id/btnConnect"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:text="Connect"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

Above code will give expected result might be you have to adjust padding n margin lil bit .