Loading spinner in android

Spinner

Общая информация

Компонент Spinner из раздела Containers (раньше был в разделе Widgets) похож на выпадающий список (ComboBox), используемый в OC Windows (не путать с игрушкой Fidget Spinner). В закрытом состоянии компонент показывает одну строчку, при раскрытии выводит список в виде диалогового окна с переключателями.

Сначала покажу быстрый способ использования элемента. При добавлении элемента на экран отображается просто полоска со строкой Item1. В основном настройка происходит программным путём. Но можно и через XML. Добавим в строковый файл ресурсов strings.xml несколько элементов массива:

Теперь осталось в атрибуте android:entries указать на созданный массив и компонент Spinner будет заполнен данными. Запустите проект и проверьте.

Цвет компонента можно задать в атрибуте android:background=»@color/colorAccent».

Внешний вид компонента в разных версиях Android менялся.

Если нужно из программы узнать, какой пункт из выпадающего списка выбран в Spinner, то можно использовать такой код, например, при нажатии кнопки:

Если нужен не текст, а номер позиции, то вызывайте метод getSelectedItemPosition()

Если вам нужно получить выбранный элемент сразу в момент выбора, то используйте метод setOnItemSelectedListener(), который описан ниже.

Используем адаптер

Как и в случае с компонентом ListView, Spinner использует адаптер данных для связывания содержимого из набора данных с каждым пунктом в списке. Для загрузки данных нужно:

• Получить экземпляр компонента Spinner
• Настроить адаптер данных для связывания
• Вызвать метод setAdapter()

В закрытом состоянии

В раскрытом состоянии

Данные в закрытом и раскрытом состоянии Spinner отображает по разному. Поэтому необходимо создавать макеты шаблонов для обоих состояний. Android предоставляет несколько своих собственных ресурсов для Spinner для простых задач. Например, есть ресурс android.R.layout.simple_spinner_item для создания представления для каждого элемента списка. Ресурс android.R.layout.simple_spinner_dropdown_item служит шаблоном для раскрывающего списка.

Создадим строковый массив в файле strings.xml:

Загрузим строковый массив с именем animals в экземпляр класса ArrayAdapter при помощи метода createFromResource():

Запустив программу, вы увидите работающий пример, как на картинках, представленных выше.

По умолчанию выводится первый элемент списка. С помощью метода setSelection() можно установить нужный элемент по умолчанию, указав индекс из строкового ресурса.

За честные выборы! — что выбрал пользователь

Нам интересно узнать, что именно выбрал пользователь из списка и обработать эту информацию.

Нам нужно получить выбранный пользователем пункт в компоненте Spinner при помощи метода setOnItemSelectedListener() и реализовать метод onItemSelected() класса AdapterView.OnItemSelectedListener:

Теперь при выборе любого пункта вы получите всплывающее сообщение о выбранном пункте. Обратите внимание, что нам также пришлось реализовать вызов обратного вызова onNothingSelected().

В начале статьи показывался более простой способ с использованием метода getSelectedItem(), который достаточен для большинства случаев.

Предупредить компонент об изменении пунктов

Если в приложении вы изменили состав выпадающего списка, то необходимо сообщить компоненту Spinner, чтобы он показывал обновлённый список. Сделать это можно при помощи метода адаптера notifyDataSetChanged().

Найти позицию по слову

Если мы хотим узнать, в какой позиции находится то или иное слово, то нужно получить адаптер через метод getAdapter(), а затем уже и позицию.

Тонкая настройка — своя разметка для Spinner

Вы можете установить собственный фон, но не можете установить, к примеру, цвет и размер текста в настройках свойств. В предыдущих примерах мы видели, что при подключении к адаптеру используются системные разметки android.R.layout.simple_spinner_item и android.R.layout.simple_spinner_dropdown_item. Ничто не мешает вам посмотреть исходники данных файлов и создать файлы для собственной разметки, которые потом можно подключить к адаптеру.

Давайте создадим собственную разметку с значками. В папке res/layout создаём файл row.xml:

Осталось в коде заменить две строки на одну:

В примере использовался один общий файл, но можете создать два отдельных шаблона для закрытого и раскрытого вида элемента. Например, так (простейший вариант):

spinner.xml

spinner_dropdown_item.xml

В принципе, вы можете установить свой значок для каждого пункта, вам нужно создать свой адаптер под свои нужды. Создадим новый класс на основе ArrayAdapter и реализуем задачу. Теперь у двух любимых дней недели будет выводиться лапочка.

Программная настройка цвета и размера текста для первой строчки

В сети нашёл пример программной установки цвета и размера текста для первой строчки элемента в закрытом состоянии. Может кому пригодится.

Не выбирать элемент при запуске

Иногда хочется, что при запуске не выбирался первый элемент списка, как это происходит по умолчанию. Решение в лоб — добавить первым элементом пустую строку или текст «Выберите. » не слишком красив, так как при раскрытии списка мы увидим эти элементы, которые только портят картину. В сети нашёл вариант, использующий собственный адаптер.

CustomAdapter.java

Попробуйте этот вариант, может он подойдёт вам.

Режим android:spinnerMode=»dialog»

У компонента есть атрибут android:spinnerMode, у которого можно установить значение dialog. В этом случае при раскрытии списка задняя активность затемняется. Это хорошо заметно на белом фоне. Проверьте самостоятельно.

В этом режиме диалога для компонента Spinner можно вывести заголовок с помощью методов setPrompt() или setPromptId(). Заголовок выводится при раскрытии списка.

Источник

Android — Loading Spinner

You can show progress of a task in android through loading progress bar. The progress bar comes in two shapes. Loading bar and Loading Spinner. In this chapter we will discuss spinner.

Spinner is used to display progress of those tasks whose total time of completion is unknown. In order to use that, you just need to define it in the xml like this.

After defining it in xml, you have to get its reference in java file through ProgressBar class. Its syntax is given below −

After that you can make its disappear , and bring it back when needed through setVisibility Method. Its syntax is given below −

Apart from these Methods, there are other methods defined in the ProgressBar class , that you can use to handle spinner more effectively.

Indicate whether this progress bar is in indeterminate mode

Cause an invalidate to happen on a subsequent cycle through the event loop

Change the indeterminate mode for this progress bar

Invalidates the specified Drawable

Increase the progress bar’s secondary progress by the specified amount

Get the drawable used to draw the progress bar in progress mode

Example

Here is an example demonstrating the use of ProgressBar to handle spinner. It creates a basic application that allows you to turn on the spinner on clicking the button.

To experiment with this example , you can run this on an actual device or in an emulator.

Sr.No	Method & description
1

Steps	Description
1	You will use Android studio to create an Android application under a package com.example.sairamkrishna.myapplication.
2	Modify src/MainActivity.java file to add necessary code.
3	Modify the res/layout/activity_main to add respective XML components
4	Need to create a xml file in drawable folder.it contains shape and rotate information about the progress bar
5	Run the application and choose a running android device and install the application on it and verify the results

Following is the content of the modified main activity file src/MainActivity.java.

Following is the modified content of the xml res/layout/activity_main.xml.

In the following code abc indicates the logo of tutorialspoint.com

Following is the content of the res/drawable/circular_progress_bar.xml.

Following is the content of AndroidManifest.xml file.

Let’s try to run our application we just modified. I assume you had created your AVD while doing environment setup. To run the app from Android studio, open one of your project’s activity files and click Run icon from the toolbar. Android studio installs the app on your AVD and starts it and if everything is fine with your setup and application, it will display following Emulator window −

Now click on the load spinner button to turn on the loading spinner. It is shown in the image below −

Источник

Android. Выпадающий список (Spinner) с индикатором загрузки

Приветствую тебя, читатель!

Представляю твоему вниманию небольшой очерк о том, как захотелось мне видеть прогресс-бар («infinite circle») во время загрузки данных в выпадающий список, который в Андроиде называется Spinner.
Необходимость такая возникла при разработке небольшой утилиты по работе с веб-сервисом. Параметры некоего расчёта хранятся на централизованном сервере. Веб-сервис .NET отдаёт списки возможных параметров в виде массивов разной длины (от 2 до 50 элементов). Для отображения этих параметров и был выбран выпадающий список. Инициализация списков, как и положено, происходит асинхронно. И в то время, пока данные загружаются, смотреть на пустые статичные элементы безо всякого прогресса скучно, уныло и вообще.

Собственно цель

Стандартный Spinner выглядит так:

После небольшой доработки получается нечто такое (CustomSpinner):

«В чём же соль!?» — спросите вы? А соль в промежуточном состоянии (загрузка данных):

Для получения такого эффекта я вижу 2 пути:
1 Унаследоваться от Spinner; переопределить onDraw() и, возможно, какие-то другие методы; реализовать обработку состояний (загружается/загружен)
2 Унаследоваться от Layout; расположить на нём Spinner и ProgressBar; организовать работу контрола в соответствии со своими требованиями.

Первый путь, наверное, более правильный. Но каждый раз ступая на него я упирался в Exception’ы и вылеты приложения. Хотя с Android знаком достаточно давно, честно признаюсь — до сих пор не могу понять что именно нужно делаеть в методе onDraw(). Коврыться в исходниках очень не хочется, хотя иногда полезно. В-общем этот путь закончился, так тольком и не начавшись.

Второй путь подробнее описан в сети. По нему я прошёл быстро и непринуждённо. И был он таков…

XML-layout

Для начала нам нужно «набросать» наш новый контрол (custom_spinner.xml). В этом нет ничего сложного — корневой лэйаут и два дочерных элемента (спиннер и прогресс-бар). Для этого хорошо подойдёт RelativeLayout. У меня он получился вот таким:

Класс CustomSpinner

Для работы с контролом нужно реализовать класс CustomSpinner. Создаём класс, унаследованный от RelativeLayout:

Управление состоянием

Для достижения первоначальной цели (показ прогресс-бара при загрузке данных) модифицируем класс CustomSpinner:

В случае когда контрол находится в процессе загрузки нужно скрыть возможные имеющиеся в нём значения списка — spinner.setAdapter(emptyAdapter); . И, собственно, показать прогресс-бар.

Теперь при асинхронной загрузке, для которой я иcпользую AsyncTask, мы можем управлять поведением контрола:

«Костыли»

Ну конечно, а куда ж без них!

Вспомним, что значально мы хотели именно Spinner. Поэтому поведение контрола должно быть соответствующим. При выбранной реализации нужно реализовать несколько затычек:

Методы getAdapter(), setAdapter(), getSelectedItemPosition() просто «пробрасывают» действия на внутренний Spinner.
Внимание следует уделить методу setOnItemSelectedListener(OnItemSelectedListener l) . Я использую один обработчик (listener) для всех контролов (думаю так правильней) в котором с помощью switch(*some_unique_value*). case(R.id.model) определяю, что делать далее. Так как у выпадающего списка внутри нашего контрола нет уникального глобального идентификатора (он для всех R.id.spinner), то в тэг выпадающего списка записываем идентификатор родительского контрола ( spinner.setTag(getId()); ). Теперь при вызове обработчика смены значения в выпадающем списке сможем идентифицировать, какой именно список изменился:

Оработчик выпадающего списка:

Если бы наш кастомный контрол был унаследован непосредственно от Spinner, то этих костылей могло бы и не быть. Но увы.

CustomSpinner на форме

Осталось вставить наш новый элемент в интерфейс (лэйаут) приложения:

Источник

Android Loading Spinner with Examples

In android, ProgressBar is a user interface control that is used to indicate the progress of an operation such as downloading a file, uploading a file. The android ProgressBar comes in two shapes Horizontal ProgressBar and Spinner ProgressBar.

Following is the pictorial representation of using a different type of progress bars in android applications.

Generally, the loading spinner or spinning progress bar is used to display the progress of tasks whose total time of completion not known.

Create Android Loading Spinner in XML Layout File

In android, we can create Loading Spinner or Loading ProgressBar in XML layout file using

element like as shown below.

If you observe above code snippet, we defined a loading spinner using

element with different attributes.

By default the ProgressBar will be displayed as a spinning progress bar ( style= «?android:attr/progressBarStyleLarge» ), in case if we want to show it like horizontal bar then we need to change the style property to horizontal like style= «?android:attr/progressBarStyleHorizontal» .

To know more about progress bars in android, check this Android ProgressBar with Examples.

Once we define Loading Spinner in the layout file, we need to create an instance of ProgressBar and use setVisibility() method to show or hide progress bar like as shown below.

If you observe above code snippet, we created an instance of ProgressBar, used setVisibility() method to show or hide loading spinner.

Now we will see how to show or hide loading spinner on button click using the progress bar in android application with examples.

Android Load Spinner Example

Following is the example of showing or hiding loading spinner on button click using the progress bar in the android application.

Create a new android application using android studio and give names as LoadingSpinnerExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.

Now open activity_main.xml file from \res\layout folder path and write the code like as shown below.

activity_main.xml

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» >
Button
android :id= «@+id/btnShow»
android :layout_width= «wrap_content»
android :layout_height= «wrap_content»
android :layout_marginLeft= «80dp»
android :layout_marginTop= «100dp»
android :text= «Show Spinner»/>
Button
android :id= «@+id/btnHide»
android :layout_width= «wrap_content»
android :layout_height= «wrap_content»
android :layout_alignBottom= «@+id/btnShow»
android :layout_toRightOf= «@+id/btnShow»
android :text= «Hide Spinner»/>
ProgressBar
android :id= «@+id/pBar»
style= «?android:attr/progressBarStyleLarge»
android :layout_width= «wrap_content»
android :layout_height= «wrap_content»
android :layout_marginTop= «20dp»
android :layout_below= «@+id/btnShow»
android :layout_centerHorizontal= «true»
android :visibility= «gone»/>
RelativeLayout >

Now open your main activity file MainActivity.java from \java\com.tutlane.loadingspinnerexample path and write the code like as shown below

MainActivity.java

package com.tutlane.loadingspinnerexample;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity <
private ProgressBar pgsBar ;
private Button showbtn , hidebtn ;
@Override
protected void onCreate(Bundle savedInstanceState) <
super .onCreate(savedInstanceState);
setContentView(R.layout. activity_main );
pgsBar = (ProgressBar) findViewById(R.id. pBar );
showbtn = (Button)findViewById(R.id. btnShow );
hidebtn = (Button)findViewById(R.id. btnHide );
showbtn .setOnClickListener( new View.OnClickListener() <
@Override
public void onClick(View v) <
pgsBar .setVisibility(v. VISIBLE );
>
>);
hidebtn .setOnClickListener( new View.OnClickListener() <
@Override
public void onClick(View v) <
pgsBar .setVisibility(v. GONE );
>
>);
>
>

If you observe above code, we are showing or hiding progress bar on button click based on our requirements.

Output of Android Loading Spinner Example

When we run above program in android studio we will get the result like as shown below.

If you observe the above result, when we are click on the Show Spinner button the loading spinner will be shown, the same way when we click on Hide Spinner button the loading spinner will be hidden.

This is how we can use loading spinner in our android applications to show the progress of task based on our requirements.

Источник