Swipe меню android studio

SwipeRefreshLayout

В марте 2014 года был представлен новый компонент android.support.v4.widget.SwipeRefreshLayout, который входил в состав библиотеки Support Library v4. Сейчас это отдельная библиотека в составе AndroidX.

Компонент позволяет отказаться от сторонних библиотек и собственных велосипедов для реализации шаблона «Pull to Refresh», когда пользователь сдвигает экран, чтобы обновить данные. Подобное поведение можно увидеть в клиентах для Твиттера, чтобы получить новую порцию твитов, не дожидаясь, когда список сообщений обновится самостоятельно.

Пример на Kotlin

В марте 2020 года обзавелась стабильной версией.

В методах setColorSchemeColors() или setColorSchemeResources() следует указать используемые цвета.

Компонент достаточно интересный с занимательной анимацией. Вначале анимация представляла собой цветные полоски под заголовком программы. Позже анимацию заменили в стиле Material Design, теперь это маленький кружочек, внутри которого крутятся цветные линии (или чёрная линия, если не использовать метод setColorSchemeResources() со цветами).

Запустите пример и потяните экран сверх вниз, чтобы увидеть эффект обновления данных.

Устаревший пример для Java

Обернём компоненты родительским элементом SwipeRefreshLayout. На панели инструментов данного компонента нет, поэтому придётся писать код вручную.

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

При первом появлении библиотеки использовался метод setColorScheme(), который объявлен устаревшим. Вместо него появились два новых метода setColorSchemeColors() и setColorSchemeResources(). Принцип остался тот же, вам нужно указать четыре цвета по константам Color.XXX или из ресурсов. Вы можете не использовать вызов метода с цветными линиями, тогда будет выводиться только чёрная линия по умолчанию.

Компонент достаточно интересный с занимательной анимацией. Вначале анимация представляла собой цветные полоски под заголовком программы, как представлено на видео.

Позже анимацию заменили в стиле Material Design, теперь это маленький кружочек, внутри которого крутятся цветные линии (или чёрная линия, если не использовать метод setColorSchemeResources() со цветами).

Обновляем список

По такому же принципу обновляем данные в списке.

При каждой попытке обновить список будет добавляться текущая дата и время.

Не забывайте, что обновление может занимать длительное время и использовать сеть для получения данных. Поэтому следует позаботиться о выполнении в другом потоке.

Источник

Новый SwipeRefreshLayout из библиотеки Android support — «потяните чтобы обновить»

Тихо и незаметно вместе с обновлением библиотеки Android support до версии 19.1 в нее прокрался новый компонент, который часто бывает нужным и полезным в быту. Сей совсем крохотный росчерк я посвящаю ему, SwipeRefreshLayout.

Он добавляет функционал, который один мой коллега называет «резинка от трусов», а остальные знают этот UI-паттерн под названием «потяни, чтобы обновить». Он бывает нужен, когда есть какой-то контент, который пользователь хочет часто обновлять, и может это сделать, просто потянув контент жестом вниз, а потом отпустив.

Очень похоже, что компонент был создан для GoogleNow, а потом перекочевал в support lib (очень похожа анимация).

Алгоритм простой.

1. Компонент «оборачивается» вокруг View или Layout, для которого нужно сделать обновление и может содержать только одного потомка (похоже на ScrollView).
2. Устанавливается OnRefreshListener с одним единственным методом onRefresh(). Как на него реагировать — решаем сами.
3. Когда нужно показать, что идет обновление (и запустить анимацию), вызываем метод setRefreshing(boolean) и передаем ему true. Наиболее логичным кажется вызов метода внутри onRefresh().
4. Когда обновление закончено, вызываем метод setRefreshing(boolean) и передаем ему false.

Давайте попробуем набросать пример использования.
Наш XML (если нужно, можно и динамически создать компонент и добавить в него потомка, компонент наследуется от ViewGroup).

Теперь наша Activity, а именно метод onCreate:

В данном случае я сделал нашу Activity реализующей интерфейс OnRefreshListener

Обратите внимание на метод setColorScheme, он как раз и раскрашивает в разные цвета прогресс во время обновления. В видео ниже видно, о чем я говорю. Первый цвет из 4-х — цвет прогресса во время оттягивания контента вниз перед обновлением. Остальные — сменяющиеся цвета прогресса.

А теперь сам onRefresh();

UPD:
Для желающих добавил саму APK
Ссылка на APK в виде кода, чтобы было жить легче:

Источник

Android Recyclerview Swipe Menu Example

Sep 18, 2018 · 17 min read

In this post, I am explaining how to create recyclerview with swipe menu. by swipe right side of the recyclerview you can see the menu to edit and delete the particular item in the recyclerview.

We are going to create menu on top of the recyclerview items. But, I am not going to explain about recyclerview in this post. Check check below link to learn recyclerview in details.

Recyclerview Android Example [Beginners] — Howtodoandroid.com

In a ListView, it was recommended to use the ViewHolder pattern but it was never a compulsion. In case of RecyclerView…

In this tutorial, we are going to see how to add swipe menu over the recyclerview with example

Let’s create s a mple application to list all the task and by swiping right to left, we need to show the swiping menu. Also, we are going to perform by clicking the menu items. check the demo video.

1. Adding Recyclerview dependency

So, we are going to add swipe menu on top of the recyclerview items. So, we need both recyclerview and cardview dependencies. Both are part of the material design library. For that. I am adding material design dependency.

Material design also having more useful components for the android development. To know more about material design, check below

Android Chips — Material Component For Android — Howtodoandroid.com

Android Chips is one the component in Material Design library. A Material Chip is a component that can represent input…

2. Create Data Class For Recyclerview

To list all the task, we need to have a class called Task.java to hold the task list.

3. Setup UI For Recyclerview And Swipe Menu

In this step, First create activity_main.xml layout with recyclerview.

Once created the UI for the recyclerview. Next step is to create layout for the recyclerview adapter. lets create task_item.xml.

In the above task_item.xml, we have two LinearLayouts.

rowBG — holding the view for the background. That’s swipe menu items. in our example we are having edit and delete views.

rowFG — This layout holding the view for the main items. In our case, displaying all the tasks.

Note : In the XML layout both rowBG, rowFG should have the same height. So that the view looks as a single view. otherwise, it will overlap with other view.

In this layout, I have used cardview for the recyclerview items. If you like to know more about cardview check below link.

Cardview Android Example [beginners] — Howtodoandroid.com

now, the UI for the recyclerview adapter is ready. Next, create adapter and inflate the cardview layout into…

Now, we have created views for the recyclerview and the swipe menu. lets implement the swiping menu option programmatically.

4. Implement the Swiping Menu For Recyclerview

First, setup the adapter for the recyclerview RecyclerviewAdapter.java. This one is same as normal recyclview adapter. Adding swipe menu will see in below.

To implement to swiping functionality in recyclerview, we need to create class called RecyclerTouchListener.java to perform the swiping menu operation. All the explanation about this class operations provided in the comments of this class. Please refer that also.

Also, we need to create another interface OnActivityTouchListener.java. To gets coordinates from Activity and closes any swiped rows if touch happens outside the recyclerview.

5. Configure Swipe Menu in Recyclerview

Already, we have created Recyclerview and the swiping menu with swipe listeners. Now, Its time to configure the both recyclerview and swiping menu.

First, put some data into the recyclview.

Then, set the created TouchListener to the recyclerview.

In the RecyclerTouchListener,

setClickable — used to set the click listener for the recyclerview items. in our case, the main items that are displaying the task.

setSwipeOptionViews — in this method, we need to set the view id of the swipe view. In our case, Edit and delete view id’s.

setSwipeable — In this method, we need to tell the listener to listen for the swipeable items. in our example, we have rowFG, rowBG. Also, we need to pass the implementation of the OnSwipeOptionsClickListener to handle the swipe menu items clicks.

That’s all on Recyclerview swipe menu in android.

Download this example in GITHUB.

Conclusion

Thanks for reading.

Please try this and let me know your feedback in comments.

Share & Clap if you like this post.

Источник

Haider Mushtaq

Oh Lord, Make me Brave and Make my Path Easy for me !

Tutorial for Creating Android Swiping Application using Tabbed Activity on Android Studio

Why make this Tutorial?

The reason I am making this tutorial is that I wanted to make an application in which the user could swipe through different images. When I decided to create a new application, I came across this “Tabbed Activity” icon. I thought that this could help guide me. Once I opened it up and wanted to make it work, I got stuck. I decide to get help from the internet but unfortunately discovered that there was little or no material concerning Tabbed Activity on the Internet. I then went through the code, line by line trying to understand how it works and finally got it to work. I thought that I should write a tutorial to help someone like me who is also stuck with Tabbed Activity.

NOTE: If you have ideas about what should I add or how to further make this tutorial complete, do inform me. Thanks for your consideration.

Setting it Up!

Start by creating a new Project in Android Studio:

Enter the Application name and press Next:

Choose the Platform i.e Phone and Tablet then press Next:

Now the wizard would ask you to Add and activity to Mobile, you have to select Tabbed Activity which in my case was located in the end. Press Next after selecting it.

This window allows us to Choose options for your new file, we will let it stay as is and press Finish. A thing to note here is that you can choose to change Navigation Style of your tabbed activity but we will stick with the default which in our case is Swipe View (ViewPager).

After you press Finish, it will take some time to set things up. If it pops up some error, something similar to the one I encountered, it means that you either need to update your Android Studio or need to install missing components, or both.

To upgrade, go to Toolbar’s: Help > Check for Updates…

Choose to update and Restart when the dialog appears.

Next, you can install the missing components by clicking on the blue: “Install Repository and sync project“. This is written next to the Error message.

It will show you a licence, just accept and press install:

Now that everything is in order, Just give it a test run. In order to actually see what is happening, we need to add something to the fragment_main.xml file because it is empty by default.

Open fragment_main.xml, located in app > res > layout > fragment_main.xml

Now add a TextView with “Hello World”:

You can do this by dragging Text View and changing text to “Hello World” or what ever you want:

Now try doing a test Run:

Understanding how it works !

Look at the code in
app > java > yourPakage > MainActivity.java

The code that follows is the one we are really interested in :

The SectionsPagerAdapter class is a sub class of MainActivity class.

The getItem() is the most important method, that needs to be configured in order for it to display the fragments that you need to display.

Simply put, the “Fragment” that this method will return would be the one displayed in the Activity. So you need to put all your “Fragment” classes here and return them in the order you want them displayed. If you are unable to understand this, no need to sweat, just follow this tutorial and you will, -God Willing- understand it all.

Just know this, that there are many ways you can do this, using if conditions etc… I will use switch(position) to return my desired Fragment. The default code is shown here, I will make the changes in the next section.

The getCount() method returns the Total number of pages or the “Tabs”. This is where you can set the number of tabs. In this case, its set to 3. This means that there will be 3 Tabs. If you need to increase or decrease the number of tabs – this method needs to return the total number of tabs – so you need to make appropriate change here. If for example you have 5 tabs, you will change the line:
return 3; to return 5;

I have extracted PlaceholderFragment class and made it a class on its own. I have placed it in app > java > yourPakage > PlaceholderFragment.java

This makes no difference it all, but it would help you understand to code much better.

We can use PlaceholderFragment class as a template for our Fragment classes, the things that we would need to replace, i have marked in blue

Modifying the code to our Will !

Alright, now lets make our own Fragment and integrate it with the Tabbed Activity.

Firs off we will start by making the layout for our fragment. Lets call it my_fragment.xml.

We will do this by creating a new xml file in the layouts folder. app > res > layout > my_fragment.xml

You can do this by right clicking the layouts folder and choosing to create new xml layout.

I threw in a Button and a TextView, and also changed the color or my background… You can make this as you like… Here is the XML code: (The code written in Blue needs to be the same as it is going to be used in our code.

To do this right click on your pakage, select new and choose create new Java Class. I made a new class in my java directory and named it MyFragment : app > java > yourPakage > MyFragment.java

The code is as follows, I have removed all the unnecessary lines of code…

The class needs to extend Fragment

The newInstance() method needs to return the correct reference to our fragment as follows:

The MyFragment is the constructor method of our class, let it stay empty and public.

Here I am creating two new variables, one of type Button, and the other of type TextView, I will need to link them to the Button and TextView in my layout for this fragment.

The following is the most important method of our fragment, this links the fragment to its layout and we can also connect our Button and TextViews here by using findViewById method as we used to do in Activity.

You can think of onCreateView() method as onCreate() method of an Activity except that it has to return a view in the end.

In this onCreateView method, we will connect our fragment to our layout, my_fragment as follows:

Now we will connect our Button and TextView to those in our layout as follows, keeping in mind that we can only use findViewById() method from rootView:

I have configured my OnClickListner with my button here as follows:

Finally we need to return our View, rootView in this case:

Now our Fragment is all set, Now we just need to set it up so that it can be called by our MainActivity.java

After you have opened the MainActivity.java located in app > java > yourPakage > MainActivity.java search for the SectionsPagerAdapter Class which is a subclass of MainActivity Class go to the method getItem() :

The position is provided by Android’s OS. The position is responsible for the fragment that shows up. The first position is 0, so the first page that you want to be displaced should be returned when position is 0. You should know that you need to return an instance of a fragment, you can do this in various ways, by using if-else conditions etc… I have used switch.

If you are wondering why are you using instance of fragments and not constructors. The problem is that if we do that, every time we swipe and then later come back to our fragment, it will be reset, which we do not want.

The next thing that we need to is to tell our Adapter how many pages in total are there… i.e set the Max Value of Position. To do this you need to edit your getCount() method:

Previously the getCount() method returned the value 3, since we only want 2 pages to appear in our activity, we would replace it by 2.

31 Comments

Hi, sorry for this question but from here, do you have any idea how to place the tab bar at the bottom of the screen?

Then you can specify the alignment of your TabWidget, to align it at the bottom:

I am a newbie too, but it looks like you can modify your look in mainActivity.xml. I think you can use design tab to modify your bar to be under your fragment placeholder (simple, drag&drop) or change ‘manually’ settings in Text tab.

Great tutorial got this fragments down now!

Great tutorial got this fragments down now!

Great tutorial bro! Keep up the good work!

Thanks for this great Tutorial, I worked through was happy that i understood everything but at the very end the Fragment getItem() does not accept the type “Myfragment” but does rather want a usual Fragment. Unfortuneately a cast i not possible. Any ideas?

misstype in “Myfragment”? if you have copied the code exactly then it should be “MyFragment”

Maybe you just imported the ‘android.app.Fragment’, but you need to import the ‘android.support.v4.app.Fragment’.
I had the same problem and with this it works, hope I could help you.

error showing can’t find symbol variable “pager” …what to do??

Very helpful….Thanks alot

Great tutorial! Thanks Haider 🙂

How to change the Title of Action Bar whenever the tab changed (for example the title of action bar for first tab is “A”, then second tab the action bar will be “B”)

Great tutorial. I’m getting an error, “could not resolve symbol”, for inflater, container and savedInstanceState. I have imported android.view.LayoutInflater;
What could possibly be the reason ?

Is it possible to get the whole project that you build at the end?

When will you upload your part-3 tutorial? I am not getting the Tab names. How can I get the Tab names?

Excellent article Haider. I have one query. Is there a way to perform some operation on the various tabs using the MainActivity class MenuItems? Lets say I have a ExpandableListView in each of the tabs and I want to expand or collapse the Groups from the MainActivity menu items. How do I do that?

Is there a way to find which tab we are in (which fragment tab is selected by the user) from the MainActivity class?

good tutorial thank you!

This is the best tutorial I’ve found regarding the swipe layout thx!

Good Job Bro,
Keep up the good work 🙂

Hi, I am inflating different 2 fragment_xml based on the Section No. inside onCreateView() method .

Good work bro , Go ahead !

Genial. Saludos desde Argentina.

Thanks. It helped me a lot.

Muchas gracias por el tutorial mi amigo, lo quiero aplicar en el siguiente caso -> la base de datos manda informacion a mi app, y esta debe ser repartida en “n” fragmentos, ..como generaria fragmentos automaticos?, hay alguna otra forma de hacerlo? , espero tu respuesta muchas gracias ¡¡

This was such a great help! I was stuck for a long time getting this to work. Thank you.

Thank you very much! I was stuck too. Un saludo desde México

Amazing tutorial. I was overthinking the functionality of the template but now I see your tutorial, it is a lot easier.

Great tutorial i’ve did all what you learned and it’s perfect except by one thing in one of the fragments i have a button and it doesn’t work

Источник