Düğmeler
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Kullanıcılar tarafından iyi anlaşılan ve metin etiketine ihtiyaç duymayan işlemler için düğme bileşeni kullanın. Düğmeler, dairesel şekilleriyle çiplerden ayırt edilir.
Anatomi
A. İçerik
Düğmelerde simge veya metin için ayrılmış tek bir yuva bulunur. Düğmenin gerçekleştirdiği işlemle alakalı bir simge seçin. Bir simge ilgili işlemi açıklayamıyorsa en fazla üç karakterden oluşan metin kullanabilirsiniz. Bir simge işlemi net bir şekilde açıklayamıyorsa çip bileşeni kullanmayı düşünün
B. Kapsayıcı
Düğme kapsayıcıları tek bir düz renk dolguyla sınırlıdır.
Kompakt düğmeler
Kompakt düğmeler daha küçük görünse de daha büyük bir dokunma alanına sahiptir. Varsayılan dokunulabilir alan 48x48 dp'dir.
Hiyerarşi
Düğme hiyerarşisini belirtmek için farklı renk dolguları kullanın.
Yüksek vurgu
Yüksek vurgulu düğmeler, uygulama için birincil olan işlemleri içerir. Yüksek vurgulu düğmelerde kapsayıcı için birincil veya ikincil renkler, içerik için ise birincil ve ikincil renklerin üzerine uygulanmış renkler kullanın. Daha fazla bilgi için Wear Materyal Teması başlıklı makaleyi inceleyin.
Orta vurgu
Orta düzey vurgu düğmeleri, daha az kontrastlı bir renk doldurma özelliğiyle ayırt edilir. Bunlar, birincil işlemlerden daha az önemli olan işlemleri içerir. Kapsayıcı için Yüzey rengini, içerik için de Yüzeyde rengini kullanın.
Alternatif olarak, orta düzeyde vurgulu bir düğme için özel OutlinedButton bileşenini kullanın. Bu örnekte şeffaf arka plan, %60 opaklık değerine sahip birincil varyant renkli bir çizgi ve birincil renkli içerik bulunur.
Düşük vurgu (yalnızca simge)
Düşük vurgulu düğmeler, doldurulmamış olmaları nedeniyle ayırt edilir. Bu kadranlar, kadran üzerinde kompakt bir düzenlemenin gerekli olduğu daha küçük alanlar için idealdir. İçerik için "Yüzeyde" rengini kullanın.
Boyutlar
İşlemleri vurgulamak veya vurgulamamak için farklı boyutlarda düğmeler kullanın.
Büyük
Simge (30 x 30 dp)
Kapsayıcı (60 x 60 dp)
Varsayılan
Simge (26 x 26 dp)
Kapsayıcı (52 x 52 dp)
Küçük
Simge (24 x 24 dp)
Kapsayıcı (48 x 48 dp)
Çok Küçük
Simge (24 x 24 dp)
Kapsayıcı (32 x 32 dp)
En az 48 dp'lik bir dokunma hedefi oluşturmak için bu düğmenin etrafına ek dolgu eklemeniz önerilir. Bu, erişilebilirlik için minimum dokunma hedefi boyutumuzdur.
Kullanım
Kullanıcının bir aramayı kabul etme veya reddetme ya da zamanlayıcı başlatma gibi tek bir işlem yapmasını sağlamak için standart düğmeler kullanın.
Kullanıcının bir seçeneği etkinleştirmesine veya devre dışı bırakmasına (ör. haftanın günlerini seçme ve seçimini kaldırma ya da bir zamanlayıcıyı duraklatma ve yeniden başlatma) izin vermek için açma/kapatma düğmelerini kullanın.
Uyarlanabilir düzenler
Duyarlı davranış
1 düğme
Dahili dolgu aynı kalır ve düğmelerin çok fazla uzamasını önlemek ve nispi bir boyutu korumak için kenar boşlukları yüzde olarak ayarlanmalıdır.
2 düğme
2 düğme olduğunda, düğmelerin çok fazla uzamasını önlemek ve nispi bir boyutu korumak için yüzdelik dahili marjlar eklenir.
IME'ler
1 veya 2 Düğme
2 veya tek düğme kilitleme özelliğine sahip IME'ler, ekran boyutundan bağımsız olarak her zaman yan kenar boşluklarına kadar uzanır.
3 Düğme
225 dp'den küçük ekranlarda düğmeler dairesel kalır ve uzaymaz. 225 dp veya daha büyük ekranlarda düğmeler yan kenar boşluklarına kadar uzanır.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-27 UTC.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2025-07-27 UTC."],[],[],null,["# Buttons\n\nUse a [Button](/reference/kotlin/androidx/wear/compose/material/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for actions that are well understood by users and don't need a text label. Buttons are distinguished from chips by their circular shape.\n\nAnatomy\n-------\n\n\n**A. Content**\n\nButtons have a single slot reserved for an icon or text. Choose an icon that is relevant to the action the button performs. You can use text with a maximum of three characters if an icon is unable to describe the relevant action. Consider the use of a Chip component if an icon cannot clearly describe the action\n\n**B. Container**\n\nButton containers are limited to a single solid color fill.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nButton types\n------------\n\n\n**Toggle buttons**\n\n[Toggle buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) enable users to toggle between two states. \n\n**Compact buttons**\n\n[Compact buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#CompactButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) appear smaller but have a larger tappable area. The default tappable area is 48x48 dp.\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\n\nUse different color fills to denote button hierarchy.\n\n**High emphasis**\n\nHigh emphasis buttons contain actions that are primary to the app. For high emphasis buttons use Primary or Secondary colors for the container and On Primary and On Secondary colors for the content. For more information see [Wear Material Theming](/training/wearables/design/theme).\n\n**Medium emphasis**\n\nMedium emphasis buttons are distinguished by a less contrasting color fill. They contain actions that are less important than the primary actions. Use the Surface color for the container and the On Surface color for the content.\n\nAlternatively, use the custom [OutlinedButton](/reference/kotlin/androidx/wear/compose/material/package-summary#OutlinedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for a medium emphasis button. This has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content.\n**Low emphasis (icon only)**\n\n\u003cbr /\u003e\n\nLow emphasis buttons are distinguished by having no fill. They are best suited for smaller areas on the watch face where a compact arrangement is needed. Use the On Surface colour for the content.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\nUse buttons of different sizes to emphasize or de-emphasize actions.\n\n\n**Large**\n\nIcon (30 x 30 dp) \nContainer (60 x 60 dp) \n\n**Default**\n\nIcon (26 x 26 dp) \nContainer (52 x 52 dp)\n\n\u003cbr /\u003e\n\n\n**Small**\n\nIcon (24 x 24 dp) \nContainer (48 x 48 dp) \n\n**Extra Small**\n\nIcon (24 x 24 dp) \nContainer (32 x 32 dp)\n\n\nIt's recommended to add additional padding around this button to create a tap target of at least 48 dp. This is our minimum tap target size for accessibility.\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse standard buttons to enable the user to take a single action such as accepting or declining a call, or starting a timer.\n\nUse toggle buttons to allow the user to turn an option on or off, such as selecting and deselecting days of the week or pausing and restarting a timer.\n\nAdaptive layouts\n----------------\n\n### **Responsive behavior**\n\n\n**1 button**\n\nThe internal padding will remain the same, and the margins should be percentages in order to stop the buttons from stretching too far, and keeping a relative size. \n\n**2 buttons**\n\nWhen there are 2 buttons, percentage internal margins are added in order to stop the buttons from stretching too far, and keeping a relative size.\n\n\u003cbr /\u003e\n\n### **IMEs**\n\n**1 or 2 Buttons**\n\nIMEs with 2 or a single button lockup always stretch all the way to the side margins regardless of screen size.\n\n**3 Buttons**\n\nOn screens smaller than 225 dp, the buttons remain circular and do not stretch. On larger screens, 225 dp or larger, the buttons stretch all the way to the side margins."]]
