Skip to content

Commit 0d1025a

Browse files
leticiarossidsn5ft
leticiarossi
authored and
dsn5ft
committed
[Documentation} Adding table of content and hero images to new docs.
PiperOrigin-RevId: 308713205
1 parent dc7d3a5 commit 0d1025a

File tree

14 files changed

+226
-175
lines changed

14 files changed

+226
-175
lines changed

‎docs/components/BottomNavigation.md

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,13 @@ path: /catalog/bottom-navigation/
1212
[Bottom navigation](https://material.io/components/bottom-navigation/#) bars
1313
allow movement between primary destinations in an app.
1414

15-
![Example bottom navigation bar with four icons along the bottom: favorites,
16-
music, places, and news. The music icon is
17-
selected](assets/bottomnav/bottom-nav-generic.png)
15+
!["Bottom navigation bar on a screen"](assets/bottomnav/bottomnav_hero.png)
16+
17+
## Contents
18+
19+
* [Using bottom navigation](#using-bottom-navigation)
20+
* [Bottom navigation bar](#bottom-navigation-bar)
21+
* [Theming](#theming-a-bottom-navigation-bar)
1822

1923
## Using bottom navigation
2024

@@ -159,7 +163,13 @@ bottomNavigation.removeBadge(menuItemId)
159163
See the [`BadgeDrawable`](BadgeDrawable.md) documentation for more information
160164
about it.
161165

162-
## Bottom navigation example
166+
## Bottom navigation bar
167+
168+
![Example bottom navigation bar with four icons along the bottom: favorites,
169+
music, places, and news. The music icon is
170+
selected](assets/bottomnav/bottom-nav-generic.png)
171+
172+
### Bottom navigation bar example
163173

164174
API and source code:
165175

‎docs/components/Button.md

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,16 @@ path: /catalog/buttons/
1212
[Buttons](https://material.io/components/buttons/) allow users to take actions,
1313
and make choices, with a single tap.
1414

15-
There are four types of buttons:
15+
!["Button on a screen"](assets/buttons/buttons_hero.png)
1616

17-
1. [Text button](#text-button)
18-
2. [Outlined button](#outlined-button)
19-
3. [Contained button](#contained-button)
20-
4. [Toggle button](#toggle-button)
17+
## Contents
2118

22-
!["Button types - text, outlined, contained and toggle."](assets/buttons/buttons_types.png)
19+
* [Using buttons](#using-buttons)
20+
* [Text button](#text-button)
21+
* [Outlined button](#outlined-button)
22+
* [Contained button](#contained-button)
23+
* [Toggle button](#toggle-button)
24+
* [Theming](#theming-buttons)
2325

2426
## Using buttons
2527

@@ -43,6 +45,14 @@ unnecessary.
4345
For more information on content labels, go to the
4446
[Android accessibility help guide](https://support.google.com/accessibility/android/answer/7158690).
4547

48+
## Types
49+
50+
There are four types of buttons: 1. [Text button](#text-button), 2.
51+
[Outlined button](#outlined-button), 3. [Contained button](#contained-button),
52+
4. [Toggle button](#toggle-button)
53+
54+
!["Button types - text, outlined, contained and toggle."](assets/buttons/buttons_types.png)
55+
4656
## Text button
4757

4858
[Text buttons](https://material.io/components/buttons/#text-button) are

‎docs/components/Card.md

Lines changed: 145 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,13 @@ path: /catalog/cards/
1212
[Cards](https://material.io/components/cards/) contain content and actions about
1313
a single subject.
1414

15-
![Elevated card with a secondary title and Action 1 and Action 2 buttons in
16-
purple](assets/cards/cards_basic.png)
15+
!["Cards on a screen"](assets/cards/cards_hero.png)
16+
17+
## Contents
18+
19+
* [Using cards](#using-cards)
20+
* [Card](#card)
21+
* [Theming](#theming-cards)
1722

1823
## Using cards
1924

@@ -37,140 +42,7 @@ on it, so that the behavior can be accessible via screen readers such as
3742
TalkBack. See the [draggable card section](#making-a-card-draggable) section
3843
below for more info.
3944

40-
## Card
41-
42-
On mobile, a [card’s](https://material.io/components/cards/#specs) default
43-
elevation is `1dp`, with a raised dragged elevation of `8dp`.
44-
45-
### Card examples
46-
47-
API and source code:
48-
49-
* `MaterialCardView`
50-
* [Class definition](https://developer.android.com/reference/com/google/android/material/card/MaterialCardView)
51-
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/card/MaterialCardView.java)
52-
53-
_**Note:** You don't need to specify a style tag as long as you are using a
54-
Material Components Theme. If not, set the style to
55-
`Widget.MaterialComponents.CardView`._
56-
57-
#### Elevated card
58-
59-
The following example shows an elevated card.
60-
61-
!["Elevated card with a title, a secondary title, text, and Action 1 and Action
62-
2 buttons in purple"](assets/cards/cards_elevated.png)
63-
64-
```xml
65-
<com.google.android.material.card.MaterialCardView
66-
android:id="@+id/card"
67-
android:layout_width="match_parent"
68-
android:layout_height="wrap_content"
69-
android:layout_margin="8dp">
70-
71-
<LinearLayout
72-
android:layout_width="match_parent"
73-
android:layout_height="wrap_content"
74-
android:orientation="vertical">
75-
76-
<!-- Media -->
77-
<ImageView
78-
android:layout_width="match_parent"
79-
android:layout_height="194dp"
80-
app:srcCompat="@drawable/media"
81-
android:scaleType="centerCrop"
82-
android:contentDescription="@string/content_description_media"
83-
/>
84-
85-
<LinearLayout
86-
android:layout_width="match_parent"
87-
android:layout_height="wrap_content"
88-
android:orientation="vertical"
89-
android:padding="16dp">
90-
91-
<!-- Title, secondary and supporting text -->
92-
<TextView
93-
android:layout_width="wrap_content"
94-
android:layout_height="wrap_content"
95-
android:text="@string/title"
96-
android:textAppearance="?attr/textAppearanceHeadline6"
97-
/>
98-
<TextView
99-
android:layout_width="wrap_content"
100-
android:layout_height="wrap_content"
101-
android:layout_marginTop="8dp"
102-
android:text="@string/secondary_text"
103-
android:textAppearance="?attr/textAppearanceBody2"
104-
android:textColor="?android:attr/textColorSecondary"
105-
/>
106-
<TextView
107-
android:layout_width="wrap_content"
108-
android:layout_height="wrap_content"
109-
android:layout_marginTop="16dp"
110-
android:text="@string/supporting_text"
111-
android:textAppearance="?attr/textAppearanceBody2"
112-
android:textColor="?android:attr/textColorSecondary"
113-
/>
114-
115-
</LinearLayout>
116-
117-
<!-- Buttons -->
118-
<LinearLayout
119-
android:layout_width="wrap_content"
120-
android:layout_height="wrap_content"
121-
android:layout_margin="8dp"
122-
android:orientation="horizontal">
123-
<com.google.android.material.button.MaterialButton
124-
android:layout_width="wrap_content"
125-
android:layout_height="wrap_content"
126-
android:layout_marginEnd="8dp"
127-
android:text="@string/action_1"
128-
style="?attr/borderlessButtonStyle"
129-
/>
130-
<com.google.android.material.button.MaterialButton
131-
android:layout_width="wrap_content"
132-
android:layout_height="wrap_content"
133-
android:text="@string/action_2"
134-
style="?attr/borderlessButtonStyle"
135-
/>
136-
</LinearLayout>
137-
138-
</LinearLayout>
139-
140-
</com.google.android.material.card.MaterialCardView>
141-
```
142-
143-
#### Outlined card
144-
145-
The following example shows an outlined card.
146-
147-
!["Outlined card with a title, a secondary title, text, and Action 1 and Action
148-
2 buttons in purple"](assets/cards/cards_outlined.png)
149-
150-
In the layout:
151-
152-
```xml
153-
<com.google.android.material.card.MaterialCardView
154-
...
155-
app:strokeWidth="1dp"
156-
app:strokeColor="@color/stroke_color"
157-
app:cardElevation="0dp">
158-
159-
...
160-
161-
</com.google.android.material.card.MaterialCardView>
162-
```
163-
164-
In the stroke color (`stroke_color.xml`):
165-
166-
```xml
167-
<selector xmlns:android="http://schemas.android.com/apk/res/android">
168-
<item android:color="?attr/colorPrimary" android:state_checked="true"/>
169-
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_checked="false"/>
170-
</selector>
171-
```
172-
173-
#### Making a card checkable
45+
### Making a card checkable
17446

17547
![Elevated card with a checked button and a light purple overlay; secondary
17648
title and Action 1 and Action 2 buttons](assets/cards/cards_checked.png)
@@ -202,7 +74,7 @@ card.setOnLongClickListener {
20274
}
20375
```
20476

205-
#### Making a card draggable
77+
### Making a card draggable
20678

20779
![Elevated card with a light grey overlay; secondary title and Action 1 and
20880
Action 2 buttons](assets/cards/cards_dragged.png)
@@ -318,6 +190,142 @@ _**Note:** Cards also support a swipe-to-dismiss behavior through the use of
318190
You can see an example
319191
[here](https://github.com/material-components/material-components-android/tree/master/catalog/java/io/material/catalog/card/CardSwipeDismissFragment.java)._
320192

193+
## Card
194+
195+
On mobile, a [card’s](https://material.io/components/cards/#specs) default
196+
elevation is `1dp`, with a raised dragged elevation of `8dp`.
197+
198+
![Elevated card with a secondary title and Action 1 and Action 2 buttons in
199+
purple](assets/cards/cards_basic.png)
200+
201+
### Card examples
202+
203+
API and source code:
204+
205+
* `MaterialCardView`
206+
* [Class definition](https://developer.android.com/reference/com/google/android/material/card/MaterialCardView)
207+
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/card/MaterialCardView.java)
208+
209+
_**Note:** You don't need to specify a style tag as long as you are using a
210+
Material Components Theme. If not, set the style to
211+
`Widget.MaterialComponents.CardView`._
212+
213+
#### Elevated card
214+
215+
The following example shows an elevated card.
216+
217+
!["Elevated card with a title, a secondary title, text, and Action 1 and Action
218+
2 buttons in purple"](assets/cards/cards_elevated.png)
219+
220+
```xml
221+
<com.google.android.material.card.MaterialCardView
222+
android:id="@+id/card"
223+
android:layout_width="match_parent"
224+
android:layout_height="wrap_content"
225+
android:layout_margin="8dp">
226+
227+
<LinearLayout
228+
android:layout_width="match_parent"
229+
android:layout_height="wrap_content"
230+
android:orientation="vertical">
231+
232+
<!-- Media -->
233+
<ImageView
234+
android:layout_width="match_parent"
235+
android:layout_height="194dp"
236+
app:srcCompat="@drawable/media"
237+
android:scaleType="centerCrop"
238+
android:contentDescription="@string/content_description_media"
239+
/>
240+
241+
<LinearLayout
242+
android:layout_width="match_parent"
243+
android:layout_height="wrap_content"
244+
android:orientation="vertical"
245+
android:padding="16dp">
246+
247+
<!-- Title, secondary and supporting text -->
248+
<TextView
249+
android:layout_width="wrap_content"
250+
android:layout_height="wrap_content"
251+
android:text="@string/title"
252+
android:textAppearance="?attr/textAppearanceHeadline6"
253+
/>
254+
<TextView
255+
android:layout_width="wrap_content"
256+
android:layout_height="wrap_content"
257+
android:layout_marginTop="8dp"
258+
android:text="@string/secondary_text"
259+
android:textAppearance="?attr/textAppearanceBody2"
260+
android:textColor="?android:attr/textColorSecondary"
261+
/>
262+
<TextView
263+
android:layout_width="wrap_content"
264+
android:layout_height="wrap_content"
265+
android:layout_marginTop="16dp"
266+
android:text="@string/supporting_text"
267+
android:textAppearance="?attr/textAppearanceBody2"
268+
android:textColor="?android:attr/textColorSecondary"
269+
/>
270+
271+
</LinearLayout>
272+
273+
<!-- Buttons -->
274+
<LinearLayout
275+
android:layout_width="wrap_content"
276+
android:layout_height="wrap_content"
277+
android:layout_margin="8dp"
278+
android:orientation="horizontal">
279+
<com.google.android.material.button.MaterialButton
280+
android:layout_width="wrap_content"
281+
android:layout_height="wrap_content"
282+
android:layout_marginEnd="8dp"
283+
android:text="@string/action_1"
284+
style="?attr/borderlessButtonStyle"
285+
/>
286+
<com.google.android.material.button.MaterialButton
287+
android:layout_width="wrap_content"
288+
android:layout_height="wrap_content"
289+
android:text="@string/action_2"
290+
style="?attr/borderlessButtonStyle"
291+
/>
292+
</LinearLayout>
293+
294+
</LinearLayout>
295+
296+
</com.google.android.material.card.MaterialCardView>
297+
```
298+
299+
#### Outlined card
300+
301+
The following example shows an outlined card.
302+
303+
!["Outlined card with a title, a secondary title, text, and Action 1 and Action
304+
2 buttons in purple"](assets/cards/cards_outlined.png)
305+
306+
In the layout:
307+
308+
```xml
309+
<com.google.android.material.card.MaterialCardView
310+
...
311+
app:strokeWidth="1dp"
312+
app:strokeColor="@color/stroke_color"
313+
app:cardElevation="0dp">
314+
315+
...
316+
317+
</com.google.android.material.card.MaterialCardView>
318+
```
319+
320+
In the stroke color (`stroke_color.xml`):
321+
322+
```xml
323+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
324+
<item android:color="?attr/colorPrimary" android:state_checked="true"/>
325+
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_checked="false"/>
326+
</selector>
327+
```
328+
321329
### Anatomy and key properties
322330

323331
A card has a container and an optional thumbnail, header text, secondary text,

0 commit comments

Comments
 (0)