Yazılımınızın sade, etkili ve işlevselliği iyi olan bir arayüz tasarımına sahip olması oldukça büyük bir öneme sahiptir.
Bu makale Compose tasarımında kullanıcıdan geri bildirim almayı sağlayan Alert Dialog penceresini oluşturmayı açıklayacaktır.
Dilerseniz Jetpack Compose ile Adım Adım Tasarım makalemi okuyarak Jetpack Compose hakkında detaylı bilgi edinebilirsiniz.
Örnek görüntü;
Aynı görüntüyü Android View (Xml) tasarımı ile oluşturmayı anlatan AlertDialog’u Radius Yapma makalesini de inceleyebilirsiniz.
Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.
1-Compose Proje Oluşturma
Compose kullanabilmek için Android Studio Arctic Fox veya üst sürümlerden birini indirmeniz gerekir. Android Studio’da File > New yolunu takip edip New Project ekranında Empty Compose Activity arayüz taslağını seçmelisiniz. Next yapıp projenizi oluşturun.
2-Gerekli Kütüphanelerin Eklenmesi
Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Material3 kütüphanesini yüklüyoruz. Bazı Android Studio sürümleri bu kütüphaneyi kendiside ekleyebiliyor.
1 |
implementation 'androidx.compose.material3:material3' |
3- Alert Dialog Oluşturma
Material kütüphanesinde barınan AlertDialog() fonksiyonu sayesinde Alert Dialog penceremizi oluşturacağız. Kullanıcıdan geri bildirim akabilmek için confirmButton ve dismissButton adında butonlar bulunmaktadır. confirmButton onaylama butonu, dismissButton onaylamadığını anlatmak için kullanılır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
import android.os.Bundle import android.widget.Toast import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.* import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.* import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.* import com.smality.dialogwithcompose.ui.theme.DialogWithComposeTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { DialogWithComposeTheme { Surface(color =Color.Black) { DialogMessageExample() } } } } } @Composable fun DialogMessageExample() { val dialogStatus = remember { mutableStateOf(false) } val myContext = LocalContext.current Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { //UPLOAD FİLE buttonunu oluşturma ve renklendirme Button(onClick = { dialogStatus.value = true }, border = BorderStroke(1.dp, Color(0xFFFF4B06)), colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFFF7B21))) { Text(text = "UPLOAD FİLE", color = Color.White) } if (dialogStatus.value){ //Alert Dialog penceresini oluşturma AlertDialog( onDismissRequest = { dialogStatus.value = true }, //Ünlem resmini ve başlığı oluşturup, tasarımda yerleştirme title = { Column( modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { Image(painter = painterResource(R.drawable.warn), contentDescription = "") Spacer(modifier = Modifier.height(10.dp)) Text(text = "Upload Attention!", color = Color.Black, fontSize = 24.sp, fontWeight = FontWeight.ExtraBold ) } }, text = { Text(text = "Your file is over 3MB, this may harm your application", color = Color.Gray, fontSize = 16.sp)}, //Alert Dialog arka plan rengini belirleme containerColor = Color.White, //Alert Dialog'un köşelerini yuvarlatılmış görünüm sağlama shape = RoundedCornerShape(35.dp), //Onaylama butonunu oluşturma confirmButton = { Column( modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { Button( onClick = { dialogStatus.value = false Toast.makeText(myContext,"Confirm button is clicked",Toast.LENGTH_SHORT).show() }, border = BorderStroke(1.dp, Color(0xFFFF4B06)), colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFFF7B21)), modifier = Modifier.width(150.dp) ) { Text(text = "CONTİNUE",color = Color.White, fontSize = 16.sp) } } }/*, dismissButton = { Button() { Text(text = "NO",color = Color.Green, fontSize = 18.sp) } }*/) } } } |
Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.