Learning About User Interface Elements in Android App Development - Hive Programmers

Greetings to my favorite Science community online, StemSocial.

It's @skyehi and I'm super excited to be back to continue my series on Android App Development Tutorials for Beginners.

Today's episode on the series is a rather special one where we may not exactly build any specific App in particular.

We will be learning some basic concepts in User Interface design of Android Apps.

Original Image Source by 200degrees from Pixabay

The User Interface also known as frontend of an App is the part of your App that the users see and interact with.

Every App, website or project built through programming has two sides, the Frontend and the Backend.

The frontend is every element of the App that users see and the backend is every element of the App that users don't see.

This is no different from the structure of a human being.

We've got hands, eyes, ears, nose, mouth, legs and waist. These are the organs of the human body that is seen.

We've also got, intestines, Brain, lungs, kidney and liver. These are also organs of the human body but we cannot see them.

An App would also have backed codes that may not be seen by the users.

For today's tutorial, I wanted to share a few User interface or frontend design elements that programmers or Android app developers should be familiar with in order to develop great Apps with useful Interfaces.

The better the UI of your App, the easy users will find using your App.

If you want to build complex Apps that would have many features, implementing the right User Interface elements is of upmost importance.

However, I am well aware that it may not be easy or simple for beginners learning Android App development to have all the codes of the UI elements committed to memory.

So I have decided to create a blog showing some of the most popularly used UI elements, the codes to implement them and what they're used for.

• I hope you're ready to learn some User Interface codes

TextView

This element is used when you want to display or show any text in your Android App.

Code

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, Android!" />

EditText

This element is used when you want to create a field for users to enter text.

Code

    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter your text" />

Button

This element is used when you want to introduce a button in your App which the users can press to trigger an action

Code

    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me" />

ImageView

This element is used when you want to show or display images in your App

Code

    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" />

CheckBox

You use this element when you want users to select multiple options in your Android App

Code

    android:id="@+id/checkBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Check me" />

RadioButton

This element is used when users have to select a single option from a group of items.

Code

    android:id="@+id/radioButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Select me" />

Switch

This element is used when you want to introduce a toggle feature for users to toggle between On and Off state. (On/Off toggle)

Code

    android:id="@+id/switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Toggle me" />

ProgressBar

This element is used when you want to introduce a progress bar indicating loading or activity progress.

Code

    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progress="50" />

SeekBar

This element is used when you want your users to be able to adjust a value within a range. Like a song or video progress or volume.

Code

    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100" />

Spinner

This element is used when you want to introduce a dropdown selection menu in your Android App.

Code

    android:id="@+id/spinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

ListView

This element is used when you want to display a scrollable list of items in your Android App.

Code

    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

RecyclerView

This UI element is a more efficient way to display lists in your Android App and is mostly what is used by developers for displaying list of items in Apps.

Code

    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

CardView

This element is used when you want to introduce a container with rounded corners and elevation. It's used to present a more modern look to Android Apps.

Code

    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="4dp"
    app:cardCornerRadius="8dp">

    (html comment removed:  Content goes here )

</androidx.cardview.widget.CardView>

TabLayout

This element is used when you want to display tabs for navigation. The navigation is usually done by sliding the screen to go to the next tab.

Code

    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

ViewPager

This element is used when you want to introduce swiping between fragments or pages in your App. It's very helpful for navigating through fragment activities in Android Apps

Code

    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

NavigationView

This is very famous on Android Apps. It's similar to what they call hamburger menu in website development.

This element is used to introduce a side navigation drawer in the Android App

Code

    android:id="@+id/navigationView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start" />

BottomNavigationView

This is very famous on IOS apps and it's used to introduce a bottom navigation bar for users to navigate through fragment activities by pressing the activity icon on the bar.

Code

    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom" />

That's all for today's tutorial guys. These User Interface elements will become very helpful to you in your Android app development journey if you familiarize yourself with them.

You can always refer to this blog if you're having troubles knowing the purpose or function of any of these Android App User interface elements.

Thanks for taking the time to read this blog. I hope you enjoyed this episode as always.

Thanks everyone for the support to @stemsocial and my friends @stickupcurator or @stickupboys

Have A Great Day And Catch You Next Time On StemSocial. Goodbye 👨‍💻

You Can Follow Me @skyehi For More Like This And Others