[Tutorial] Create a Blur Effect on Android with RenderScript - Android Software Development

Hello,
I create that thread to present you a tutorial aiming to learn you how to create a Blur Effect on Android with the RenderScript Library. You can discover the tutorial in video on Youtube too :
Create a Blur Effect on Android with RenderScript
In image processing, a Blur Effect, also known as Gaussian Blur, is the result of blurring an image by applying a Gaussian function. The Blur Effect is widely used in graphics software. In that tutorial, you're going to learn how to apply a Blur Effect on Android by using the RenderScript Library.
1. Configure your environment to use RenderScript
First step is to configure your development environment to enable RenderScript in your Android project. Note that your need the following Android SDK using these APIs:
Android SDK Tools revision 22.2 or higher
Android SDK Build-tools revision 18.1.0 or higher
You need to open your build.gradle and then add the following RenderScript properties :
Code:
android {
compileSdkVersion 23
buildToolsVersion "23.0.3"
defaultConfig {
minSdkVersion 9
targetSdkVersion 19
renderscriptTargetApi 18
renderscriptSupportModeEnabled true
}
}
2. Implement the Blur Effect with RenderScript
Note that we will use the RenderScript API in V8. This version is located in the android.support.v8.renderscript.* packages. So, be sure to import the correct classes in your code. We are going to create a BlurBuilder class with a static blur method taking the Bitmap to blur and returning the blurred Bitmap. We will use a blur radius constant to define which radius we want to apply on the original image.
Code for the BlurBuilder class should be like that :
Code:
package com.ssaurel.blureffect;
import android.content.Context;
import android.graphics.Bitmap;
import android.support.v8.renderscript.Allocation;
import android.support.v8.renderscript.Element;
import android.support.v8.renderscript.RenderScript;
import android.support.v8.renderscript.ScriptIntrinsicBlur;
/**
* Created by ssaurel on 29/09/2016.
*/
public class BlurBuilder {
private static final float BITMAP_SCALE = 0.6f;
private static final float BLUR_RADIUS = 15f;
public static Bitmap blur(Context context, Bitmap image) {
int width = Math.round(image.getWidth() * BITMAP_SCALE);
int height = Math.round(image.getHeight() * BITMAP_SCALE);
Bitmap inputBitmap = Bitmap.createScaledBitmap(image, width, height, false);
Bitmap outputBitmap = Bitmap.createBitmap(inputBitmap);
RenderScript rs = RenderScript.create(context);
ScriptIntrinsicBlur intrinsicBlur = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
Allocation tmpIn = Allocation.createFromBitmap(rs, inputBitmap);
Allocation tmpOut = Allocation.createFromBitmap(rs, outputBitmap);
intrinsicBlur.setRadius(BLUR_RADIUS);
intrinsicBlur.setInput(tmpIn);
intrinsicBlur.forEach(tmpOut);
tmpOut.copyTo(outputBitmap);
return outputBitmap;
}
}
Like you can see, we choose to apply a scale on the original bitmap but it's not mandatory. Then, we create a RenderScript instance. The RenderScript V8 API offers us a ScriptIntrinsicBlur class that implements a Blur Effect with RenderScript. We use it with the RenderScript instance in parameter. Then, we need to allocate memory for the input Bitmap and the ouput Bitmap. Last step is to configure the Blur Effect by applying the radius parameter.
Finally, we get the blurred image in result and we returned it.
3. Define images in your main layout
To see our Blur Effect in action, we need to create a layout with two images. The first will be used to show an initial image and the second to show the blurred image. We will use the following layout :
Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ssaurel.blureffect.MainActivity">
<ImageView
android:layout_width="256dp"
android:layout_height="256dp"
android:id="@+id/originalImage"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:src="@drawable/logo_ssaurel"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/resultImage"
android:layout_below="@id/originalImage"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
4. Apply the Blur Effect
Now, it's time to apply the Blur Effect in the Main Activity of our application :
Code:
package com.ssaurel.blureffect;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView resultImage = (ImageView) findViewById(R.id.resultImage);
Bitmap resultBmp = BlurBuilder.blur(this, BitmapFactory.decodeResource(getResources(), R.drawable.logo_ssaurel));
resultImage.setImageBitmap(resultBmp);
}
}
We get our initial image as a Bitmap with the static method decodeResource of the BitmapFactory class, then we apply the Blur Effect on it. Finally, we set the blurred bitmap on the result image view.
5. Blur Effect Result
Now, you can enjoy the result of your Blur Effect :
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Don't hesitate to try to create this Blur Effect and give me your feedbacks.
Thanks.
Sylvain

Related

Assistance with zRam configuration

I am the developer of the Bionx Catalsyt rom for the Droid Razr and I need some assistance with my toolkit I have developed for my rom (Its open sourced if youd like to contribute) I am relatively new to android app develoment so bare with me.
I need some assistance with zRAM configurations or a dev with some experience with it. I needed zRAM configurations for optimizing kernel usage on the Droid Razr to improve performance so I Ported the zRAM configurations from the CM10 Android Settings in my toolkit which led to me bringing over the Android System Properties (Reflected) and Utils Class for it to function correctly. 2 options are available to users. Configuration which gives users 4 options to choose from (disabled, 10%, 18%, 26%) and the option to enable zRAM or "Purge Memory". When I set a value, it seems not to "stick" or take affect but toggling Purge Settings does take affect. If i looked at a logcat, what values or what exactly would i be searching for to correct this feature or make sure it is taking affect or working at all?
and can any dev take a look at the code and see if I screwed anything up or miss writ something. (I didnt really change anything when it came from cm10, just wanting to port it to be useable on a stock based rom or AOSP)
Source
https://github.com/rgocal/app_packages_BionxDashboard.git
src/com/android/ZRAMconfig is the located class
src/android/os/ is location of imports needed
First, keep in mind you need a kernel with zRam support for those settings to work.
To set the zRam compression to the desired level (let's take 64mb as an example), you want to do something like this in a terminal :
Code:
su
busybox mkswap /dev/block/zram0
busybox swapon /dev/block/zram0
echo $((1024*1024*64)) > /sys/block/zram0/disksize [COLOR="Green"]// Replace 64 with the desired compression level[/COLOR]
So in java, this would translate to something like this :
A simple layout with an EditText for the user to input the desired zRam compression level & a Button to apply the value :
zram.xml
Code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<EditText
android:id="@+id/userInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="48dp"
android:layout_marginRight="48dp"
android:layout_marginTop="32dp"
android:ellipsize="end"
android:hint="Enter zRam Compression Level"
android:inputType="number" />
<Button
android:id="@+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
android:text="Apply"
android:textColor="#33b5e5" />
</LinearLayout>
The corresponding java Class :
Zram.java
Code:
package com.rgocal.zram.settings;
import java.io.DataOutputStream;
import java.io.IOException;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class Zram extends Activity implements OnClickListener {
private EditText input;
private Button apply;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.zram);
input = (EditText) findViewById(R.id.userInput);
apply = (Button) findViewById(R.id.apply);
apply.setOnClickListener(this);
}
@Override
public void onClick(View v) {
int value = Integer.parseInt(input.getText().toString());
// Arbitrary value, I don't know the maximum zRam compression (if
// there's one)
if (value > 200) {
Toast.makeText(
this,
"The value you entered is too high and may cause problems! Please reduce it",
Toast.LENGTH_SHORT).show();
} else {
try {
Process process = null;
process = Runtime.getRuntime().exec("su");
DataOutputStream os = new DataOutputStream(
process.getOutputStream());
os.writeBytes("busybox mkswap /dev/block/zram0" + "\n");
os.writeBytes("busybox swapon /dev/block/zram0" + "\n");
os.writeBytes("echo $((1024*1024*" + value
+ ")) > /sys/block/zram0/disksize" + "\n");
os.writeBytes("exit\n");
os.flush();
process.waitFor();
Log.v("zRam", "Compression level set to " + value);
} catch (IOException e) {
e.printStackTrace();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
Your AndroidManifest.xml :
Code:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rgocal.zram.settings.Zram"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
<uses-permission android:name="android.permission.ACCESS_SUPERUSER" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="zRam Settings"
android:theme="@style/AppTheme" >
<activity
android:name="com.rgocal.zram.settings.Zram"
android:label="zRam Settings" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
The resulting apk : http://168.144.134.166/downloads/zRamSettings.apk
Screenshot :
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
I uploaded the full code on my github to make it easier for you to grab it : https://github.com/Androguide/zRamSettings
Hope this gets you going, good luck
Androguide.fr said:
First, keep in mind you need a kernel with zRam support for those settings to work.
[*]The resulting apk : http://168.144.134.166/downloads/zRamSettings.apk
[*]Screenshot :
[/LIST]
I uploaded the full code on my github to make it easier for you to grab it : https://github.com/Androguide/zRamSettings
Hope this gets you going, good luck
Click to expand...
Click to collapse
Like a boss! Thanks!
Our kernel supports zRAM configurations with limitation but with Kexec support, we have more options so I needed some options for both ways
Update: Integrated this activity as a preference screen in my current zRAM configurations so now I have support both ways. Noticed your comment of how we dont know how to calculate a max/min RAM value so I'm looking for that value currently. Now all I need is to find a way to allow the activity to detect whether or not the device supports zRAM configurations and prevent the user from having this options if it isnt so it doesnt apply blank values.

[GUIDE][UP] How to easly Implement J.W. ViewPagerIndicator + transitions [SAMPLE APP]

IF YOU MAKE USE OF THIS GUIDE AND YOU WILL MAKE PUBLIC YOUR APPLICATION, PLEASE THANK THE OP AND GIVE ME & ENRICOCID CREDITS/MENTION . THANK YOU
1) Set Up Jake Wharton ViewPagerIndicator
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
​
IF YOU WANNA DOWNLOAD MY SAMPLE APP GO HERE:
http://forum.xda-developers.com/showpost.php?p=45742129&postcount=4​
SITE>>>http://viewpagerindicator.com/<<<SITE​
1 - Download JakeWharton ViewPagerIndicator:
​
Download from here: JakeWharton ViewPagerIndicator download
Or from the website: http://viewpagerindicator.com/
2 - OPEN ECLIPSE
First you need to extract "library" folder from the zip and save it in your documents folder, like the picture below:
Now drag & drop "library" folder to your Documents directory:
- Import downloaded ViewPagerIndicator Library to your workspace:
GO TO FILE > NEW > OTHER > ANDROID > ANDROID PROJECT FROM EXISTING CODE:
- Click next button and browse directory (1) to select the downloaded ViewPagerIndicator Library (2):
(1) CLICK BROWSE...
(2) AND SELECT "LIBRARY" FOLDER, GO TO Libraries > My Documents > Library, click OK.
Now give a name to this project (for example "ViewPagerIndicator") and check "Copy project into workspace", like the picture:
Click "Finish"
If you like my work don't Forget To Hit Thanks, five star
:good: or offer me a beer :good:
​
Make a donation​
2) How to load VievPagerIndicator to Your Project​
- Create a new Android Application Project:
- Give a name to your project (for example "ViewPagerTest"), like the picture below:
​
- Go next and click finish to create the project
​
- Now navigate to your project properties:
- Go to Android and Click "Add" to load the library into your project:
​
You will receive an error:
To fix this error you have two options:
- 1) delete the libs folder of your project:
- 2) [RECOMENDED]The best way is to copy the android-support-v4.jar from sdk/extras/android/support/v4 to your workspace/ViewPagerIndicator/libs folder, without deleting libs folder of your project!!!
If you have other errors like this:
go to ViewPagerIndicator properties and change the "Project Build Target". This must be equal to that of the ViewPagerTest project:
---------- Post added at 08:28 PM ---------- Previous post was at 08:27 PM ----------​
3) Create Layouts ​
Blue = Add
Red = Delete
- Now go to res > layout
and edit activity_main.xml deleting the entire code:
Code:
[COLOR="red"]<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
</RelativeLayout>[/COLOR]
Copy & paste the code below to your activity_main.xml
Code:
[COLOR="Blue"]<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.viewpagerindicator.TitlePageIndicator
android:id="@+id/indicator"
android:padding="10dip"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:background="#000000"
android:textColor="#2FB3E3"
app:footerColor="#2FB3E3"
app:footerLineHeight="1dp"
app:footerIndicatorHeight="3dp"
app:footerIndicatorStyle="underline"
app:selectedColor="#FFFFFF"
app:selectedBold="true"
/>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
</LinearLayout>[/COLOR]
Now create new .xml files in your layout folder (I will create 3 layouts for example). Go to New > other
and select "Android XML file":
​
Give a name to your xml file (for example "layout1") and select linear layout, click finish. See the picture:
Create two other layouts and call them "layout2" and "layout3":
4)Implement ViewPager using fragments ​
Blue = Add
Red = Delete
Now go to src > com.example.viewpagertest and edit MainActivity.java
Delete the content marked in red:
Code:
[COLOR="Blue"]package com.example.viewpagertest;[/COLOR]
[COLOR="Red"]import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
[user=439709]@override[/user]
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}[/COLOR]
and add the following code:
Code:
[COLOR="blue"]import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;
public class MainActivity extends FragmentActivity {
FragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;
int Number = 0;
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAdapter = new FragmentAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}
[user=439709]@override[/user]
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}[/COLOR]
The result:
Code:
package com.example.viewpagertest;
import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;
public class MainActivity extends FragmentActivity {
FragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;
int Number = 0;
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAdapter = new FragmentAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}
[user=439709]@override[/user]
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Now you have to create three fragments into src > com.example.viewpagertest folder:
- go to new > other:
and create three classes named "FirstActivity", "SecondActivity" and "ThirdActivity" like the picture below:
Now edit FirstActivity.java in src > com.example.viewpagertest folder and delete the red code:
Code:
[COLOR="Blue"]package com.example.viewpagertest;[/COLOR]
[COLOR="Red"]public class FragmentAdapter {
}[/COLOR]
and add the following code:
Code:
package com.example.viewpagertest;
[COLOR="Blue"]import com.example.viewpagertest.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class FirstActivity extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
View v = inflater.inflate(R.layout.layout1, null);
return v;
}
}
[/COLOR]
For the SecondActivity class:
Code:
package com.example.viewpagertest;
import com.example.viewpagertest.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class SecondActivity extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
View v = inflater.inflate(R.layout.layout2, null);
return v;
}
}
For the ThirdActivity class:
Code:
package com.example.viewpagertest;
import com.example.viewpagertest.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class ThirdActivity extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
View v = inflater.inflate(R.layout.layout3, null);
return v;
}
}
Now we need to create a new class called "FragmentAdapter.java" into src > com.example.viewpagertest folder:
- go to new > other:
and create a new class called "FragmentAdapter" like the pictures:
click finish.
Now edit the FragmentAdapter.java in src > com.example.viewpagertest folder and delete the red code:
Code:
[COLOR="Blue"]package com.example.viewpagertest;[/COLOR]
[COLOR="Red"]public class FragmentAdapter {
}[/COLOR]
and add the following code:
Code:
package com.example.viewpagertest;
[COLOR="blue"]import com.viewpagerindicator.IconPagerAdapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatPagerAdapter;
public class FragmentAdapter extends FragmentStatPagerAdapter implements IconPagerAdapter{
public FragmentAdapter(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}
[user=439709]@override[/user]
public int getIconResId(int index) {
// TODO Auto-generated method stub
return 0;
}
[user=439709]@override[/user]
public Fragment getItem(int position)
{
// TODO Auto-generated method stub
Fragment fragment = new FirstActivity();
switch(position){
case 0:
fragment = new FirstActivity();
break;
case 1:
fragment = new SecondActivity();
break;
case 2:
fragment = new ThirdActivity();
break;
}
return fragment;
}
[user=439709]@override[/user]
public int getCount() {
// TODO Auto-generated method stub
return 3;
}
[user=439709]@override[/user]
public CharSequence getPageTitle(int position){
String title = "";
switch(position){
case 0:
title = "First";
break;
case 1:
title = "Second";
break;
case 2:
title = "Third";
break;
}
return title;
}
}[/COLOR]
Save the entire project! Enjoy your App!!!
SAMPLE APP:
>>>DOWNLOAD<<<​
JAKE WHARTON VIEW PAGER INDICATOR GITHUB:
https://github.com/JakeWharton/Android-ViewPagerIndicator​
CREDITS:
- me
- enricocid
- Jake Warthon
Thanks to Xda!
ivn888 said:
CREDITS:
- me
- enricocid
- Jake Warthon
Thanks to Xda!
Click to expand...
Click to collapse
grandi ,ottimo lavoro
Awesome!! I badly needed this.. Thanks for the guide
Suppose I want to add pics and some strings for each layout, how do I do that?? Can you give an example for this also..?? thanks
rakz992 said:
Awesome!! I badly needed this.. Thanks for the guide
Suppose I want to add pics and some strings for each layout, how do I do that?? Can you give an example for this also..?? thanks
Click to expand...
Click to collapse
You can use the ImageView to display images in your Application.There are many different configuration options and many screens from different devices that you should take into account. I write a little guide using my viewer app.
EXAMPLE:
First to use imageview you have to add resources, in Eclipse navigate to res/values/strings.xml.
Edit the strings.xml
This is the content of string.xml:
Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">ViewPagerTest</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
</resources>
Add the following string:
Code:
[COLOR="Blue"]<string name="content">image</string>[/COLOR]
Like this:
Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">ViewPagerTest</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
[COLOR="blue"]<string name="content">image</string>[/COLOR]
</resources>
Now you have to add a picture in the appropriate project folder, as you would have noticed there are 5 folders that contain the image resources of the project :
res/drawable-hdpi
res/drawable-ldpi
res/drawable-mdpi
res/drawable-xhdpi
res/drawable-xxhdpi
You can copy the images you want to put in you’re application in any one of these folders. Android SDK will automatically recognize any images you put on any one of these folders as drawable resources. Refer to official Android’s Drawable Resource and Screen Support to understand of how image works in Android.
Inside these folder there are default project .pngs. Now i use them to show you on how to add pict. The pictures are named ic_launcher.png
Now open layout1.xml
This is the blank layout:
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
and add the following code:
Code:
[COLOR="Blue"]<ImageView
android:id="@+id/image"
android:contentDescription="@string/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />[/COLOR]
Like this:
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
[COLOR="blue"]<ImageView
android:id="@+id/image"
android:contentDescription="@string/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />[/COLOR]
</LinearLayout>
Now you may open the Graphical layout editor to preview your UI:
--------------------------------------------------------------------------------------------------------------
1) Resources: string.xml, <string name="content">image</string>
2) Your_image
3) Use imageview to image to your layout:
<ImageView
android:id="@+id/image"
android:contentDescription="@string/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/Your_image" />[/COLOR]
@ivn888: We cannot see your pictures. You ran out of bandwidth.
nikwen said:
@ivn888: We cannot see your pictures. You ran out of bandwidth.
Click to expand...
Click to collapse
we are working to fix this problem... thanks
bro another help here
i want to add Zoom-out page transformer animation for slide from one layout to other..
should i replace mAdapter with this
pager.setPageTransformer(true, new ZoomOutPageTransformer());
can you help me on how to do it ?
thank you
rakz992 said:
bro another help here
i want to add Zoom-out page transformer animation for slide from one layout to other..
should i replace mAdapter with this
pager.setPageTransformer(true, new ZoomOutPageTransformer());
can you help me on how to do it ?
thank you
Click to expand...
Click to collapse
Tomorrow i will release a short guide on how to add this animation...
ivn888 said:
Tomorrow i will release a short guide on how to add this animation...
Click to expand...
Click to collapse
:highfive:
ivn888 said:
Tomorrow i will release a short guide on how to add this animation...
Click to expand...
Click to collapse
Thanks a lot
Customize the Animation with PageTransformer - How to add Zoom-out page transformer
Reference here: http://developer.android.com/training/animation/screen-slide.html#pagetransformer
- What you need:
- NineOldAndroids library:
>>>Download here<<<
Site>>>http://nineoldandroids.com/<<<Site
- ZoomOutPageTransformer.java
>>>Download here<<<​
1) First you need to extract "library" folder from the zip and save it in your documents folder, like the picture below:
2) Now drag & drop "library" folder to your Documents directory,i will rename it "library_1":
3) Import downloaded NineOld Library to your workspace:
GO TO FILE > NEW > OTHER > ANDROID > ANDROID PROJECT FROM EXISTING CODE
4) Click next button and browse directory to select the downloaded Library:
(1) CLICK BROWSE...
(2) AND SELECT "LIBRARY" FOLDER, GO TO Libraries > My Documents > Library_1, click OK.
5) Now give a name to this project (for example "Library_1 or "NineOld") and check "Copy project into workspace"
follow the first post to understand "how import libs": http://forum.xda-developers.com/showpost.php?p=45742000&postcount=1
EXAMPLE APP:
Copy the ZoomOutPageTransformer.java to your src/com.example.viewpagertest/ folder or create a class named ZoomOutPageTransformer:
Code:
package com.example.viewpagertest;
import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;
[COLOR="green"]import com.nineoldandroids.view.ViewHelper;[/COLOR]
public class ZoomOutPageTransformer implements PageTransformer {
private static float MIN_SCALE = 0.85f;
private static float MIN_ALPHA = 0.5f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
[COLOR="green"]ViewHelper[/COLOR].setAlpha(view, 0);
} else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
[COLOR="green"]ViewHelper[/COLOR].setTranslationX(view, horzMargin - vertMargin / 2);
} else {
[COLOR="green"]ViewHelper[/COLOR].setTranslationX(view, -horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
[COLOR="green"]ViewHelper[/COLOR].setScaleX(view, scaleFactor);
[COLOR="green"]ViewHelper[/COLOR].setScaleY(view, scaleFactor);
// Fade the page relative to its size.
[COLOR="green"]ViewHelper[/COLOR].setAlpha(view, MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
[COLOR="green"]ViewHelper[/COLOR].setAlpha(view, 0);
}
}
}
If you have deleted the "libs" folder of your project, go to workspace/ViewPagerTest/ make a new folder called "libs" and put the android-support-v4.jar (you will find it in sdk/extras/android/support/v4 folder), copy the same file (android-support-v4.jar) in workspace/ViewPagerIndicator/libs folder.
Now go to library_1 options and check the correct project build target and "Is library":
Load the library into your project.
THE CODE​
blue = add
red = delete
Now i will make an xml file called "colors" in res/values folder:
Code:
[COLOR="Blue"]<?xml version="1.0" encoding="UTF-8"?>
<resources>
<color name="red">#F75D59</color>
<color name="blue">#0000FF</color>
<color name="orange">#dc5a1e</color>
</resources>[/COLOR]
add the following code to layout1:
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
[COLOR="blue"]android:background="@color/red"[/COLOR]>
</LinearLayout>
layout2:
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
[COLOR="blue"]android:background="@color/blue" >[/COLOR]
</LinearLayout>
layout3:
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
[COLOR="blue"]android:background="@color/orange">[/COLOR]
</LinearLayout>
Now open the MainActivity.java:
Code:
package com.example.viewpagertest;
import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;
public class MainActivity extends FragmentActivity {
FragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;
int Number = 0;
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAdapter = new FragmentAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}
[user=439709]@override[/user]
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
and add the blue lines like this:
Code:
package com.example.viewpagertest;
import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;
public class MainActivity extends FragmentActivity {
FragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;
int Number = 0;
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAdapter = new FragmentAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
[COLOR="blue"]mPager.setPageTransformer(true, new ZoomOutPageTransformer ());[/COLOR]
}
[user=439709]@override[/user]
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
ZoomOutPageTransformer example app - ViewPagerTest+zoomout.apk
>>>DOWNLOAD ZoomOutPageTransformer example app here <<<​​
If you wanna try other animations please go here: http://developer.android.com/training/animation/screen-slide.html
or use other libs like transitionviewpager and JazzyViewPager
Using DepthPageTransformer
Create a class called DepthPageTransformer in src/.../ folder and add the following:
Code:
package com.example.viewpagertest;
import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;
//import com.nineoldandroids.view.ViewHelper;
public class DepthPageTransformer implements PageTransformer {
private static float MIN_SCALE = 0.75f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
In your MainActivity.java add the blue code:
Code:
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
...
[COLOR="Blue"] mPager.setPageTransformer(true, new DepthPageTransformer ());[/COLOR]
...
...
}
How to use addPreferencesFromResource(R.xml.preferences); in these fragments with action bar sherlock? I tried to make work, but... But implented ABS in my app.
ivn888 said:
4)Implement ViewPager using fragments code:
[package com.example.viewpagertest;
[import com.viewpagerindicator.IconPagerAdapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatPagerAdapter;
public class FragmentAdapter extends FragmentStatPagerAdapter implements IconPagerAdapter{
Click to expand...
Click to collapse
its FragmentStatePagerAdapter (instead of FragmentStatPagerAdapter) and Override (instead of override)
i think u made these two small mistakes. bt the tutorial is awesome.. was looking for this

[Tutorial] Learn to create a BMI Calculator for Android

Hello,
I create that thread to present you a tutorial aiming to learn you how to create a Body Mass Index Calculator for Android. This tutorial is ideal for beginners that want to discover how to create a first application. You can discover the tutorial in video on Youtube :
Create a Body Mass Index Calculator for Android
The Body Mass Index (BMI) or Quetelet index is a value derived from the mass weight and height of an individual. The BMI is defined as the body mass divided by the square of the body height, and is universally expressed in units of kg/m². By analyzing the BMI value, we can determine a diagnostic. First step for the application is to define a layout letting users to enter weight and height values to calculate the BMI index. Besides, we will need a button to launch the BMI calculation and also a TextView to display the result.
The layout will have the following form :
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.ssaurel.bmicalculator.MainActivity">
<TextView
android:text="@string/weight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_marginTop="50dp"
android:textSize="20sp"/>
<EditText
android:id="@+id/weight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:ems="6"
android:inputType="number|numberDecimal"
android:textSize="20sp"/>
<TextView
android:text="@string/height"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_marginTop="50dp"
android:textSize="20sp"/>
<EditText
android:id="@+id/height"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:ems="6"
android:inputType="number|numberDecimal"
android:textSize="20sp"/>
<Button
android:id="@+id/calc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="25dp"
android:onClick="calculateBMI"
android:text="@string/calculateBMI"
/>
<TextView
android:id="@+id/result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_marginTop="25dp"
android:textSize="20sp"/>
</LinearLayout>
Now, we can write the Java code in our Main Activity :
Code:
package com.ssaurel.bmicalculator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private EditText height;
private EditText weight;
private TextView result;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
height = (EditText) findViewById(R.id.height);
weight = (EditText) findViewById(R.id.weight);
result = (TextView) findViewById(R.id.result);
}
public void calculateBMI(View v) {
String heightStr = height.getText().toString();
String weightStr = weight.getText().toString();
if (heightStr != null && !"".equals(heightStr)
&& weightStr != null && !"".equals(weightStr)) {
float heightValue = Float.parseFloat(heightStr) / 100;
float weightValue = Float.parseFloat(weightStr);
float bmi = weightValue / (heightValue * heightValue);
displayBMI(bmi);
}
}
private void displayBMI(float bmi) {
String bmiLabel = "";
if (Float.compare(bmi, 15f) <= 0) {
bmiLabel = getString(R.string.very_severely_underweight);
} else if (Float.compare(bmi, 15f) > 0 && Float.compare(bmi, 16f) <= 0) {
bmiLabel = getString(R.string.severely_underweight);
} else if (Float.compare(bmi, 16f) > 0 && Float.compare(bmi, 18.5f) <= 0) {
bmiLabel = getString(R.string.underweight);
} else if (Float.compare(bmi, 18.5f) > 0 && Float.compare(bmi, 25f) <= 0) {
bmiLabel = getString(R.string.normal);
} else if (Float.compare(bmi, 25f) > 0 && Float.compare(bmi, 30f) <= 0) {
bmiLabel = getString(R.string.overweight);
} else if (Float.compare(bmi, 30f) > 0 && Float.compare(bmi, 35f) <= 0) {
bmiLabel = getString(R.string.obese_class_i);
} else if (Float.compare(bmi, 35f) > 0 && Float.compare(bmi, 40f) <= 0) {
bmiLabel = getString(R.string.obese_class_ii);
} else {
bmiLabel = getString(R.string.obese_class_iii);
}
bmiLabel = bmi + "\n\n" + bmiLabel;
result.setText(bmiLabel);
}
}
When a user click on the calculate BMI button, the calculateBMI method is called. We get the values entered by the user for the weight and the height. The height is entered in centimeter. For the formula, we need to have a height in meter. So, we divide the value entered by 100. Then, we apply the formula to calculate the BMI :
float bmi = weightValue / (heightValue * heightValue);
With the BMI value, we can display the result on the user interface. We define the displayBMI method for that. To determine the diagnostic associated to the BMI value, we are going to use the following table :
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
The last step is just to display the BMI value and the diagnostic in the result TextView. After that, you can try the application and enjoy the BMI Calculator in action :
Don't hesitate to try this tutorial and give me your feedbacks.
Thanks.
Sylvain
Hello,
Some users asked me to publish the BMI Calculator Application made in the tutorial.
I made some UI refinements and I published the BMI Calculator on the Google Play Store : https://play.google.com/store/apps/details?id=com.ssaurel.bmicalculator
Don't hesitate to give it a try and give me your feedbacks.
Sylvain

[Tutorial] Learn to parse HTML Pages on Android with JSoup

Hello,
I create that thread to offer you a tutorial learning you to parse HTML pages on Android by using the JSoup Library. You can also discover this tutorial in video on Youtube :
When you make Android applications, you can have to parse HTML data or HTML pages got from the Web. One of the most known solution to make that in Java is to use JSoup Library. Like said on the official website of JSoup : "It is a Java library for working with real-world HTML. It provides a very convenient API for extracting and manipulating data, using the best of DOM, CSS, and jquery-like methods."
JSoup can be used in Android applications and we're going to study how to parse an HTML Page on Android with JSoup.
First, you need to add the JSoup dependency in your Gradle build file :
Code:
compile 'org.jsoup:jsoup:1.10.1'
For our example, we are going to download the content of the SSaurel's Blog and display all the links of the main page. To download the content of a website, JSoup offers the connect method and then a get method. This last method works synchronously. So, we should call these methods in a separated Thread. Our application will have just a simple layout with a Button to launch the download of the website and a TextView to display the links.
It will have the following form :
Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.ssaurel.jsouptut.MainActivity">
<Button
android:id="@+id/getBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Get website"
android:layout_marginTop="50dp"
android:layout_centerHorizontal="true"/>
<TextView
android:id="@+id/result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Result ..."
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:layout_below="@id/getBtn"
android:textSize="17sp"/>
</RelativeLayout>
In the main Activity of the application, we are going to get instances of the Button and the TextView from our layout. Then, we set a click listener on the Button to start the download of the website when the user will click it.
In the getWebsite() method, we create a new Thread to download the content of the website. We use the connect() method of the Jsoup object to connect the application to the website, then we call the get() method to download the content. These calls return a Document object instance. We have to call the select() method of this instance with the query to get all the links of the content. This query returns an Elements instance and finally, we have just to iterate on the elements contained in this object to display the content of each link to the screen.
At the end of our separated Thread, we refresh the UI with the links got from the website. This refresh is embedded inside a runOnUiThread call because it's forbidden to refresh the UI elements inside a separated thread.
The code of the MainActivity has the following form :
Code:
package com.ssaurel.jsouptut;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
import java.io.IOException;
public class MainActivity extends AppCompatActivity {
private Button getBtn;
private TextView result;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
result = (TextView) findViewById(R.id.result);
getBtn = (Button) findViewById(R.id.getBtn);
getBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
getWebsite();
}
});
}
private void getWebsite() {
new Thread(new Runnable() {
@Override
public void run() {
final StringBuilder builder = new StringBuilder();
try {
Document doc = Jsoup.connect("http://www.ssaurel.com/blog").get();
String title = doc.title();
Elements links = doc.select("a[href]");
builder.append(title).append("\n");
for (Element link : links) {
builder.append("\n").append("Link : ").append(link.attr("href"))
.append("\n").append("Text : ").append(link.text());
}
} catch (IOException e) {
builder.append("Error : ").append(e.getMessage()).append("\n");
}
runOnUiThread(new Runnable() {
@Override
public void run() {
result.setText(builder.toString());
}
});
}
}).start();
}
}
Last step is to run the application and to enjoy the final result with all the links of the SSaurel's blog displayed on the screen :
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Don't hesitate to try JSoup on your Android application and give me your feedbacks on this tutorial.
Thanks.
Sylvain

[Tutorial] Learn to use WebSockets on Android with OkHttp

Hello,
I create that post to present you a tutorial aiming to learn you to use WebSockets on Android with OkHttp. Like you should know, WebSocket is a computer communications protocol, providing full-duplex communication channels over a single TCP connection. It is supported in HTML 5. Since the version 3.5 of the OkHttp library, you can also use WebSockets connection in your Android applications. In this tutorial, you are going to learn how to create a simple chat application with the Echo WebSocket Server which is available at the following address : http://www.websocket.org/echo.html .
Note that you can also discover this tutorial in video on Youtube :
First step is to add the OkHttp dependency in your Gradle build file
Code:
compile 'com.squareup.okhttp3:okhttp:3.6.0'
Don’t forget to add the Internet permission in your Android manifest since the application will use the network to create a WebSocket connection to the Echo WebSocket server. For this tutorial, we will need a simple layout with a Button to start the connection and the exchange with the server and a TextView which will be used as a console output for the messages received from the server :
Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.ssaurel.websocket.MainActivity">
<Button
android:id="@+id/start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Start !"
android:layout_marginTop="40dp"
android:textSize="17sp"/>
<TextView
android:id="@+id/output"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/start"
android:layout_centerHorizontal="true"
android:textSize="16sp"
android:layout_marginTop="30dp"/>
</RelativeLayout>
Then, we can write the Java code of the application. The main part will be the method used to create the connection to the WebSocket connection and the WebSocketListener object used to exchange with the server :
Code:
private final class EchoWebSocketListener extends WebSocketListener {
private static final int NORMAL_CLOSURE_STATUS = 1000;
@Override
public void onOpen(WebSocket webSocket, Response response) {
webSocket.send("Hello, it's SSaurel !");
webSocket.send("What's up ?");
webSocket.send(ByteString.decodeHex("deadbeef"));
webSocket.close(NORMAL_CLOSURE_STATUS, "Goodbye !");
}
@Override
public void onMessage(WebSocket webSocket, String text) {
output("Receiving : " + text);
}
@Override
public void onMessage(WebSocket webSocket, ByteString bytes) {
output("Receiving bytes : " + bytes.hex());
}
@Override
public void onClosing(WebSocket webSocket, int code, String reason) {
webSocket.close(NORMAL_CLOSURE_STATUS, null);
output("Closing : " + code + " / " + reason);
}
@Override
public void onFailure(WebSocket webSocket, Throwable t, Response response) {
output("Error : " + t.getMessage());
}
}
We send messages to the server in the onOpen method. The messages received from the Echo WebSocket server are displayed inside the onMessage method. Note that you can send text or hexadecimal messages. Lastly, we close the connection by using the close method of the WebSocket object. To create the WebSocket connection with OkHttp, we need to build a Request object with the URL of the Echo WebSocket server in parameter, then calling the newWebSocket method of the OkHttpClient object.
The code will have the following form :
Code:
package com.ssaurel.websocket;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;
import okhttp3.WebSocket;
import okhttp3.WebSocketListener;
import okio.ByteString;
public class MainActivity extends AppCompatActivity {
private Button start;
private TextView output;
private OkHttpClient client;
private final class EchoWebSocketListener extends WebSocketListener {
private static final int NORMAL_CLOSURE_STATUS = 1000;
@Override
public void onOpen(WebSocket webSocket, Response response) {
webSocket.send("Hello, it's SSaurel !");
webSocket.send("What's up ?");
webSocket.send(ByteString.decodeHex("deadbeef"));
webSocket.close(NORMAL_CLOSURE_STATUS, "Goodbye !");
}
@Override
public void onMessage(WebSocket webSocket, String text) {
output("Receiving : " + text);
}
@Override
public void onMessage(WebSocket webSocket, ByteString bytes) {
output("Receiving bytes : " + bytes.hex());
}
@Override
public void onClosing(WebSocket webSocket, int code, String reason) {
webSocket.close(NORMAL_CLOSURE_STATUS, null);
output("Closing : " + code + " / " + reason);
}
@Override
public void onFailure(WebSocket webSocket, Throwable t, Response response) {
output("Error : " + t.getMessage());
}
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
start = (Button) findViewById(R.id.start);
output = (TextView) findViewById(R.id.output);
client = new OkHttpClient();
start.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
start();
}
});
}
private void start() {
Request request = new Request.Builder().url("ws://echo.websocket.org").build();
EchoWebSocketListener listener = new EchoWebSocketListener();
WebSocket ws = client.newWebSocket(request, listener);
client.dispatcher().executorService().shutdown();
}
private void output(final String txt) {
runOnUiThread(new Runnable() {
@Override
public void run() {
output.setText(output.getText().toString() + "\n\n" + txt);
}
});
}
}
Finally, you have just to run your application and enjoy the result :
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Don't hesitate to give it a try and give me your feedbacks.
Thanks.
Sylvain
Hi want to fetch data on my Android app from bitfinex websocket api. Can you explain how to do it here? In detail would be great and if you don't have time, some general advice would be appreciated too.
Thank you

Categories

Resources