In my BottomSheetDialogFragmen
t, 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:
how can I achieve my custom design at the button in bottom sheet dialog?
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="..."/>