CODEWITHSUNDEEP
androidandroid-buttonandroid-stylesandroid-dialogfragmentandroid-bottomsheetdialog
Md Jubayer
Md Jubayer

Reputation: 272

Bottom Sheet button custom style not working

In my BottomSheetDialogFragment, I have a button, I want to make this button background rounded with a grey color border.

Here is my rounded background drawable "rounded_tranparent_background.xml":

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#FFF" />
<stroke
    android:width="1dp"
    android:color="#8A8383" />
<corners
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp" />
 </shape>

I applied this background to my bottom sheet button.

Here is the bottom sheet layout code:

<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">


<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btnFollowUnfollow"
        android:background="@drawable/rounded_tranparent_background"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/avenir_next_ltpro_medium"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="Unfollow"
        android:textColor="@color/colorGreyDark"
        app:layout_constraintBaseline_toBaselineOf="@+id/tvTitle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.71"
        app:layout_constraintStart_toEndOf="@+id/tvTitle" />

    //...other code...

 </androidx.constraintlayout.widget.ConstraintLayout>

 </layout>

Here is my style for the bottom sheet dialog

<style name="AppBottomSheetDialogTheme"
    parent="Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="colorPrimary">@color/colorBlue</item>
    <item name="colorPrimaryDark">@color/colorBlueDark</item>
    <item name="colorAccent">@android:color/transparent</item>
</style>

After applying all this code I couldn't able to achieve what I am looking for. The design I am wanted is: button design I am looking for

and what I am getting button design I am getting now

how can I achieve my custom design at the button in bottom sheet dialog?

Upvotes: 3

Views: 5340

Answers (4)

Petar Barac
Petar Barac

Reputation: 21

It appears that BottomSheetFragment is overriding your current theme so you must add this line of code inside Button. Worked for me.

<Button         
android:theme="@style/Theme.YOURTHEME"
/>

Upvotes: 2

Peter Nemeckay
Peter Nemeckay

Reputation: 41

This fix worked for me:

<Button        
    android:background="@drawable/rounded_tranparent_background"
    ...

Add both "android:backgroundTint" and app:backgroundTint:

<Button        
    android:background="@drawable/rounded_tranparent_background"
    android:backgroundTint="@null"
    app:backgroundTint="@null"
    ...

Also my button theme definition is ignored in BottomSheetDialogFragment

<-- Themes.xml -->
<style>
    <item name="materialButtonStyle">MyButtonStyle</item>

<!-- So quick fix: -->
<Button        
     android:background="@drawable/rounded_tranparent_background"
     android:theme="@style/MyButtonStyle"

Upvotes: 4

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364730

You can use a simple MaterialButton:

        <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cornerRadius="10dp"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:textColor="..."
            app:strokeColor="..."/>

enter image description here

Upvotes: 6

Mustafo aka Shokhrukh Makmudov
Mustafo aka Shokhrukh Makmudov

Reputation: 582

For example, you can use custom drawable for your button.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    tools:ignore="ResourceName">
    <solid android:color="@color/inside_color" />

    <stroke
        android:color="@color/border_color"
        android:width="3px" />
    <corners android:radius="16dp" />

</shape>

The output will be something like that

enter image description here

Upvotes: 0

Related Questions