Common Android Views Cheat Sheet
Tags: android, beginners, xml, java
Published: 2021-08-15 04:02:07

**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](https://developer.android.com/reference/android/widget/TextView.html)

Shows text 

```xml
<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" />
```
![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxgfilwubtx8mcu6qgx6.png)

##2. [ImageView](https://developer.android.com/reference/android/widget/ImageView)
 
Shows Image

```xml
<ImageView
 android:id="@+id/photo_image_view"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="centerCrop"
 android:src="@drawable/beach" />
```
![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atwn22e6ay7txckvnh6e.png)

##3. [Button](https://developer.android.com/reference/android/widget/Button.html) 

Use for user interaction do some specific task on Click 

```xml
<Button
 android:id="@+id/next_button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/next" />
```
![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz1ezv3ax3rz3v85ubmc.png)

##4. [View](https://developer.android.com/reference/android/view/View.html)

Plain rectangle (can be used as a divider)

```xml
<View
 android:layout_width="match_parent"
 android:layout_height="100dp"
 android:background="#4E4B4F" />
```
 ![A Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aufcy4h3nu2wnurmrwkh.png)


##5. [EditText](https://developer.android.com/reference/android/widget/EditText.html) 

Text field that you can use to take user input

```xml
<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" />
```
![AText](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/to53yhgzzs9aplhs0cyc.png)

##6. [Spinner](https://developer.android.com/reference/android/widget/Spinner.html) 

Click on it to show a list of dropdown options

```xml
<Spinner
 android:id="@+id/sort_by_spinner"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" />
```
![Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy0qomb62bglex10rbcu.png)

##7. [CheckBox](https://developer.android.com/reference/android/widget/CheckBox.html)

Checkbox with text label used to check or uncheck some option

```xml
<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" />
```
![7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zza5hkgpcmwhwgymflgx.png)

##8. [RadioButton](https://developer.android.com/reference/android/widget/RadioButton.html)

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

```xml
<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>
```
![ Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0y9bgrr8r54nqfa1qn9s.png)

##9. [RatingBar](https://developer.android.com/reference/android/widget/RatingBar.html)

Star rating

```xml
<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" />
```
![ATxt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrorcxjhr1ycoc599dli.png)

##10. [Switch](https://developer.android.com/reference/android/widget/Switch.html)

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

```xml
<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" />
```
![ Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dalqst71982n2won7ozm.png)

##11. [SeekBar](https://developer.android.com/reference/android/widget/SeekBar)

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

```xml
<SeekBar
 android:id="@+id/seek_bar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" 
 android:max="100"
 android:progress="20" />
```
![11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyqdawc3i0gim8smam4s.png)

##12. [SearchView](https://developer.android.com/reference/android/widget/SearchView)

A search field that you can type 
a query into

```xml
<SearchView
 android:id="@+id/search_viewr"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" 
 android:iconifiedByDefault="false"
 android:queryHint="@string/search_photos" />
```
![Alext](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxa8j1jc23r4c1qoyyh3.png)

##13. [ProgressBar](https://developer.android.com/reference/android/widget/ProgressBar.html)

Loading spinner

```xml
<ProgressBar
 android:id="@+id/loading_spinner"
 style="@style/Widget.AppCompat.ProgressBar"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />
```
![Alxt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/229ayn8wt4w7pagonuvl.png)

##14. [ProgressBar](https://developer.android.com/reference/android/widget/ProgressBar.html)

Horizontal loading indicator

```xml
<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
```
![14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ev7juuxz83i7pj9fobxz.png)

*****




###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,
{% post https://dev.to/rohitk570/what-to-learn-to-get-started-with-android-app-development-19il %}

##Thank You! 😊
You can follow me on 
[Linkedin](https://www.linkedin.com/in/rohitk570/)
[Twitter](https://twitter.com/RohitK_570)