The example below shows how a custom widget will be implemented and which component it will register. It will have a text and two buttons inside a linear layout. The buttons in this component will be responsible for increasing and decreasing the text’s size and the screen will be like the image below:
@RegisterWidget
annotation and extending the WidgetView
class.Follow the next steps to create and customize a component and a widget:
"CustomWidgetTitleIncrease"
;@RegisterWidget
;CustomWidgetTitleIncrease.kt
@RegisterWidget
class CustomWidgetTitleIncrease: WidgetView() {
override fun buildView(rootView: RootView): View {
TODO("not implemented")
}
.XML
configuration file and copy and paste the content below, it will create a layout:title_increase_component_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tv_example_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="Example" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:id="@+id/bt_increase"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="B1" />
<Button
android:id="@+id/bt_decrease"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="B2" />
</LinearLayout>
</LinearLayout>
Now, you have to create the component:
TitleIncreaseComponent
. This class will register how the component work and the business rule;class TitleIncreaseComponent(context: Context) : LinearLayout(context) {
init {
View.inflate(context, R.layout.title_increase_component_layout, this)
changeTitleSize()
}
fun setTitleText(title: String) {
tvExampleTitle.text = title
}
fun setTitleButton1(titleButton:String){
btIncrease.text = titleButton
}
fun setTitleButton2(titleButton:String){
btDecrease.text = titleButton
}
private fun changeTitleSize(){
var size = tvExampleTitle.textSize
tvExampleTitle.textSize = size
Toast.makeText(context, size.toString(), Toast.LENGTH_SHORT).show()
val textView = findViewById<TextView>(R.id.tvExampleTitle)
val b1 = findViewById<Button>(R.id.btIncrease)
val b2 = findViewById<Button>(R.id.btDecrease)
b1.setOnClickListener {
if(size < 50){
size += 5f
tvExampleTitle.textSize = size
}
Toast.makeText(context, size.toString(), Toast.LENGTH_SHORT).show()
}
b2.setOnClickListener {
if(size > 5){
size -= 5f
tvExampleTitle.textSize = size
}
Toast.makeText(context, size.toString(), Toast.LENGTH_SHORT).show()
}
}
}
The layout and the component are defined, it is necessary to finish the configuration of the customized widget.
CustomWidgetTitleIncrease.kt
@RegisterWidget
class CustomWidgetTitleIncrease(
private val title: String,
private val buttonTitle1: String,
private val buttonTitle2: String
) : WidgetView() {
override fun buildView(rootView: RootView) =
TitleIncreaseComponent(rootView.getContext()).apply {
setTitleText(title)
setTitleButton1(buttonTitle1)
setTitleButton2(buttonTitle2)
}
}
The customized widget is now ready, the component can be displayed.
MainActivity.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(
CustomWidgetTitleIncrease(
"Example Title",
"Increase",
"Decrease"
).buildView(rootView = object : RootView {
override fun getContext() = this@MainActivity
override fun getLifecycleOwner() = this@MainActivity
})
)
}
}
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.