##### Background and Requirements
Our current widgets are broken. We need new designs that take into consideration the guidelines for Material Design. There will be a separate task for adding new functionality; this task is focused on making our existing widget look better and work as it should. The design should take users with dark mode into consideration.
##### Widgets to Create
- [x] Search
- [x] Featured article
##### Designs ([[ https://www.figma.com/file/ehm5RzoMcRJJgyljjeAAs4/Android-%E2%86%92-Widgets-T193485?type=design&node-id=129-6844&mode=design&t=NdabuXP6QCYebDh2-4 | Figma ]])
**Widget installation**
| 1. Long press {F41667496} | 2. Search {F41667498} | 3. Featured article {F41667500}
1. A long press of the app icon reveals the Widgets option. Dragging and dropping the widget will let users place it on one of their app screens.
2. Wikipedia search is the first widget
3. It is followed by the featured article widget when scrolling down
**Search widget**
| 4. `5x1` {F41667503} | 5. `4x1` {F41667505} | 6. `3x1` {F41667507} | 8. `2x1` {F41667511}
4. By default, the search widget takes up an entire app icon row (5 columns).
- The entire widget is 1 tap target. Tapping the widget anywhere leads to the search in the app with an active keyboard.
5. The widget can be resized to use 4 columns. Depending on the device's width, the search bar (white area) fills the widget space.
6. The widget can be resized to use 3 columns
7. The minimum width of the widget is 2 columns. If 2 columns are used, the magnifying glass is positioned at the right of the widget (margin-right: 16dp)
**Featured article widget**
| 9. {F41667514} | 10. {F41667516} | 11. {F41667518} | 12. {F41667520} | 13. {F41667522}
9. The featured article widget also takes up 5 columns.
- The entire widget is one tap target, leading directly to the featured article.
- If there is no article description, the first paragraph of the article is used instead.
- If there is no article image, the text fills the entire width of the widget.
10. Resizing: Both the article title and title description are truncated after 1 line with an ellipsis `(...)`. The example shows how the widget behaves resized at 4 columns.
11. It uses the same behavior described in 10 when the widget uses 3 columns.
12. The image illustrates how the widget is displayed without an article image.
**Vision (rough)**
| 14. List view {F41667526} | 15. Spotlight {F41667528}
14. The long-term vision for these widgets is to be more interactive.
- This example features a list view, that could e.g. feature explore feed contents from "Because you read" or "Trending".
- It also features direct access to "Voice search" and "Places".
15. The spotlight view could feature content from "On this day" or "Featured article". The designs for the second widget phase are in progress. If any groundwork can be laid now while working on the basic widgets from this task, that’d be great, but it is not necessary.
##### Task dependency
T353471