Viral Android – Tutorials, Examples, UX/UI Design

In this tutorial, you will learn to make fade out animation in android application. In android, there are many possible ways to make fade out animation with xml and java and here I have used alpha tag and it is one the easy and most used ways of making animation. For the fade out animation using alpha tag you have to create an anim folder in your res directory.

Related:
Zoom In Animation in Android
Android Layouts Tutorial
How to Add Ripple Effect/Animation to a Android Button

Fade Out Animation Example: How to Make FadeOut Animation in Android

Create an anim folder in res/ directory and also create fade_out_animation.xml file in res/anim/ directory and place the following content.

res/anim/fade_out_animation.xml

XML Layout File

res/layout/android_fadeout_animation.xml

Java Activity File

src/FadeOutAnimation.java

Strings.xml File

res/values/strings.xml

Now, run your android fade out animation application and click the Fade Out Animation button.

Output:

Android FadeOut Animation

Android Image Switcher is an element of transition widget which helps you to add transitions on the images. So, in this tutorial, you will learn to display image with animation in image switcher. When you click the button, image will be changed (new image appear on the screen).

To use ImageSwitcher, first you need to add image switcher XML component. Following example shows how to implement image switcher in android and display different images when Next Image button is clicked. Here, I have used slide in left and slide out right animation.

Related:
Android TextSwitcher Tutorial Example
Android Chronometer Widget Example
Fade In Animation in Android

Image Switcher Example: How to Display Images Using ImageSwitcher in Android App

XML Layout File

res/layout/android_image_switcher_example.xml

Java Activity File

src/AndroidImageSwitcherExample.java

Strings.xml File

res/values/strings.xml

That’s all. Now, run your image switcher example android application and click the Next Image button to change the image in the screen.

Output:

Fig 1: Android ImageSwitcher Example

Fig 2: Android ImageSwitcher Example

Bar chart is one of the most important and commonly used graphs to display and to compare the number and different or items. In this tutorial, you will learn to make bar chart XML UI design for your android application. Bar chart is also known as bar graph. A bar is plotted either vertically or horizontally to show comparisons among different categories. Most of the time bar chart are plotted vertically and the taller is the bar, the larger will be the category. Sometimes, data can be plotted horizontally which is called horizontal bar chart or bar graph.

Here I have made two vertical bar charts. First chart shows different category vertically with different color. I have written A, B, C and so on instead of category. And second chart shows three different categories in the same bar for different year or different company or different family.

Related:
Simple Android Calculator App XML UI Design
Android Material Design Profile Screen XML UI Design
Android Material Design Login Form XML UI Design

Android Example: How to Make Bar Chart XML UI Design in Android

Create a new android project with the project name Android ChartBar XML UI Design and open XML layout file or create new XML layout file in your application. Here I have added different views like TextView, View with LinearLayout. Following is the complete content of XML layout file.

res/layout/bar_chart_xml_ui_1.xml

Output:

Again create a new XML layout file and add TextView, View, LinearLayout, RelativeLayout to make bar chart that shows different combination in a same vertical line. Following is the complete content XML layout file.


res/layout/bar_chart_xml_ui_2.xml

Output:

Here I have only shown two types of bar charts. You can make any type of bar chart in android application like this and you can also use third party library to make graphical design in android.

Android introduced a new widget, CalendarView at API level 11(Android version 3.0) means which was only supported in the device that have running android 3.0 and latest version. So, now you can easily display calendar in android application using CalendarView widget.

In this tutorial, you will learn to display calendar in android application and to receive day, month and year from CalendarView.

Related:
Display Current Time in Android using TextClock
Android Date Picker Example
Get Current Date in Android Programmatically

CalendarView Example: How to use Android Calendar View Widget

XML Layout File

res/layout/android_calendar_view_example.xml

Java Activity File

src/CalendarViewExample.java

Strings.xml File

res/values/strings.xml

Colors.xml File

res/values/colors.xml

Now, run your CalendarView android application and select any day from calendar which will look like output given below.

Output:

CalendarView in Android

In this tutorial, I am going to show how to develop auto complete suggestion in android using AutoCompleteTextView and MultiAutoCompleteTextView without typing all characters of word. AutoCompleteTextView suggests a word to the user and MultiAutoCompleteTextView suggests multiple words. These both auto complete textview completes the words which are stored in the program.

In the XML layout file, I have placed a AutoCompleteTextView and a MultiAutoCompleteTextView to develop auto complete sentence application.

Related:
Android Floating Labels for EditText Using Design Support Library
How to Implement Ripple Effect in Android
Load Image from URL (Internet) in Android

Android Auto Complete Word Example using AutoCompleteTextView and MultiAutoCompleteTextView

XML Layout File

res/layout/autocomplete_android.xml

Java Activity File

src/AutoCompleteAndroid.java

Strings.xml File

res/values/strings.xml

Now, run your Auto Complete android application and type the words which are stored in java file.

Output:

AutoCompleteTextView

AutoCompleteTextView

Android TextSwitcher is used to animate TextView when the text changes and to have an animated transition in android application. android.widget.TextSwitcher is a ViewSwitch which contains only children of textview.

In this android textswitcher tutorial, you will learn to implement animation to the text using textswitcher.

Related:
Android Gallery View Example
Android Auto Complete using AutoCompleteTextView and MultiAutoCompleteTextView
Android Custom SeekBar Example

TextSwitcher Example: How to Make Animated TextView Content using TextSwither

XML Layout File

res/layout/android_text_switcher_example.xml

Java Activity File

res/layout/AndroidTextSwitcherExample.java

Strings.xml File

res/values/strings.xml

AndroidManifest.xml File

Now, run your android text switcher example project and click the Next Text button you will be able to see the animated text above the button.

Output:

Previously we had posted some posts like simple android contact form, material design login screen XML ui design, material design sign up/registration for android, floating label for android using design support library etc. In this tutorial, you will learn to show and hide edittext password in android application. Mobile screen is very small in comparison to desktop so there can be error while typing password in mobile, it is better to put show password option. Here you will learn to put an eye icon for show and hide password.

There are different ways to show and hide password in android like using toggle button, check box, using image icon and so on. But using eye icon is best way to show and hide password and you will learn it here.

Related:
Android Material Design Profile Screen XML UI Design
Android Floating Labels for EditText Using Design Support Library
How to Implement Ripple Effect in Android

Android Example: How to Show and Hide Password in Android Using Eye Icon

Let’s start by adding compile 'com.android.support:appcompat-v7:23.2.0' and compile 'com.github.scottyab:showhidepasswordedittext:0.6' dependencies in your build.gradle file. Build.gradle file will look like below.

build.gradle

XML Layout File

Open your XML layout file and add TextInputLayout widget using design support library. Inside TextInputLayout com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText with app:drawable_hide, app:drawable_show and app:tint_color attributes. Following is the complete content of XML layout file.

res/layout/hide_show_android_edittext_password.xml

Java Activity File

Following is the code of java activity file.

src/HideShowAndroidEditTextPassword.java


Now, run Show and Hide Android EditText Password Using Eye Icon application and type something in the password edittext, there will appear an eye icon in the right side of edit text. After typing any text, click the eye icon then you’ll be able to see your password in the same place.