Создание кастомных виджетов для Android: от основ до мастерства

dependencies {
    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'androidx.core:core-ktx:1.7.0'
}

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="110dp"
    android:minHeight="40dp"
    android:updatePeriodMillis="3600000"
    android:initialLayout="@layout/widget_layout"
    android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen"
    android:previewImage="@drawable/widget_preview">
</appwidget-provider>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    android:background="@drawable/widget_background">

    <TextView
        android:id="@+id/widget_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Мой виджет"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/widget_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/widget_title"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="4dp"
        android:text="Информация недоступна"
        android:textSize="14sp" />

    <Button
        android:id="@+id/widget_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/widget_text"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="8dp"
        android:text="Обновить" />

</RelativeLayout>

class MyAppWidgetProvider : AppWidgetProvider() {
    
    override fun onUpdate(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetIds: IntArray
    ) {
        // Обновляем все экземпляры виджета
        for (appWidgetId in appWidgetIds) {
            updateAppWidget(context, appWidgetManager, appWidgetId)
        }
    }
    
    private fun updateAppWidget(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetId: Int
    ) {
        // Создаем RemoteViews для обновления виджета
        val views = RemoteViews(context.packageName, R.layout.widget_layout)
        
        // Устанавливаем текущее время как пример информации
        val currentTime = SimpleDateFormat("HH:mm:ss", Locale.getDefault())
            .format(Date())
        views.setTextViewText(R.id.widget_text, "Обновлено: $currentTime")
        
        // Настраиваем намерение для кнопки
        val intentUpdate = Intent(context, MyAppWidgetProvider::class.java)
        intentUpdate.action = AppWidgetManager.ACTION_APPWIDGET_UPDATE
        val idArray = intArrayOf(appWidgetId)
        intentUpdate.putExtra(AppWidgetManager.EXTRA_APPWIDGET_IDS, idArray)
        
        val pendingIntent = PendingIntent.getBroadcast(
            context, appWidgetId, intentUpdate,
            PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
        )
        views.setOnClickPendingIntent(R.id.widget_button, pendingIntent)
        
        // Обновляем виджет
        appWidgetManager.updateAppWidget(appWidgetId, views)
    }
}

<receiver android:name=".MyAppWidgetProvider" android:exported="true">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data
        android:name="android.appwidget.provider"
        android:resource="@xml/app_widget_info" />
</receiver>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@drawable/widget_weather_bg"
    android:padding="12dp">

    <ImageView
        android:id="@+id/weather_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/ic_sunny"
        android:contentDescription="Погодные условия" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginStart="8dp">

        <TextView
            android:id="@+id/weather_temp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="+25°C"
            android:textSize="24sp"
            android:textStyle="bold"
            android:textColor="#FFFFFF" />

        <TextView
            android:id="@+id/weather_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Солнечно"
            android:textSize="14sp"
            android:textColor="#EEEEEE" />

        <TextView
            android:id="@+id/weather_location"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Москва"
            android:textSize="12sp"
            android:textColor="#DDDDDD" />
    </LinearLayout>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/widget_music_bg"
    android:padding="8dp">

    <ImageView
        android:id="@+id/album_cover"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:scaleType="centerCrop"
        android:src="@drawable/default_album_cover"
        android:contentDescription="Обложка альбома" />

    <LinearLayout
        android:id="@+id/song_info"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_toEndOf="@id/album_cover"
        android:layout_toStartOf="@id/control_buttons"
        android:orientation="vertical">

        <TextView
            android:id="@+id/song_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="Название песни"
            android:textColor="#FFFFFF"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/song_artist"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="Исполнитель"
            android:textColor="#DDDDDD"
            android:textSize="14sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/control_buttons"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/btn_previous"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_previous"
            android:contentDescription="Предыдущая песня" />

        <ImageButton
            android:id="@+id/btn_play_pause"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="4dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_play"
            android:contentDescription="Воспроизвести/Пауза" />

        <ImageButton
            android:id="@+id/btn_next"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="4dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_next"
            android:contentDescription="Следующая песня" />
    </LinearLayout>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#80000000" />
    <corners android:radius="16dp" />
    <padding
        android:left="8dp"
        android:top="8dp"
        android:right="8dp"
        android:bottom="8dp" />
</shape>

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialKeyguardLayout="@layout/widget_small"
    android:initialLayout="@layout/widget_small"
    android:minWidth="110dp"
    android:minHeight="40dp"
    android:previewImage="@drawable/widget_preview_small"
    android:resizeMode="horizontal|vertical"
    android:updatePeriodMillis="3600000"
    android:widgetCategory="home_screen|keyguard">
    <dimen name="widget_min_resize_width">110dp</dimen>
    <dimen name="widget_min_resize_height">40dp</dimen>
    <dimen name="widget_max_resize_width">380dp</dimen>
    <dimen name="widget_max_resize_height">380dp</dimen>
</appwidget-provider>

class WeatherWidgetProvider : AppWidgetProvider() {
    
    companion object {
        // Кастомное действие для обновления погоды
        const val ACTION_UPDATE_WEATHER = "com.example.myapp.ACTION_UPDATE_WEATHER"
        
        // Метод для обновления всех виджетов
        fun updateAllWidgets(context: Context) {
            val appWidgetManager = AppWidgetManager.getInstance(context)
            val appWidgetIds = appWidgetManager.getAppWidgetIds(
                ComponentName(context, WeatherWidgetProvider::class.java)
            )
            
            // Отправляем интент для обновления
            val intent = Intent(context, WeatherWidgetProvider::class.java)
            intent.action = AppWidgetManager.ACTION_APPWIDGET_UPDATE
            intent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_IDS, appWidgetIds)
            context.sendBroadcast(intent)
        }
    }
    
    override fun onUpdate(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetIds: IntArray
    ) {
        // Обновляем каждый экземпляр виджета
        for (appWidgetId in appWidgetIds) {
            updateWeatherWidget(context, appWidgetManager, appWidgetId)
        }
    }
    
    override fun onEnabled(context: Context) {
        super.onEnabled(context)
        // Запускаем сервис при добавлении первого виджета
        context.startService(Intent(context, WeatherUpdateService::class.java))
    }
    
    override fun onDisabled(context: Context) {
        super.onDisabled(context)
        // Останавливаем сервис при удалении последнего виджета
        context.stopService(Intent(context, WeatherUpdateService::class.java))
    }
    
    override fun onReceive(context: Context, intent: Intent) {
        super.onReceive(context, intent)
        
        // Обрабатываем кастомные действия
        if (intent.action == ACTION_UPDATE_WEATHER) {
            val appWidgetManager = AppWidgetManager.getInstance(context)
            val appWidgetIds = appWidgetManager.getAppWidgetIds(
                ComponentName(context, WeatherWidgetProvider::class.java)
            )
            
            // Запускаем обновление данных
            val weatherData = getWeatherData(context)
            
            // Обновляем все экземпляры виджета
            for (appWidgetId in appWidgetIds) {
                updateWeatherWidgetWithData(
                    context,
                    appWidgetManager,
                    appWidgetId,
                    weatherData
                )
            }
        }
    }
    
    override fun onAppWidgetOptionsChanged(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetId: Int,
        newOptions: Bundle?
    ) {
        super.onAppWidgetOptionsChanged(context, appWidgetManager, appWidgetId, newOptions)
        
        // Получаем новые размеры виджета
        val minWidth = newOptions?.getInt(AppWidgetManager.OPTION_APPWIDGET_MIN_WIDTH) ?: 0
        val maxWidth = newOptions?.getInt(AppWidgetManager.OPTION_APPWIDGET_MAX_WIDTH) ?: 0
        val minHeight = newOptions?.getInt(AppWidgetManager.OPTION_APPWIDGET_MIN_HEIGHT) ?: 0
        val maxHeight = newOptions?.getInt(AppWidgetManager.OPTION_APPWIDGET_MAX_HEIGHT) ?: 0
        
        // Обновляем виджет с учетом новых размеров
        updateWeatherWidget(context, appWidgetManager, appWidgetId)
    }
    
    private fun updateWeatherWidget(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetId: Int
    ) {
        // Получаем данные погоды
        val weatherData = getWeatherData(context)
        
        // Обновляем виджет с полученными данными
        updateWeatherWidgetWithData(context, appWidgetManager, appWidgetId, weatherData)
    }
    
    private fun updateWeatherWidgetWithData(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetId: Int,
        weatherData: WeatherData
    ) {
        // Создаем RemoteViews для обновления виджета
        val views = RemoteViews(context.packageName, R.layout.widget_weather)
        
        // Обновляем текстовые поля
        views.setTextViewText(R.id.weather_temp, "${weatherData.temperature}°C")
        views.setTextViewText(R.id.weather_description, weatherData.description)
        views.setTextViewText(R.id.weather_location, weatherData.location)
        
        // Устанавливаем иконку в зависимости от погоды
        val weatherIcon = when (weatherData.condition) {
            WeatherCondition.SUNNY -> R.drawable.ic_sunny
            WeatherCondition.CLOUDY -> R.drawable.ic_cloudy
            WeatherCondition.RAINY -> R.drawable.ic_rainy
            WeatherCondition.SNOWY -> R.drawable.ic_snowy
            else -> R.drawable.ic_unknown
        }
        views.setImageViewResource(R.id.weather_icon, weatherIcon)
        
        // Настраиваем действие для обновления при клике на виджет
        val intentUpdate = Intent(context, WeatherWidgetProvider::class.java)
        intentUpdate.action = ACTION_UPDATE_WEATHER
        val pendingIntent = PendingIntent.getBroadcast(
            context,
            appWidgetId,
            intentUpdate,
            PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
        )
        views.setOnClickPendingIntent(R.id.widget_root, pendingIntent)
        
        // Обновляем виджет
        appWidgetManager.updateAppWidget(appWidgetId, views)
    }
    
    private fun getWeatherData(context: Context): WeatherData {
        // Здесь был бы код для получения данных о погоде
        // Например, из локального хранилища или API
        
        // Для примера возвращаем тестовые данные
        return WeatherData(
            temperature = 23,
            description = "Солнечно",
            location = "Москва",
            condition = WeatherCondition.SUNNY
        )
    }
    
    // Модельные классы
    data class WeatherData(
        val temperature: Int,
        val description: String,
        val location: String,
        val condition: WeatherCondition
    )
    
    enum class WeatherCondition {
        SUNNY, CLOUDY, RAINY, SNOWY, UNKNOWN
    }
}

class WeatherUpdateService : Service() {
    
    override fun onStartCommand(intent: Intent?, flags: Int, startId: Int): Int {
        // Запускаем обновление в отдельном потоке
        Thread {
            try {
                // Получаем данные о погоде из API
                val weatherData = fetchWeatherFromApi()
                
                // Сохраняем данные локально
                saveWeatherData(weatherData)
                
                // Обновляем все виджеты
                WeatherWidgetProvider.updateAllWidgets(applicationContext)
            } catch (e: Exception) {
                Log.e("WeatherUpdateService", "Error updating weather", e)
            } finally {
                // Останавливаем сервис после выполнения
                stopSelf(startId)
            }
        }.start()
        
        return START_NOT_STICKY
    }
    
    override fun onBind(intent: Intent?): IBinder? = null
    
    // Методы для работы с API и хранением данных...
}

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:configure="com.example.myapp.WidgetConfigActivity"
    ...
    >
</appwidget-provider>

class WidgetConfigActivity : AppCompatActivity() {
    
    private var appWidgetId = AppWidgetManager.INVALID_APPWIDGET_ID
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // Установка результата по умолчанию (в случае отмены)
        setResult(RESULT_CANCELED)
        
        setContentView(R.layout.activity_widget_config)
        
        // Получаем ID виджета из intent
        appWidgetId = intent?.extras?.getInt(
            AppWidgetManager.EXTRA_APPWIDGET_ID,
            AppWidgetManager.INVALID_APPWIDGET_ID
        ) ?: AppWidgetManager.INVALID_APPWIDGET_ID
        
        if (appWidgetId == AppWidgetManager.INVALID_APPWIDGET_ID) {
            finish()
            return
        }
        
        // Настраиваем обработчики для элементов интерфейса
        setupViews()
    }
    
    private fun setupViews() {
        // Получаем ссылки на элементы интерфейса
        val locationEdit = findViewById<EditText>(R.id.location_edit)
        val updateIntervalSpinner = findViewById<Spinner>(R.id.update_interval_spinner)
        val saveButton = findViewById<Button>(R.id.save_button)
        
        // Настраиваем обработчик для кнопки сохранения
        saveButton.setOnClickListener {
            // Сохраняем настройки виджета
            val location = locationEdit.text.toString()
            val updateInterval = getUpdateIntervalFromSpinner(updateIntervalSpinner)
            
            saveWidgetSettings(appWidgetId, location, updateInterval)
            
            // Обновляем виджет с новыми настройками
            val appWidgetManager = AppWidgetManager.getInstance(this)
            WeatherWidgetProvider().updateWeatherWidget(this, appWidgetManager, appWidgetId)
            
            // Устанавливаем результат и закрываем активность
            val resultValue = Intent().apply {
                putExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, appWidgetId)
            }
            setResult(RESULT_OK, resultValue)
            finish()
        }
    }
    
    private fun getUpdateIntervalFromSpinner(spinner: Spinner): Long {
        // Получаем выбранный интервал обновления
        return when (spinner.selectedItemPosition) {
            0 -> 30 * 60 * 1000L // 30 минут
            1 -> 1 * 60 * 60 * 1000L // 1 час
            2 -> 3 * 60 * 60 * 1000L // 3 часа
            3 -> 6 * 60 * 60 * 1000L // 6 часов
            else -> 1 * 60 * 60 * 1000L // По умолчанию 1 час
        }
    }
    
    private fun saveWidgetSettings(widgetId: Int, location: String, updateInterval: Long) {
        val prefs = getSharedPreferences(WIDGET_PREFS, MODE_PRIVATE)
        prefs.edit().apply {
            putString("$widgetId:location", location)
            putLong("$widgetId:interval", updateInterval)
            apply()
        }
        
        // Настраиваем периодическое обновление через WorkManager
        setupPeriodicUpdate(widgetId, updateInterval)
    }
    
    private fun setupPeriodicUpdate(widgetId: Int, interval: Long) {
        val updateRequest = PeriodicWorkRequestBuilder<WeatherUpdateWorker>(
            interval, TimeUnit.MILLISECONDS
        ).setInputData(
            workDataOf("widget_id" to widgetId)
        ).build()
        
        WorkManager.getInstance(this).enqueueUniquePeriodicWork(
 

**Читайте также**
- [Живые обои на Android: установка и настройка без потери заряда](/gadgets/kak-ispolzovat-zhivye-oboi-na-android/)
- [Виджеты Android: пошаговая настройка мини-программ на экране](/gadgets/kak-nastroit-vidzhety-na-android/)
- [Защита и персонализация экрана блокировки Android: полное руководство](/gadgets/kak-nastroit-ekran-blokirovki-na-android/)
- [Управление уведомлениями на Android: настройка для спокойствия](/gadgets/kak-nastroit-uvedomleniya-na-android/)
- [Революция в дизайне смартфонов: материалы, формы, тенденции](/gadgets/trendy-v-oformlenii-smartfonov-2023/)
- [5 шагов к организации иконок на смартфоне: порядок и эффективность](/gadgets/kak-organizovat-ikonki-na-rabochem-stole-telefona/)
- [Как настроить темы на Android: персонализация смартфона от А до Я](/gadgets/kak-ispolzovat-temy-dlya-oformleniya-telefona-na-android/)
- [Виджеты для смартфона: повышение продуктивности и стильный дизайн](/gadgets/kak-ispolzovat-vidzhety-dlya-oformleniya-rabochego-stola-na-telefone/)
- [Как настроить меню приложений Android: пошаговая организация](/gadgets/kak-nastroit-menyu-prilozhenij-na-android/)
- [7 способов персонализировать иконки Android: от простых до сложных](/gadgets/kak-izmenit-ikonki-na-android/)