5
5
V
V
i
i
e
e
w
w
M
M
o
o
d
d
i
i
f
f
i
i
e
e
r
r
s
s
I
I
n
n
f
f
o
o
Following tutorials show how to use View Modifiers.
View Modifiers don't really modify a View (despite their name).
Instead they create new Parent View and place modified View inside it as its Child.
Modifiers are applied from the outside layer toward the Composable in the center.
V
V
i
i
e
e
w
w
M
M
o
o
d
d
i
i
f
f
i
i
e
e
r
r
s
s
v
v
s
s
C
C
o
o
n
n
t
t
a
a
i
i
n
n
e
e
r
r
V
V
i
i
e
e
w
w
s
s
View Modifiers are similar to Container Views
since they contain a single child View (modified View)
But unlike Container Views, View Modifiers are declared in the opposite direction
with Container Views first you declare Container View and then you list its children
with View Modifiers first you declare a child and then you declare View Modifier (Container)
O
O
r
r
d
d
e
e
r
r
o
o
f
f
M
M
o
o
d
d
i
i
f
f
i
i
e
e
r
r
s
s
In Android Compose resulting Image is being constructed from the outside layer toward the Composable in the center.
This means that first defined Green border is outer border and the last defined Red border is inner border .
This is very confusing since Green Modifier that is closest to Text Composable in the Code is furthest from it in the result.
This is in contrast to SwiftUI where Modifiers appear in the same order both in the Code and in the resulting Image.
Modifier that is closest to the Composable in the Code is also closest to it in the resulting Image.
If you want to imagine that resulting Image is being constructed from the center where your Composable is positioned
(like in SwiftUI) then Modifiers are applied in the opposite order from which they are given (from the bottom upward).
So if you have Text Composable with two border Modifiers
border Modifier that is furthest away from the Text Composable in the Code (the bottom Red one)
will be closest to the Text Composable in the resulting Image
Modifiers are applied from outer toward inner layer
Applying .border(2.dp, Color.Green) to the outmost layer
Applying .padding(50.dp) going inward
Applying .border(2.dp, Color.Red) to the innermost layer
MainActivity.kt
package com.example.myapplication
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.unit.dp
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Text("Hi there!",
Modifier
.border(2.dp, Color.Green)
.padding(50.dp)
.border(2.dp, Color.Red)
)
}
}
}
Output