Sunday, 15 September 2013

How to make simple and fancy ProgressDialogs (Updated with androidx package)

You want to download a file from internet or load all the resources of your game or do any other task which will take some time, and simultaneously you also have to entertain the user. What will you do?

Here is the ProgressDialog class which will show a nice loading icon until your task gets completed.

This example shows three types of ProgressDialog, and further you can enhance as per your wish:

The Xml file loading_activity.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#81D4FA"
android:gravity="center_vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:gravity="top"
android:weightSum="2">

<Button
android:id="@+id/spin_progressBTN"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#0288D1"
android:text="Spin"
android:onClick="spinProgressDialog"
android:textSize="15sp"
android:layout_marginRight="5dp"
android:textColor="#ffffff"/>

<Button
android:id="@+id/bar_progressBtn"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#4FC3F7"
android:text="Bar"
android:layout_marginLeft="5dp"
android:onClick="barProgressDialog"
android:textSize="15sp"/>

</LinearLayout>


<Button
android:layout_marginTop="5dp"
android:padding="5dp"
android:id="@+id/fancy_bar_progressBtn"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#0091EA"
android:text="Fancy Bar"
android:layout_marginLeft="5dp"
android:onClick="fancyBarProgressDialog"
android:textSize="15sp"
android:textColor="#ffffff"/>


</LinearLayout>

The fancy_progress_bar.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@android:id/background">
<shape>
<gradient
android:startColor="#0277BD"
android:centerColor="#0b131e"
android:centerY="1.0"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</item>

<item android:id="@android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#80D8FF"
android:centerColor="#0091EA"
android:centerY="1.0"
android:endColor="#06101d"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>


The LoadingActivity.java:

package com.apps.yourappname;

import android.app.ProgressDialog;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

public class LoadingActivity extends AppCompatActivity {

private ProgressDialog mProgressDialog;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.loading_activity);
}

public void spinProgressDialog(View v) {
mProgressDialog = new ProgressDialog(LoadingActivity.this);
mProgressDialog.setMessage("Simple Spin Progress Dialog");
doProgress();
}

public void barProgressDialog(View v) {
mProgressDialog = new ProgressDialog(LoadingActivity.this);
mProgressDialog.setMessage("Simple Bar Progress Dialog");
mProgressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
mProgressDialog.setMax(100);
doProgress();
}

public void fancyBarProgressDialog(View v) {
mProgressDialog = new ProgressDialog(LoadingActivity.this);
mProgressDialog.setMessage("Fancy Bar Progress Dialog");
mProgressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
mProgressDialog.setProgressDrawable(getResources().getDrawable(R.drawable.fancy_progress_bar));
mProgressDialog.setMax(100);
doProgress();
}

void doProgress() {
mProgressDialog.show();
new Thread(){
@Override
public void run() {
while(mProgressDialog.getProgress()<mProgressDialog.getMax()) {

try{
Thread.sleep(300);
}catch (InterruptedException e) {
e.printStackTrace();
}

handler.sendMessage(handler.obtainMessage());
if(mProgressDialog.getProgress()>=mProgressDialog.getMax()) {
mProgressDialog.dismiss();
}
}
}
}.start();
}

Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
mProgressDialog.incrementProgressBy(1);
}
};
}

Just add the LoadingActivity's entry in Manifest file:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.app.yourappname">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".LoadingActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>
No changes in the gradle files.

Thursday, 5 September 2013

How to use Android Spinners! (Updated with androidx package)

Spinners are just like radio buttons, but they have some what different look. The user can select only one option among various options.

Lets suppose that you are developing an app for a mobile shop whose objective is to ask user to select their price range. The price range may start from 100$ and ends on 1000$. The user will select his desired amount and the mobile phones near to the selected range will be displayed.



First we write the prices in our string.xml file which is located inside res/values
----------------------------------------------------
<resources>
<string name="app_name">WhatAnAndroid</string>

<!-- Spinner Example -->
<string name="price_string">Price Range</string>
<string-array name="price_string_array">
<item>\u0020 Select a price range</item>
<item>\u0020 100$</item>
<item>\u0020 200$</item>
<item>\u0020 500$</item>
<item>\u0020 700$</item>
<item>\u0020 1000$</item>
</string-array>
<!-- /Spinner Example -->

</resources>
----------------------------------------------------

The following will go in the spinner_activity.xml.
----------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center"
android:background="#CE93D8">

<Spinner
android:id="@+id/sp_priceSP"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="50dp"
android:prompt="@string/price_string"
android:background="@color/colorPrimaryDark"/>

<TextView
android:id="@+id/sp_resultTV"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:textSize="25sp"
android:text="Select Price Range"
android:textColor="#ffffff"/>
</LinearLayout>
-----------------------------------------------------
Now get into the Java code...
------------------------------------------------------------
package com.app.yourappname;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class SpinnerActivity extends AppCompatActivity {

private TextView resultTV;

@Override
public void onCreate(Bundle b) {
super.onCreate(b);
setContentView(R.layout.spinner_activity);
Spinner priceSpinner = findViewById(R.id.sp_priceSP);
setSpinners(priceSpinner, R.array.price_string_array);
resultTV = findViewById(R.id.sp_resultTV);
priceSpinner.setOnItemSelectedListener(new MyOnItemSelectedListener());
}

private void setSpinners(Spinner spinner, int spinnerRes) {
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource
(this, spinnerRes, android.R.layout.simple_spinner_item);

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);
}

class MyOnItemSelectedListener implements OnItemSelectedListener {

private String selectedPrice;

public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) {
if(parent.getId() == R.id.sp_priceSP) {
switch(pos) {

case 0: selectedPrice = "Select a price range"; break;
case 1: selectedPrice = "100$"; break;
case 2: selectedPrice = "200$"; break;
case 3: selectedPrice = "500$"; break;
case 4: selectedPrice = "700$"; break;
case 5: selectedPrice = "1000$"; break;
}
}
resultTV.setText(selectedPrice);
}

public void onNothingSelected(AdapterView parent) {
// Do nothing.
}
}
}
-------------------------------------------------------------------------

------------------------------ Declare the Activity name in the Manifest file -------------------
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.app.yourappname">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".SpinnerActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>
--------------------------------------------------------------------------


How to use AutoCompleteTextView... (Updated with androidx package)

Is there anything which will reduce search time?
Its AutoCompleteTextView. An AutoCompleteTextView is an advanced EditText, where if the user types a letter, all the words starting with that letter pops up automatically.

So, lets see how we gonna make it ...

First, create an xml file in your layout folder, name it single_textview. Then copy the following and paste it in this xml file. Please don't add anything else than the below content. We have a separate xml for that.
-------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:padding="5dp"
android:textColor="#000000"
android:background="#ffffff"/>
-------------------------------------------------------------------------
The above mentioned xml file will only contain a TextView, we now have to call it through our AutoCompleteTextView.

 

 


Now, inside your main layout (where you wish to add AutoCompleteTextView) just copy the below code and paste it there:
-----------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#f05442"
android:orientation="vertical" >

<AutoCompleteTextView
android:id="@+id/my_fav"
android:layout_marginTop="30dp"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#ffffff"
android:padding="5sp"
android:textSize="14sp" />
</LinearLayout>
-----------------------------------------------------------

Moving to our Java code...
package com.app.yourappname;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

import androidx.appcompat.app.AppCompatActivity;

public class AutoCompleteTextViewActivity extends AppCompatActivity {

private String items[] = {"Android", "Animation", "Angry Birds", "Apple", "Bread", "Basket", "Bun", "Cake",
"Donut", "Diary","Elephant", "English"};
private AutoCompleteTextView act;

@Override
public void onCreate(Bundle b)
{
super.onCreate(b);
setContentView(R.layout.autocomplete_textview_activity);
act = findViewById(R.id.my_fav);
ArrayAdapter<String> My_arr_adapter= new ArrayAdapter(getApplicationContext(),R.layout.single_textview, items);
act.setThreshold(1);
act.setAdapter(My_arr_adapter);
act.setOnItemClickListener(new AdapterView.OnItemClickListener()
{public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {}});
}
}
-----------------------------------------------------------

In the Manifest Xml, declare the Activity name:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.app.yourappname">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".AutoCompleteTextViewActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

As you can see above, if you type any letter starting from A to E, you will get at least one word suggestion, but when you typed kite (see the last screen shot) there are no suggestions because we did not any word which starts with letter 'k'.