Разрешение в манифесте
Добавить разрешение в файл AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>
Зависимость Coil
Добавить зависимость в файл build.gradle (Module)
implementation("io.coil-kt:coil-compose:2.0.0-rc01")
MainActivity
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.meter_alc_rgb.weatherappcomposey.screens.MainScreen
import com.meter_alc_rgb.weatherappcomposey.ui.theme.WeatherAppComposeYTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
WeatherAppComposeYTheme {
MainScreen()
}
}
}
}
MainScreen
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import com.meter_alc_rgb.weatherappcomposey.R
import com.meter_alc_rgb.weatherappcomposey.ui.theme.BlueLight
@Preview(showBackground = true)
@Composable
fun MainScreen() {
Image(
painter = painterResource(id = R.drawable.weather_bg),
contentDescription = "im1",
modifier = Modifier
.fillMaxSize()
.alpha(0.5f),
contentScale = ContentScale.FillBounds
)
Column(
modifier = Modifier
.fillMaxSize()
.padding(5.dp),
) {
Card(
modifier = Modifier.fillMaxWidth(),
backgroundColor = BlueLight,
elevation = 0.dp,
shape = RoundedCornerShape(10.dp)
) {
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
modifier = Modifier.padding(top = 8.dp, start = 8.dp),
text = "20 Jun 2022 13:00",
style = TextStyle(fontSize = 15.sp),
color = Color.White
)
AsyncImage(
model = "https://cdn.weatherapi.com/weather/64x64/day/116.png",
contentDescription = "im2",
modifier = Modifier
.size(35.dp)
.padding(top = 3.dp, end = 8.dp)
)
}
}
}
}
}