[英]I am trying to create custom modal bottom sheet with line on the top, how can I achieve that?
I tried to change the style, but apart from the round corners nothing worked.Here example of bottom sheet https://i.stack.imgur.com/6O92g.jpg .我试图改变风格,但除了圆角没有任何效果。下面是底部表https://i.stack.imgur.com/6O92g.jpg的示例。 Can anyone helps?
任何人都可以帮忙吗? Here what I tried and I got shadow line after I opened modal https://i.stack.imgur.com/uoHNA.jpg I am trying to create custom modal bottom sheet with line on the top, how can I achieve that?
在这里,我尝试了什么,在打开模态https://i.stack.imgur.com/uoHNA.jpg后得到阴影线MainAct
主要法案
class MainActivity : AppCompatActivity() {
lateinit var btnShowBottomSheet: Button
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
btnShowBottomSheet = findViewById(R.id.idBtnShowBottomSheet);
btnShowBottomSheet.setOnClickListener {
val dialog = BottomSheetDialog(this)
val view = layoutInflater.inflate(R.layout.bottom_sheet_dialog, null)
val btnClose = view.findViewById<Button>(R.id.idBtnDismiss)
btnClose.setOnClickListener {
dialog.dismiss()
}
dialog.setContentView(view)
dialog.show()
}
}
}
Bottom_sheet_xml bottom_sheet_xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/rounded_top_corners"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="20dp"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_rectangle"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
>
<!--image view for displaying course image-->
<ImageView
android:id="@+id/idIVCourse"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:src="@drawable/ic_launcher_background" />
<!--text view for displaying course name-->
<TextView
android:id="@+id/idTVCourseName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_toEndOf="@id/idIVCourse"
android:layout_toRightOf="@id/idIVCourse"
android:text="DSA Self Paced Course"
android:textColor="@color/black"
android:textSize="18sp"
android:textStyle="bold" />
<!--text view for displaying course tracks-->
<TextView
android:id="@+id/idTVCourseTracks"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/idTVCourseName"
android:layout_marginTop="10dp"
android:layout_toEndOf="@id/idIVCourse"
android:layout_toRightOf="@id/idIVCourse"
android:text="Course Tracks : 30"
android:textColor="@color/black"
android:textSize="15sp" />
<!--text view for displaying course duration-->
<TextView
android:id="@+id/idTVCourseDuration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/idTVCourseTracks"
android:layout_marginTop="10dp"
android:layout_toEndOf="@id/idIVCourse"
android:layout_toRightOf="@id/idIVCourse"
android:text="Course Duration : 4 Months"
android:textColor="@color/black"
android:textSize="15sp" />
<!--button for dismissing our dialog-->
<Button
android:id="@+id/idBtnDismiss"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/idIVCourse"
android:layout_margin="10dp"
android:text="Dismiss dialog"
android:textAllCaps="false" />
</RelativeLayout>
</RelativeLayout>
Based on the xml and code you have posted you have to make the below changes:根据 xml 和您发布的代码,您必须进行以下更改:
1.Change the xml android:background
structure to be like below. 1.改变xml
android:background
结构如下。 The drawable which has rounded corners must be set to the 2nd child of RelativeLayout instead of parent and all other RelativeLayouts must have android:background="@android:color/transparent":具有圆角的drawable必须设置为RelativeLayout的第二个子元素而不是父元素,并且所有其他RelativeLayouts必须具有android:background="@android:color/transparent":
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="@android:color/transparent">
<ImageView
android:layout_width="80dp"
android:layout_height="10dp"
android:background="@color/white"
android:layout_centerInParent="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@drawable/rounded_top_corners">
<!--image view for displaying course image-->
<ImageView
android:id="@+id/idIVCourse"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:src="@drawable/ic_launcher_background" />
<!--text view for displaying course name-->
<TextView
android:id="@+id/idTVCourseName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_toEndOf="@id/idIVCourse"
android:layout_toRightOf="@id/idIVCourse"
android:text="DSA Self Paced Course"
android:textColor="@color/black"
android:textSize="18sp"
android:textStyle="bold" />
<!--text view for displaying course tracks-->
<TextView
android:id="@+id/idTVCourseTracks"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/idTVCourseName"
android:layout_marginTop="10dp"
android:layout_toEndOf="@id/idIVCourse"
android:layout_toRightOf="@id/idIVCourse"
android:text="Course Tracks : 30"
android:textColor="@color/black"
android:textSize="15sp" />
<!--text view for displaying course duration-->
<TextView
android:id="@+id/idTVCourseDuration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/idTVCourseTracks"
android:layout_marginTop="10dp"
android:layout_toEndOf="@id/idIVCourse"
android:layout_toRightOf="@id/idIVCourse"
android:text="Course Duration : 4 Months"
android:textColor="@color/black"
android:textSize="15sp" />
<!--button for dismissing our dialog-->
<Button
android:id="@+id/idBtnDismiss"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/idIVCourse"
android:layout_margin="10dp"
android:text="Dismiss dialog"
android:textAllCaps="false" />
</RelativeLayout>
</RelativeLayout>
where @drawable/rounded_top_corners
will be:其中
@drawable/rounded_top_corners
将是:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/white" />
<corners android:topLeftRadius="30dp" android:topRightRadius="30dp"
android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>
2.You have to set a custom theme style for BottomSheetDialog with a Transparent window dialog like below: 2.您必须使用透明 window 对话框为 BottomSheetDialog 设置自定义主题样式,如下所示:
val dialog = BottomSheetDialog(this, R.style.MyBottomSheetDialog)
where R.style.MyBottomSheetDialog
is your custom BottomSheetDialog style defined in styles.xml like below:其中
R.style.MyBottomSheetDialog
是您在 styles.xml 中定义的自定义 BottomSheetDialog 样式,如下所示:
<style name="MyBottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
<item name="android:colorBackground">@android:color/transparent</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:backgroundDimAmount">0.3</item>
<item name="android:windowFrame">@null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>
After the above changes you will have a Transparent Window BottomSheetDialog with a line on top like:完成上述更改后,您将有一个透明的 Window BottomSheetDialog,顶部有一行:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.