Simple gauge view like speedmeter in android? - android

I want to have a simple gauge view where i will define the start value and the end value and have a pointer to show given variable value.
So i can show a given value like speedmeter. For example if my the value of a textView is 1300, then next to the textview i want to have this custom meter view animation like this!
It is possible? Any existing example code?

Another one i found at Evelina Vrabie's blog, used it and worked perfect!
Look at Evelina Vrabie's GitHub.
It has a gauge library and some samples to interact with.
Big thanks to the owner Evelina Vrabie!
However it is not working on XHDPI/Few versions of android devices (above 4). Problem is the text in gauge view.

For anyone looking for simple gauge view I made a library that you can clone and use/modify for your needs.
CustomGauge

All other gauges you recommended have bugs and don't run fine on Kitkat and Lollipop. Also there is no Android Studio and gradle friendly library here.
Here's git repo for the more recent one updated for Lollipop you can use with Gradle:
https://github.com/Sulejman/GaugeView
After you include library in your project add gaugelibrary to xml layout of your activity:
<io.sule.gaugelibrary.GaugeView
android:id="#+id/gauge_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
gauge:showOuterShadow="false"
gauge:showOuterRim="false"
gauge:showInnerRim="false"
gauge:needleWidth="0.010"
gauge:needleHeight="0.40"
gauge:scaleStartValue="0"
gauge:scaleEndValue="100"
/>
This will show static gauge without needle. To instantiate needle with random animation you need to do that in activity class file. See how it's done here:
package io.sule.testapplication;
import android.app.Activity;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.view.Menu;
import android.view.MenuItem;
import java.util.Random;
import io.sule.gaugelibrary.GaugeView;
public class MainActivity extends Activity {
private GaugeView mGaugeView;
private final Random RAND = new Random();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mGaugeView = (GaugeView) findViewById(R.id.gauge_view);
mTimer.start();
}
private final CountDownTimer mTimer = new CountDownTimer(30000, 1000) {
#Override
public void onTick(final long millisUntilFinished) {
mGaugeView.setTargetValue(RAND.nextInt(101));
}
#Override
public void onFinish() {}
};
}
This will instantiate needle and make it animate moving to random values.

I made this one a while ago. Feel free to clone and modify. (It takes some ideas from the old Vintage Thermometer.)
github.com/Pygmalion69/Gauge
It can easily be added to your Gradle project:
repositories {
maven {
url 'https://www.jitpack.io'
}
}
dependencies {
compile 'com.github.Pygmalion69:Gauge:1.1'
}
The views are declared in XML:
<de.nitri.gauge.Gauge
android:id="#+id/gauge1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_weight="0.75"
gauge:labelTextSize="42"
gauge:maxValue="1000"
gauge:minValue="0"
gauge:totalNicks="120"
gauge:valuePerNick="10"
gauge:upperText="Qty"
gauge:lowerText="#string/per_minute" />
Here's an example of setting the values programmatically:
final Gauge gauge1 = (Gauge) findViewById(R.id.gauge1);
final Gauge gauge2 = (Gauge) findViewById(R.id.gauge2);
final Gauge gauge3 = (Gauge) findViewById(R.id.gauge3);
final Gauge gauge4 = (Gauge) findViewById(R.id.gauge4);
gauge1.moveToValue(800);
HandlerThread thread = new HandlerThread("GaugeDemoThread");
thread.start();
Handler handler = new Handler(thread.getLooper());
handler.postDelayed(new Runnable() {
#Override
public void run() {
gauge1.moveToValue(300);
}
}, 2800);
handler.postDelayed(new Runnable() {
#Override
public void run() {
gauge1.moveToValue(550);
}
}, 5600);
HandlerThread gauge3Thread = new HandlerThread("Gauge3DemoThread");
gauge3Thread.start();
Handler gauge3Handler = new Handler(gauge3Thread.getLooper());
gauge3Handler.post(new Runnable() {
#Override
public void run() {
for (float x = 0; x <= 6; x += .1) {
float value = (float) Math.atan(x) * 20;
gauge3.moveToValue(value);
try {
Thread.sleep(100);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
});
gauge4.setValue(333);

On this site you will find some free customizable gauges.
ScComponents
Very easy to install and well documented.
For example you can have for free something like this in 5 minutes following the instruction below.
Go on the above linked website. Click the GR004 and after the popup appear click on "Download for FREE".
The library will downloaded, unzip and follow the instruction to install the library (aar file) inside your Android project.
Write this code in your XML layout and your gauge will done:
<com.sccomponents.gauges.gr004.GR004
android:layout_width="match_parent"
android:layout_height="match_parent" />
You have many XML options to customize it:
sccAnimDuration
sccEnableTouch
sccInverted
sccFontName
sccLabelsSizeAdjust
sccMajorTicks
sccMaxValue
sccMinorTicks
sccMinValue
sccShowContour
sccShowLabels
sccText
sccValue
And the related function by coding.

I don't know whether the late answer is going to help or not. I also came to the same situation where i want to use a gauge to visualize data, since gauge is not given as widget in android, as a enthusiast i went for libraries like above which can be found through various links in the Internet, although it was quite helpful(thanks to the wonderful authors of it..) i find myself difficult to visualize the during certain situations, so another solution what i have done is for my app is i integreated the JavaScript gauges into my android application.
You can do that by the following steps
Create an asset folder in our project-look this link and you will see how to create an asset folder if someone don't knows about it.
Next one is you have design an html page on how your page sholud look like, for eg- header,no.of guages etc... and place it in the folder asset.
There are many sites which provide the guages like This is one site or you can browse other sites and take whatever you feel cool...!!
take it all including .js files and place it in the asset folder.
Android provides a class for handling webiview called "WebViewClient" you can browse more to know more about it in internet
This is sample code for viewing the webview content..
web = (WebView) findViewById(R.id.webview01);
progressBar = (ProgressBar) findViewById(R.id.progressBar1);
web.setWebViewClient(new myWebClient());
web.getSettings().setJavaScriptEnabled(true);
web.post(new Runnable() {
#Override
public void run() {
web.loadUrl("file:///android_asset/fonts/guage.html");
}
});
The above for loading the html & javscript.
public class myWebClient extends WebViewClient
{
#Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
}
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
progressBar.setVisibility(View.VISIBLE);
view.loadUrl(url);
return true;
}
#Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);
progressBar.setVisibility(View.GONE);
}
}
This the webview class
You can also send data from activity to html page.. Refer This link
Kindly read through all, corrections are welcomed..!!

Use this : Sample Project
It can easily be added to your Gradle project:
repositories {
maven {
url 'https://www.jitpack.io'
}
}
dependencies {
implementation 'com.jignesh13.speedometer:speedometer:1.0.0'
}
The views are declared in XML:
<com.jignesh13.speedometer.SpeedoMeterView
android:id="#+id/speedometerview"
android:layout_width="250dp"
android:layout_height="250dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.453"
app:layout_constraintStart_toStartOf="parent"
app:backimage="#android:color/black"
app:needlecolor="#fff"
app:removeborder="false"
app:linecolor="#fff"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.079" />

Related

Extract text from website in android studio

I have a website which only shows one line of text which I need to extract the text form in android studio, I would prefer to get it as a string. How do I do this?
Something such as webView.getTitle() would work but than for the content of the site, is there such a quick way to get this or how should I else do it?
specific info
the site I need to get the information form is:
"<html> <head></head> <body> #4d636f </body> </html> "
from this I only need the text in the body, in this case a color as text.
You can use any Web Scraper/Crawler API to fetch data from web site.
For example:
JSOUP API For Java And Android
Update
Step By Step guide to solve the mentioned problem
Add Jsoup dependency to the app level of your build.gradle.
implementation 'org.jsoup:jsoup:1.11.1'
Add Internet permission to the Android Manifest file for internet access.
<uses-permission android:name="android.permission.INTERNET" />
Add button and text view in your app to get data from website on button click and display the result on text view.
Below is the sample code:
public class MainActivity extends AppCompatActivity {
private TextView result;
private Button fetch;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
result = (TextView) findViewById(R.id.result);
fetch = (Button) findViewById(R.id.fetch);
fetch.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
getBodyText();
}
});
}
private void getBodyText() {
new Thread(new Runnable() {
#Override
public void run() {
final StringBuilder builder = new StringBuilder();
try {
String url="http://www.example.com";//your website url
Document doc = Jsoup.connect(url).get();
Element body = doc.body();
builder.append(body.text());
} catch (Exception e) {
builder.append("Error : ").append(e.getMessage()).append("\n");
}
runOnUiThread(new Runnable() {
#Override
public void run() {
result.setText(builder.toString());
}
});
}
}).start();
}
}
This type of process is known as web scrubbing. And you could do more research to see different methods. One methd I would suggest is getting the HTML from source and searching the DOM for any tags unique to the text you want.
By getting the HTML you avoid rendering the whole page (images, javascript, ect..)
Do you have a snippet of the source code you want to scrub from?
Sure here is an example. P.S. I'm not familiar with javascript, correct him for your case.
webView.evaluateJavascript("return document.getElementById(your_id)", new ValueCallback<String>() {
#Override
public void onReceiveValue(String value) {
// value is your result
}
});

QR code reader to extract data

i have a sales summary print out and has a QR Code ,
i want to develop an app (IOS and android) that reads the QR code , extract all information,do some calculations,and display in specific form , i tried zxing library but it did not extract all information from the receipt.any tip?
You can use google vision API to achieve this. I personally used this and found it great. The below code snippets should help you.
Put this below line in the gradle.
compile 'com.google.android.gms:play-services:9.4.0'
Use BarcodeDetector and CameraSource classes to capture the QR code on real time and decode it.
barcodeDetector.setProcessor(new Detector.Processor<Barcode>() {
#Override
public void release() {
}
#Override
public void receiveDetections(Detector.Detections<Barcode> detections) {
final SparseArray<Barcode> barcodes = detections.getDetectedItems();
if (barcodes.size() != 0) {
barcodeInfo.post(new Runnable() { // Use the post method of the TextView
public void run() {
barcodeInfo.setText( // Update the TextView
barcodes.valueAt(0).displayValue
);
}
});
}
}
});
Use a SparseArray to fetch the detections and the displayValue of the elements of this sparse array returns the deocded string.
After extracting the string one can do anything, be it displaying the string or make some calculation out of it etc.
This library is the most popular and easiest of reading QR codes in your Android application.
You should also have a look at the Wiki section of this library for learning about how to integrate this library into your Android Application and how to use this library.
This is how you can use this library.
1. Add this library to your project by adding following line into your dependencies inside build.gradle(Module: app) file
compile 'com.github.nisrulz:qreader:2.0.0'
2. Then, after syncing project files, add the SurfaceView element provided by this library into your XML layout file.
<SurfaceView
android:id="#+id/camera_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
3. Declare the SurfaceView & QREader inside your Activity's Java file & then initialize it inside onCreate() method.
class MainActivity extends AppCompatActivity{
private SurfaceView mySurfaceView;
private QREader qrEader;
#Override
protected void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Setup SurfaceView
// -----------------
mySurfaceView = (SurfaceView) findViewById(R.id.camera_view);
// Init QREader
// ------------
qrEader = new QREader.Builder(this, mySurfaceView, new QRDataListener() {
#Override
public void onDetected(final String data) {
Log.d("QREader", "Value : " + data);
text.post(new Runnable() {
#Override
public void run() {
text.setText(data);
}
});
}
}).facing(QREader.BACK_CAM)
.enableAutofocus(true)
.height(mySurfaceView.getHeight())
.width(mySurfaceView.getWidth())
.build();
}
4. Initialize it inside onResume()
#Override
protected void onResume() {
super.onResume();
// Init and Start with SurfaceView
// -------------------------------
qrEader.initAndStart(mySurfaceView);
}
There are many more possibilities you can do with this library, so I recommend you to visit the GitHub repository and check it out. It's worth a shot!

Control DOM elements from android app

I'm trying to take control over the Play/Pause html DOM elements (in a browser open in a pc) from an android device.
In the html page (in Google Chrome browser) there's a <video> tag so I can control it like this:
//js code
document.querySelector("video").play();
document.querySelector("video").pause();
But I want that to run from an android device so I'm using GCM.
I read here and got some insight but I still have some questions.
First, since I'm writing in eclipse, and it sees no document variable, it produces an error. So how can eclipse recognize that element in the html page so I can compile and install the apk on the device?
Where do I specify the page url I want to communicate with? (send play/pause commands)
To run js inside java I'm using Rhino. I looked through the examples in the documentation but I'm still not sure if a #JSFunction annotation is enough to declare a js function.
Here's my code:
import com.alaa.chromote.util.SystemUiHider;
import com.google.android.gcm.GCMRegistrar;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.Toast;
import android.view.View.OnClickListener;
import org.mozilla.javascript.*;
import org.mozilla.javascript.annotations.*;
public class MainApplication extends Activity {
private final static String GCM_SENDER_ID = "484514826047";
private static final String LOG_TAG = "GetAClue::GCMIntentService";
private Button playButton;
private Button pauseButton;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_application);
playButton = (Button) findViewById(R.id.PlayButton);
pauseButton = (Button) findViewById(R.id.PauseButton);
playButton.setVisibility(View.INVISIBLE);
pauseButton.setVisibility(View.VISIBLE);
//connect to gcm
GCMRegistrar.checkDevice( this );
GCMRegistrar.checkManifest( this );
final String regId = GCMRegistrar.getRegistrationId( this );
if( regId.equals( "" ) ) {
GCMRegistrar.register( this, GCM_SENDER_ID );
}
else {
Log.v( LOG_TAG, "Already registered" );
}
Context.enter(); //start Rhino
setupListeners();
}
#JSFunction
public void play() { document.querySelector("video").play(); }
#JSFunction
public void pause() { document.querySelector("video").pause(); }
private void setupListeners()
{
playButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
play();
}
});
pauseButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
pause();
}
});
}
#Override
protected void onStop() {
Context.exit(); //stop Rhino
super.onStop();
}
}
How do I continue from here?
First, since I'm writing in eclipse, and it sees no document variable, it produces an error. So how can eclipse recognize that element in the html page so I can compile and install the apk on the device?
answ: On your android device you just pass a message to the chrome browser. A.k. an action variable that is set to play or stop. You chrome app will then pick up the message and act accordingly. Also you can send the url as an variable in the message if you want to be able to play different urls.
Where do I specify the page url I want to communicate with? (send play/pause commands)?
answ: Do you already created the chrome app you want and verified it works? It should check with a google cloud server for messages. That server keeps track of the url for you.
To run js inside java I'm using Rhino. I looked through the examples in the documentation but I'm still not sure if a #JSFunction annotation is enough to declare a js function.?
answ: It seems you are misunderstanding the part what the android app does (sending the play action) and what the chrome browser does (actually playing the movie)
I hope my answer has helped a little, feedback is appreciated :)

Android How to turn a XML layout into a PDF?

I have a form that when currently filled out is sent to a dedicated email address on submission. I would like to have the opportunity to offer other options. Like saving it as a PDF file. The form is completed in a main.xml layout. Is it possible to turn xml layouts into PDF's? If so could someone point me in the direction of a good example.
Many Thanks
You can take a look on this link:
https://github.com/HendrixString/Android-PdfMyXml
Instructions
create XML layouts
First create XML layouts. give it dimensions in pixels (and for all it's sub views) and proportions according landscape or portrait according to ratio 1:1.41.
page1.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="2115px"
android:layout_height="1500px"
android:background="#color/white">
<TextView android:id="#+id/tv_hello"
android:textColor="#color/black"
android:textSize="27px"
android:textStyle="bold"
android:padding="6px"/>
</RelativeLayout>
you can create as many as pages/templates as you need.
Implement a View renderer
implement your View renderer by extending AbstractViewRenderer or by anonymously instantiating it and injecting the layout id. the initView(View view) will supply you an inflated View automatically. There are other options but I wont cover it now.
AbstractViewRenderer page = new AbstractViewRenderer(context, R.layout.page1) {
private String _text;
public void setText(String text) {
_text = text;
}
#Override
protected void initView(View view) {
TextView tv_hello = (TextView)view.findViewById(R.id.tv_hello);
tv_hello.setText(_text);
}
};
// you can reuse the bitmap if you want
page.setReuseBitmap(true);
Build the PDF document
Use PdfDocument or PdfDocument.Builder to add pages and render and run it all at background with progress bar.
PdfDocument doc = new PdfDocument(ctx);
// add as many pages as you have
doc.addPage(page);
doc.setRenderWidth(2115);
doc.setRenderHeight(1500);
doc.setOrientation(PdfDocument.A4_MODE.LANDSCAPE);
doc.setProgressTitle(R.string.gen_please_wait);
doc.setProgressMessage(R.string.gen_pdf_file);
doc.setFileName("test");
doc.setInflateOnMainThread(false);
doc.setListener(new PdfDocument.Callback() {
#Override
public void onComplete(File file) {
Log.i(PdfDocument.TAG_PDF_MY_XML, "Complete");
}
#Override
public void onError(Exception e) {
Log.i(PdfDocument.TAG_PDF_MY_XML, "Error");
}
});
doc.createPdf(ctx);
or use PdfDocument.Builder
new PdfDocument.Builder(ctx).addPage(page).filename("test").orientation(PdfDocument.A4_MODE.LANDSCAPE)
.progressMessage(R.string.gen_pdf_file).progressTitle(R.string.gen_please_wait).renderWidth(2115).renderHeight(1500)
.listener(new PdfDocument.Callback() {
#Override
public void onComplete(File file) {
Log.i(PdfDocument.TAG_PDF_MY_XML, "Complete");
}
#Override
public void onError(Exception e) {
Log.i(PdfDocument.TAG_PDF_MY_XML, "Error");
}
}).create().createPdf(this);
You can use this library to make it easy to do within a few lines of code -
PdfGenerator.getBuilder()
.setContext(context)
.fromLayoutXMLSource()
.fromLayoutXML(R.layout.layout_print,R.layout.layout_print)
.s̶e̶t̶D̶e̶f̶a̶u̶l̶t̶P̶a̶g̶e̶S̶i̶z̶e̶(̶P̶d̶f̶G̶e̶n̶e̶r̶a̶t̶o̶r̶.P̶a̶g̶e̶S̶i̶z̶e̶.A̶4̶)̶ //No Longer Work
.setFileName("Test-PDF")
.build();
Additionally you can also pass a callback (PdfGeneratorListener()) in .build() to notify about if the pdf generation is done or failed for an exception

My app gets "Force close" on several devices

I have people complaining my application gets FC when they launch it (meanwhile others never had a single problem). Here is my full activity source. Since it happens on devices I don't own I can not fix it. From what they tell me it doesn't work on: Motorola Blackflip, Motorola Dext, Motorola CLIQ XT. Guess Motorola doesn't like my app after all...
Could it be that I allow a minSdkVersion="3"? I tested 1.5 on the emulator and worked fine...
Thank you in advance for your responses.
public class workit extends Activity implements OnClickListener {
Button yay;
Button yay0;
Button yay1;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.main);
yay = (Button) findViewById(R.id.gostart);
yay.setOnClickListener(this);
yay0 = (Button) findViewById(R.id.dontstart);
yay0.setOnClickListener(this);
yay1 = (Button) findViewById(R.id.exit);
yay1.setVisibility(ImageView.GONE);
ImageView inizio = (ImageView)findViewById(R.id.start);
inizio.setVisibility(ImageView.VISIBLE);
inizio.setBackgroundResource(R.drawable.start);
}
public void onClick(View v) {
// TODO Auto-generated method stub
if (v == yay0) {
finish();
}
if (v == yay) {
ImageView inizio = (ImageView)findViewById(R.id.start);
inizio.setVisibility(ImageView.GONE);
WebView work = new WebView(this);
setContentView(work);
work.loadUrl("file:///android_asset/index1.html");
work.setWebViewClient( new work());
work.setBackgroundColor(0);
work.getSettings().setBuiltInZoomControls(true);
work.getSettings().setDefaultZoom(ZoomDensity.FAR);
}
if (v == yay1) {
finish();
}
}
private class work extends WebViewClient {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.contains("exit.html")) {
// TODO: do what you have to do
finish();
}
view.loadUrl(url);
return true;
}
}
}
Your best bet is to ask somebody to send you the LogCollector output (in my experience, users are very happy to provide you information to debug problems. There are some really cool people out there). That should give you a callstack, and information on what kind of exception you triggered (NullPointerException, etc).
Next up - what are you building your app against? There should be an "Android x.x" entry in your project structure somewhere. If you're building something that is supposed to run on Android 1.5, then make sure you actually build against 1.5. You CAN build against 2.0 if you want, but if you need to use 2.0-specific functions, you'll have to encapsulate them properly. (This has been explained in detail on stackoverflow several times.)
On an unrelated note - I recommend more informative variable names. "yay0" doesn't mean anything to anyone who hasn't been working intimately with the code for a while.

Categories

Resources