Tag Archives: android

Working with Spinner in Android (Single Selector)

Spinner

Spinners provide a quick way to select one value from a set then we called it a single selector. A spinner shows its currently selected value from set. In the default state, it shows 0 index value from a set. Touching the spinner displays a dropdown menu or dialog with all other available values in the set, So we can be called it a dropdown.

Dropdown

 

 

 

 

 

 

Let’s check, how we can use it in an application.

Spinner integration has 3 key classes:-

1.  Spinner

2. Spinner Adapter

3. Spinner OnItemSelectedListener

So we will discuss above these classes also, with integration. You can add a spinner to your layout XML file. You can use the below sample code –

<Spinner
    android:id="@+id/spinner"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

Spinner Adapter uses for bind between data set and spinner widget and it manages view for the spinner row item. We can use data as an array of string. See sample code –

String[] items = { "Home", "Work", "Other" "Custom"};

Above string array, we will use for the display. So now we need to get reference Spinner which we defined in the XML file. We can use the below sample code –

// reading spinner reference
Spinner spinner = (Spinner) findViewById(R.id.spinner);

So now we need to set values in ArrayAdapter. and We set this ArrayAdapter in Spinner. Use below code –

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, items);
// set Adapter
spinner.setAdapter(adapter);

When the user selects an item from the drop-down, the Spinner object receives an on-item-selected event. for manage event, we can use OnItemSelectedListener in the Spinner. Sample code –

//Register a callback to be invoked when an item in this AdapterView has been selected
spinner.setOnItemSelectedListener(new OnItemSelectedListener() {

      @Override
      public void onItemSelected(AdapterView<?> arg0, View arg1,
                    int position, long id) { 
        // TODO Auto-generated method stub
               
      }

      @Override
      public void onNothingSelected(AdapterView<?> arg0) {
        // TODO Auto-generated method stub

      }

});

onItemSelected gives us a selected position of the spinner.

That’s it. Happy Coding 🙂

Reference:-

https://developer.android.com/guide/topics/ui/controls/spinner#java

Migrate an Existing Project to AndroidX

AndroidX is an open-source project by Google that provides a major improvement to the original Android Support Library. AndroidX is replaced the Support Library. Like support library, Google keeps AndroidX is independently from the Android OS and provides backward-compatibility across Android releases. AndroidX package structure is to encourage smaller and more focused libraries.

AndroidX replaces the original support library APIs with packages in the androidx namespace. Only the package and import names changed. Class, method, and field names did not change in migration.

Example:-

android.support.v7.widget.RecyclerView is changed to androidx.recyclerview.widget.RecyclerView

android.support.v7 is replced by androidx.

Migrating existing project:-

Before start migration, we need to make sure to follow the below things:-

1.  Android studio version should be higher than 3.2, You can check your android studio version from About Android Studio section. also use the latest Gradle version. Check project level Build.Gradle file to change the version.

2. Target SDK version and Compile SDK version should be 28 or greater. Check your app level Build.Gradle file to change target and compile SDK version.

3. Take a backup of your project. 

4. Add below properties to gradle.properties file. You can find this file on Project Level.

android.useAndroidX=true
android.enableJetifier=true

A.) android.useAndroidX: set to true, the Android plugin uses the AndroidX library instead of a Support Library. The value is false by default.

B.) android.enableJetifier: set to true, the Android plugin automatically migrates existing third-party libraries to use AndroidX. The value is false by default.

Let’s start migration:-

1.  Click Refactor from the menu in Android studio.

2. Then Click on Migrate to AndroidX from Refactor dropdown.

3. After that, It will ask you to take a backup of the whole project. If you have already taken the backup then ignore this step.

4. After the backup process clicks on Migrate, It will show list all support library where we are using in this project. Just click on Do Refactor and wait for some time.

5. After some time, you can see the project all support library replaced by the AndroidX library. Most of the support library will merge automatically and few we need to replaced manually. If you found any error,  Fix it manually. and test your app carefully. The application could crash due to incorrect auto-correction during migration.

That’s it. Enjoy Coding using AndroidX. 🙂

Reference:-

https://developer.android.com/jetpack/androidx/migrate

TabLayout Example using ViewPager and Fragments in Android

If you are using the latest android application then you have noticed that now days android is following a design pattern. This is material design and it came with Android Lollipop (5.0). Though we can still use this design pattern for the older versions (>4.0) by using the support libraries. One of the component of material design is TabLayout. So in this TablLayout Example we will see how we can implement it in our android application.

What is TabLayout ?

Android TabLayout provides horizontal layout to display tabs. We can display more screens in a single screen using tabs. User can swipe the tabs quickly as you can see in the image below.

Creating a new project and add necessary libraries

Open Android Studio and create a new project. I have created DemoTabLayout.

After create a new project, First of all we have to need include design libraries in the dependencies section of our build.gradle file so include this libraries in your build.gradle file by below line.

implementation 'com.android.support:design:28.0.0'

Remove action bar from style

Now since we will be using Android Toolbar and TabLayout classes to show tabs, lets remove the action bar from layout by using styles,

Go to style.xml file and change the parent of theme which you are using in your app.Change parent with “Theme.AppCompat.Light.NoActionBar”. So now your style file will look like below code

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="colorPrimary">#3F51B5</item>
     <item name="colorPrimaryDark">#303F9F</item>
     <item name="colorAccent">#FF4081</item>
  </style>

</resources>

Creating fragments

We are creating an application which will have three tabs, So let’s define three fragment and their layouts.

First Fragment

package com.vikas.demotablayout;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
class tab1 extends Fragment {
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
               Bundle savedInstanceState) {
           return inflater.inflate(R.layout.fragment_tab1, container, false);
         }
   }

It’s layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
     
    <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:text="Tab 1"
      android:textAppearance="?android:attr/textAppearanceLarge"/>

 </RelativeLayout>

 

Second Fragment

package com.vikas.demotablayout;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class Tab2 extends Fragment {
   
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
               Bundle savedInstanceState) {
          return inflater.inflate(R.layout.fragment_tab2, container, false);
	}
   }

it’s layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
	<TextView
          android:id="@+id/textView"
	  android:layout_width="wrap_content"
 	  android:layout_height="wrap_content"
          android:layout_centerInParent="true"
	  android:text="Tab 2"
          android:textAppearance="?android:attr/textAppearanceLarge"/>
</RelativeLayout>

Third Fragment

package com.vikas.demotablayout;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab2 extends Fragment {


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

	 return inflater.inflate(R.layout.fragment_tab3, container, false);
      }

}

its layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical">
     <TextView
        android:id="@+id/textView"
	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
	android:layout_centerInParent="true"
        android:text="Tab 2"
	android:textAppearance="?android:attr/textAppearanceLarge"/>
</RelativeLayout>

Now we will define a view pager adapter to create tab swipe functionality.

package com.vikas.demotablayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

public class PagerAdapter extends FragmentStatePagerAdapter {

    int mNumOfTabs;
    public PagerAdapter(FragmentManager fm, int NumOfTabs) {
     	super(fm);
	this.mNumOfTabs = NumOfTabs;
    }
    @Override
    public Fragment getItem(int position) {
       switch (position) {
	  case 0:
            tab1 tab1 = new tab1();
            return tab1;
          case 1:
            Tab2 tab2 = new Tab2();
            return tab2;
          case 2:
            Tab3 tab3 = new Tab3();
            return tab3;
          default:
            return null;
        }
    }
    @Override
    public int getCount() {
        return mNumOfTabs;
    }
}

Now we will create an Activity named MainActivity which will hold the tabs . This Activity will have two part first is code file and second is layout file. layout file code given below

<RelativeLayout
        android:id="@+id/main_layout"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".MainActivity">
	<android.support.v7.widget.Toolbar
	    android:id="@+id/toolbar"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:layout_alignParentTop="true"
	    android:background="?attr/colorPrimary"
	    android:elevation="6dp"
	    android:minHeight="?attr/actionBarSize"
	    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
	    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
	<android.support.design.widget.TabLayout
	    android:id="@+id/tab_layout"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:layout_below="@+id/toolbar"
	    android:background="?attr/colorPrimary"
	    android:elevation="6dp"
	    android:minHeight="?attr/actionBarSize"
	    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
	<android.support.v4.view.ViewPager
	    android:id="@+id/pager"
	    android:layout_width="match_parent"
	    android:layout_height="fill_parent"
	    android:layout_below="@id/tab_layout"/>
</RelativeLayout>

We can see above that here we add a Toolbar, second is Tablayout and third thing is Viewpager. Toolbar is for showing application name and menu icon. TabLayout is for showing Tabs and viewpager is for holding fragments. Now we write code for attach this layout with fragments in MainActivity code file. Code is given below:

package com.vikas.demotablayout;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;

public class MainActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
	TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
	tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        final PagerAdapter adapter = new PagerAdapter
                (getSupportFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
          @Override
          public void onTabSelected(TabLayout.Tab tab) {
	          viewPager.setCurrentItem(tab.getPosition());
	  }
          @Override
          public void onTabUnselected(TabLayout.Tab tab) {
	  }
          @Override
          public void onTabReselected(TabLayout.Tab tab) {
          }
        });
     }

     @Override
     public boolean onCreateOptionsMenu(Menu menu) {
	    getMenuInflater().inflate(R.menu.menu_main, menu);
	    return true;
     }

}

That’s all, Now you can run your project.

Happy coding…

DatePicker Example in Android

In android, DatePicker is a control which will allow users to select the date by day, month and year in our application user interface.

The images of datePicker are given blow

Create DatePicker with xml

We can create DatePicker using <Datepicker> element in xml file, which is given below

<DatePicker android:id="@+id/datePicker1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

There are two types of view of DatePicker

1. Complete Calendar view

2. Spinner View

Complete Calendar view :- We can create complete calendar view with below code

<DatePicker
    android:id="@+id/datePicker1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:datePickerMode="calendar"/>

This is output

Spinner view :- We can create complete calendar view with below code

 <DatePicker
    android:id="@+id/datePicker1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:datePickerMode="spinner"
    android:calendarViewShown="false"
/>

This is output

Now we will create an example of datePicker in which we will set date picker on edit text and we will create date picker using java code also. In this example we will create a Textview and a button also. On button click we will show date in TextView.

Create a new android application using android studio and give name DatePickerDemo.

Now Open activity_main.xml file from \res\layout path and write code which is given below

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical" android:gravity="center">
    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"
        android:ems="10"
        android:hint="Enter Date" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="Get Date" />
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:textStyle="bold"
        android:textSize="18dp"/>
</LinearLayout>

Now open MainActivity.java file and write code which is given below

MainActivity.java

package com.vikas.datepickerdemo;

import android.app.DatePickerDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.InputType;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.TextView;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity {

    DatePickerDialog datepicker;
    EditText eText;
    Button btn;
    TextView tvw;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tvw=(TextView)findViewById(R.id.textView1);
        eText=(EditText) findViewById(R.id.editText1);
        eText.setInputType(InputType.TYPE_NULL);
        eText.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final Calendar cldr = Calendar.getInstance();
                int day = cldr.get(Calendar.DAY_OF_MONTH);
                int month = cldr.get(Calendar.MONTH);
                int year = cldr.get(Calendar.YEAR);
                // date picker dialog
                datepicker = new DatePickerDialog(MainActivity.this,
                        new DatePickerDialog.OnDateSetListener() {
                            @Override
                            public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
                                eText.setText(dayOfMonth + "/" + (monthOfYear + 1) + "/" + year);
                            }
                        }, year, month, day);
                datepicker.show();
            }
        });
        btn=(Button)findViewById(R.id.button1);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tvw.setText("Selected Date: "+ eText.getText());
            }
        });


    }
}

In java code you can see that we set an Onclicklistener on EditText, when we click on EditText then will see calendar dialog, From which we can select date.

Output of example

That’s all . This is the final output of example.

Happy Coding…

How to create Gridview using Recylerview Android

First let’s understand what Gridview and Recylerview are, in Android.

Gridview

A view that shows items in two-dimensional scrolling grid is known as Gridview. GridView layout in one of the most useful layouts in android to create a scrolling grid (rows & columns).

Recylerview

Recylerview is introduced in Android 5.0 Lollipop. The Recylerview widget is a more advanced and flexible version of Listview. It is a container used to display a large number of data sets that can be scrolled very efficiently by maintaining a limited number of views.

Now let’s start implementing Gridview

First, we need to add below dependency in build.gradle file at app level module.

dependencies {
      implementation 'com.android.support:recyclerview-v7:28.0.0'
}

After that, we need to add Recylerview widget in your main XML file.

<android.support.v7.widget.RecyclerView
         android:id="@+id/recyclerView"
         android:layout_width="match_parent"
         android:layout_height="wrap_content" />

Now we need to create item_logo.xml for Gridview row item.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/root"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center"
   android:orientation="vertical">

    <ImageView
         android:id="@+id/ivLogo"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:scaleType="centerInside"
    />

</LinearLayout>

We need to create Adapter Object. An adapter in Android carries the data from a source (e.g. List<> ) and delivers it to a layout (.xml file).  The Adapter provides access to the data items.

public class LogoGridAdapter extends RecyclerView.Adapter<LogoGridAdapter.ViewHolder> {

    private List<Logo> logoList;
    private Context mContext;


    public LogoGridAdapter(Context mContext, List<Logo> logoList) {

        this.mContext = mContext;
        this.logoList = logoList;

    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_logo, null));
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

        Logo logo = getLogo(position);

        if(logo.getLogoUrl() != null) {
            ImageUtils.displayImage(logo.getLogoUrl(), holder.ivLogo, ContextCompat.getDrawable(mContext, R.drawable.image_placeholder));
        }

    }


    private Logo getLogo(int position) {
        return logoList.get(position);
    }

    public List<Logo> getLogoList() {
        return logoList;
    }

    @Override
    public int getItemCount() {
        return logoList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
       
        LinearLayout root;
        ImageView ivLogo;

        public ViewHolder(View itemView) {
            super(itemView);
            // get logo view 
            ivLogo = (ImageView)itemView.findViewById(R.id.ivLogo);
            root =  (LinearLayout)itemView.findViewById(R.id.root);
        }
    }
}

To display images we can use Glide dependency.

Glide.with(imageView.getContext()).load(imageUrl)
                .apply(new RequestOptions().placeholder(placeHolder).dontAnimate().diskCacheStrategy(DiskCacheStrategy.ALL))
                .into(imageView);

Now we need to set data into Adapter.

LogoGridAdapter mLogoGridAdapter = new LogoGridAdapter(this, logoList);
recyclerView.setLayoutManager(new GridLayoutManager(getActivity(), 3));
recyclerView.setAdapter(mLogoGridAdapter);

GridLayoutManager is a Recylerview Layout Manager implementation to lay out items in a grid.

In the above code “3” is a number of columns in per row.

Output

 

 

 

 

 

 

 

 

 

 

That’s it, Happy Coding 🙂

Reference:-  https://developer.android.com/guide/topics/ui/layout/recyclerview

FCM – send push notifications using Python

What is FCM ?

FCM – Firebase Cloud Messaging is a cross-platform  ( Android, iOS and Chrome ) messaging solution that lets you reliably deliver messages at no cost. FCM is best suited if you want to send push notification to your app which you built to run on Android and iOS. The advantage you get is you don’t have to separately deal with GCM (Google Cloud Messaging deprecated now) and Apple’s APNS. You hand over your notification message to FCM and FCM takes care of communicating with apple’s APNS and Android messaging servers to reliably deliver those messages.

Using FCM we can send message to single device or multiple devices.  There are two different types of messages, notification and data. Notification messages include JSON keys that are understood and interpreted by phone’s operating system. If you want to include customized app specific JSON keys use data message. You can combine both notification and data JSON objects in single message. You can also send messages with different priority.

Note : – You need to set priority  to high  if you want phone to wake up and show notification on screen

Sending message with Python

We can use PyFCM to send messages via FCM. PyFCM is good for synchronous ( blocking ) python. We will discuss non-blocking option in next paragraph.

Install PyFCM using following command

pip install pyfcm

The following code will send a push notification to

from pyfcm import FCMNotification

push_service = FCMNotification(api_key="<api-key>")

# OR initialize with proxies

proxy_dict = {
          "http"  : "http://127.0.0.1",
          "https" : "http://127.0.0.1",
        }
push_service = FCMNotification(api_key="<api-key>", proxy_dict=proxy_dict)

# Your api-key can be gotten from:  https://console.firebase.google.com/project/<project-name>/settings/cloudmessaging

registration_id = "<device registration_id>"
message_title = "Uber update"
message_body = "Hi john, your customized news for today is ready"
result = push_service.notify_single_device(registration_id=registration_id, message_title=message_title, message_body=message_body)

print result
 
# Send to multiple devices by passing a list of ids.
registration_ids = ["<device registration_id 1>", "<device registration_id 2>", ...]
message_title = "Uber update"
message_body = "Hope you're having fun this weekend, don't forget to check today's news"
result = push_service.notify_multiple_devices(registration_ids=registration_ids, message_title=message_title, message_body=message_body)

print result

So, the PyFCM API is the pretty straight forward to use.

Sending FCM push notification using Twisted

PyFCM discussed in above paragraph is good enough if you want to send messages in blocking fashion. If you have to send high number of concurrent messages then using Twisted is a good option.

Twisted Matrix

Network operations performed using twisted library don’t block. Thus it’s a good choice when network concurrency is required by program. We can use txFCM library to send FCM messages using twisted

Install txFCM using following command

pip install txfcm

Following code send FCM message using txFCM

from txfcm import TXFCMNotification
from twisted.internet import reactor

push_service = TXFCMNotification(api_key="<api-key>")

# Your api-key can be gotten from:  https://console.firebase.google.com/project/<project-name>/settings/cloudmessaging
# Send to multiple devices by passing a list of ids.
registration_ids = ["<device registration_id 1>", "<device registration_id 2>", ...]
message_title = "Uber update"
message_body = "Hope you're having fun this weekend, don't forget to check today's news"
df = push_service.notify_multiple_devices(registration_ids=registration_ids, message_title=message_title, message_body=message_body)

def got_result(result):
    print result

df.addBoth(got_result)
reactor.run()

txFCM is built on top of PyFCM so all the API call that are available in PyFCM are also available in txFCM.