DEV Community

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

Posted on

Common Android Views Cheat Sheet

#android #beginners #xml #java

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,

rohitk570

What to Learn to get started with Android App Development?

ROHIT KUMAR ・ Jul 12 '21

#beginners #android #kotlin #java

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 !