chore: sync content to repo (#9823)

Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>
2026-09-24 15:00:31 +08:00 · 2026-04-06 11:07:29 +02:00
parent 61d25d9627
commit 39ccf424f7
16 changed files with 49 additions and 48 deletions
@@ -1,11 +1,8 @@
 # BottomSheet

-`Bottom sheets` are surfaces containing supplementary content that are anchored to the bottom of the screen.
-
-There are several attributes that can be used to adjust the behavior of both standard and modal bottom sheets.
-
-Behavior attributes can be applied to standard bottom sheets in xml by setting them on a child View set to `app:layout_behavior` or programmatically.
+A BottomSheet is a UI pattern that presents supplementary content from the bottom edge of the screen. It typically appears as a sheet that slides up to reveal more information or options related to the current screen or selected item. Users can often dismiss it by swiping down or tapping outside of it.

 Visit the following resources to learn more:

- [@official@Android developers: Bottom Sheets](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetDialog)
+- [@official@Bottom sheets  |  Jetpack Compose  |  Android Developers](https://developer.android.com/develop/ui/compose/components/bottom-sheets)
+- [@video@Full Guide to Bottom Sheets - UX With Material3](https://www.youtube.com/watch?v=VxgWUdOKgtI)
@@ -1,10 +1,8 @@
-# Buttons
+# Button

-A `button` consists of text or an icon, or both, that communicates what action occurs when the user taps it.
-
-Buttons are UI widgets that allow users to interact with an application by tapping on them. A button typically consists of text, an icon, or a combination of both, and communicates what action will occur when the user taps it.
+A button is a fundamental UI element that triggers an action when tapped or clicked by the user. It allows users to initiate specific tasks within an application, such as submitting a form, navigating to another screen, or executing a function. Buttons typically consist of text or an icon that clearly indicates their purpose.

 Visit the following resources to learn more:

- [@official@Android Developers: Button](https://developer.android.com/develop/ui/views/components/button)
- [@official@Create a Button - Android](https://developer.android.com/quick-guides/content/create-button)
+- [@official@Button  |  Jetpack Compose  |  Android Developers](https://developer.android.com/develop/ui/compose/components/button)
+- [@article@A Comprehensive Guide to Buttons and Actions in Jetpack Compose | by Ramadan Sayed | Medium](https://medium.com/@ramadan123sayed/a-comprehensive-guide-to-buttons-and-actions-in-jetpack-compose-50968cf030f7)
@@ -1,6 +1,6 @@
 # ConstraintLayout

-Lets you create large, complex layouts with a flat view hierarchy—no nested view groups. It's similar to `RelativeLayout` in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use. Its available on xml and jetpack compose.
+ConstraintLayout is a layout manager in Android that gives you flexible control over the positioning and sizing of views within your user interface. It allows you to create complex layouts without nesting multiple view groups, which can improve performance. Views are positioned by defining constraints relative to other views or the parent layout.

 Visit the following resources to learn more:

@@ -1,5 +1,8 @@
-# Dialogs
+# Image
+
+An image, in the context of Android development, refers to a visual representation displayed within an application's user interface. It allows developers to incorporate graphics, photographs, or illustrations into their apps to enhance visual appeal, provide context, or convey information. Images can be static or dynamically loaded from various sources, such as local storage, network resources, or generated programmatically.

 Visit the following resources to learn more:

- [@official@Android Developers: Dialogs](https://developer.android.com/guide/fragments/dialogs)
+- [@official@Loading images  |  Jetpack Compose  |  Android Developers](https://developer.android.com/reference/kotlin/androidx/compose/foundation/Image.composable)
+- [@official@Working with images](https://developer.android.com/develop/ui/compose/graphics/images)
@@ -1,7 +1,9 @@
-# EditText
+# TextField

-`EditText` is a fundamental UI element in Android Studio, used for allowing users to input and edit text within an application. It is a subclass of `TextView` that provides additional features to handle user input.
+A TextField allows users to input and edit text on the screen. It provides a visual component, such as a box or line, where users can type in characters, typically using an on-screen keyboard or physical keyboard. TextFields are fundamental for collecting user input in forms, search bars, messaging apps, and various other interactive elements.

 Visit the following resources to learn more:

- [@official@Android developers: EditText](https://developer.android.com/reference/android/widget/EditText)
+- [@official@TextField](https://developer.android.com/reference/kotlin/androidx/compose/material3/TextField.composable#TextField(androidx.compose.foundation.text.input.TextFieldState,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,androidx.compose.material3.TextFieldLabelPosition,kotlin.Function1,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.text.input.InputTransformation,androidx.compose.foundation.text.input.OutputTransformation,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.input.KeyboardActionHandler,androidx.compose.foundation.text.input.TextFieldLineLimits,kotlin.Function2,androidx.compose.foundation.ScrollState,androidx.compose.ui.graphics.Shape,androidx.compose.material3.TextFieldColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource))
+- [@official@Configure text fields  |  Jetpack Compose  |  Android Developers](https://developer.android.com/develop/ui/compose/text/user-input?textfield=state-based)
+- [@article@Comprehensive Guide to TextFields in Jetpack Compose](https://medium.com/@ramadan123sayed/comprehensive-guide-to-textfields-in-jetpack-compose-f009c4868c54)
@@ -1,7 +1,8 @@
-# Frame Layout
+# Box Layout

-**FrameLayout** is a simple ViewGroup subclass in Android that is designed to hold a single child view or a stack of overlapping child views. It positions each child in the top-left corner by default and allows them to overlap on top of each other, which makes it useful for situations where you need to layer views on top of one another.
+A Box layout allows you to arrange UI elements in a single direction, either vertically or horizontally. It's a simple and effective way to organize views in a row or a column, providing control over how they are stacked and spaced. This layout is useful when you want to create linear arrangements of UI components in your Android app.

 Visit the following resources to learn more:

- [@official@Android developers: Frame Layout](https://developer.android.com/reference/android/widget/FrameLayout)
+- [@official@Box](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Box.composable#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1))
+- [@article@A Comprehensive Guide to Box in Jetpack Compose](https://medium.com/@ramadan123sayed/a-comprehensive-guide-to-box-in-jetpack-compose-a0eb3838b897)
@@ -1,6 +1,6 @@
 # ImageView

-Displays image resources, for example Bitmap or Drawable resources. ImageView is also commonly used to apply tints to an image and handle image scaling.
+ImageView is a UI component that displays images in an Android application. It's used to show pictures, icons, and other visual content to users. You can set the image source from a variety of resources, including local files, drawables, or URLs. ImageView offers various scaling options to fit the image within its bounds and can also handle image transformations.

 Visit the following resources to learn more:

@@ -5,4 +5,5 @@
 Visit the following resources to learn more:

 - [@official@Jetpack Compose](https://developer.android.com/jetpack/compose)
+- [@official@Compose layout basics](https://developer.android.com/develop/ui/compose/layouts/basics)
 - [@video@Jetpack Compose Crash Course](https://www.youtube.com/watch?v=6_wK_Ud8--0)
@@ -1,9 +1,9 @@
-# LinearLayout
+# Scaffold

-**LinearLayout** is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the `android:orientation` attribute.
-
-**LinearLayout** was commonly used in earlier Android development, but with the introduction of ConstraintLayout, it’s less frequently used in modern apps.
+Scaffold, in simple terms, is a structure that provides a foundation for building a user interface. It typically includes common screen elements like an app bar (top bar), a body (the main content area), and optionally, a bottom navigation bar or a drawer. Think of it as a pre-designed template that takes care of basic screen organization, letting you focus on the specific content and functionality of your app.

 Visit the following resources to learn more:

- [@official@Linear Layout](https://developer.android.com/develop/ui/views/layout/linear)
+- [@official@Scaffold](https://developer.android.com/develop/ui/compose/components/scaffold)
+- [@official@Create a scaffold component to hold the UI together](https://developer.android.com/develop/ui/compose/quick-guides/content/create-scaffold)
+- [@article@Understanding Scaffold in Jetpack Compose: A Comprehensive Guide](https://medium.com/@ramadan123sayed/understanding-scaffold-in-jetpack-compose-a-comprehensive-guide-e248c2406412)
@@ -1,9 +1,8 @@
-# ListView
+# Card

-Displays a vertically-scrollable collection of views, where each view is positioned immediately below the previous view in the list.
-
-For a more modern, flexible, and performant approach to displaying lists, use `RecyclerView`.
+In Jetpack Compose, a Card is a composable that provides a container with a rounded corner background and a subtle shadow. It's used to group related pieces of information, creating visual separation and improving the user interface's organization. Think of it like a physical card: it holds content and provides a distinct visual element on the screen.

 Visit the following resources to learn more:

- [@official@ListView](https://developer.android.com/reference/android/widget/ListView)
+- [@official@Card  |  Jetpack Compose  |  Android Developers](https://developer.android.com/develop/ui/compose/components/card)
+- [@article@Mastering Jetpack Compose Cards: Complete Guide to Material 3 Cards | by Ramadan Sayed | Medium](https://medium.com/@ramadan123sayed/mastering-jetpack-compose-cards-complete-guide-to-material-3-cards-a41ce7af4716)
@@ -1,8 +1,6 @@
 # RecyclerView

-RecyclerView is the most commonly used and powerful list management tool in Android development. It makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and the RecyclerView library dynamically creates the elements when they're needed.
-
-As the name implies, RecyclerView recycles those individual elements. When an item scrolls off the screen, RecyclerView doesn't destroy its view. Instead, RecyclerView reuses the view for new items that have scrolled onscreen. RecyclerView improves performance and your app's responsiveness, and it reduces power consumption.
+RecyclerView is a flexible and efficient view for displaying large sets of data in a scrollable list. It provides a mechanism for reusing view holders, which reduces memory consumption and improves performance when dealing with dynamic content. Unlike its predecessor, ListView, RecyclerView enforces the use of a ViewHolder pattern for optimizing view creation and binding. This results in smoother scrolling and a better user experience, especially when handling complex layouts or large datasets.

 Visit the following resources to learn more:

@@ -1,9 +1,8 @@
-# RelativeLayout
+# Column and Row in Compose

-A **RelativeLayout** in Android is a type of ViewGroup that allows you to position child views relative to each other or relative to the parent layout. It's a flexible layout where you can arrange the child views in relation to one another based on certain rules, making it suitable for creating complex UI designs.
-
-**RelativeLayout** was commonly used in earlier Android development, but with the introduction of `ConstraintLayout`, it's less frequently used in modern apps.
+Column and Row are fundamental layout composables in Jetpack Compose used to arrange items vertically (Column) or horizontally (Row).  They provide a simple and intuitive way to organize UI elements by stacking them in a single direction, offering control over how items are aligned and spaced within the layout. This makes creating responsive and visually appealing user interfaces much easier.

 Visit the following resources to learn more:

- [@official@Relative Layout](https://developer.android.com/develop/ui/views/layout/relative)
+- [@official@Column](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1))
+- [@official@Row](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1))
@@ -1,7 +1,8 @@
-# Tabs
+# Icon in Compose

-Tabs in Android Studio are a UI component used to organize content into multiple sections, allowing users to navigate between them by selecting the corresponding tab. This component is commonly used when there is a need to present different types of content in a single screen, like different categories, settings, or pages within an app.
+In Jetpack Compose, an `Icon` is a composable function that displays a graphical image. You can use it to show vector drawables, raster images, or even custom shapes. It's a fundamental building block for enhancing your app's user interface by adding visual cues and branding elements. You can customize the `Icon`'s color, size, and add a content description for accessibility.

 Visit the following resources to learn more:

- [@official@Material Tabs](https://developer.android.com/reference/com/google/android/material/tabs/package-summary)
+- [@official@Icons  |  Jetpack Compose  |  Android Developers](https://developer.android.com/develop/ui/compose/graphics/images/material)
+- [@article@IconButton in Jetpack Compose. Ever wondered how to use icons as… | by Dhivya | Medium](https://medium.com/@dhivyakgf/iconbutton-in-jetpack-compose-bc1f1268c745)
@@ -1,6 +1,6 @@
 # TextView

-TextView is a widget that is seen in every android application. This widget is used to display simple text within the android application.
+TextView displays text to the user. It's a fundamental UI element in Android used to show static or dynamically updated content. You can customize the appearance of the text, including font, color, size, and style. TextView also supports features like handling clicks and displaying formatted text using spans.

 Visit the following resources to learn more:

@@ -1,7 +1,9 @@
-# Toast
+# Text in Android Development

-A `toast` provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout.
+Text in Android refers to the display and manipulation of textual information within an application. It involves using UI elements like TextViews and EditTexts to show static text, collect user input, or dynamically update the content displayed on the screen. Developers can customize the appearance of text using attributes such as font, size, color, and style, and also handle user interactions with text through event listeners.

 Visit the following resources to learn more:

- [@official@Toast](https://developer.android.com/guide/topics/ui/notifiers/toasts)
+- [@official@Text](https://developer.android.com/reference/kotlin/androidx/compose/material/Text.composable#Text(androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.collections.Map,kotlin.Function1,androidx.compose.ui.text.TextStyle))
+- [@official@Text in Compose](https://developer.android.com/develop/ui/compose/text)
+- [@article@Mastering Text in Jetpack Compose: A Comprehensive Guide | by Ramadan Sayed | Medium](https://medium.com/@ramadan123sayed/mastering-text-in-jetpack-compose-a-comprehensive-guide-5d3fb9ab5bcf)
@@ -8,4 +8,4 @@ Visit the following resources to learn more:
 - [@official@Gradle Documentation](https://docs.gradle.org/current/userguide/getting_started_eng.html)
 - [@video@Gradle Course for Beginners - 55minutes](https://www.youtube.com/watch?v=R6Z-Sxb837I)
 - [@video@Introduction to Gradle for Complete Beginners - 25minutes](https://youtu.be/-dtcEMLNmn0?si=NuIP-3wNpUrxfTxA)
- [@feed@Explore top posts about Gradle](https://app.daily.dev/tags/gradle?ref=roadmapsh)
+- [@feed@Explore top posts about Gradle](https://app.daily.dev/tags/gradle?ref=roadmapsh)