#how to handle click on grid item in android | Explore Tumblr posts and blogs

siva3155 · 6 years ago

Text

300+ TOP Framework7 Interview Questions and Answers

Framework7 Interview Questions for freshers experienced :-

1. What is Framework7? The Framework7 is a free and open-source mobile HTML framework. It is used to develop hybrid mobile apps or web apps for iOS and Android devices. It is compatible with other frameworks like also be like Angular, React. 2. In which year Framework7 was introduced? The Framework7 was introduced in 2014. Its latest version v3.1.1 was released on August 3, 2018, licensed under MIT. 3. What is the reason behind Framework7 popularity? The Framework7 is popular because of the following reasons: It facilitates you to develop apps for iOS and Android both. The learning curve for Framework7 is very easy. Framework7 has many pre-styled widgets/components. It has built-in helper libraries. 4. What are the main features of Framework7? Main features of Framework7: Framework7 is an open source framework, so it is free to use. Framework7 has easy and familiar jQuery syntax so you can learn it very easily. Framework7 has the built-in FastClick library, so it is very easy to control-click delay for touch UI's. Framework7 has built-in grid system layout for arranging your elements responsively. Framework7 dynamically loads the page from the template via flexible router API. 5. What are the advantages of Framework7? Advantages of Framework7: Framework7 is not dependent on any third party library. Framework7 has its custom DOM7 for DOM manipulation. Framework7 can also be used with Angular and React frameworks. Framework7 facilitates you to create apps once you know HTML, CSS, and some basic JavaScript. It supports faster development via Bower. It is easy to develop apps for iOS and Android without learning it. 6. What are the disadvantages of Framework7? Disadvantages of Framework7: Framework7 only supports platforms like iOS and Android. The online community support for Framework7 is not as broad as iOS and Andriod. 7. What are the several layouts for Framework7? Framework7 provides different types of layouts for your application. It supports mainly four types of Navbar/Toolbar layouts: Static Layout: The static layout is most often used layout type and includes navbar and toolbar which can be scrollable page content and each page contains its navbar and toolbar. Fixed Layout: Fixed layout uses its navbar and toolbar which can be visible on screen and cannot be scrollable on the page. Through Layout: In through layout, the navbar and toolbar appear fixed for all pages within a single view. Mixed Layout: This layout is a mix of all the above layouts in the single view. 8. What are Navbars in Framework7? There are three parts in navbars which may contain any HTML content in the following way: Left: It is designed to place backlink icons or single text link. Center: It is used to display the title of the page or tab links. Right: This part can be used similarly as left part. 9. What is the use of different navbars in Framework7? Following is a list of different navbars with details: Basic navbar: A basic navbar can be created by using the navbar, navbar-inner, left, center and right classes. Navbar with links: To use links in left and right part of your navbar, add tag with a class link. Multiple links: To use multiple links, add a few more to the part of your choice. Links with text and icons: The links can be provided with icons and text by adding classes for icons and wrapping the link text with the element. Links with only icons: Navbar links can be provided with only icons by adding icon-only class to links. Related app and view methods: On initializing the View, framework7 allows you to use methods available for the navbar. Hide navbar automatically: The navbar can be hidden/shown automatically for some Ajax loaded pages where a navbar is not required. 10. What are the toolbars in Framework7? Toolbars are used to provide easy access to other pages by using navigation elements at the bottom of the screen. 11. What are the different Framework7 toolbars to use? You can use toolbars in two ways as specified in the table. Hide Toolbar: If you want to hide the toolbar automatically when you load the pages, use the no-toolbar class to loaded page. Bottom Toolbar: Place the toolbar at the bottom of the page by using the toolbar-bottom class. 12. What are the different methods used with the toolbar? Following is a list of methods used with toolbars: myApp.hideToolbar(toolbar): It hides the specified toolbar. myApp.showToolbar(toolbar): It shows the specified toolbar. view.hideToolbar(): It hides the specified toolbar in the view. view.showToolbar(): It shows the specified toolbar in the view. 13. What is Search Bar in Framework 7? SearchBar is obtained in Framework 7 by using the SearchBar class. It is used for searching the elements. 14. What are the different SearchBar properties in framework 7? Following is a list of different SearchBar properties: mySearchbar.params: It represents the initialized parameters passed with an object. mySearchbar.query: It searches the current query. mySearchbar.searchList: It defines the search list block. mySearchbar.container: It defines the search bar container with HTML element. mySearchbar.input: It defines the search bar input with HTML element. mySearchbar.active: It defines whether the search bar is enabled or disabled. 15. What are the different SearchBar methods? Following is a list of SearchBar methods: mySearchbar.search(query): This method is used to search the passed query. mySearchbar.enable(): It is used to enable the search bar. mySearchbar.disable(): It is used to disable the search bar. mySearchbar.clear(): It facilitates you can clear the query and search results. mySearchbar.destroy(): It is used to destroy the search bar instance. 16. What do you mean by Content Block in Framework 7? In Framework 7, Content Blocks make you able to add extra content with a different format. It is generally used when you have much content of different types, and you have to put all on a page. For example: This is out side of content block!!! Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 17. What is Layout grid in Framework 7? The Framework7 provides different types of grid types for placing the content according to user needs. The layout grid is used to provide different types of columns size. 18. What do you know by Overlays in Framework 7? In Framework7, overlays are used to work with applications smoothly. Following is a list of some Overlays in Framework 7: Modal: Modal is a small window which is used to display content from separate sources without leaving the parent window. Popup: Popup is a popup box which is used to display the content when the user clicks on the element. Popover: It manages the presentation of the temporary content. Action Sheet: The Action Sheet is used to present the user with a set of possibilities for how to handle a given task. Login Screen: Overlay login screen displays login screen format which can be used in page or popup or as a standalone overlay. Picker Modal: Picker modal is used to pick some custom content which is similar to calendar picker. 19. What is the Progress Bar in Framework 7? The progress bars can be used to show the loading of assets or progress of a task to the users. The Progress bar can be specified by using the progress bar class. When the user doesn't know how long the loading processes the request, you can use progress bar-infinite class. 25% 50% 75% 100% For complete example: Click here. 20. What Is Accordion In Framework7? In Framework 7, the accordion is a graphical control element displayed as a stacked list of items. Each accordion can be expanded or stretched to reveal the content associated with that accordion. For complete example: Click here. 21. What are the different classes used for accordion in Framework 7? Following classes are used in Framework 7 accordion: accordion-list: It is an optional class contains the group of accordion items list. accordion-item: It is a required class for a single accordion item. accordion-item-toggle: It is a required class used to expand accordion item content. accordion-item-content: It is a required class used for hidden accordion item content. accordion-item-expanded: It is a single expanded accordion item. 22. What are the cards in Framework 7? The Framework 7 cards contain organized information related to a single subject like a photo, link, and text. Following is a list of Framework 7 card type: Card HTML Layout: The basic card HTML layout uses card classes to arrange its items. List View With Cards: You can use cards as list view elements by adding cards-list class to . 23. What is the use of the floating action button in Framework 7? The Framework7 Floating Action Button is used for promoted action. It is like a circled icon floating above the UI and has motion behaviors that include morphing, launching, and a transferring anchor point. There are 3 types of action buttons used in Framework7: Floating Action Button Layout: It is very simple. You have to place it as a child of page or view. Morph to Popover: If you want to open popover on clicking the floating action button, then you can use floating-button-to-popover class. Speed Dial: You can invoke related actions upon clicking the floating action button by using speed dial. 24. What are tabs in Framework 7? The Framework7 tabs are the set of logically grouped content that facilitates you to move between them and save the space like accordion quickly. Let's see the layout of a Framework7 tab: ... The content for Tab 1 goes here ... ... The content for Tab 2 goes here ... 25. What is the message bar in Framework 7? The Framework7 Message bar is a resizable toolbar for usage with messages. It provides a special resizable toolbar to work with the messaging system in the application. Syntax: Send 26. What is the picker in Framework 7? In Framework7, the picker is a very powerful component which facilitates you to choose any values from the list and also used to create custom overlay pickers. It looks like native iOS picker and can be used as an inline component or as an overlay. 27. What is the use of infinite scroll in Framework 7? The Infinite scroll is used when you want to load additional content and perform the required actions when the page is near to the bottom. Syntax ... Here: page-content infinite-scroll: It is used for infinite scroll container. data-distance: This attribute is used to configure distance from the bottom of a page (in px) to trigger infinite scroll event, and its default value is 50px. 28. What is the autocomplete in Framework 7? In Framework7, autocomplete is a mobile friendly and touch-optimized component, which can be a drop-down or in a standalone way. You can create and initialize Autocomplete instance by using the JavaScript method: myApp.autocomplete(parameters. Here, parameters are required objects used to initialize the Autocomplete instance. 29. How can we use the date functionality in Framework 7? The Framework7 provides Calender component which facilitates you to handle dates easily and can be used as an inline or as an overlay component. The overlay calendar converted to pop over on tablets automatically. myApp.autocomplete(parameters) Here, parameters are required objects used to initialize the Autocomplete instance. 30. What is hairline in Framework7? Hairline is a class. It is used to add 1px border around the images by using the border class. It contains the following rules: :after – This pseudo element is used for bottom and right hairlines. :before – This pseudo element is used for top and left hairlines. Framework7 Questions and Answers Pdf Download Read the full article

0 notes

enrica534games-blog · 6 years ago

Text

Why Ignoring COMPETITION Can Feed You Generation next Sales

Gaming Blogs

It really is time to recognize the finest gaming blogs of the year. The genuine revenue in the video gaming niche comes from the affiliate sales. Not only promoting games, but promoting the other items that go along with them. This can variety from something to game guides, to digital currency for use inside the games, to headsets, to the consoles themselves. Let's assume about your target market for a minute. Gamers will do whatever they can to get an edge more than their competitors, even if that signifies paying for a ton for it. That's funds going straight into your bank account.

Taking a look at other elements of mobile gaming, such as the surge in popularity of mobile smartphone and tablet controllers” that hook onto your device to give you a lot more handle more than your in-game character, and you have access to a equivalent level of handle that you would knowledge on a Pc or console. Gone are the days of mobile players attempting to control their game via touchscreen controls only, opening up even much more gaming space on devices whose screens are not only becoming bigger but also clearer with much more pixels than ever just before.

It seems there was no 1 at White Wolf who recognized that leaving this passage out would not have an effect on the book in any meaningful way whatsoever - no one operating a game at their kitchen table is getting their gaming group's characters travel to Chechnya to explore the persecution of homosexuals throughout their Friday night game, and if they are, they will have to be intelligent adequate people to do so with out White Wolf's published words. Leaving it out affects practically nothing. Leaving it in impacts the company's reputation.

The retail giant is properly-identified for its expansions into novel industries and it really is gone and done it once again with game improvement. Amazon Lumberyard is a game engine born from Amazon's belief that game developers '˜deserve a further choice'. Cost-free, potent, and totally customisable, Lumberyard can be employed on projects for Computer, console and mobile gaming, and you only spend for the Amazon Net Services that you choose to use.

Irrespective of whether it really is the NES Classic Edition, the Xbox One's potential to play Xbox 360 games via backward compatibility, or the revival of nostalgic game consoles from generations previous, the retro gaming craze has never ever been greater. Satisfy your retro fix with Greatest Buy's wide choice of retro consoles and accessories, and show off your retro pride with Figures & Plush Toys of your favourite video game characters.

Yet another astounding product on in our gifts for gamers review. Making use of an ordinary mouse for your gaming needs is a challenge as you don't necessarily get the finest practical experience that you're hunting for. With the Razer Naga Chroma , not only are you guaranteeing exceptional game plays, you are also treated to a much more comfy encounter considering the fact that this gaming mouse is ergonomically developed to comply with the contours of your palms. A single of the ideal capabilities of the Naga Chroma is its completely adjustable DPI which is at the moment rated at 16,000. It even comes with 19 programmable buttons and a 12-button mechanical thumb grid for added tactile stimulus comparable to a mechanical gaming keyboard.

In the far away previous of the 1990's, becoming a Computer gamer was additional of a dedication rather than a basic gaming selection. You had the aggravation of dial-up web, effortlessly operating out of really hard drive space on your Computer, and your program was constantly crashing beneath the weight of certain games. Getting a console gamer was the sure-issue. But not any longer.

From an advertiser's viewpoint, gaming content material is a uncommon breed— one particular that delivers engagement and reach. Take Maker, a YouTube multichannel network owned by Disney, for example. Channels on its gaming sub-network, Polaris, reach far more 18—34-year-old guys than MLB's video network does, according to November 2014 information from comScore Video Metrix.

Gamers want to see how videogames are played to either discover from fellow gamers, or see if the game is worth acquiring. When it comes to building videogame content material, it is finest to stick with a particular format, as that aids gamers identify your web-site. 1 of the things that gamers appear for when watching their videos is character and character, as it makes the content relatable and approachable. Adding links to your video content material is also a single of the greatest strategies to enhance website traffic to your gaming web page, and it assists when your videos are optimized for Search engine optimization. For that matter, you can access our YouTube Search engine optimisation guide , which would assistance make your channel obtain additional website traffic.

Revenues of the Southeast Asian games market are anticipated to double to $two.2Bn by 2017. Thailand will stay the largest marketplace in terms of gaming revenues in Southeast Asia, closely followed by Indonesia and Malaysia. Singapore will continue to develop but will lose industry share to quicker increasing nations. Vietnam and Thailand will develop in line with the overall industry, preserving their marketplace share.

When on the hunt for a gaming WordPress theme, get involved in the amazingness of Respawn. With a single uncomplicated click, you can set up all the accessible demos, which are several, and get factors moving forward correct away. From then on, you can further strengthen the layout according to your taste. Or, of course, really feel free of charge to use it out of the box and have a complete-blown page up and operating in a snap of a finger.

The Untold Solution To MATCH In Less Than Twenty Seconds

Write what you're passionate about” is tips often provided to wouldbe bloggers and on the internet entrepreneurs (along with never overlook to check your spelling just before hitting the Publish key”). A person who's turned his passion into blogging is Baden Ronie, who runs the popular site Wolf's Gaming Weblog We asked Baden about writing and blogging in a recent interview.

GPD XD Plus transportable combines cutting-edge elements and technologies to give extraordinary mobile performance and precision gameplay for critical gamers. From next-generation Android games to retro emulator games, GPD XD gamepad is gaming The Way It's Meant to be Played. For now, GPD XD Plus (GPD XD 2018 upgrade version) is available. Big items had been upgraded on this latest device- six parts upgraded: Android 7., vulkan engine, MTK8176 Quad-core+ power VR, Bluetooth shared web, RAM 4GB, E-ink book mode.

GameCenter is an outstanding free gaming WordPress themes that are ideal for an animation or gaming weblog, eCommerce ready for content and solution internet sites. This theme is translation ready and multi-lingual compatible so use the language of your selection on your web site. It comes with how to hack games complete support which will be really useful for you if there will be any difficulties when making use of the theme. The theme is totally responsive and has all the thrilling elements that is needed to develop a terrific gaming blog, which includes a fresh appear and design and style, simple customizing possibilities and a great deal far more.

Play is a bold and minimalist cost-free WordPress theme best for the gamers if you are thinking to build a fantastic gaming web-site. This theme is completely integrated with WooComerce plugin that helps you to open an on the web organization. It is made with lots of astounding attributes that help you to make a significant quantity of versatile content material. This theme is Search engine optimisation optimized that is great to start off your journey in the gaming sector. The theme is actively maintained and often updated before each major WordPress release. And the theme looks outstanding on all the screen sizes.

0 notes

themesparadise · 7 years ago

Text

Magento 2 Themes & Magento 2.2, 2.1, 1.9 - 50+ Templates - Multi-Purpose Responsive | EVERYTHING

https://themesparadise.com/?p=12245

50+ Premium Magento 2 Themes, Magento 1.9, 2.zero & 2.1, 2.2 Templates & All Magento Extensions

Magento Extensions included

50+ Magento Themes included

The Highly effective Options of The whole lot Magento Theme

Get Premium Help by Magento Specialists Crew

The whole lot in different CMS

The whole lot is a bundle of 50+ Finest Premium Magento 1.9 Themes and Multipurpose Magento 2 Themes. Designed & developed by High Elite Writer. New replace on 2016.

This template is without doubt one of the trending, widespread and bestselling theme ever.

Templates contains varied kinds: inventive, distinctive, flat, materials design, clear, elegant, minimal, minimalist, simplicity, generic, widespread, fashionable, luxurious, excellent, eye-catching, retro, classic.

Additionally accessible on Prestashop, Shopify, Opencart

Useful resource credit:

IMPORTANT NOTE:

All graphic photos use for demo pattern solely and NOT embody within the buy packages. We're NOT accountable for any copyright infringement by utilizing these graphic photos. By buying our merchandise, you acknowledge and fully perceive and agree our discover. In case you are authors or personal copyright of any useful resource, please submit DCMA discover to [email protected].

11+ customized design for multi-purposes:

Grocery store, grocery retailer, mega mall, procuring heart

Mobility, electrical, professional scooters, components and repairs

Sneakers, streetwear, footwear for mens, womens & youngsters

Bicycle retailer gives bikes, gear, components, equipment

Trend, boutique, clothings, attire, purses, footwear

Sport, movies, laptop, cellular, ios, android video games, serial license keys

Furnishings, inside, ornament residence furnishings, kitchen, dinning room

Child & youngsters instructional toys, leisure, nursery.

Glass, sunglass, eyewear, contact lenses

Watches

Sport, sporting items, searching, fishing, tenting tools

Jewellery, Jewelry, Necklaces, Pendants, Bracelets, Rings, Earrings, Wedding ceremony Bands Charms Brooches.

Lingerie, sleepwear, swimsuits, babydoll clothes, backless bras, bridal, horny put on, panties for girls

Cosmetics & Magnificence, skincare, haircare, spa salons

Trend Nova

Chinese language Lunar New 12 months Holidays

Valentine items

Well being & Yoga, nutri-foods, medication

Laptop, laptops, macbook, monitor, hardwares

Telephones, cellular

Gardening instruments, indoor & outside

Cool options like:

Bootstrap three, SASS/SCSS, W3C HTML5, CSS3 legitimate.

Responsive, cellular compliance & pleasant, search engine optimisation

Visible Mega Menu (megamenu)

Ajax superior merchandise fitlered navigation

RTL, Multi-languages, multi-lingual, translation prepared, i18n

Weblog / information modules

Product labels, indicator, sale off, low cost, new arrial, deal…

FontAwesome icon

Superior admin theme choices

Fast-view, quickview, quickshop plugn

Ajax Cart

Bundle incorporates:

When buying this package deal you'll get all these themes:

26 Magento 2.2 Themes:

Clothes Retailer

Bicycle Retailer

Trend Retailer

Footwear Retailer

Jewellery Retailer

Sun shades Retailer

Furnishings Retailer

Fashionnova Retailer

Watches Retailer

Child Retailer

Lingerie Retailer

Magnificence Retailer

Wholesome Retailer

Backyard Retailer

Dennis Retailer

Gentleman Retailer

New Trend Retailer

Luxurious Jewellery Retailer

Valentine Retailer

Digital Retailer

Scorching Pattern Retailer

New Type Retailer

Digital Retailer

Procuring Middle Retailer

Health club Retailer

Golf Retailer

25 Magento 1.9 Themes:

Fashionnova Retailer

Grocery store

Smartphone Retailer

Laptop Retailer

Magnificence Retailer

Lingerie Retailer

Jewellery Retailer

Sport Retailer

Watches Retailer

Backyard Instrument Retailer

Sun shades Retailer

Child Retailer

Clothes Retailer

Trend Retailer

Footwear Retailer

Furnishings Retailer

Wholesome Retailer

Gameworld Retailer

Grocery store & Offers

Clear Trend Retailer

Product Touchdown Web page

Bicycle Retailer

Mello Retailer

Scooter Retailer

Lunar New 12 months Retailer

Additionally view our Best Magento Themes in 2015 assortment

Watch Installation Video Here

You should buy the HTML version right here

Options supported on this theme:

Magento 2 Prepared!

Responsive design, Bootrap three, Retina Picture.

Help Proper to Left design.

Help On/Off Reponsive.

Highly effective theme settings allows you to change colours, font, typography and different styling flexibility.

Field/broad type for theme

Drag & Drop Mega Menu builder, construct your a number of column menu by no means been simpler. value $49, included free of charge

Allow/Disable Default Navigation

Edit frontend straight with admin toolbar

On/off setting for extra animation when loading components

Included Revolution Slideshow with extra impact and show technique.

Present pop up commercial and e-newsletter or login type when loading.

Choose header type on your website with Multi header

Choice pop up for login type, wishlist, examine product

Choose Forex – Language type.

On/Off Sticky High Cart – Search – Menu on the highest of website when scrolling.

Superior Search with customized stage classes

Superior Layered Navigation, searching merchandise simpler and quicker. Make higher your store by block with ajax choices, ajax worth slider with out refreshing a web page. value $49, included free of charge

Set Hover & Various picture on mouse over product thumbnail.

Included Versatile Widget, simple to handle block.

Included Superior Filter Merchandise Widget, used to point out: Bestseller Merchandise, New Merchandise, Gross sales Merchandise, Particular Attribute (Featured Product, Particular Deal, Scorching Product), Regular Merchandise (with out conditional), included free of charge.

Included Assessment Widget, used to point out merchandise which have one of the best evaluations or present evaluations for merchandise

Multi Deal Professional, create offers with merchandise, Clock countdown, value $69, included free of charge

EM Weblog extension – Paid add-on

Included Tabs Widget.

Product quick-view, enable buyer to rapidly view a product particulars on fancy field popup with out leaving present web page.

Ajax add to cart function, add merchandise to Cart in a single click on, with out leaving present web page.

Included customized Product labels extension, Enable to create and handle product labels present on prime of product photos like to point bestseller, new, particular merchandise?

Block Sidebar Place, allow/disable, set place Magento?s default sidebar blocks.

Google Wealthy Snippets on product web page

Customise your product picture sizes freely.

Customise variety of merchandise show per row freely.

Cloud Tag Choice.

Set place for infomation components of product intimately web page with setting admin

Customized picture product with Cloudzoom/Lightbox/Default

Subsequent/Pre product with out leaving product web page.

Social Hyperlinks lets you share hyperlinks to your profiles in social networks.

Typography for normal components, grid, buttons prepared.

Present identify of blocks on frontend to simple discover the blocks in backend.

Detailed documentation with about 100 pages.

Typography & Customized CSS Courses

Theme assist normal typography, assist all HTML components, 24 columns grid system, assist adaptive format. Try the Typography and Widget pages for particulars.

Documentation

Detailed instruction that will help you set up the theme in your retailer or set up construct a full demo website like our demo retailer. Detailed instruction for utilizing our extensions, widget, theme settings. For developer, it guides you to develop a customized type prolonged from the unique type with out modifying the unique supply code.

Set up Magento 2 themes

We've got some assets right here to assist get you began utilizing the eCommerce platform of the long run – Magento 2.

It’s what we do. —View totally particulars docs : http://devdocs.magento.com/guides/v2.0/install-gde/bk-install-guide.html

How To Set up Magento 2 Theme on EC2 Amazon Server: Video

Changelog

==== 01/17/2017 ====

- Replace Magento model 2.2.2

==== 11/29/2017 ====

- Replace Magento model 2.2

==== 09/21/2017 ====

- Replace Magento model 2.1.9

==== 06/26/2017 ====

- Add Interest Retailer for magento 2.1.7.

==== 06/16/2017 ====

- Add HiTech Retailer for magento 2.1.7. - Repair the problem: delete merchandise in MegaMenu Extension.

==== 06/08/2017 ====

- EVERYTHING MAGENTO 2.1.7 is READY ! - Add Trend Store for magento 2.1.7.

==== 05/31/2017 ====

- Magento 2.1.6 : repair the problem quickshop. - Add Diamond Retailer for magento 2.1.6.

==== 05/24/2017 ====

- Add Wedding ceremony Present Retailer for magento 2.1.6.

==== 04/26/2017 ====

- Magento 1.9: Replace quickshop situation on model 1.9. - Magento 2.1.6 : repair the problem Emthemes_ProductLabel cannot save when choose situation is SKU

==== 04/21/2017 ====

- Replace slideshow và repair quickshop situation. - Repair situation: auto set up pattern knowledge for megamenu.

==== 04/17/2017 ====

Model 2.1.6 for Magento 2 Prepared!

==== 04/11/2017 ====

1. ADD NEW STORE - Add GOLF Retailer for ver 2.1.5. - Add GYM Retailer for ver 2.1.5. 2. ADD FUNCTION - Add operate auto set up knowledge megamenu. - Add folder app/code/Emthemes/MegaMenu/Controller/Export - Add folder app/code/Emthemes/MegaMenu/fixtures - Add extra file on app/code/Emthemes/MegaMenu/Setup three. Repair situation in regards to the cellular search - File app/design/frontend/Emthemes/every little thing/default/Magento_Search/ templates/type.mini.cellular.phtml

==== 03/14/2017 ====

ADD operate : Present identify of block in frontend to simple discover block in backend.

==== 03/27/2017 ====

EVERYTHING MAGENTO 2.1.5 is READY ! Repair the problems: - Add to cart with choices in product element web page and quickview popup. - Show the Shut button of Menu on Iphone5,6,7. - Add Account hyperlink on cellular for Valentine Retailer, Dennis Retailer, Bicycle Retailer.

==== 02/24/2017 ====

Add Procuring Middle Retailer for ver 2.1.four

==== 02/16/2017 ====

EVERYTHING MAGENTO 2.1.four is READY ! Add Digital Retailer for ver 2.1.four

==== 02/03/2017 ====

Add NewStyle retailer for ver 2.1.three Add xml file for megamenu and layernavigation module for magento 1.9.

==== 01/22/2017 ====

Replace The whole lot package deal to repair the set up situation.

==== 01/17/2017 ====

Add : Scorching Pattern retailer for Magento 2.1.three

==== 01/09/2017 ====

Model 2.1.three for Magento 2 Prepared! Add : Digital retailer for Magento 2.1.three Add : SmartPhone retailer for Magento 2.1.three

==== 01/09/2017 ====

Model 2.1.three for Magento 2 Prepared! Add : Digital retailer for Magento 2.1.three Add : SmartPhone retailer for Magento 2.1.three

==== 12/28/2016 ====

Model 1.9.three.1 for Magento 1.9 Prepared! Add : Valentine retailer for Magento 2.1

==== 12/15/2016 ====

MegaMenu For Magento 2.zero Prepared! Replace : Dennis retailer for Magento 1.9 Replace : Dennis retailer for Magento 2.1

==== 11/28/2016 ====

Replace : Luxurious Jewellery retailer for Magento 1.9 Replace : Luxurious Jewellery retailer for Magento 2.1

==== 11/12/2016 ====

Replace : New Trend retailer for Magento 1.9 Replace : New Trend retailer for Magento 2.1 Replace : Gentleman retailer for Magento 1.9 Replace : Gentleman retailer for Magento 2.1

==== 10/26/2016 ====

Replace : Halloween retailer for Magento 1.9 Replace : Halloween retailer for Magento 2.1

==== 05/26/2016 ====

Replace : Backyard retailer for Magento 2.zero

==== 04/28/2016 ====

1. Magento 1 We've got replace new patch to repair : "Third-Celebration Themes and Extensions Are at Danger We lately realized that an SQL injection vulnerability has been present in a number of third-party themes and extensions. Extensions with the vulnerability embody: - EM (Excessive Magento) Ajaxcart - EM (Excessive Magento) Quickshop "

2. Magento 2.zero.x - Replace new House : SuperMarket

==== 03/10/2016 ==== Magento 2 The whole lot :

1. Repair Compile error 2 . Replace Product label extension

==== 03/06/2016 ====

Magento 1.9 Replace new options! + Help Counsel Search End result https://www.magentocommerce.com/magento-connect/search-autocomplete-search-suggest.html + Help Megamenu Label

==== 02/29/2016 ====

Magento 2.zero Prepared! Magnificence Properties is on the market in Magento 2.zero.zero.zero Watch Properties is on the market in Magento 2.zero.zero.zero

==== 02/16/2016 ====

Magento 2.zero Prepared! BICYCLE Properties is on the market in Magento 2.zero.zero.zero Clothes Properties is on the market in Magento 2.zero.zero.zero

==== 02/01/2016 ====

Magento 2.zero Prepared! Trend Nova Properties is on the market in Magento 2.zero.zero.zero Furnishings Properties is on the market in Magento 2.zero.zero.zero

==== 01/16/2016 ====

Magento 2.zero Prepared! Trend Default Properties is on the market in Magento 2.zero.zero.zero Footwear Properties is on the market in Magento 2.zero.zero.zero Jewellery Properties is on the market in Magento 2

==== 12/29/2015 ====

* Construct: Model r_255 - em0131-update-package_M1.9.2.2_r255.zip. * Add Lunar New 12 months Retailer * Replace Tab extension * Replace LayerNavigation extension * Repair some bugs.

Help

Purchase Now

0 notes

iyarpage · 7 years ago

Text

New Course: Beginning RecyclerView

It’s day 5 of the Android Avalanche: an event where we’ll be releasing new Android and Kotlin books, courses, and screencasts every day!

Today, we are releasing a brand new course: Beginning RecyclerView.

In this 37-video course by Joe Howard, you’ll learn how to use Android’s RecyclerView to efficiently display a list of items. Through a series of hands-on exercises and challenges, you’ll set up a basic RecyclerView, learn to use different layout managers, add animation, and more. Take a look at what’s inside:

Part 1: RecyclerView Basics

In part one, learn to bind model data to RecyclerViews.

Introduction: Find out what’s covered in our RecyclerView video tutorial series, from basic setup to animations and common interactions.

The Starter App: Download the starter app and build it in Android Studio, and take a peek at the included starter layout files.

A Basic RecyclerView: See how to setup a basic RecyclerView, along with the corresponding LayoutManager, Adapter, and ViewHolder.

Binding the Views: Learn how to connect the model data displayed in the RecyclerView to the corresponding objects in the view layer.

Challenge: RecyclerView: Practice what you’ve learned so far to add more data into the rows of the RecyclerView, and then see a solution.

Responding to Clicks: See how to respond to clicks on the rows of the RecyclerView, and take the user to a detail screen for the corresponding row item.

Challenge: Favorites: Take all the basics of RecyclerView that you’ve learned so far to build a Favorites screen for the sample app.

Conclusion: Let’s review what you’ve covered in this first part on RecyclerView basics, and discuss what’s next.

Part 2: Layout Managers

In part two, learn to use the various RecyclerView layout managers: LinearLayoutManager, GridLayoutManager, and StaggeredGridLayoutManager.

Introduction: Let’s take a quick look at the layout managers that you’ll learn about in this part, and describe the capabilities of each.

LinearLayoutManager: Learn more detail about LinearLayoutManager by creating a horizontal RecyclerView on the detail screen.

Nested RecyclerViews: Create a nested RecyclerView, learn about LinearSnapHelper, and improve performance with a RecycledViewPool.

GridLayoutManager: See how to create a grid of items with RecyclerView using GridLayoutManager, replacing the need for GridView.

Custom Span Size: See how to use varying span sizes within a RecyclerView managed by GridLayoutManager using a span size lookup.

Challenge: Span Size: Practice setting custom span sizes on a RecyclerView managed by GridLayoutManager, then see a solution.

StaggeredGridLayoutManager: Learn how to handle the case of grid items having different natural sizes using StaggeredGridLayoutManager.

Switching Between Span Sizes: Add a menu to allow switching between span sizes for a RecyclerView managed by a StaggeredGridLayoutManager.

Challenge: Layout Managers: Practice what you’ve learned about layout manager to create a grid of items on the detail screen, then see a solution.

Conclusion: Let’s review what you learned about the various RecyclerView layout managers, and discuss what’s next.

Part 3: Decorating and Animating

In part three, learn how to use item decorations for spacing and separators and add animation.

Introduction: Learn about the objectives of this part, which are to become familiar with the capabilities of ItemDecoration and to see how to animate items in a RecyclerView.

ItemDecoration: Offsets: See how to use ItemDecoration with a RecyclerView to control the spacing around the items utilizing offsets.

ItemDecoration: Drawing: See how to use ItemDecoration with a RecyclerView to create separators between the elements in a list.

Challenge: ItemDecoration: Practice using ItemDecoration with a RecyclerView to create separators between the items in a grid, then see a solution.

Item Animations: Discover how to use animations to add dynamic effects to the presentation of the items in a RecyclerView.

Challenge: Item Animations: Practice using animations to add dynamic effects to the presentation of the items in a RecyclerView.

Conclusion: Let’s review what you learned about using ItemDecoration and animations with a RecyclerView, and discuss what’s next.

Part 4: Section Headers and View Types

In part four, learn about the different view types in a RecyclerView .

Introduction: Learn about the objectives of this part, which are to become familiar with using different view types in a RecyclerView.

Custom Section Headers: See how to sort the items displayed in a RecyclerView into groups and then add section headers to the groups.

Multiple View Types: Use view types to customize the display of items displayed in a RecyclerView, based on the type of the item.

Challenge: View Types: Practice using view types to customize the display of certain items in a RecyclerView, then see a solution.

Conclusion: Let’s review what you learned about using view types for items displayed in a RecyclerView, and discuss what’s next.

Part 5: Common Interactions

In the final part, learn how to handle different interactions with a RecyclerView.

Introduction: Learn about the objectives of this part, which are to become familiar with common interactions with a RecyclerView, such as drag and drop and swipe-to-delete.

ItemTouchHelper: Discover the capabilities and use cases for combining the ItemTouchHelper class with a RecyclerView.

Rearranging Rows: See how to use ItemTouchHelper to create a basic capability to rearrange the items in a RecyclerView.

Handles and Selection: See how to setup drag handles and item selection highlighting using ItemTouchHelper with a RecyclerView.

Challenge: ItemTouchHelper: Practice using ItemTouchHelper to allow for drag and drop rearrangement of the items displayed in a grid via a RecyclerView

Swipe to Delete: See how to use ItemTouchHelper to add a basic swipe-to-delete capability for the items in a RecyclerView.

Conclusion: In this final episode, we’ll summarize the course, and then see an overview of RecyclerView topics that were not covered.

The Android Avalanche Bundle

If you like this course, from now until March 30th you can get it along with the rest of our new Android and Kotlin books, courses, and screencasts — at a big discount!

Our new Android Avalanche Bundle includes:

Android Apprentice ($54.99 value): Gives you access to our new Android Apprentice book, which teaches you how to build four complete Android apps from scratch. PDF/ePub format.

Kotlin Apprentice ($54.99 value): Gives you access to our new Kotlin Apprentice book, which gives you a deep dive into the Kotlin programming language itself. PDF/ePub format.

A raywenderlich.com subscription ($19.99 value): Gives you access to all 8 of our new Android video courses, our 2 new Android screencasts, and access to any new courses and screencasts we release in the future.

The bundle price of $99.99 includes the first month of your subscription, which will continue at $19.99/month thereafter. You can cancel at any time and keep the books. This bundle gives you more than 20% off everything in the Android Avalanche!

The Android Avalanche bundle is only available for the next two weeks, so be sure to order your copy while you can.

Already a subscriber? As a subscriber, you already have access to this new course as part of your subscription. You can also enjoy a $20 discount on the bundle that will get you both books added to your collection. It’s our way of thanking you for supporting what we do here at raywenderlich.com.

Where To Go From Here?

If you want to learn Android and Kotlin development — or level up your existing skills – there’s no better way to learn than these new books, courses, and screencasts.

And this is only the beginning! We’re committed to creating more new books, courses, and screencasts on Android development, with the goal of covering Android and Kotlin in the same way that we’ve covered iOS and Swift over the years.

We truly appreciate your support in making this possible. We’re excited about this new chapter at raywenderlich.com. So order your copy of the Android Avalanche Bundle today before the deal is over!

The post New Course: Beginning RecyclerView appeared first on Ray Wenderlich.

New Course: Beginning RecyclerView published first on https://medium.com/@koresol

0 notes

mbaljeetsingh · 7 years ago

Text

Customizing Ionic Apps for Web & Mobile

This is a guest post from Simon Grimm, speaker and educator at Ionic Academy. Simon writes about Ionic frequently on his blog Devdactic.

With the development of Ionic apps comes the promise that your code will run on various platforms and screen sizes once it’s ready. While this can work and look fine on your targeted devices out of the box, it might not at first for everyone.

In this post, we’ll take a look at 4 areas to keep an eye on – especially if you plan to ship your Ionic app both as a website (or perhaps PWA?) and also as a native mobile app (perhaps even on phone and tablet devices).

Everything we need is already built into Ionic, but sometimes it’s easy to forget about all the awesomeness. So let’s get started with a tiny base for our examples!

App Starting Template Setup

For this article run the command below to start a new Ionic app with the side menu template:

ionic start devdacticResponsive sideMenu

It’s a super basic app with just 2 pages and a side menu (otherwise the name would be kinda bad) but we also need to make HTTP calls, therefore we use the new HttpClient which is available since Angular 5 and Ionic 3.9.0.

Simply change your app/app.module.ts to:

import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { ListPage } from '../pages/list/list'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ MyApp, HomePage, ListPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), HttpClientModule ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, ListPage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {}

That’s all we’ll need for our examples, so now let’s dive into our areas.

1. Responsive Grid Layout

Most Ionic components already adapt to screen changes and look good across various sizes. However, having something like a list item full size or an Ionic Card displayed full width on my large iMac screen kills my eyes.

If you need your app to look good on a small device and in a desktop web browser, you’ll need to make it as responsive as possible. And what’s better then using the Ionic Grid layout system?

But first we need some data we can display inside a list, so let’s add a simple HTTP call to your pages/home/home.ts like this:

import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Observable } from 'rxjs/Observable'; import { HttpClient } from '@angular/common/http'; import "rxjs/add/operator/map"; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { users: Observable<any>; constructor(public navCtrl: NavController, private httpClient: HttpClient, private plt: Platform, private alertCtrl: AlertController) { this.users = this.httpClient.get('https://randomuser.me/api/?results=20') .map(res => res['results']) } }

Now we have an array of users from the Randomuser API which we can display as cards. You could make this as simple iteration without any further testing, but if you’re serious about your design (which, of course you are!), you’ll want to make sure to test different sizes and breakpoints.

A breakpoint is a predefined value at which your design snaps from one category to the next. If your screen is smaller than 576px, you fall into the smallest category which is xs. However, at 577px your design will get the sm category applied, so you must prepare your design to also look good there, and at later breakpoints as well.

With Ionic, we can use the row and column system plus the breakpoints to build interfaces that look great across different platforms and adapt to display the best and most intuitive interface to the user.

Let’s take our example and add this code to our pages/home/home.html:

<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content> <ion-grid> <ion-row> <ion-col *ngFor="let user of users | async" col-12 col-xl-2 col-lg-3 col-md-4> <ion-card> <ion-item> <ion-avatar item-start> <img [src]="user.picture.medium"> </ion-avatar> <h2 text-capitalize> </h2> </ion-item> <ion-card-content> Bacon ipsum dolor amet salami prosciutto ham hock, strip steak buffalo ribeye pork chop. Beef ribs tenderloin tail shoulder. Spare ribs ham shoulder brisket rump hamburger. Pork belly kevin shoulder prosciutto ribeye pork chop chicken strip steak pig. </ion-card-content> </ion-card> </ion-col> </ion-row> </ion-grid> </ion-content>

One Ionic row offers 12 units space for columns, so each column can take an amount of those 12. If your row takes 12 units, it means the row is already full and the next column will be displayed in the following row.

The syntax for the column isn’t immediately obvious, so let’s dive deeper into what it actually means:

col-12: If no other rules match, the column will take all 12 units (greedy column!)

col-md-4: At a minimum width of 768px, each column will only use 4 units. This means, a row can now handle 3 columns

col-lg-3: As the screen gets bigger than 992px, a column only needs 3 units which means the row how holds 4 columns

col-xl-2: On the largest screens (1200px+), a column only needs 2 units and a row will display 6 columns

In our example, a column always holds a card, so the design ranges from seeing only 1 card to 6 cards maximum (seen below).

Using a decent flexible layout is definitely mandatory if your app is going to run on multiple platforms and screen sizes. If you don’t invest time into doing this, your app might scare off potential users because it just looks odd.

There’s a lot more to the Grid like setting your own breakpoints, reordering columns, and more so go check it out!

2. CSS Media Queries

While we can’t really accredit this one directly to Ionic, we are still lucky that Ionic bets strongly on the Web and we can thus take advantage of languages like CSS, which most of us have all learned years ago.

Just like the grid layout, we can make use of breakpoints here as well by using @media and different sizes to change part of our UI.

In a recent app, we needed an ion-fabbutton at the top right corner on the web version as it was too hard to spot when it was at the far bottom right corner. However, on a mobile version of your app users are already familiar with having the button floating above lists at the bottom right.

This means the element needs exist in completely different places depending on screen size (and this is a simple element).

One way to achieve this is by having the element there twice, but only displaying it when the media query of your CSS matches. To do this, add the Fab button to your your pages/home/home.html after the list we already have:

<ion-fab right bottom class="web-fab"> <button ion-fab icon-only color="primary" (click)="checkPlatform()"> <ion-icon name="help"></ion-icon> </button> </ion-fab> <ion-fab right top edge class="mobile-fab"> <button ion-fab icon-only color="primary" (click)="checkPlatform()"> <ion-icon name="help"></ion-icon> </button> </ion-fab>

If you want to make only one button visible, you could use the follow CSS inside your pages/home/home.scss:

page-home { @media (max-width: 576px) { ion-card-content { font-size: 2rem !important; } } @media (max-width: 820px) { .mobile-fab { display: none; } } @media (min-width: 820px) { .web-fab { display: none; } } }

By using the media query you can of course do much more than hide and show elements by repositioning your elements. If you know where your elements should be exactly on the screen, you can also use just one element with the class.

For this example I wanted to use the Ionic values right bottom and top edge therefore I added the element twice instead of manually setting the position of the button.

With media queries you can customize the complete UI up to using a completely different UI for phone and tablet devices. It’s good to have this tool in your toolbox.

3. Checking Your Platform

Not only do we have to think about the UI of our app on different platforms, we should also understand on which platform(s) our app is running.

If your app runs inside a regular desktop browser you don’t need to call the Push notification setup, and you especially don’t want to make any calls to Cordova when running as a website!

To prevent this, simply inject the Platform whenever you need it and create checks to see on which platform you are running. As a test, open your pages/home/home.ts and change it to:

import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Observable } from 'rxjs/Observable'; import { HttpClient } from '@angular/common/http'; import "rxjs/add/operator/map"; import { Platform } from 'ionic-angular/platform/platform'; import { AlertController } from 'ionic-angular/components/alert/alert-controller'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { users: Observable<any>; constructor(public navCtrl: NavController, private httpClient: HttpClient, private plt: Platform, private alertCtrl: AlertController) { this.users = this.httpClient.get('https://randomuser.me/api/?results=20') .map(res => res['results']) } checkPlatform() { let alert = this.alertCtrl.create({ title: 'Platform', message: 'You are running on: ' + this.plt.platforms(), buttons: ['OK'] }); alert.present(); if (this.plt.is('cordova')) { // Do Cordova stuff } else { // Do stuff inside the regular browser } } }

By checking this.plt.is('cordova') you can be sure that Cordova is available to your app, but you could also test for iOS / Android if you have specific code for those platforms.

One feature that’s especially different on a device and desktop browser is files. Inside your native app you will have a completely different file object (most of the time path to your app) then when you implement file upload for a browser.

If your app doesn’t need the feature on one or the other platform, no problem! But be aware that you have to keep an eye on testing your features on all targeted platforms to make sure everything’s working as planned.

4. Ionic Split Pane

One feature thing that makes desktop UI ready in seconds is the Ionic Split Pane.

We’ve already started an app with a side menu, so we only need to apply minimal changes to achieve a flexible dynamic UI that adapts to the screen size and automatically shows / hides our side menu.

Combine this approach with some CSS, and you get a (more or less) great looking web UI for your app. Don’t hate my color choices, this example is not about how I never became the designer I dreamed to be.

So here’s what you need to change for your Split Pane inside the app/app.html:

<ion-split-pane when="sm"> <ion-menu [content]="content"> <ion-header> <ion-toolbar color="secondary"> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-content class="menu-container"> <ion-list no-lines> <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class="transparent list-item"> </button> </ion-list> </ion-content> </ion-menu>  <ion-nav [root]="rootPage" #content main swipeBackEnabled="false"></ion-nav> </ion-split-pane>

With the side menu template, our menu is directly at the top of the app. Normally this would be perhaps in a later page (after a login) and therefore also the CSS would be in a different place.

For this example, we have to fit our additional CSS into the app/app.scss with some colors and changes to make the menu look more natural on the web:

.split-pane-side { border-right: 0px !important; } .menu-container { background-color: color($colors, secondary); } .transparent { background: transparent; } .list-item { color: #ffffff; margin-bottom: 10px; font-size: 2rem; } :hover.list-item { background: #2e8015; } .scroll-content{ overflow: hidden; margin-right: -17px; overflow-y: scroll; }

The standard UI doesn’t look that good for a website, but of course with some CSS, colors, and hover effects (which you don’t really need for a mobile app) you can make the menu look like a standard menu you’re familiar with.

To further customise your Split Pane, you can override Ionic variables inside the theme/variables.scss so simply add this:

$split-pane-side-max-width: 12%;

Now your side menu won’t expand too far, and even look nice even on big screens!

Conclusion

It’s already epic to have one code base that can be built into a native mobile app and also be deployed to the web, but the flexibility of using some CSS and responsive items makes Ionic the perfect choice for both your next web application, PWA and mobile app!

To learn more about everything Ionic, check out the Ionic Academy, which offers a ton of courses on all related topics, projects to apply your knowledge in, and also a dedicated community with help for all your questions!

Good luck, and happy building!

via The Official Ionic Blog http://ift.tt/2CdrMA5

#IFTTT #Feedly

0 notes

t-baba · 8 years ago

Photo

Mobile insights from the Stack Overflow 2017 Developer Survey (#152)

Mobile Web Weekly April 5, 2017 #152

Chris Brandrick recommends

3 Strategies for Handling Accidental 'Taps' on Touch Devices — During mobile e-commerce testing users often accidentally tap items on the page – this article reviews ways to handle those inadvertent “clicks”. Jamie Appleseed

Holly Schinsky recommends

Migrating from Cordova to React Native — An introduction to both Cordova and React Native, showing the process of migrating an example app, with strategies, tips, and potential gotchas. Steve Connelly

Chris Brandrick recommends

Mobile and the 2017 Developer Survey Results — Stack Overflow recently published their 2017 Developer Survey results. 23% of 51,000 respondents consider themselves as mobile devs. Here, Ariel Elkin offers some thoughts on the findings. Sitepoint

Sponsored

Europe's developer-focused job platform - Get your ideal job in 3 weeks — On Honeypot companies send developers interview requests. Your profile stays live for 3 weeks Honeypot

Brian Rinaldi recommends

You Don't Get AMP — ”..taking a step back and looking again might help reconcile how Google and the developer community are approaching AMP.” Matt Brennan

Chris Brandrick recommends

Designing for the Appearance of Speed — Performance, conversion, and engagement are inextricably connected. But speed isn’t as simple as the shortest distance from point A to B. Bill Chung

Brian Rinaldi recommends

Mobile Web: Back to The Future — How the current state of the mobile web, with things like AMP and Instant Articles, resembles the old WAP days of mobile dedicated sites. Ronan Cremin

Brian Rinaldi recommends

Progressive Web App Questions — Jeremy answers some interesting questions about PWAs he received from a student researching them. Jeremy Keith

Peter Cooper recommends

Gen Z: A Look Inside Its Mobile-First Mindset — Google looks at how the next generation of consumers are using mobile devices. Think With Google

Brian Rinaldi recommends

Questioning Container Queries — Container queries are always a popular topic when discussing the future of responsive design. But do we actually need them anymore? Paul Robert Lloyd

Brian Rinaldi recommends

Does CSS Grid Replace Flexbox? — A question that might be on your mind after the blitz of CSS Grid articles in recent weeks. In short, not exactly, but there are some good examples here. Robin Rendle

Brian Rinaldi recommends

CSS Viewport Units: A Quick Start — An introduction to the use of CSS viewport units for responsive typography and layout elements. Asha Laxmi

Holly Schinsky recommends

Unveiling Ignite 2 — Ignite 2 beta is now available with new features to help developers build React Native apps. Gant Laborde

Peter Cooper recommends

Ionic 3.0.0 Beta Released Ionic

Holly Schinsky recommends

Ionic vs React Native — A comparison of Ionic to React Native for building mobile apps. Ankush Aggarwal

Holly Schinsky recommends

Writing React Native Apps with MobX — How to write a React Native app with MobX and React Navigation Flow styled-components. Wojtek Szafraniec

Holly Schinsky recommends

Building a React Native App in Under 15 Minutes — How to build a React Native app in 15 minutes with Ignite 2. Infinite Red

Brian Rinaldi recommends

Creating Your First Native Mobile App with Visual Studio and NativeScript — Setting up Visual Studio with NativeScript to build cross-platform mobile apps using JavaScript. Rob Lauer

Holly Schinsky recommends

How I Created My First Android App using Framework7 and Cordova Alapan

by via Mobile Web Weekly http://ift.tt/2o3bMgn

#Mobile #Mobile Branding #Mobile Development #Web Development

0 notes

iyarpage · 8 years ago

Text

Android RecyclerView Tutorial with Kotlin

Update note: This tutorial has been updated to Kotlin, Android 26 (Oreo) and Android Studio 3.0 by Rod Biresch. The original tutorial was written by Darryl Bayliss.

Recycling is one of those things that is good for the planet, and it’s a common sense way to make sure we don’t find ourselves buried in our own rubbish or without sufficient resources in the future.

A few Android engineers thought about the benefits of recycling and realized that an OS can also run more efficiently if it recycles. The result of this inspiration was millions of eco-Warriors and recycling enthusiasts rejoicing when the RecyclerView widget was introduced into Android Lollipop — or something like that. :]

There was even more celebration when Google announced a support library to make this clean, green, recycling machine backwards compatible all the way to Android Eclair (2.2), which was released back in 2010!

In this tutorial, you’re going to experience the power of RecyclerView in action and learn:

The purpose of a RecyclerView

The components that make up a RecyclerView

How to change the layout of a RecyclerView

How to add some nice animations to your RecyclerView

You’re also going to blast off into outer space with the sample app Galacticon. You’ll use it to build out a feed of daily astronomy photos from a public NASA API.

Prerequisites: You should have a working knowledge of developing for Android with Kotlin before working through this tutorial. If you need a refresher, take a look at some of our introductory tutorials! Also, you will need Android Studio 3.0 or greater.

Heading to Cape Canaveral: Getting Started

Download the starter project and open it up in Android Studio. There isn’t much to it yet, nor is the almighty RecyclerView anywhere to be seen.

Click the Run app button at the top and you’ll see something that resembles outer space in all the wrong ways:

It’s empty, but that’s ok. You wouldn’t learn much if all the work was done for you! Before you can add that amazing astrophotography from NASA, you’ll need to do some set up work.

Obtaining The (API) Keys to the Shuttle

You’ll use the Astronomy Picture of the Day API, one of the most popular web services provided by NASA. To ensure it doesn’t fall victim to unsolicited traffic, the service requires you to have an API key to use it in an application.

Fortunately, getting a key is as simple as putting your name and email address into api.nasa.gov and copying the API key that appears on the screen or the email sent to you.

Once you’ve acquired your API key, copy it and open the strings.xml file in your project. Paste your API key into the api_key string resource, replacing INSERT API KEY HERE:

Space Oddity: Learning About RecyclerView

You’re about to blast off into outer space to explore the vastness of RecyclerViews, but no competent commander heads into the unknown without preparation. You have questions, and you need answers before you go any further. Consider this section as your mission brief.

A RecyclerView can be thought of as a combination of a ListView and a GridView. However, there are extra features that separate your code into maintainable components even as they enforce memory-efficient design patterns.

But how could it be better than the tried and tested ListView and GridView you’re used to? Could it be some kind of alien technology? The answers, as always, are in the details.

Why You Need RecyclerView

Imagine you’re creating a ListView where the custom items you want to show are quite complicated. You take time to lovingly create a row layout for these items, and then use that layout inside your adapter.

Inside your getView() method, you inflate your new item layout. You then reference every view within by using the unique ids you provided in your XML to customize and add some view logic. Once finished, you pass that view to the ListView, ready to be drawn on the screen. All is well…or is it?

The truth is that ListViews and GridViews only do half the job of achieving true memory efficiency. They recycle the item layout, but don’t keep references to the layout children, forcing you to call findViewById() for every child of your item layout every time you call getView().

All this calling around can become very processor-intensive, especially for complicated layouts. Furthermore, the situation can cause your ListView scrolling to become jerky or non-responsive as it frantically tries to grab references to the views you need.

Android engineers initially provided a solution to this problem on the Android Developers site with smooth scrolling, via the power of the View Holder pattern.

When you use this pattern, you create a class that becomes an in-memory reference to all the views needed to fill your layout. The benefit is you set the references once and reuse them, effectively working around the performance hit that comes with repeatedly calling findViewById().

The problem is that it’s an optional pattern for a ListView or GridView. If you’re unaware of this detail, then you may wonder why your precious ListViews and GridViews are so slow.

First Contact: RecyclerView and Layouts

The arrival of the RecyclerView changed everything. It still uses an Adapter to act as a data source; however, you have to create ViewHolders to keep references in memory.

When you need a new view, it either creates a new ViewHolder object to inflate the layout and hold those references, or it recycles one from the existing stack.

Now you know why it’s called a RecyclerView!

Another perk of using RecyclerViews is that they come with default animations that you don’t have to create or add yourself — they just work.

Thanks to the requirement for a ViewHolder, the RecyclerView knows exactly which animation to apply to which item. Best of all, it just does it as required. You can even create your own animations and apply them as needed.

The last and most interesting component of a RecyclerView is its LayoutManager. This object positions the RecyclerView’s items and tells it when to recycle items that have transitioned off-screen.

Layout Managers come in three default flavors:

LinearLayoutManager positions your items to look like a standard ListView

GridLayoutManager positions your items in a grid format similar to a GridView

StaggeredGridLayoutManager positions your items in a staggered grid format.

You can also create your own LayoutManagers to use with a RecyclerView if you want an extra bit of customization.

Hopefully that answers all your questions, commander. Now, onto the mission!

Preparing for Launch: Creating the RecyclerView

To create the RecyclerView, you’ll break the work into four parts:

Declare the RecyclerView in an activity layout and reference it in your activity Kotlin file.

Create a custom item XML layout for your RecyclerView to use for its items.

Create the view holder for your view items, hook up the data source of the RecyclerView and handle the view logic by creating a RecyclerView Adapter.

Attach the adapter to the RecyclerView.

Step one should be familiar. Open up the activity_main.xml layout file, and add the following as a child of the LinearLayout:

<android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical"/>

Here you’re setting up the layout and telling the RecyclerView to match its parent.

Note: You’re using the v7 support library for backwards compatibility with older devices. The starter project already adds the RecyclerView Support Library as a dependency in your app’s build.gradle file. If you want more information on how to do it yourself, check out the Android developer website.

Open MainActivity.kt and declare the following property at the top of the class:

private lateinit var linearLayoutManager: LinearLayoutManager

In onCreate(), add the following lines after setContentView:

linearLayoutManager = LinearLayoutManager(this) recyclerView.layoutManager = linearLayoutManager

Android Studio should prompt you to import kotlinx.android.synthetic.main.activity_main.* for recyclerView. You may wonder how do we have a reference to recyclerView without first finding the view, i.e. findViewById()? The project has been configured to use Kotlin Android Extensions plugin. This plugin enables the ability to import views in a layout as “synthetic” properties.

import kotlinx.android.synthetic.main.activity_main.*

The recyclerView is now an extension property for Activity, and it has the same type as declared in activity_main.xml. The plugin removes a lot of boilerplate code and reduces the risk of potential bugs.

Phase one of ignition is complete! You’ve declared and allocated memory for two parts of the puzzle that RecyclerViews need to work: The RecyclerView and its Layout Manager.

Ignition Phase 2: Laying out the RecyclerView Items

Phase two of ignition involves creating a custom layout for the item you want your RecyclerView to use. It works exactly the same as it does when you create a custom layout for a ListView or Gridview.

Head over to your layout folder and create a new layout with the name recyclerview_item_row and set the root element as a LinearLayout. In your new layout, add the following XML elements as children of your LinearLayout:

No rocket science here: You declared a few views as children of your layout, and can now use them in your adapter.

Adapters: Rocket Fuel for Your RecyclerView

Right-click on the com.raywenderlich.galacticon folder, select New \ Kotlin File/Class, and name it RecyclerAdapter and select Class for Kind. At the top of the file below the package declaration, import the support library’s version of RecyclerView:

import android.support.v7.widget.RecyclerView

Make the class extend RecyclerView.Adapter so it looks like the following:

class RecyclerAdapter : RecyclerView.Adapter<RecyclerAdapter.PhotoHolder>() { }

Android Studio will detect that you’re extending a class that has required methods and will underline your class declaration with a red squiggle.

To resolve this, click on the line of code to insert your cursor, then press Option + Return (or Alt + Enter on a PC) to bring up a context menu. Select Implement Methods:

Confirm you want to implement the suggested methods by clicking OK:

These methods are the driving force behind your RecyclerView adapter. Note how there is still a compiler error for the moment– this is because your adapter and the required methods are actually defined using your ViewHolder class, PhotoHolder, which doesn’t exist just yet. You’ll get to define your ViewHolder and see what each required method does shortly, so just hang tight, Commander!

As with every adapter, you need to provide the corresponding view a means of populating items and deciding how many items there should be.

Item clicks were previously managed by a ListView’s or GridView’s onItemClickListener. A RecyclerView doesn’t provide methods like this because it has one focus: ensuring the items inside are positioned properly and managed efficiently.

The job of listening for actions is now the responsibility of the RecyclerView item and its children. This may seem like more overhead, but in return, you get fine-grained control over how your item’s children can act.

At the top of your RecyclerAdapter class, add a variable photos to hold your photos in the primary constructor:

class RecyclerAdapter(private val photos: ArrayList<Photo>) RecyclerView.Adapter<RecyclerAdapter.PhotoHolder>() {

Nice job, Commander! Your adapter now knows where to look for data. Soon you’ll have an ArrayList of photos filled with the finest astrophotography!

Next, you’ll populate the stubbed methods that were added by Android Studio.

The first method, getItemCount(), is pretty simple and should be familiar from your work with ListViews or GridViews.

The adapter will work out how many items to display. In this case, you want the adapter to show every photo you’ve downloaded from NASA’s API. To do that, add update getItemCount() to the following:

override fun getItemCount() = photos.size

Next, you’re going to exploit the ViewHolder pattern to make an object that holds all your view references.

Velcro For All: Keeping Hold Of Your Views

To create a PhotoHolder for your view references, you’ll create a nested class in your adapter. You’ll add it here rather than in a separate class because its behavior is tightly coupled with the adapter. First, import synthetic properties for the recycler view item so you can reference the view properties:

import kotlinx.android.synthetic.main.recyclerview_item_row.view.*

Add the following code at the bottom of the RecyclerAdapter class:

//1 class PhotoHolder(v: View) : RecyclerView.ViewHolder(v), View.OnClickListener { //2 private var view: View = v private var photo: Photo? = null //3 init { v.setOnClickListener(this) } //4 override fun onClick(v: View) { Log.d("RecyclerView", "CLICK!") } companion object { //5 private val PHOTO_KEY = "PHOTO" } }

So what did you do here?

Made the class extend RecyclerView.ViewHolder, allowing it to be used as a ViewHolder for the adapter.

Added a reference to the lifecycle of the object to allow the ViewHolder to hang on to your View, so it can access the ImageView and TextView as an extension property. Kotlin Android Extensions plugin adds in hidden caching functions and fields so that views are not constantly queried.

Initialized the View.OnClickListener.

Implemented the required method for View.OnClickListener since ViewHolders are responsible for their own event handling.

Added a key for easier reference to the particular item being used to launch your RecyclerView.

You should still have a compiler errors with onBindViewHolder and onCreateViewHolder methods. Change the holder: ? argument on onBindViewHolder to have a type RecyclerAdapter.PhotoHolder.

override fun onBindViewHolder(holder: RecyclerAdapter.PhotoHolder, position: Int) { TODO("not implemented") //To change body of created functions use File | Settings | File Templates. }

Then add a RecyclerAdapter.PhotoHolder return type to the onCreateViewHolder method and remove the safe call operator (i.e. ?) of the parent argument type.

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerAdapter.PhotoHolder { TODO("not implemented") //To change body of created functions use File | Settings | File Templates. }

You should now be able to build and run the app again, but it’ll look about the same because you haven’t told the RecyclerView how to associate the PhotoHolder with a view.

Assembling The Pieces

Sometimes there are no ViewHolders available. In this scenario, RecylerView will ask onCreateViewHolder() from RecyclerAdapter to make a new one. You’ll use the item layout — PhotoHolder — to create a view for the ViewHolder.

The inflate code could simply be added to onCreateViewHolder(). However, this is a nice opportunity to show a really cool Kotlin feature called Extensions.

First, add a new Kotlin file named Extensions.kt to the project and then add the following new extension function to the new file:

fun ViewGroup.inflate(@LayoutRes layoutRes: Int, attachToRoot: Boolean = false): View { return LayoutInflater.from(context).inflate(layoutRes, this, attachToRoot) }

Replace the TODO("not implemented") line between the curly braces in onCreateViewHolder() with the following:

val inflatedView = parent.inflate(R.layout.recyclerview_item_row, false) return PhotoHolder(inflatedView)

Here you inflate the view from its layout and pass it in to a PhotoHolder. The parent.inflate(R.layout.recyclerview_item_row, false) method will execute the new ViewGroup.inflate(...) extension function to inflate the layout.

And with that, you’ve made it so the object holds onto those references while it’s recycled, but there are still more pieces to put together before you can launch your rocketship.

Start a new activity by replacing the log in ViewHolder’s onClick with this code:

val context = itemView.context val showPhotoIntent = Intent(context, PhotoActivity::class.java) showPhotoIntent.putExtra(PHOTO_KEY, photo) context.startActivity(showPhotoIntent)

This grabs the current context of your item view and creates an intent to show a new activity on the screen, passing the photo object you want to show. Passing the context object into the intent allows the app to know what activity it is leaving.

Next thing to do is to add this method inside PhotoHolder:

fun bindPhoto(photo: Photo) { this.photo = photo Picasso.with(view.context).load(photo.url).into(view.itemImage) view.itemDate.text = photo.humanDate view.itemDescription.text = photo.explanation }

This binds the photo to the PhotoHolder, giving your item the data it needs to work out what it should show.

It also adds the suggested Picasso import, which is a library that makes it significantly simpler to get images from a given URL.

The last piece of the PhotoHolder assembly will tell it how to show the right photo at the right moment. It’s the RecyclerAdapter’s onBindViewHolder, and it lets you know a new item will be available on screen and the holder needs some data.

Add the following code inside the onBindViewHolder() method:

val itemPhoto = photos[position] holder.bindPhoto(itemPhoto)

Here you’re passing in a copy of your ViewHolder and the position where the item will show in your RecyclerView, and calling bindPhoto(...).

And that’s all you needed to do here on the assembly — just use the position where your ViewHolder will appear to grab the photo out of your list, and then pass it to your ViewHolder.

Step three of your ignition check protocol is complete!

Countdown And Liftoff: Hooking up the Adapter And RecyclerView

This is the moment you’ve been waiting for, the final stage before blast off! All you need to do is hook your adapter up to your RecyclerView and make sure it retrieves photos when it’s created so you can explore space — in pictures.

Open MainActivity.kt, and add this property at the top:

private lateinit var adapter: RecyclerAdapter

Next, underneath the assignment of recyclerView.layoutManager, add the following:

adapter = RecyclerAdapter(photosList) recyclerView.adapter = adapter

Here you’re creating the adapter, passing in the constructors it needs and setting it as the adapter for your RecyclerView.

Although the adapter is connected, there’s one more thing to do to make sure you don’t have an empty screen.

In onStart(), underneath the call to super, add this code:

if (photosList.size == 0) { requestPhoto() }

This adds a check to see if your list is empty, and if yes, it requests a photo.

Next, in receivedNewPhoto(), update the method so it looks like the following:

override fun receivedNewPhoto(newPhoto: Photo) { runOnUiThread { photosList.add(newPhoto) adapter.notifyItemInserted(photosList.size) } }

Here you are informing the recycler adapter that an item was added after the list of photos was updated.

Now you’re ready to commence the ignition sequence, er…I mean run the app.

Run the app, load up the emulator and before long, Galacticon should look something like this:

That’s not all. Tap on the photo, and you should be greeted with a new activity that brings that item into focus:

But that’s still not all! Try rotating your device or emulator (function + control + F11/F12) and you’ll see the image in full screen glory!

Depending on the size of the image and your device screen it may look a little distorted, but don’t worry about that.

Congratulations! You have a working RecyclerView and can take your journey amongst the stars.

Taking A Spacewalk: Adding Scrolling support

If you head back to MainActivity on your device and try to scroll down, you’ll notice something is amiss — your RecyclerView isn’t retrieving any new photos.

Your RecyclerView is doing exactly as it’s told by showing the contents of photosList. The problem is that the app will only retrieve one photo when you load the app. It has no idea when or how to grab more photos.

So next, you’ll retrieve the number of the photos and the last visible photo index while scrolling. Then you’ll check to see if the last photo is visible and if there are no photos already on request. If these are both true, then your app goes and downloads more pretty photos!

This patch will require a spacewalk, so break out your spacesuit and get ready for a zero gravity experience.

In MainActivity.kt, add this property with custom accessor below to MainActivity:

private val lastVisibleItemPosition: Int get() = linearLayoutManager.findLastVisibleItemPosition()

This uses your RecyclerView’s LinearLayoutManager to get the index of the last visible item on the screen.

Next, you add a method that inserts an onScrollListener to your RecyclerView, so it can get a callback when the user scrolls:

private fun setRecyclerViewScrollListener() { recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() { override fun onScrollStateChanged(recyclerView: RecyclerView?, newState: Int) { super.onScrollStateChanged(recyclerView, newState) val totalItemCount = recyclerView!!.layoutManager.itemCount if (!imageRequester.isLoadingData && totalItemCount == lastVisibleItemPosition + 1) { requestPhoto() } } }) }

This function gives the RecyclerView a scroll listener that is triggered by scrolling. During scrolling, the listener retrieves the count of the items in its LayoutManager and calculates the last visible photo index. Once done, it compares these numbers (incrementing the index by 1 because the index begins at 0 while the count begins at 1). If they match and there are no photos already on request, then you request a new photo.

Finally, hook everything to the RecyclerView by calling this method from onCreate, just beneath where you set your RecyclerView Adapter:

setRecyclerViewScrollListener()

Hop back in the ship (build and run the app again). Scroll down and you should see quite an improvement!

Excellent work, your RecyclerView now updates to show the latest photo requested by your app. The great thing is that receivedNewPhoto() handles most of the work because you told it to notify your adapter about new items.

That earns an intergalactic thumbs up for upcycling code!

Layout Changes

Now that your RecyclerView is up and running, it’s time to trick out your spaceship.

Wouldn’t it be cool if your RecyclerView could change its layout? Good news: RecyclerView’s item positioning is separated into a layout manager.

Add a property for a GridLayoutManager to the top of MainActivity.kt:

private lateinit var gridLayoutManager: GridLayoutManager

Note that GridLayoutManager is a built-in layout manager, but it could just as easily be custom.

In onCreate(), initialize the LayoutManager below the existing Linear Layout Manager:

gridLayoutManager = GridLayoutManager(this, 2)

Just like you did with the previous LayoutManager, you pass in the context the manager will appear in, but unlike the former, it takes an integer parameter. In this case, you’re setting the number of columns the grid will have.

Add this method to MainActivity:

private fun changeLayoutManager() { if (recyclerView.layoutManager == linearLayoutManager) { //1 recyclerView.layoutManager = gridLayoutManager //2 if (photosList.size == 1) { requestPhoto() } } else { //3 recyclerView.layoutManager = linearLayoutManager } }

This code checks to see what LayoutManager your RecyclerView is using, and then:

If it’s using the LinearLayoutManager, it swaps in the GridLayoutManager

It requests a new photo if your grid layout only has one photo to show

If it’s using the GridLayoutManager, it swaps in the LinearLayoutManager

Next, you need to make some changes to lastVisibleItemPosition to help it handle the new LayoutManager. Make it look like the following:

private val lastVisibleItemPosition: Int get() = if (recyclerView.layoutManager == linearLayoutManager) { linearLayoutManager.findLastVisibleItemPosition() } else { gridLayoutManager.findLastVisibleItemPosition() }

Here you ask the RecyclerView to tell you what its LayoutManager is, then you ask that LayoutManager to tell you the position of the last visible item.

To use the grid layout, make use of the Options menu button that is already available in the app. Add the following code underneath onStart():

override fun onOptionsItemSelected(item: MenuItem): Boolean { if (item.itemId == R.id.action_change_recycler_manager) { changeLayoutManager() return true } return super.onOptionsItemSelected(item) }

This checks the ID of the item tapped in the menu, then works out what to do about it. In this case, there should only be one ID that will match up, effectively telling the app to go away and rearrange the RecyclerView’s LayoutManager.

And just like that, you’re ready to go! Load up the app and tap the button at the top right of the screen, and you’ll begin to see the stars shift:

Star Killer

Sometimes you’ll see things you just don’t like the look of, perhaps a galaxy far, far away that has fallen to the dark side or a planet that is prime for destruction. How could you go about killing it with a swipe?

Luckily, Android engineers have provided a useful class named ItemTouchHelper that gives you easy swipe behavior. Creating and attaching this to a RecyclerView requires just a few lines of code.

In MainActivity.kt, underneath setRecyclerViewScrollListener() add the following method:

private fun setRecyclerViewItemTouchListener() { //1 val itemTouchCallback = object : ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT) { override fun onMove(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder, viewHolder1: RecyclerView.ViewHolder): Boolean { //2 return false } override fun onSwiped(viewHolder: RecyclerView.ViewHolder, swipeDir: Int) { //3 val position = viewHolder.adapterPosition photosList.removeAt(position) recyclerView.adapter.notifyItemRemoved(position) } } //4 val itemTouchHelper = ItemTouchHelper(itemTouchCallback) itemTouchHelper.attachToRecyclerView(recyclerView) }

Let’s go through this step by step:

You create the callback and tell it what events to listen for. It takes two parameters, one for drag directions and one for swipe directions, but you’re only interested in swipe, so you pass 0 to inform the callback not to respond to drag events.

You return false in onMove because you don’t want to perform any special behavior here.

onSwiped is called when you swipe an item in the direction specified in the ItemTouchHelper. Here, you request the viewHolder parameter passed for the position of the item view, then you remove that item from your list of photos. Finally, you inform the RecyclerView adapter that an item has been removed at a specific position.

You initialize the ItemTouchHelper with the callback behavior you defined, and then attach it to the RecyclerView.

Add the method to the activity’s onCreate(), underneath setRecyclerViewScrollListener():

setRecyclerViewItemTouchListener()

This will attach the ItemTouchListener to the RecyclerView using the code you just wrote.

Run the app once more and swipe across one of your items, you should see it begin to move. If you swipe the item far enough, you should see it animate and vanish. If other items are visible, then they will reorganize themselves to cover the hole. How cool is that?

Where To Go From Here?

Nice job! You’ve been on quite an adventure, but now it’s time to head back to Earth and think about what you’ve learned.

You’ve created a RecyclerView and all the components it needs, such as a LayoutManager, an Adapter and a ViewHolder.

You’ve updated and removed items from an Adapter.

You’ve added some cool features like changing layouts and adding swipe functionality.

Above all, you’ve experienced how separation of components — a key attribute of RecyclerViews — provides so much functionality with such ease. If you want your collections to be flexible and provide some excitement, then look no further than the all-powerful RecyclerView.

The final project for this tutorial is available here.

If you want to learn more about RecyclerViews then check out the Android documentation to see what it can do. Take a look at the support library for RecyclerViews to learn how to use it on older devices. If you want to make them fit with the material design spec then check out the list component design specification.

Join us in the forums to discuss this tutorial and your findings as you work with RecylerViews!

Until next time, space traveler!

The post Android RecyclerView Tutorial with Kotlin appeared first on Ray Wenderlich.

Android RecyclerView Tutorial with Kotlin published first on http://ift.tt/2fA8nUr

0 notes