Weather App Jetpack Compose #2

Разрешение в манифесте

Добавить разрешение в файл 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)
)
}
}
}

}
}

Добавить комментарий

Ваш адрес email не будет опубликован.