Android Widgets

Read more about the article Implementing Card View in PSLab app

Implementing Card View in PSLab app

Card View was announced by Google in I/O ‘14 conference. Although it started a bit slow, but now we can see most of the apps like Snapchat, Google, Facebook, etc. using this widget. So, this blog is solely contributed on how to implement Card View in your own app by taking example of PSLab application. What is Card View ? CardView is a view container or ViewGroup that inherits its nature from FrameLayout which further inherits from ViewGroup itself. The only thing that separates a CardView from any other ViewGroups is its nature to behave like a card, more specifically the shadow and rounded corners. The basic customization that a CardView provides includes CornerRadius, Elevation, MaxElevation, ContentPadding, CompatPadding, PreventCornerOverlap, and a dedicated CardBackgroundColor or say Card Background which is the most necessary feature for a card to look cool. Step by Step description how CardView was implemented in PSLab First step is to add dependencies in your project as widgets like Card View, Recyclerview, etc. are not included in a common repository of widgets provided by Google. App level dependency : compile 'com.android.support:cardview-v7:26.0.0' compile 'com.android.support:recyclerview-v7:+' If you are using Android Studio 3.0+ than add the following dependency instead of above : implementation 'com.android.support:cardview-v7:26.0.0' implementation 'com.android.support:recyclerview-v7:27.1.1'  Now we can use Card View widget in our app. So, first make add card view in layout section like this : <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="@dimen/total_height_card" android:layout_gravity="center" android:layout_margin="@dimen/card_margin" card_view:cardCornerRadius="@dimen/card_radius"> </android.support.v7.widget.CardView> These are the basic attributes that are used while declaring a card view. Other possible attributes can be : Elevation - Used to elevate card to give a depth effect MaxElevation - Used to give constraint to the depth effect ContentPadding - Used to provide padding between content and the card PreventCornerOverlap - To prevent different corners to overlap as shown in figure 1. Figure 1. Image showing corner overlapping in CardView Now to set the objects inside the Card View, mostly RelativeLayout is preferred as it gives the freedom to place objects in reference of others whereas LinearLayout provides freedom to place them in only one direction. Other layouts such as FrameLayout, Tables, etc. can be used as per the need of the app. Now we will create a layout that will hold all the cards using RecyclerView. <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:scrollbars="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"/> Now after setting the layouts, it's time to make adapter which inflates the information in the cards which is then represented using RecyclerView. public class ApplicationAdapter extends RecyclerView.Adapter<ApplicationAdapter.Holder> { private List<ApplicationItem> applicationList; private final OnItemClickListener listener; /** * View holder for application list item */ public class Holder extends RecyclerView.ViewHolder { TextView header, description; ImageView applicationIcon; //Background Image public Holder(View itemView) { super(itemView); this.header = itemView.findViewById(R.id.heading_card); this.description = itemView.findViewById(R.id.description_card); this.applicationIcon = itemView.findViewById(R.id.application_icon); } public void setup(final ApplicationItem applicationItem, final OnItemClickListener listener) { header.setText(applicationItem.getApplicationName()); description.setText(applicationItem.getApplicationDescription()); applicationIcon.setImageResource(applicationItem.getApplicationIcon()); } } public ApplicationAdapter(Context mContext, List<ApplicationItem> applicationList, OnItemClickListener listener) { this.mContext = mContext; this.applicationList = applicationList; this.listener = listener; } @Override public Holder onCreateViewHolder(ViewGroup parent, int viewType) { View itemView = LayoutInflater.from(parent.getContext()) .inflate(R.layout.application_list_item, parent, false); return…

Continue ReadingImplementing Card View in PSLab app

Creating a Widget for your Android App

Having a widget for your app, not only helps it to stand out among its alternatives but also provides user information on the go without having to open the app. Keeping this thought in mind, I decided to make a widget for my GSoC project. Let's go through the steps involved. Step 1: Creating a new widget from Android Studio. Open up your project for which you need a widget and navigate to the project’s Java source. Create a new sub-package there named widget. Right click on the newly created sub-package and select the New->Widget option from there. Follow the instructions on the next screen. Most of the fields here are pretty much self explanatory. After doing this and running the app in your device, you will be able to see a widget for your app in the widget picker.   Just kidding, this was the easy part, off to more harder things now! Step 2: Populating the widget with data. Now, there can be 2 broad type of widgets Information Widgets and Collection Widgets. Information widgets are simple widgets that are used to display an information that changes with time, for example Weather Widget or a Clock Widget. Whereas, collection widgets are widgets which display a collection of data, for example the GMail widget is a collection widget. These are relatively complex and harder than the Information Widgets. In this post, we will focus on making a Collection Widget. For Collection widgets, we need two layout files, one for the widget and one for each item in the widget collection. Go ahead and create the two layout files. The wizard automatically generates the widget_layout.xml for you, you just need to edit it up. stock_layout.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:id="@+id/widget_toolbar" android:layout_height="?android:attr/actionBarSize" android:background="@color/colorPrimary"> <ImageView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center" android:src="@drawable/stock_up" android:contentDescription="@string/stock_widget" /> <ImageView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center" android:src="@drawable/stock_down" android:contentDescription="@string/stock_widget" /> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:layout_marginStart="32dp" android:gravity="center_vertical" android:text="@string/your_stocks" android:textAppearance="@android:style/TextAppearance.DeviceDefault.Widget.ActionBar.Title" android:layout_marginLeft="32dp" /> </LinearLayout> <ListView android:id="@+id/widget_listView" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/backGround"></ListView> </LinearLayout> list_item.xml <?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:layout_width="match_parent" android:layout_height="72dp" android:gravity="center_vertical" android:orientation="horizontal" android:paddingLeft="16dp" android:paddingRight="16dp" > <TextView android:id="@+id/stock_symbol" style="@style/StockSymbolTextStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="start|center_vertical" tools:text="List Item" /> </LinearLayout> Next up, having a look at the modified files, we can see that the Widget creation wizard added some stuff into out AndroidManifest.xml and created a new java file. Upon taking a closer look at the manifest, we can see that the widget’s java class has been registered as a <receiver/> Next, opening up the NewAppWidget.java, we will see that it extends AppWidgetProvider and some methods are already overridden for you. Time to edit up this file to reference to the layouts we have just created. import android.annotation.TargetApi; import android.app.PendingIntent; import android.appwidget.AppWidgetManager; import android.appwidget.AppWidgetProvider; import android.content.Context; import android.content.Intent; import android.os.Build; import android.support.annotation.NonNull; import android.widget.RemoteViews; /** * Implementation of App Widget functionality. */ public class StockWidgetProvider extends AppWidgetProvider { private static void updateAppWidget(Context context, AppWidgetManager appWidgetManager, int appWidgetId) { // Construct the RemoteViews object which defines the view of out widget RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.widget_layout); // Instruct the widget manager to update…

Continue ReadingCreating a Widget for your Android App