Skip to main content

PopupWindow with Image and Text Android


PopupWindow :

 Download the complete Android Studio Project from here.







      In this example, I am about to show you , how to create a pop-up window which will be displayed below the overflow icon,when someone clicks it. The design will look like this. 


So when some clicks on the overflow Icon it will display pop up window showing the different social networking sites.
On choosing any of the option below will take them to a new Activity loading the selected site on the Web view in new activity. 

WebView ->  A Web View is a view/widget, which allows you to load and display web content inside your activity. 

you don't need any new dependencies or external libraries to achieve this. Lets jump into the code.

1.Activity_Main.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="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:orientation="vertical"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">  
   <TextView  
     android:layout_marginTop="2dp"  
     android:layout_gravity="center_horizontal"  
     android:text="Click on the Overflow Icon to share"  
     android:textSize="17dp"  
     android:textColor="#000000"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" />  
   <ImageView  
     android:layout_gravity="center_horizontal"  
     android:paddingTop="5dp"  
     android:paddingLeft="5dp"  
     android:paddingBottom="5dp"  
     android:paddingRight="5dp"  
     android:layout_width="40dp"  
     android:layout_height="50dp"  
     android:id="@+id/overflow_imageView"  
     android:src="@drawable/overflow" />  
 </LinearLayout>  






2.MainActivity.Java:








public class MainActivity extends AppCompatActivity {  
   ImageView overFlowMenuIcon;  
   PopupWindow socialNetworkPopUpWindow;  
   View view;  
   RelativeLayout faceBook,googelPlus,instagram,twitter;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     //setPopUpWindow() method will set PopUpwindow when the MainActivity loads .  
     setPopUpWindow();  
     overFlowMenuIcon=(ImageView)findViewById(R.id.overflow_imageView);  
     overFlowMenuIcon.setOnClickListener(new View.OnClickListener() {  
       @SuppressLint("NewApi")  
       @Override  
       public void onClick(View v) {  
         if(v.isSelected())  
         {  
           socialNetworkPopUpWindow.dismiss();  
           v.setSelected(false);  
         }  
         else  
         {  
           v.setSelected(true);  
           socialNetworkPopUpWindow.showAsDropDown(v,-153,0);  
           //showAsDropDown(below which view you want to show as dropdown,horizontal position, vertical position)  
         }  
       }  
     });  
   }  
   @SuppressLint("NewApi")  
   private void setPopUpWindow() {  
     LayoutInflater inflater = (LayoutInflater)  
         getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
     view = inflater.inflate(R.layout.overflowmenuicon, null);  
     /* Layout Inflated with the view here is will be displayed below OverFlowIcon in  
      *  
      */  
     faceBook=(RelativeLayout)view.findViewById(R.id.facebook_button);  
     googelPlus=(RelativeLayout)view.findViewById(R.id.googlePlus_button);  
     instagram=(RelativeLayout)view.findViewById(R.id.instagram_button);  
     twitter=(RelativeLayout)view.findViewById(R.id.twitter_button);  
     /*Create a New PopUp window and you have to pass the layout you want to dislay as 1stparameter,widh size as 2nd parametere,height as 3rd parameter,true or false as forth param)  
      *  
      */  
     socialNetworkPopUpWindow = new PopupWindow(view,300, RelativeLayout.LayoutParams.WRAP_CONTENT, true);  
     //new popupWindow(layout to be displayed as popup,width size of popupwindow, height size PopUpwindow,true/false(focusable or not  
     // in touch mode))  
     final Intent newIntent=new Intent();  
     //creating a new Intent to start an Activity  
     newIntent.setClass(getApplicationContext(), WebLoadingActivity.class);  
     // setting upt the activity which is need to be displayed when the intent starts  
      /*  
      * Setting OnClickListener for all the Layout options, facebook,google etc.  
      */  
     faceBook.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {  
         socialNetworkPopUpWindow.dismiss();  
         newIntent.putExtra("loadingPage","https://www.facebook.com/");  
         //Adding webpage url string to intent as extra which will be recieved at new end and the appropriate webPage will be loaded.  
         startActivity(newIntent);  
         }  
     });  
     googelPlus.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {  
         socialNetworkPopUpWindow.dismiss();  
         newIntent.putExtra("loadingPage","https://plus.google.com/");  
         //Adding webpage url string to intent as extra which will be recieved at new end and the appropriate webPage will be loaded.  
         startActivity(newIntent);  
       }  
     });  
     instagram.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {  
         socialNetworkPopUpWindow.dismiss();  
         newIntent.putExtra("loadingPage","https://instagram.com/");  
         //Adding webpage url string to intent as extra which will be recieved at new end and the appropriate webPage will be loaded.  
         startActivity(newIntent);  
       }  
     });  
     twitter.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {  
         socialNetworkPopUpWindow.dismiss();  
         newIntent.putExtra("loadingPage","https://twitter.com/");  
         //Adding webpage url string to intent as extra which will be recieved at new end and the appropriate webPage will be loaded.  
         startActivity(newIntent);  
       }  
     });  
   }  
 }  




 


 socialNetworkPopUpWindow.showAsDropDown(v,-153,0);   

  v->below which view you are going to show the dropdown(ex:button,Imageview)  

  2nd parameter->horizontal position value  

  3rd parameter->vertical position value.  

 socialNetworkPopUpWindow = new PopupWindow(view,300, RelativeLayout.LayoutParams.WRAP_CONTENT, true);  

 View-> the View in which the layout is inflated.   

 2nd parameter->width of the layout displayed view, you can specify the width size by yourself or set it to wrap_content.   

 3rd parameter->height of the displayed view.   

 4th Parameter -> Boolean to set focusable to true or false.   



3. Overflowmenuicon.xml:






<?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:orientation="vertical" android:layout_width="wrap_content"  
   android:background="@drawable/gridview_background_drawable"  
   android:paddingRight="0dp"  
   android:layout_marginRight="0dp"  
   android:layout_height="wrap_content">  
   <RelativeLayout  
     android:id="@+id/facebook_button"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content">  
     <ImageView  
       android:layout_centerHorizontal="true"  
       android:layout_centerVertical="true"  
       android:layout_alignParentLeft="true"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:src="@drawable/facebook"  
       android:id="@+id/facebook_icon"  
       android:paddingLeft="10dp"  
       android:paddingRight="10dp"  
       android:paddingTop="5dp"  
       android:paddingBottom="5dp"  
       />  
     <TextView  
       android:layout_centerHorizontal="true"  
       android:layout_centerVertical="true"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:paddingRight="0dp"  
       android:text="Facebook"  
       android:textSize="17dp"  
       android:textColor="#000000"  
       android:layout_toRightOf="@+id/facebook_icon"  
       />  
   </RelativeLayout>  
   <View  
     android:layout_width="wrap_content"  
     android:layout_height="1dp"  
     android:background="#000000"  
     />  
   <RelativeLayout  
   android:id="@+id/googlePlus_button"  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content">  
   <ImageView  
     android:layout_centerHorizontal="true"  
     android:layout_centerVertical="true"  
     android:layout_alignParentLeft="true"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:src="@drawable/google_plus"  
     android:id="@+id/googlePlus_icon"  
     android:paddingLeft="10dp"  
     android:paddingRight="10dp"  
     android:paddingTop="5dp"  
     android:paddingBottom="5dp"  
     />  
   <TextView  
     android:layout_centerHorizontal="true"  
     android:layout_centerVertical="true"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="Google Plus"  
     android:textSize="17dp"  
     android:textColor="#000000"  
     android:layout_toRightOf="@+id/googlePlus_icon"  
     />  
 </RelativeLayout>  
   <View  
     android:layout_width="wrap_content"  
     android:layout_height="1dp"  
     android:background="#000000"  
     />  
   <RelativeLayout  
     android:id="@+id/instagram_button"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content">  
     <ImageView  
       android:layout_centerHorizontal="true"  
       android:layout_centerVertical="true"  
       android:layout_alignParentLeft="true"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:src="@drawable/instagram"  
       android:id="@+id/instagram_icon"  
       android:paddingLeft="10dp"  
       android:paddingRight="10dp"  
       android:paddingTop="5dp"  
       android:paddingBottom="5dp"  
       />  
     <TextView  
       android:layout_centerHorizontal="true"  
       android:layout_centerVertical="true"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="Instagram"  
       android:textSize="17dp"  
       android:textColor="#000000"  
       android:layout_toRightOf="@+id/instagram_icon"  
       />  
   </RelativeLayout>  
   <View  
     android:layout_width="wrap_content"  
     android:layout_height="1dp"  
     android:background="#000000"  
     />  
   <RelativeLayout  
     android:id="@+id/twitter_button"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content">  
     <ImageView  
       android:layout_centerHorizontal="true"  
       android:layout_centerVertical="true"  
       android:layout_alignParentLeft="true"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:src="@drawable/twitter"  
       android:id="@+id/twitter_icon"  
       android:paddingLeft="10dp"  
       android:paddingRight="10dp"  
       android:paddingTop="5dp"  
       android:paddingBottom="5dp"  
       />  
     <TextView  
       android:layout_centerHorizontal="true"  
       android:layout_centerVertical="true"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="Twitter"  
       android:textSize="17dp"  
       android:textColor="#000000"  
       android:layout_toRightOf="@+id/twitter_icon"  
       />  
   </RelativeLayout>  
   <View  
     android:layout_width="wrap_content"  
     android:layout_height="1dp"  
     android:background="#000000"  
     />  
 </LinearLayout>  








You don't have to think about the webView layout file  and it's implementation as it



The above xml is the design of how the overflow layout should look like.



This how popUp window in Android works.





If you wan't to look at the WebView code part check below. 





4.WebLoadingActivity.java:






public class WebLoadingActivity extends AppCompatActivity {  
   WebView webView;  
   String url;  
   ProgressDialog progressBar;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.webloadingactivity);  
     webView=(WebView)findViewById(R.id.webview);  
     Bundle extras=getIntent().getExtras();  
     url=extras.getString("loadingPage");  
     WebSettings webSettings=webView.getSettings();  
     //to set JavaScript enabled in webView you have to get it settings to Websettings.   
     webSettings.setJavaScriptEnabled(true);  
     //set JavaScriptEnabled to true, so that the url you are about to load in webView will load.   
     webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);  
     //set scrollbar to webview.   
     progressBar = ProgressDialog.show(WebLoadingActivity.this, "", "Loading...",  
         true);  
     webView.setWebViewClient(new WebViewClient() {  
       public boolean shouldOverrideUrlLoading(WebView view, String url) {  
         view.loadUrl(url);  
         return true;  
       }  
       public void onPageFinished(WebView view, String url) {  
         if (progressBar.isShowing()) {  
           progressBar.dismiss();  
         }  
       }  
       public void onReceivedError(WebView view, int errorCode,  
                     String description, String failingUrl) {  
         AlertDialog alert = new AlertDialog.Builder(WebLoadingActivity.this)  
             .create();  
         alert.setTitle("No connection");  
         alert.setIcon(R.drawable.facebook);  
         alert.setCancelable(false);  
         alert.setMessage("No connection");  
         alert.setButton("OK", new DialogInterface.OnClickListener() {  
           @Override  
           public void onClick(DialogInterface dialog, int which) {  
             dialog.dismiss();  
           }  
         });  
         alert.show();  
       }  
     });  
     webView.loadUrl(url);  
   }  
 }  










Hope it helps.









































Comments















Post a Comment



















Popular posts from this blog





















Hiding a Child item(ImageView) In ListView




























         Download Complete Android Studio Project by  Clicking Here .          Important Things About Listview:   i.                A List view Recycle it’s view. Meaning If your screen can only fit 5 items. But the total number of item   you are about to display in listview is 100 .   ii.               Android won’t load these 100 items into the listview when you set your adapter.   iii.             Instead it first load the first five Items on the screen and when you scroll down , it fills the new data into the listview, Which improves performance and Memory.     ListView at First Load            Item   1           Item 2         Item   3         Item   4         Item   5            ListView When Scrolled            Item   3           Item 4         Item   5         Item   6    ...




















1 comment









Read more






























 Adding Json array to Serializable Class using Gson. 




























       Why you should use Gson and Serializable Class to Handle Json Data:   Gson can be used along with Serializable class to save variables, unnecessary loops and memory  to save the data you get from Json.      Let's Imagine you have array of contact detail and its total count is four. which is something like this.     Json Snippet:   [ {        "name" : "Mark" ,        "phoneNumber" : "1008788666" ,        "emailId" : "mark@mail.com" ,        "address" : "600 Pennsylvania Avenue, Washington DC"       },      {        "name" : "Christian" ,        "phoneNumber" : "8007780066" ,        "emailId" : "christian@mail.com" ,        "address" : "11 Wall Street New York"       },      {        "name" : "Benedict" ,        "phoneNumber" : "4258781555" ,        "emailId" : "ben...




















2 comments









Read more




























Sugar ORM With Sqlite Android Part I 




























        Sugar ORM  Android Part I:               If you have came this far in search of how to use an ORM database with your application , you are very much familiar with pain that SQLite querying concept is giving you for all basic CRUD operations with the database.   Sugar ORM is  one of the solution which is available for you to carry out CRUD operation in ease, There is no need to use cursor  for reading from database, Sugar ORM speaks Object with Sqlite database.   Sugar ORM consider a row of data as Object, where SQLite consider it as record.   In this example I am going to show you how to create a table and add data to it using Sugar ORM.   Let's get started.    1. Library Inclusion   First and Foremost thing, add Sugar ORM to your project by adding the following line to your app dependencies.   compile 'com.github.satyan:sugar:1.4'    2. Add Database configuration to Application Manifest:   We have to inform the android sdk, that...




















23 comments









Read more