> 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/shape-image-view-documentation.md).
# Shape Image View Documentation
**Overview**
The `ShapeImageViewFragment` displays a user interface that incorporates various `ShapeableImageView` elements with custom shapes like circles, diamonds, and default rectangles, along with both static images and GIFs. The fragment uses **View Binding** for seamless and safe access to UI components, and it provides navigation support through a toolbar for ease of user interaction.
***
#### **Folder Structure**
```css
material-uix
└── app
└── src
└── main
└── java
└── com
└── boltuix
└── materialuix
└── shape
└── ShapeImageViewFragment.kt
```
#### **How to Use**
**1. Fragment Class: `ShapeImageViewFragment`**
The `ShapeImageViewFragment` is a `Fragment` that leverages **ViewBinding** for a structured and secure way to interact with the UI defined in its XML file.
**Key Components:**
* **ViewBinding Initialization:**
* The view is bound using `_binding` and `binding` to reference the UI elements in a type-safe manner.
* `onDestroyView` ensures that the binding is cleared to avoid memory leaks.
* **Navigation Setup:**
* A back button is integrated into the `MaterialToolbar`, which allows the user to navigate back using the `findNavController().navigateUp()` method.
**Important Methods:**
* `onCreateView()`:
* This inflates the fragment layout using **ViewBinding**.
* `onViewCreated()`:
* Sets up the back navigation button for user interaction.
**Code Snippet:**
```kotlin
🔗 View binding variable for the fragment's layout
private var _binding: FragmentShapeImageViewBinding? = null
// ✅ Non-nullable reference to safely access the binding
private val binding get() = _binding!!
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View {
// 🛠️ Inflate the layout using ViewBinding
_binding = FragmentShapeImageViewBinding.inflate(inflater, container, false)
return binding.root // 📄 Return the root view of the binding
}
@RequiresApi(Build.VERSION_CODES.S)
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
// 🔙 Set up the navigation button click listener to go back
binding.toolbar.setNavigationOnClickListener {
findNavController().navigateUp()
}
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null // 🗑️ Clean up resources
}
```
***
**2. Layout File: `fragment_shape_image_view.xml`**
**Main Layout:**
* The root layout is a `CoordinatorLayout`, which contains a `NestedScrollView` for smooth scrolling, especially when the content exceeds the screen height.
**Key Components:**
* **MaterialToolbar**: Provides a back navigation button and title, which is a part of `AppBarLayout`.
* **ShapeableImageView**: Displays images with customizable shapes like circle and diamond using `shapeAppearance` and `shapeAppearanceOverlay`.
**Example of `ShapeableImageView`:**
```xml
```
***
**Resource Files**
1. **Drawable Resources:**
* `@drawable/demo`: The demo image that is used in the `ShapeableImageView`.
* `@drawable/ic_back`: The back arrow icon used in the `MaterialToolbar`.
2. **String Resources:**
* `@string/go_back`: Content description for the navigation button.
* `@string/shape_image_view_title`: Title for the `ShapeImageViewFragment`.
* `@string/shape_circle_description`, `@string/shape_diamond_description`: Content descriptions for different shaped images.
***
**Customizing the UI**
1. **Changing Image Source:**
* Update the `app:srcCompat` attribute in the `ShapeableImageView` to point to a different drawable resource:
```xml
app:srcCompat="@drawable/your_new_image"
```
2. **Modifying Shape:**
* Use different `shapeAppearance` or `shapeAppearanceOverlay` styles to customize the shape of `ShapeableImageView`:
```xml
app:shapeAppearance="@style/ShapeAppearanceImageLeft"
app:shapeAppearanceOverlay="@style/ShapeAppearance.Rounded"
```
***
#### **Dependencies Required**
Ensure the following dependencies are included in your `build.gradle` to use Material Components and ViewBinding:
```groovy
groovyCopy codedependencies {
implementation 'com.google.android.material:material:1.7.0'
}
```
In `build.gradle`, enable ViewBinding:
```groovy
groovyCopy codeandroid {
...
viewBinding {
enabled = true
}
}
```
***
#### **Navigation**
This fragment supports back navigation using `findNavController().navigateUp()` when the toolbar's back arrow is clicked. Ensure that your navigation graph (`nav_graph.xml`) is configured correctly for seamless navigation between fragments.
---
# 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/shape-image-view-documentation.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.