Android UIX - Kotlin Material Design & AI Features
Explore a collection of Android Material Design UI/UX components and features to enhance your app's user experience.
From custom dialog boxes to advanced onboarding screens, this guide covers essential UI elements and their implementation in Kotlin.
infoOverview
Material UIX is a comprehensive Kotlin-based UI library for Android, designed to simplify the creation of high-quality user interfaces, providing developers with customizable components and templates for building visually stunning, responsive apps.
file_downloadHow to Extract and Import
listFeatures
Intro Screen Demo
Top Image Example
Background Style Example
Lottie Animation Demo
Transition Effects Demo
Onboarding Demo
Intro Transition Demo
Animation Onboarding Demo
Animation Onboarding Demo2
Card-Based Onboarding
Sliding Onboarding Demo
Progress Bar
Swipe to Refresh
Progress Indicator
Progress Grid Scroll
Progress Top Indicator
Video Player Demo
Media Player Demo
Music Player Demo
Flex Layout Demo
Search with Responsive Chips
Animation Basics Demo
Interpolator Demo
Lottie Interactive Animation Demo
Typography & Spans Demo
List #1 : Linear
List #2 : Staggered
List #3 : Grid
List #4 : Sectioned
List #5 : Linear Horizontal
List #6 : Chat
List #7 : Transitions
List #8 : Drag & Drop
List #9 : Expandable List
List #10 : Swipe to Edit & Delete
Responsive
Tabs Demo
Tabs with Icons Demo
Tabs with Labels Demo
Active Tab Indicator Demo
Custom Tabs Demo
Empty State Demo
Empty State with Animation Demo
Shopping Prompt Demo
Camera Permission Prompt Demo
Location Permission Prompt Demo
No Chat History Demo
No Internet Connection Demo
Push Notification Prompt Demo
Search Results Placeholder Demo
Payment Failure Notification Demo
Card Examples
Card with Constraints Demo
Expandable Card Example
Button Examples
Button Demo with Card
Expandable FAB Example
FAB with Labels Demo
FAB Transition Demo
Movable FAB Example
Notification Demo
Toast Demo
Snackbar Demo
Dialog Demo
Bottom Sheets Demo
Persistent Bottom Sheet Demo
Banners Demo
Info Banner Demo
Tooltips Demo
Bottom Sheet Transform Demo
Bottom Appbar Demo
Scrollable Bottom Appbar
Bottom Navigation Menu Demo
Navigation Drawer Demo
Drawer with Background Example
Custom Navigation Drawer Demo
Slider Menu Demo
Back Navigation Slider Demo
Navigation Rail Demo
Rail with FAB Example
Gradient Rail Demo
Bottom Navigation Badge Demo
Animated Bottom Navigation Demo
FAB in Bottom Navigation Demo
Rounded Bottom Navigation Bar
Custom Bottom Navigation Demo
Text Fields Demo
Filled Text Field Example
Animated Text Field Demo
Chips Demo
Chip Actions Example
Step Flow Transition Demo
Vertical Stepper Example
Cart UI Demo
Payment UI Example
Order Tracking Demo
Material Motion Filter Demo
Detail Layout Example
Divider Demo
Date & Time Picker Example
Badge Demo
Backdrop with Text Input Demo
Backdrop Info Example
Backdrop Filter Demo
Backdrop with Voice Input Demo
Login Transition Demo
Centered Login Card Demo
Login Screen Example
About Demo
Error Handling Demo
Privacy Policy Demo
Permission Request Demo
What's New Demo
Trip Dashboard Demo
Interactive Dashboard Menu Demo
AI Bot Example
Selection Controls Demo
Custom Radio Buttons Example
Material Switch Demo
Sliders Demo
Menu Demo
Settings Page Demo
Settings UI Example
Preferences Demo
Carousel Demo
Shapeable Image Demo
Material Color Demo
Color Palette API Demo
Themed App Bar Demo
Scroll Behavior Demo
Prominent App Bar Demo
Simple Toolbar Demo
Centered Title Demo
Calendar Event Demo
Language Selector Demo
In-App Reviews Demo
Biometric Login Demo
Custom Browser Demo
Map Integration Demo
Force Update Demo
In-App Update Demo
Dark Mode Demo
App Widgets Demo
Haptic Feedback Demo
Emoji Support Demo
App Shortcuts Demo
Splash Logo Demo
Animated Splash Logo Example
Dynamic Splash Screen Demo
ML Kit Translation
ML Kit Text Recognition v2
ML Kit Face Detection
ML Kit Barcode Scanning
Text Classification NER BERT
Voice Cmd App Demo
Tip: Click any feature to view its description. Navigate to app/src/main/java/com.boltuix.androidtemplate to find the code for each feature!
description Developer Documentation Index
info Introduction
Material UIX is a Kotlin-based UI library for Android, offering over 600+ pre-designed screens and components to streamline app development. It follows Material Design guidelines, ensuring a consistent and modern user experience across devices.
With Material UIX, developers can save time by using ready-to-use templates, customize components, and quickly prototype or build production-ready apps.
build Installation & Setup
1. Download the Material UIX package from the provided source.
2. Extract the ZIP file to your preferred directory.
3. Ensure you have Android Studio (v4.2 or higher) installed with required SDKs.
4. Import the project by selecting "Open an existing project" in Android Studio and navigating to the extracted folder.
5. Wait for Gradle sync to finish and download dependencies.
tips_and_updates Tip: Keep Android Studio and Gradle plugin updated to avoid compatibility issues.
folder_open Open Project in Android Studio
1. Launch Android Studio.
2. Click "File" > "Open" and select the Material UIX project folder.
3. Allow Android Studio to index the project and complete Gradle sync.
4. Confirm that the project builds successfully before proceeding.
play_arrow Run App on Emulator / Device
1. Set up an emulator in Android Studio or connect a physical device via USB.
2. Enable USB debugging on your device if using physical hardware.
3. Select the target device from the device dropdown menu.
4. Click the "Run ▶" button to build and launch the app.
5. Verify that the app starts without errors on your selected device.
tips_and_updates Tip: Use a physical device for better performance testing. Emulators are great for quick checks but may be slower.
folderProject Overview
Material UIX project structure, showing only the key folders and files you'll work with as a beginner.
- folder_open material-uix (Main Project Folder)
The main folder containing your entire app project.
- folder app (App Module)
Where your app's core code and resources are stored.
- folder src (Source Code)
Holds all the code and resources for your app.
- folder main (Main Directory)
The starting point for your app's code.
- folder assets
Stores images, fonts, or audio files you add to your app.
- folder java
Contains your Kotlin code for app logic (e.g., com.boltuix.materialuix).
- folder res
Holds UI resources like layouts, images, and text strings.
- description AndroidManifest.xml
Defines your app's screens, permissions, and settings.
- folder assets
- folder main (Main Directory)
- description build.gradle.kts
Sets up how your app is built and what libraries it uses.
- folder src (Source Code)
- folder app (App Module)
folderProject Overview
A simple tree view of the Android Boltuix project structure, showing only the key folders and files you'll work with as a beginner.
- folder_open android boltuix (Main Project Folder)
The main folder containing your entire app project.
- folder .gradle
Gradle configuration files for building the project.
- folder .idea
Android Studio project settings.
- folder app (App Module)
Where your app's core code and resources are stored.
- folder src (Source Code)
Holds all the code and resources for your app.
- folder main (Main Directory)
The starting point for your app's code.
- folder assets
Stores images, fonts, or audio files you add to your app.
- folder java
Contains your Kotlin code for app logic.
- folder com.boltuix.androidtemplate
Package with app logic and feature-specific code.
- folder about
Code for the About screen.
- folder ai
Code for AI-related features, like AI Bot.
- folder anim
Animation-related code.
- folder app
Core app logic and configurations.
- folder backdrop
Code for backdrop UI components.
- folder badge
Badge-related UI code.
- folder banner
Code for banner UI elements.
- folder billing
In-app billing and payment code.
- folder biometric
Biometric authentication code.
- folder bottomappbar
Bottom app bar UI code.
- folder bottomnavigation
Bottom navigation UI code.
- folder bottomsheet
Bottom sheet UI code.
- folder button
Button UI components.
- folder calendar
Calendar-related UI code.
- folder card
Card UI components.
- folder carousel
Carousel UI code.
- folder cart
Shopping cart UI code.
- folder chat
Chat UI components.
- folder chip
Chip UI components.
- folder chrome
Custom Chrome tab code.
- folder color
Color palette and theming code.
- folder darkmode
Dark mode implementation code.
- folder dashboard
Dashboard UI code.
- folder detail
Detail screen UI code.
- folder dialog
Dialog UI components.
- folder divider
Divider UI elements.
- folder emoji
Emoji support code.
- folder empty
Empty state UI code.
- folder error
Error handling UI code.
- folder expand
Expandable UI components.
- folder flex
Flexible layout code.
- folder haptic
Haptic feedback implementation.
- folder intro
App intro screen code.
- folder language
Language selection UI code.
- folder libraries
External library integrations.
- folder list
List UI components (linear, grid, etc.).
- folder login
Login screen UI code.
- folder lottie
Lottie animation code.
- folder magnifier
Magnifier UI feature code.
- folder map
Map integration code (e.g., Open Street Map).
- folder material
Material Design component code.
- folder media
Media player code.
- folder menu
Menu UI components.
- folder music
Music player UI code.
- folder navigation
Navigation UI code (e.g., drawer, slider).
- folder navigationbar
Navigation bar UI code.
- folder new
What’s New UI code.
- folder notification
Notification UI and logic.
- folder permission
Permission request UI code.
- folder picker
Picker UI components.
- folder scrolling
Scrolling behavior code.
- folder search
Search UI components.
- folder selection
Selection control UI code.
- folder setting
Settings UI code.
- folder shape
Shapeable UI components.
- folder shortcut
App shortcut code.
- folder slider
Slider UI components.
- folder snackbar
Snackbar UI code.
- folder splash
Splash screen UI code.
- folder stepper
Stepper UI components.
- folder swipe
Swipe-to-refresh/edit UI code.
- folder tab
Tab UI components.
- folder text-field
Text field UI components.
- folder toast
Toast UI code.
- folder toolbar
Toolbar UI code.
- folder tooltip
Tooltip UI components.
- folder transition
Transition animation code.
- folder transition_menu
Menu transition animations.
- folder typo
Typography and text styling code.
- folder updates
In-app update code.
- folder widget
App widget code.
- description ComponentsAdapter.kt
Adapter for displaying components in a list.
- description ComponentsFragment.kt
Fragment for showcasing app components.
- description ComponentsViewModel
ViewModel for managing component data.
- description MainActivity
Main entry point for the app.
- description MyApplication
Application class for app-wide configurations.
- description UtilFunction.kt
Utility functions for the app.
- folder about
- folder com.boltuix.androidtemplate
- folder res
Holds UI resources like layouts, images, and text strings.
- description AndroidManifest.xml
Defines your app's screens, permissions, and settings.
- image ic_launcher-playstore.png
App icon for Play Store.
- folder assets
- folder main (Main Directory)
- description build.gradle.kts
Sets up how your app is built and what libraries it uses.
- folder src (Source Code)
- description .gitignore
Specifies files to ignore in version control.
- description google-services.json
Firebase configuration file.
- description proguard-rules.pro
ProGuard rules for code optimization.
- folder .gradle
Tip: Start by exploring the com.boltuix.androidtemplate folder for feature-specific code and res for UI layouts!
widgetsCopy & Paste Our Template to Your Project
The Android Boltuix project includes a variety of pre-built UI components like buttons, cards, and toolbars, each with multiple styles to choose from. Here’s how to explore and use them in your app!
touch_app How to Use Components
- Find Components: Navigate to
app/src/main/java/com.boltuix.androidtemplateto see folders likecard,button,toolbar, and more. - Explore Variations: Each component has multiple styles. For example, in the
cardfolder, check out:CardFragment: A standard card UI.CardConstraintFragment: A card using ConstraintLayout for advanced layouts.
- View XML Layouts: In Android Studio, Ctrl+Click on classes like
CardFragmentBindinginCardFragment.ktto jump to the associated XML layout inres/layout. This shows the UI structure. - Copy and Paste: Pick the component style you like, copy the XML from
res/layoutand Kotlin code from the component’s folder, and paste them into your project. - Customize: Modify the copied code to match your app’s design, such as changing colors in
res/values/colors.xmlor adjusting layouts.
Example: To use a card, open CardFragment.kt:
class CardFragment : Fragment() {
private var _binding: CardFragmentBinding? = null
// Ctrl+Click CardFragmentBinding to see its XML layout
}
Double-tap a card in the app to preview it, then copy its code for your project!
account_tree Component Folder Structure
- folder_open com.boltuix.androidtemplate
Contains component-specific code.
- folder card
Card UI components (e.g., CardFragment, CardConstraintFragment).
- folder button
Button UI components.
- folder toolbar
Toolbar UI components.
- folder carousel
Carousel UI code.
- folder login
Login screen UI components.
- folder splash
Splash screen UI components.
- folder card
Tip: Every component (e.g., cards, buttons, navigation) has multiple options. Explore folders like carousel, login, or splash to find the perfect UI for your app!
build_circle Build & Release (APK / AAB)
1. In Android Studio, go to "Build" > "Generate Signed Bundle / APK".
2. Choose either Android App Bundle (.aab) (recommended for Play Store) or APK.
3. Create a new keystore (if not already created) or use an existing one.
4. Fill in the required details: key alias, passwords, and certificate information.
5. Select the build type (usually release).
6. Click Finish to generate your signed APK/AAB file.
7. Locate the output file inside app/release/ or the path shown in the build window.
tips_and_updates Tip: Always generate an AAB file for Play Store publishing, as APKs are mainly for direct installs or testing. Keep your keystore file and credentials safe — you’ll need the same key for future updates.
store Play Store Publishing
1. Create a Google Play Console account and pay the one-time registration fee link
2. Prepare your app for release by generating a signed .aab (Android App Bundle) or .apk.
3. Upload the signed AAB/APK to the Play Console under a new app entry.
4. Complete the App Details section: title, short description, full description.
5. Add Graphics & Media: app icon (512x512), feature graphic (1024x500), screenshots, promo video (optional).
6. Fill in App Content forms: privacy policy URL, target audience, content rating, data safety section.
7. Set up Pricing & Distribution: choose countries, free or paid, devices supported.
8. Add Testing Tracks (internal, closed, or open testing) if needed before production release.
9. Review and fix any Policy or Compliance warnings shown by Play Console.
10. Submit your app for Google Play Review and wait for approval.
11. Once approved, your app will be live on the Play Store and available for users to download.
tips_and_updates Tip: For example, you can use tools like AppDadz: Play Console Helper to easily set up a 12-tester closed testing group. This makes it simple to gather real feedback, validate your app with genuine users, and improve your chances of smooth approval and production release access.
UI Components
Advanced Features
