Viral Android – Tutorials, Examples, UX/UI Design

A fragment is a part of an activity which enables more modular activity design. It represents a particular operation or interface running within a large activity. Fragments are embedded within activities, fragments are not independent entities; they are subservient to a single activity and fragments were added to the android API version 11 (Honeycomb). In this tutorial, you will learn to make and implement fragment in your android application.

This example project of this tutorial will consist of a single activity and three fragments. Each fragments contain an TextView. Two fragments are vertically placed and one is horizontally.

Related:
Android Linear ListView Example
Android ListView with Image and Text
Android GridView with Image and Text

Android Example: How to Create Android Application with Fragments

Let’s start by creating new android project called Android Fragment Example. You need to create three XML layout file and three java file.

Create three XML layout file fragment_layout1.xml, fragment_layout2.xml, fragment_layout3.xml with TextView and with different background color and text in text view. Following is the content of different XML layout file.

res/layout/fragment_layout1.xml

res/layout/fragment_layout2.xml

res/layout/fragment_layout3.xml

Now you need to create three java files Fragment1.java, Fragment2.java, Fragment3.java and extend them to Fragment and override onCreateView then return inflater to the XML layout file. Following is the complete java code of these three file.

src/Fragment1.java

src/Fragment2.java

src/Fragment3.java

Open your main XML layout file and add three fragment with android:name="com.viralandroid.androidfragmenttutorial.Fragment1", android:name="com.viralandroid.androidfragmenttutorial.Fragment2" and android:name="com.viralandroid.androidfragmenttutorial.Fragment3". Following is the complete content of activity_main.xml file.

res/layout/activity_main.xml

Your main java activity file will look like this.

src/ MainActivity.java


Now, run your Android Fragments Tutorial with Example application, you will see the content of different fragment in a single activity. First two fragments are vertical and third fragment is horizontal which will look like above screenshot.

Android ImageView widget allows users to display image in android application. ImageView is a UI component which comes with different attribute. In this tutorial, I am going to show how to use ImageView in android application.

Here, I have used two different images and you can see only one image at a time in the screen. If you click next image button you will see new image, likewise if you click previous image button you will see your first image.

Related:
How to Add Border to Android ImageView
Load Image from URL (Internet) in Android
How to Rotate an Image in Android

Android Example: How to Display Image in Android

XML Layout File

Let’s start by adding an ImageView and two buttons in your xml layout file. Here is the final content of activity_main.xml file
res/layout/activity_main.xml

Java Activity File

In this java activity file, we control on button click event. Following is the final java code of MainActivity.java file.
src/MainActivity.java

That’s all. Now, run your ImageView application and click Next Image and Previous Image buttons which will look like screenshot given below.

Output:

Anndroid ImageVIew

Android ImageView

Navigation Drawer is an android component that is commonly used at the left side of screen. Most of the time, navigation drawer (sliding menu) is not visible, this is visible when we tap the icon on the action bar or swipe the screen from left to right.

We know that most of the popular android applications have already introduced navigation drawer (sliding menu) nowadays. After Google introduced new concept called material design with the release of android 5.0 Lollipop, we can easily implement navigation drawer in android application with the help of design support library.



Related:
Android Material Design with Design Support Library
How to Make Basketball Score Counter(Scoreboard) Android Application

This article covers all the things related to android drawer. Here, you will learn to implement navigation drawer/navigation view in android application, to use sliding menu (navigation drawer) with WebView and you will find best navigation drawer libraries for android and also will find best navigation drawer/navigation view user interface (UI) design.

Creating Navigation Drawer: Tutorial with Example, UX/UI Design and Best Libraries

1. Android Navigation Drawer View using Design Support Library

Learn how to implement navigation drawer (navigation view) in android project using design support library.

2. Android Sliding Menu (Navigation Drawer) with WebView

Here, you will learn to create navigation drawer (sliding menu) with webview. If navigation drawer item is clicked website will get loaded inside your application.

3. Best Navigation Drawer Libraries for Android Project

Find best and different navigation drawer libraries for your android project.

4. Navigation Drawer View User Interface (UI) Design for Android

Here, I have collected lots of navigation drawer UI design (screenshot) for android.

In this tutorial, you will learn to hide and show Toolbar/AppBarLayout while scrolling the content/screen like Google play music, play store. If your application/game requires more space then you can hide toolbar on scroll. You can also do same thing for TabLayout also if you are using tabs along.

Here I have I have used Toolbar/AppBarLayout along with TabLayout and I am only hiding actionbar/toolbar while scrolling and tabs goes to at the top of screen below notification bar.

Related:
Android Toolbar Example: How to Use Toolbar as ActionBar
Android Navigation Drawer View: Material Design Support Library
Android Action Bar Tutorial and Example With Option Menu

Android Example: Hide and Show Toolbar/AppBarLayout Along with Scroll

Let’s start by creating new android project with the project name Hide and Show ActionBar.

Open your app build.gradle file and add the dependencies: compile 'com.android.support:design:23.1.0'

build.dradle

Open colors.xml and styles.xml file from res > values folder and add the following content.

res/values/colors.xml

res/values/styles.xml

XML Layout File

In XML layout file I have added Toolbar, AppBarLayout, TabLayout inside CoordinatorLayout and DrawerLayout with different attributes. Following is the complete content of XML layout file.

res/layout/hiding_toolbar_appbarlayout_when_content_scroll.xml

Java Activity File

Below is the complete java code of java activity file.

src/HideShowAppBarLayout.java


Now, run your How to Hide Toolbar/AppBarLayout When Content Scroll android application and scroll the content. You will see toolbar being collapsed and tabs will go to top of the screen like the above screenshot.

In this chronometer widget tutorial, you will learn to implement simple chronometer in android application with a start, stop and reset button. By default, chronometer will display timer value in MM:SS or H:MM:SS format and you can also use setFormat(String) to display time value in an arbitrary format.

In this chronometer example, I have used a Chronometer widget and three buttons for start, stop and reset in xml layout file.

Related:
Android DigitalClock Example
Android CalendarView Example
Android Navigation Drawer Tutorial, Example

Chronometer Example: How to use Chronometer in Android Application

XML Layout File

res/layout/android_chronometer_example.xml

Java Activity File

src/ChronometerExample.java

String.xml File

res/values/strings.xml

Now, run your chronometer example project and click start, stop and reset button.

Output:

Chronometer Widget Example

In this tutorial, you will learn to display a clock in android application in digital format. DigitalClock widget is simple to code and used in android. To use simple digital clock in android application you don’t need to write java code, only little bit XML code work. You can find lots of digital clock in android developer site.

Related:
Android AnalogClock Example
Display Current Time in Android using TextClock
Android Time Picker Example

Android DigitalClock Example: How to Display DigitalClock in Android

XML Layout File

res/layout/android_digital_clock_example.xml

Java Activity File

src/DigitalClockExample.java

Strings.xml File

res/values/strings.xml

Now, run your android digital clock application, you will see one clock at first and after clicking the show another digital clock button, you will able to see another digital clock in the same screen. Your application will look like output given below.

Output:

Android DigitalClock

In this tutorial you will learn to create a custom listview android application with images and text in each list item. To display image, topic, and description in ListView we have to create a new XML file in res/layout folder and add ImageView and TextView.

To implement ListView in android, you have to work more in java activity file. ListView is a common component/layout in android application. It is difficult to make some awesome application without using listview like news app, tutorial app, social app, etc.

Related:
Simple Android ListView Example
Android ListView Example
Android User Interface (UI) Design Tutorial

Android Example: How to Implement Custom ListView with Image and Text

Let’s start by creating new android project with following information.
Application name: Custom Android ListView ImageAndText Example
Company Domain: viralandroid.com
Package name: com.viralandroid.customandroidlistviewtutorialeample
Minimum SDK: Android 3.2 (API 10)

Adding ListView in XML Layout File

Open your XML layout file and add a listview. XML layout file will looks like following.

res/layout/ activity_listview_with_image_and_text.xml
 
Custom ListView XML File

To add image and text in listview first you have to create a new XML layout file in res/layout/ folder. In this file I have added an ImageView two TextView with LinearLayout. Following is the complete content this file.

res/ listview_activity.xml

Java Activity File

Following is the complete java activity file where we control all thing about listview.

src/ ListViewWithImageAndText.java

Strings.xml File

res/values/strings.xml


That’s all. Now run your Android ListView with Image and Text application, you will see lists with image, list title and short description which will look like above screenshot.