DEV Community

Cover image for Common Android Views Cheat Sheet
ROHIT KUMAR
ROHIT KUMAR

Posted on

Common Android Views Cheat Sheet

Here I am providing the list of some common android View cheatsheet used for building UI that we see on our devices

  • It helps you with -
    • Know Code Syntax for each View
    • I have provided a Link referring to Android documentation for each view
    • A note on each View describing briefly about it

1. TextView

Shows text

<TextView
 android:id="@+id/title_text_view"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" 
 android:text="@string/my_photos"
 android:textAppearance="?android:textAppearanceLarge"
 android:textColor="#4689C8"
 android:textStyle="bold" />
Enter fullscreen mode Exit fullscreen mode

1

2. ImageView

Shows Image

<ImageView
 android:id="@+id/photo_image_view"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="centerCrop"
 android:src="@drawable/beach" />
Enter fullscreen mode Exit fullscreen mode

2

3. Button

Use for user interaction do some specific task on Click

<Button
 android:id="@+id/next_button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/next" />
Enter fullscreen mode Exit fullscreen mode

3

4. View

Plain rectangle (can be used as a divider)

<View
 android:layout_width="match_parent"
 android:layout_height="100dp"
 android:background="#4E4B4F" />
Enter fullscreen mode Exit fullscreen mode

A Text

5. EditText

Text field that you can use to take user input

<EditText
 android:id="@+id/album_description_view"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:hint="@string/album_description"
 android:inputType="textMultiLine" />
Enter fullscreen mode Exit fullscreen mode

AText

6. Spinner

Click on it to show a list of dropdown options

<Spinner
 android:id="@+id/sort_by_spinner"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" />
Enter fullscreen mode Exit fullscreen mode

Text

7. CheckBox

Checkbox with text label used to check or uncheck some option

<CheckBox
 android:id="@+id/notify_me_checkbox"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" 
 android:text="@string/notify_me"
 android:textAppearance="?android:textAppearanceMedium" />
Enter fullscreen mode Exit fullscreen mode

7

8. RadioButton

Radio button (where you can select one out of a group of
radio buttons)

<RadioGroup
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical">
 <RadioButton
 android:id="@+id/yes_radio_button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/yes"
 android:textAppearance="?android:textAppearanceMedium" />
 <RadioButton
 android:id="@+id/no_radio_button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/no"
 android:textAppearance="?android:textAppearanceMedium" />
</RadioGroup>
Enter fullscreen mode Exit fullscreen mode

 Text

9. RatingBar

Star rating

<RatingBar
 android:id="@+id/rating_bar"
 style="?android:attr/ratingBarStyleSmall"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" 
 android:numStars="5"
 android:rating="2.5"
 android:stepSize="0.5" />
Enter fullscreen mode Exit fullscreen mode

ATxt

10. Switch

On / off switch that you can drag right or left (or just tap to toggle the state)

<Switch
 android:id="@+id/backup_photos_switch"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" 
 android:text="@string/auto_backup_photos"
 android:textAppearance="?android:textAppearanceSmall" />
Enter fullscreen mode Exit fullscreen mode

 Text

11. SeekBar

Displays progress and allows you
to drag the handle anywhere in
the bar (i.e. for music or video
player)

<SeekBar
 android:id="@+id/seek_bar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" 
 android:max="100"
 android:progress="20" />
Enter fullscreen mode Exit fullscreen mode

11

12. SearchView

A search field that you can type
a query into

<SearchView
 android:id="@+id/search_viewr"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" 
 android:iconifiedByDefault="false"
 android:queryHint="@string/search_photos" />
Enter fullscreen mode Exit fullscreen mode

Alext

13. ProgressBar

Loading spinner

<ProgressBar
 android:id="@+id/loading_spinner"
 style="@style/Widget.AppCompat.ProgressBar"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />
Enter fullscreen mode Exit fullscreen mode

Alxt

14. ProgressBar

Horizontal loading indicator

<ProgressBar
android:id="@+id/progress_bar"
 style="@style/Widget.AppCompat.ProgressBar.Horizontal"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" 
 android:indeterminate="false"
 android:max="100"
 android:progress="40"/>
ProgressBar
Enter fullscreen mode Exit fullscreen mode

14


That's all for today!

References:

https://s3.amazonaws.com/video.udacity-data.com/topher/2017/July/595ab9de_common-android-views-cheat-sheet/common-android-views-cheat-sheet.pdf

I referred from here because I found this valuable and reliable, as it's from Google and uses it in there courses provided by them
This article will help you directly use the gist, from here

If you liked it, plz do share
Also if you got any questions or suggestions feel free to comment down below.

If you are thinking of starting an Android Development you can check this blog,

Thank You! 😊

You can follow me on
Linkedin
Twitter

Top comments (4)

Collapse
 
cenacr007_harsh profile image
KUMAR HARSH

Nice

Collapse
 
rohitk570 profile image
ROHIT KUMAR

Glad u like it

Collapse
 
rash123 profile image
RASHMI VERMA

Great

Collapse
 
rohitk570 profile image
ROHIT KUMAR

Thanks !