> For the complete documentation index, see [llms.txt](https://boltuix.gitbook.io/material-uix-kotlin-material-design-ver-1.1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://boltuix.gitbook.io/material-uix-kotlin-material-design-ver-1.1/integrations/images-and-media.md).
# Button Documentation
**Overview**
The `ButtonFragment` is designed to showcase a variety of Material Buttons, such as text buttons, outlined buttons, filled buttons, tonal buttons, elevated buttons, toggle buttons, floating action buttons (FABs), and icon buttons. These buttons demonstrate various styles and interactions, including buttons with icons and different material design styles.
***
#### **Folder Structure**
```css
material-uix
└── app
└── src
└── main
└── java
└── com
└── boltuix
└── materialuix
└── button
└── ButtonFragment.kt
```
***
#### **How to Use**
**1. Fragment Class: `ButtonFragment`**
The `ButtonFragment` uses **ViewBinding** to access the views defined in the layout file. It also includes a `MaterialToolbar` with a back navigation button, and a variety of Material buttons displayed in the layout.
**Key Components:**
* **ViewBinding Initialization:**
* `_binding` is used to initialize the view binding object, while `binding` provides a safe, non-null reference.
* The binding is cleared in `onDestroyView()` to prevent memory leaks.
* **Toolbar Back Navigation:**
* A back button in the toolbar allows navigation to the previous fragment using the `findNavController().navigateUp()` method.
**Important Methods:**
* `onCreateView()`:
* Inflates the layout using **ViewBinding** and returns the root view.
* `onViewCreated()`:
* Sets up the navigation for the back button in the `MaterialToolbar`.
**Code Snippet:**
```kotlin
// 🔗 View binding object to access the views defined in the layout file
private var _binding: FragmentButtonBinding? = null
// 🌿 Binding variable to get the non-nullable reference
private val binding get() = _binding!!
// 🖌️ Inflate the layout for this fragment and return the root view
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View {
// 🛠️ Inflate the layout using View Binding
_binding = FragmentButtonBinding.inflate(inflater, container, false)
return binding.root
}
// 🚀 Called after the view is created and ready for interaction
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
// 🔙 Set up navigation for the toolbar back button
binding.toolbar.setNavigationOnClickListener {
findNavController().navigateUp() // Navigate back to the previous screen
}
}
// 🧹 Clean up the view binding reference when the fragment is destroyed
override fun onDestroyView() {
super.onDestroyView()
_binding = null // Avoid memory leaks by setting the binding to null
}
```
***
**2. Layout File: `fragment_button.xml`**
**Main Layout Structure:**
* The root layout is a `CoordinatorLayout`, which contains a scrollable `NestedScrollView` to accommodate a long list of buttons.
* The **AppBarLayout** holds a `MaterialToolbar` with a back navigation button.
* Inside the scroll view, a `LinearLayout` is used to arrange various Material buttons vertically.
**Key Components:**
1. **MaterialToolbar**:
* A toolbar with a navigation icon that allows users to navigate back to the previous screen.
```xml
```
2. **Material Buttons**:
* A variety of Material buttons, including text buttons, outlined buttons, filled buttons, and buttons with icons.
* These buttons use different styles provided by Material 3.
**Example of a Text Button with Icon:**
```xml
```
3. **Toggle Button Group**:
* A `MaterialButtonToggleGroup` to display a set of toggle buttons.
```xml
```
4. **Floating Action Buttons (FAB)**:
* FABs with various sizes (`mini`, `normal`, `large`) and an `ExtendedFloatingActionButton`.
```xml
```
***
**Resource Files**
1. **Drawable Resources:**
* `@drawable/ic_back`: The back arrow icon used in the toolbar.
* `@drawable/ic_baseline_add_24`: The "add" icon used in buttons with icons.
2. **String Resources:**
* `@string/go_back`: Navigation content description for the toolbar.
* `@string/button_toolbar_title`: Title for the toolbar in this fragment.
* Various button-related strings such as `button_text`, `button_outlined`, etc.
***
#### **Customizing the UI**
1. **Changing Button Text or Icons:**
* To change the text of a button, update the `android:text` attribute in the `MaterialButton`.
* To modify the button icon, change the `app:icon` attribute.
Example:
```xml
```
2. **Styling Buttons:**
* Modify button styles by changing the `style` attribute, referencing different Material styles such as `TextButton`, `OutlinedButton`, `IconButton`, etc.
Example of a filled button with icon:
```xml
```
***
#### **Dependencies Required**
Ensure the following dependencies are included in your `build.gradle` file to use Material Components and ViewBinding:
```groovy
dependencies {
implementation 'com.google.android.material:material:1.7.0'
}
```
Also, enable ViewBinding in your project:
```groovy
codeandroid {
viewBinding {
enabled = true
}
}
```
***
#### **Conclusion**
The `ButtonFragment` provides a versatile and interactive interface with various types of Material buttons. From simple text buttons to more complex buttons with icons and different styles, this fragment offers a comprehensive guide to using Material Design buttons. The layout is cleanly structured, and the fragment is designed with proper memory management using **ViewBinding**.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://boltuix.gitbook.io/material-uix-kotlin-material-design-ver-1.1/integrations/images-and-media.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.