3
3
.
.
1
1
.
.
2
2
C
C
r
r
e
e
a
a
t
t
e
e
C
C
u
u
s
s
t
t
o
o
m
m
V
V
i
i
e
e
w
w
-
-
I
I
n
n
a
a
s
s
e
e
p
p
a
a
r
r
a
a
t
t
e
e
F
F
i
i
l
l
e
e
I
I
n
n
f
f
o
o
This tutorial shows how to Create Custom View in a separate File (to allow you to better organize your code).
You only need to import such File inside the File where you intend to use its Composable Functions.
Name of the File can be anything you like and it can contain multiple Composable Functions, Classes, global Variables, etc.
C
C
o
o
m
m
p
p
o
o
s
s
i
i
t
t
e
e
V
V
i
i
e
e
w
w
File - New - Kotlin File/Class - File - Name: CustomViews
MainActivity.kt
package com.example.testcompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.ui.platform.setContent
import com.example.testcompose.ui.Greeting
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Greeting(firstName = "John", lastName = "Carpenter")
}
}
}
CustomViews.kt
package com.example.testcompose.ui
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.Composable
@Composable
fun Greeting(firstName: String, lastName: String) {
Column {
Text("First Name: $firstName")
Text("Last Name: $lastName")
}
}
Output CustomViews.kt
