Common Android App components you must know
If you are a complete beginner or getting started into android development do give this a read to get to know the common visual components you see in an application .Just knowing the names of these elements saves lots of time searching for them.
Whenever looking at famous android apps have you ever wonder like “What is this part known as and how do I get these into the application I make”. There are many different elements an app is made up of like action bars, lists, buttons, etc. This article covers most of the common android UI components and also some useful sites and apps knowledge of which will surely help you to start your android development journey.
In this article, I will be sharing the most used and common ones only.
So, Let’s get into it … Yay!
Contents:
- Buttons
- Textview
- EditText
- SnackBar
- Toast
- Dialogs
- CardViews
- RecyclerView
Buttons
Buttons are an important part of any application, allowing the users to take up some action and many more just by tapping it. There are different types of buttons available which you can design and customize in your own way or that are already present as a widget(pre-defined or default ones).
There four basic types of buttons you will always come across :
Text Buttons: These are mostly used when you don’t want the user to keep staring or at your fancy button and give importance to the main content. Usually, you can find in a dialog box.
Outlined Buttons: You can find these types of buttons where you want to emphasize a bit. To make the things look clearer a outline small figure is more clearly visible than a solid figure.
Contained Buttons: Mostly these types of buttons are used to give high emphasis on basis of their elevation and color fill. These catches more attention of users. You can see most of the signup or sign in buttons are contained buttons.
Toggle Button: These buttons are used to select choices from a group of options from the user. For example, if you make a game app and want your user to select between easy, medium, and hard these are used.
TextViews
It is a simple component to show a text to the user. You can design your text view.
There are various types of libraries that perform many functions like auto-sizing concerning screen size. Making it emoji compatible so when the user adds any emoji it doesn’t look like this □□ etc the more you explore the more you learn new things.
Now if you are thinking how can we make users enter details or modify it there’s a different element for that i.e Edit text.
Edit Text
It is almost the same as textview except this is used to accept texts as input. When defining and using this widget you can specify the type of input you want the user to enter to it.
There are different scenarios when using EditText. like In case the input is password it shouldn’t be seen or while entering number the format should be in digits.
Snackbar
yum! 🤤
SnackBar in Android is a simple widget use to show the message at the bottom of the screen. It stays on the screen for some time and disappears automatically no need for user input. It may contain a button also. This is mostly used to show the command the app is going to execute or will execute.
There’s another similar widget which you can notice in this gif. keep reading to find out about it.
Toast
This toast ain’t the bread one :P .
Toasts in android are small popups usually in the lower part of the application. It gives us feedback for any action or process. The feedback is for a certain amount of time and then it disappears. For example, when you send an SMS or an email it shows below “message sending…” which is like a text in a small capsule. You cannot interact with a toast it’s just an instant message.
The position and duration of the toast can be set accordingly. You can also make a custom toast.
for more information refer here.
Dialogs
A dialog is a small window or popup used for prompting the user for various purposes like entering any information or taking some important actions for example exiting the application without saving stuff or any work.
A dialog doesn’t fill the whole screen, it just pops up above the last screen and goes back to it when the purpose of it is done.
There are many types of dialogs in android i.e :
- Alert Dialog
- DatePicker Dialog
- TimePicker Dialog
- Custom Dialog
Alert Dialog
This type of dialog is used in urgent scenarios. It pops up and interrupts the user with urgent information, details, or actions.
It generally consists of a title, description, buttons, list of selectable items, or a custom layout.
DatePicker Dialog
This dialog provides an interface that allows the user to select a date. Like in any registration page for ease of entering the date of birth this can be used Instead of using text in dd-mm-yyyy.
TimePicker Dialog
like the date picker, this too provides a simple interface for picking time. Example In alarm applications and reminders.
There are various themes for the date and time picker dialog in-built available in android studio one can select from.
Custom Dialog
Custom dialogs can be made too for accomplishing different designs with custom characteristics. This can be used for uses like mini forms or captchas.
Whenever making a custom dialog make sure the images are of the proper size and aligned properly in the dialog as well as the whole layout.
for more on dialogs and source code refer to this.
CardViews
A card view is a widget which is can be thought of as a container that contains other elements as shown below. It is basically used to make it more attractive.
1. Container
2. Thumbnail
3. Header text
4. Secondary text
5. Media
6. Supporting text
7. Buttons 8. Icons
In card view variety of functions can be added depending upon your need. They are commonly used to display the list of items. Nowadays cards are the most important part of UI design and a great way to catch user’s attention into some data. These are most commonly used as list entities i.e in a list widget like recycler view.
RecyclerView (Modern solution for ListView)
yeah, you heard right!
let me explain why…
Well, the recycler view is a little intermediate level widget concept and may take a while to understand at first.
Recycler view is a list that contains other views(i.eView group) like card views on a set of data like contacts, emails, SMS, etc.
Now you may wonder why it isn’t a listView. So Whenever you need a scrolling list for a large data set which may be dynamic recycler view is used. Recycler view is an effective upgrade to older listView. As ListView used to create(inflate) views for all the elements in the data list, in case the list is long it eats up lots of memory(because it renders those elements). Recycler view saves data by recycling the views, which means it only creates entries for elements that are on screen at that time. On scrolling, the older views get recycled to new ones.
A custom layout is used for list items in the recycler view. The arrangement of items of recycler views can be set accordingly (there are different layout managers for that).
For a detailed explanation of recycler view watch this video.
Here are links to some resources:
- Roadmap: https://roadmap.sh/android
- official docs: https://developer.android.com/guide/
- for color schemes: https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
- stock images: https://unsplash.com/
- animations: https://lottiefiles.com/
- free vectors: https://www.vecteezy.com/
- some libraries: https://android.jlelse.eu/5-must-have-android-libraries-for-smooth-app-development-a85ecbdd8a54
- gradient:https://uigradients.com/
- making mock UI: https://www.figma.com/
- Channels:
Thanks for reading the article. make sure to save🔖 this article and shower some claps👏 if you like it. Follow ADG-VIT for more amazing articles.
This article is written in collaboration with Nishita Patnaik.
