Viral Android – Tutorials, Examples, UX/UI Design

You can make any android view transparent background color simply using XML or java code. In this tutorial, you will learn to make transparent background in android buttons. There are many methods to create button with transparent background and here I am going to show one of the best and easiest ways to make transparent background.

Only making transparent background is not important thing, it is important that how much transparent do you need 100 percent transparent, 90 percent transparent, 40 percent transparent, 10 percent transparent etc. And which color are you going to make transparent.

Related:
Circular Button with Icon and Text in Android
Adding Border to the Top and Bottom of an Android View
Android ImageButton Example

Android Example: How to Make/Create Transparent Background of Android Button

It’s very simple just create a button where you want and add background color according to your need using background attribute like android:background="#000000" .

Now it’s time to make transparent background of android button. If you want to make 20 % transparent just add 80 at the first of your hex color code like android:background="#80000000" , if you want to make only 80 % transparent button then add 20 at the first of your hex color code like above. Similarly if you need 100% transparent background you can just use android:background="@null" or do like above.

Following is the complete modified content of XML layout file where I have added different buttons with different XML attributes to make transparent background color.

res/layout/transparent_background_android_button.xml

Following is the default code of java activity file.

src/TransparentButtonBackground.java


That’s all. Now run your Making Transparent Background of Android Button application, you will see different buttons with different transparent percent like above screenshot.

In this example, you will learn to make rounded corner (border radius) in android layouts. To make rounded corner of any layout first of all, you have to create a new xml drawable file with corners rounded and set layout background to the drawable xml file. Layouts are the user interface components in android application.

Related:
How to Make Rounded Corners(Boarder Radius) of ImageView in Android
Load Image from URL (Internet) in Android
Check Internet Connection in Android

Android Example: How to Make Rounded Corners in Android Layout

Create a XML Drawable File
res/drawable/rounded_corner.xml

XML Layout File
Following is the xml layout file content.
res/layout/rounded_layout_corners.xml

Strings.xml File
Following is the default content of strings.xml file.
res/values/strings.xml

Output:

Rounded Corners in Android Layout

Android allows us to access the camera LED/ Flashlight/ Touchlight in our application. You can turn ON and OFF flashlight from your application using java code. Most of the time android flash light is on while taking photos in flash mode. In this tutorial, you will learn how to turn ON and OFF camera LED/ flashlight programmatically from your android app.

To work with android flashlight/touch light, you have to add the permission to access camera and hardware in your application AndroidManifest.xml file.

This is simple turn on and off flashlight android application; here is no any complex code you just have to add little bit java code. Here, I have used toggle button to turn on and off flashlight.

Related:
Turn ON and OFF WiFi Connection Programmatically in Android
Android ToggleButton and Switch Button Example
Android CheckBox Example

Android Example: Turn On and Off Camera LED / Flashlight Programmatically

Following is the step by step guide to turn on/off flashlight programmatically in android.

Create a new Android Project

Let’s start by creating a new project to turn on/off camera led/flashlight programmatically with following information.

Application name: Turn On and Off Android Flashlight
Company Domain: viralandroid.com
Package name: com.viralandroid.turnonandoffandroidflashlight

Adding Permission

Open your app AndroidManifest.xml file and add android.permission.CAMERA and android.hardware.camera permission. AndroidManifest.xml file will looks like this.

AndroidManifest.xml

XML Layout File

Following is the content of XML layout file where I have added a toggle button to turn on and off flash light programmatically from android app.

res/layout/turn_on_off_camera_flash_light.xml

Java Activity File

Following is the simple java code to develop android flash light application.

src/ OnOffCameraFlashlight.java

Strings.xml File

res/values/strings.xml


That’s all. Now run your Turn On and Off Camera LED / Flashlight Programmatically in Android application and click the toggle button to turn on and off flashlight of your phone. Make sure to work by this example, your device should have the flash light.

Nowadays users are interacting with material design application. Material design applications are eye catching app which uses some effects like animation and material color to their app. If you are looking to make show and hide a view with a scroll or slide down and up screen with animate effect to android image view, text view or custom view, you are in right place. In this tutorial, you will learn to show and hide any android view when scroll/slide the screen with animation effect.

Here all these animations are made only by using XML code, you not need to have knowledge of java programming during this time.

Related:
How to Hide Toolbar/AppBarLayout When Content Scroll
Create Scrolling Text (Marquee) in Android TextView
Hide and Show Android ActionBar in Any Activity

Android Example: How to Show and Hide a View with a Slide Up/Down Screen with Animation

First things you have to do is open build.gradle file of your app and add compile 'com.github.flavienlaurent.discrollview:library:[email protected]' as project dependency. Build.gradle file will look like below.

build.gradle

Now we will be working in XML layout file and all things will be done here. Open your project XML layout file and change your root layout to com.flavienlaurent.discrollview.lib.DiscrollView and add a new widget com.flavienlaurent.discrollview.lib.DiscrollViewContent inside that layout with layout_height and layout_width match_parent attributes. All content/widgets/views that you want to animate goes inside second widget with different attributes. Following is the complete content of sample project example you can paste below code to your project XML layout file.

res/layout/animated_scrolling_android_imageview.xml

Following is the default code of java activity file.

src/AnimatedAndroidTextViewEffect.java


Now, run your Show and Hide Android Views When Scroll the Screen With Animation Effect application and scroll down and up the screen you will see different views with different animation effect. This will look like the above gif demo.

In this tutorial, you will learn to select time in android application using TimePicker widget and display the time. This time picker allows you to pick time by hour and minute.

Related:
Android Radio Button Example
Android Switch Button Example
Android Spinner Example

Android Example: How to use TimePicker in Android App

This example gives you the instructions to use TimePicker in android.

XML Layout File

res/layout/activity_main.xml

Java Activity File

src/MainActivity.java

Strings.xml File

res/values/strings.xml

Now, run your time picker application which will look like this.

Time Picker

In this tutorial, I am going to show how to implement image view images zoom effect in android application. Implementing zoom effect in android ImageView images is not very easy, it’s little bit complex. You can find same type of project in android developer site, inside Building Apps with Graphic and Animation topic.

When you touch or click on the image it starts zooming, this type of zooming animation can be used in photo gallery. To make zoom in image in XML layout file two ImageView components are used; one for thumbnail and another for large image. The large imageview is for full screen size and small imageview is for thumbnail size.

Related:
How to Add Ripple Effect/Animation to a Android Button
Blinking Animation in Android Application
Android ImageSwitcher Example

Android Example: How to Implement Zooming Effect in Android ImageView Images

Here you will find all necessary code to make zoom in android image view images. There are only two important files; one is XML layout file and another is java activity file and then you have to add one image in your project drawable folder.

XML Layout File

Following is the complete content of XML layout file, here you will find two ImageView inside FrameLayout.
res/layout/android_image_zoom_effect.xml

Java Activity File

Following is the complete content of java activity file to make android ImageView images zoom effect/animation. This is little bit complex. You can copy and paste in your project directly for first time.
src/AndroidImageZoomEffect.java

Strings.xml File

Following is the default content of strings.xml file.
res/values/strings.xml



You have done all things. Now, run your Implement Zooming Effect in Android ImageView Images project and touch on the image, image will start zoom in with animation. Make sure that you have added an image in drawable folder and name it cat or replace cat with your image name in XML layout file and java activity file.

Circular progress bar/ loader can be shown at the time of loading content from the server/internet like twitter android app has, refreshing the page like gmail android app. Not only that circular progress/loader can be used to show downloading, uploading progress and many other purpose. In this tutorial, you will learn to make material design progress bar for android application/game.

Implementing material design progress bar in android is not much difficult to implement in apps or game if you have some knowledge of android app development.

Related:
Material Design Horizontal ProgressBar Android Example
Simple Creating Circular ProgressBar in Android
Dashboard UI Design for Android App

Android Example: How to Make Material Design Progress/Loader

Let’s start by adding compile 'com.github.rey5137:material:1.2.2' dependency to your app build.gradle file. Build.gradle file will look like below.

build.gradle

XML Layout File

I am making this material design progress using ProgressView widget so open your app’s XML layout file and add ProgressView widgets. Following is the complete content of XML layout file.

res/layout//material_design_circular_progressbar.xml

Java Activity File

Following is the modified code of java activity file.

src/MaterialDesignAndroidCircularProgress.java


Now run your Material Design Circular ProgressBar For Android application, the progress/loading will start automatically after running app.