Viral Android – Tutorials, Examples, UX/UI Design

A Gallery is an android widget that helps us to display items (images) in horizontal scrolling list and currently selected item at the center. In this android gallery view tutorial, you will learn to display images horizontally and when you click any image, the currently selected image will be displayed in large size using ImageView and also show toast message when you select new item (image).

In xml layout file, you have to add a Gallery widget and an ImageView widget and then give different id to them. Following is the complete example of android gallery view.

Related:
Android RatingBar Example
Android ToggleButton Example
Android Material Design with Design Support Library

Android Gallery Example: How to use Gallery View in Android

XML Layout File

res/layout/gallery_view_example.xml

Java Activity File

src/GalleryViewExample.java

Strings.xml File

res/values/strings.xml

That’s all. Now, run your gallery view android application and select any image which will look like output given below.

Output:

Android Gallery View

In this tutorial, you will learn to make fade in animation in android application. In android, there are many ways to make fade in animation and here I have used <alpha> tag. For the fade in animation using <alpha> tag you have to create an anim folder in your res directory.

Related:
Zoom Out Animation in Android
Android WebView Tutorial with Example
How to Implement Ripple Effect in Android

Android Fade In Animation Example

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

res/anim/fade_in_animation.xml

XML Layout File

res/layout/android_fadein_animation.xml

Java Activity File

src/FadeInAnimation.java

Strings.xml File

res/values/strings.xml

Now, run your android fade in application and click the Fade In Animation button.

Output:

Android FadeIn Animation

PopupWindow is used to show quick information or to get information from users. Popup windows have their own layout and there are different types of popup windows. We have already posted some tutorial posts like simple android alert dialog box example, toast message example, material design animated dialog box, etc. This time we are working with tooltip view. Tooltip is mostly used in web design but nowadays this is used by some android applications too.

In this tutorial, you will learn to implement tooltip view in your android application with little bit java code. Tooltip is mostly used to show quick information or tips to the users. It mostly contains only text with background and text color, but you may include image also. Tooltip is like the android toast, its physical targets can be specified and other many features with customization.

Related:
Custom Android Toast - How to Create a Custom Toast in Android
Material Design Circular ProgressBar For Android
Android Dropdown/Popup Menu Example

Android Example: How to Create Tooltip View with Arrow in Android

We are going to make tooltips view in android application/game by adding compile 'it.sephiroth.android.library.targettooltip:target-tooltip-library:+' dependency in build.gradle file. Following is the dependency part of build.gradle file.

build.gradle


Open your project XML layout file and add some buttons to show tooltip when the button is clicked with onClick attributes and unique id. Following is the sample content of XML layout file.

res/layout/popup_window_with_tool_tips_arrow_text.xml

Now, it’s time to work in java activity file. Open your app java activity file and add the following code. You can change the direction of tooltip to right, bottom, left, top, center from Tooltip.Gravity.BUTTOM. Following is the complete code of java activity file.

src/PopupWindowToolTipsArrow.java


That’s all. Run your Making Popup Window with ToolTips Arrow in Android application and click on any of the buttons you will see tooltip in different position with arrow. Your application will look like the above screenshot.

Android provides different layouts, components and allows developers to create custom UI widgets with a flexible framework for user interface (UI) design. We have already posted many user inter-design tutorials like material design login, xml ui design, contact form ui design, navigation drawer tutorial and many more. This time you will learn to create/make material design profile screen XML ui design for your android application. To make profile screen UI, we have to work with many layouts and components/widgets.

Many applications show name, profile photo, bio, etc in the profile page/screen. I have also placed a circular image with border, name, cover photo; bio etc in this example project and it is very simple.

Related:
Android Material Design Sign Up/Registration Form XML UI Design
Material Design Circular ProgressBar For Android
Android Material Design with Design Support Library

Android Example: How to Make Material Design Profile Screen

We are going to make android profile page material design XML ui design, so we only work with XML either in XML layout file or in XML drawable file. Firstly, I am going to make a circular box for profile image with border color. For that, create a new xml file in res/drawable/ folder and make a circle with white border color. Following is the complete content of XML file of drawable folder.

res/drawable/profile_circular_border_imageview.xml

We are going to make profile screen for android app with a header with background image, a profile picture inside circle with border, add friend button, overflow menu icon, name, short bio of the user and you can add more things according to your wish. For that, open your XML layout file and add an ImageView for header image, an ImageView for profile picture and many more widgets/components. Following is the complete XML layout file where I have added different components and layout with different attributes.

res/layout/material_design_profile_screen_xml_ui_design.xml

Following is the default code of java activity file.

src/ProfileScreenXMLUIDesign.java

Your app styles.xml file will look like below.

res/values/styles.xml


Now, run your Android Material Design Profile Screen XML UI Design application which will look like above screenshot. You can implement/make profile page/screen by adding above code. Making profile page XML UI design is very simple android, you just need to have the little bit knowledge of android layouts, components and its’ attributes.

Android Design Support Library makes us easy to make android application by providing numbers of material design components. There are many material design components including Floating Action Button (FAB), Snackbar, Navigation Drawer, Tabs, etc. which can easily be implemented to our application with little bit code. In this tutorial, you will learn to implement material design tabs using tablayout and design support library in your android app.

TabLayout also have many more attributes and which are very important. Here I have used toolbar and some other design support library components.

Related:
Android Material Design Login Form XML UI Design
Android Material Design Sliding Tabs Example
Android ActionBar Tabs Example

Android Example: Making Material Design Tabs Using TabLayout

Let’s start by creating new android project and give the project name Material Tabs Using TabLayout in Android.

Step 1: Adding Design Support Library Dependencies

First thing you have to do is opening build.gradle fie and adding android design support library dependencies: compile 'com.android.support:design:23.1.0'

build.gradle

Step 2: Adding Color Values

Open your app colors.xml file and add the below XML color values.

res/values/colors.xml

Step 3: Modifying Theme

Open styles.xml file and add the below content.

res/values/styles.xml

Step 4: Modifying XML Layout File

Now modify your XML layout file. Here I have added DrawerLayout, CoordinatorLayout, Toolbar, AppBarLayout, TabLayout, etc. Simply you can copy and paste the below content to your XML layout file.

res/layout/material_design_android_tabs.xml

Important TabLayout Attributes

Fore Center Fixed: tabMode=”fixed”, tabGravity=”center”
For Scrolling Tabs: tabMode=”scrollbar”

Step 5: Working With Java Activity File

This time is to work with java code. Open your app java activity file and just add the following code in your java activity file.

src/AndroidTabsUsingTabLayout.java


That’s all. Run your Android Material Design Tabs Using TabLayout application, which will look like the above screenshoot.

Android ListView is a view group that displays several items in vertical scrollable list and it helps you to display repeating data in the form of scrollable list. ListView is widely used in android applications.

In this simple android ListView tutorial, you will learn to display several items in vertical scrollable list and also learn to display toast message when list items clicked.

Related:
Android Drop Down List Example
Android ListView Example
Android Navigation Drawer Tutorial, Example, UX/UI Design, Libraries

Simple ListView Example: How to Create a Simple Android ListView

XML Layout File

res/layout/simple_android_listview_example.xml

Java Activity File

src/SimpleListViewExample.java

Strings.xml File

res/values/strings.xml

Now, run your simple list view application and scroll the screen which will look like output given below.

Output:

Simple ListView Example

Graphical user interface is one of the important parts in any application as much as programming part. To make a popular android application you need to focus on user interface design and as well as programming part. If your app’s backend is very strong but user interface is not so good at that time you are likely to get low rating in your app.

In this tutorial, you will learn to build a simple android calculator application XML user interface design so we’ll only work with XML. If you want to make signup and login, dashboard page for android, material design profile screen/page Xml UI design we have already posted these tutorial find them and learn to make beautiful XML UI design for android app.

Related:
Android Material Design Profile Screen XML UI Design
Android Material Design Sign Up/Registration Form XML UI Design
Simple Android Contact Form XML UI Design

Android Example: How to Create a Simple Calculator XML UI Design

Following is the step by step guide to create/make android calendar app XML ui design. Lets’ create a new android project and modify your app colors.xml and styles.xml file.

Colors.xml File

Open your app colors.xml file from res/values/colors.xml and define color value like colorPrimary, colorPrimaryDark etc. Following is the complete content of colors.xml file.

res/values/colors.xml

Styles.xml File

Open your app styles.xml file and from res/values/styles.xml and modify it like the below.

res/values/styles.xml


XML Layout File

Now open XML layout file and add a LinearLayout inside root layout (LinearLayout) and set gravity bottom and orientation vertical. And then again add a LinearLayout with orientation horizontal and inside it add four buttons for clear calculation, small bracket, percentage and back button with layout_weight 1, minHeight 80px, textColor, textSize, textStyle and many other attributes.

Like above repeat the same step for other rows. Following is the complete content of XML layout file.

res/layout/activity_main.xml

Again create a new XML layout file with name simple_calculator_result and add two text views inside a LinearLayout and set gravity right, padding 10dp, orientation vertical in root layout. Following is the complete content of simple_calculator_result.xml file.

res/layout/simple_calculator_result.xml

Java Activity File

Following is the default code of java activity file.

src/SmpleAndroidCalculatorAppUI.java


Now, run your Simple Android Calculator App XML UI Design application which will look like above screenshot. In this simple and short tutorial I have shown you how to make an android calculator app UI design using XML.