Sunday 28 September 2014

Add Facebook like-box on Blogger

In this tutorial we see how to insert the famous Facebook "Like Box" in our blog.



First of all you have to create a page related to your blog/site on Facebook.
Then you have to:
  • go to the page Facebook Developers
  • insert the url of your page
  • insert the width and the height you want for the Like Box 
  • choose the desired combination of colors/borders/header and if you want to display the profile images of your followers
  • click on >Get Code
At this point you get something like this:


  • Click on IFRAME and copy the generated code
  • Go to the homepage of Blogger in the section  >Layout
  • Add a gadget of type HTML/Javascript
  • Paste the previous code


That's all!

Saturday 27 September 2014

Android: Custom Table Layout

Let's see how to realize a custom table layout.

The layout is defined in the file activity_main.xml. As regards the first table:
   <!-- TABLE 1-->
   <TableLayout android:id="@+id/table_user" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/table" 
      android:shrinkColumns="*" 
      android:stretchColumns="*" 
      android:layout_marginTop="20dp" 
      android:layout_marginLeft="10dp" 
      android:layout_marginRight="10dp" 
      android:layout_marginBottom="20dp" 
      android:paddingBottom="10dp">
      <!-- Row 1 with single column -->
      <TableRow 
         android:layout_height="wrap_content" 
         android:layout_width="fill_parent" 
         android:background="#4682b4" 
         android:gravity="center_horizontal"
         <TextView
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="@string/first"
            android:layout_span="2" 
            android:padding="20dp" 
            android:layout_gravity="center" 
            android:textStyle="bold" 
            android:textColor="#ffffff"/>
      </TableRow>
      <!-- Row 2 with 2 columns -->
      <TableRow 
         android:layout_height="wrap_content" 
         android:layout_width="fill_parent"
         android:layout_margin="3dp" 
         android:gravity="center_horizontal"
         <TextView
            android:id="@+id/TextView04" 
            android:text="@string/item" 
            android:layout_weight="1" 
            android:textColor="@android:color/black" 
            android:textAppearance="?android:attr/textAppearanceMedium" 
            android:padding="5dip"
            android:layout_marginLeft="2dp" 
            android:background="#f0ffff" 
            android:gravity="center"/>
         <TextView
            android:id="@+id/field1" 

            android:text="@string/value" 
            android:layout_weight="1" 
            android:textColor="@android:color/black"
            android:textAppearance="?android:attr/ textAppearanceMedium"
            android:layout_marginLeft="2dp" 
            android:background="#f0ffff" 
            android:padding="5dip" 
            android:gravity="center"/>
       </TableRow>

    <!-- other table rows -->

  </TableLayout>











The layout for the second table is the following:

  <!-- TABLE 2 -->
  <TableLayout
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/table_user" 
     android:layout_marginTop="10dp" 
     android:background="@drawable/table" 
     android:shrinkColumns="*" 
     android:stretchColumns="*" 
     android:paddingBottom="10dp" 
     android:layout_marginBottom="5dp" 
     android:layout_marginLeft="10dp" 
     android:layout_marginRight="10dp"
     <!-- Row 1 with single column -->
     <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">
        <TextView 
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" 
           android:textAppearance="?android:attr/textAppearanceMedium" 
           android:text="@string/second"
           android:layout_span="3" 
           android:padding="20dp" 
           android:layout_gravity="center" 
           android:textStyle="bold" 
           android:textColor="#4682b4"/>
     </TableRow>
     <!-- Row 2 with 2 columns -->
     <TableRow
        android:layout_height="wrap_content" 

        android:layout_width="fill_parent" 
        android:background="@drawable/pink_item" 
        android:layout_margin="6dp" 
        android:gravity="center_horizontal"
        <TextView
           android:id="@+id/TextView1" 
           android:text="@string/item"
           android:layout_weight="1" 
           android:textColor="@android:color/black"
           android:textAppearance="?android:attr/ textAppearanceMedium"
           android:padding="8dip"
           android:gravity="center"/> 
        <TextView
           android:id="@+id/field5" 
           android:text="@string/value" 
           android:layout_weight="1" 
           android:textColor="@android:color/black" 
           android:textAppearance="?android:attr/textAppearanceMedium" 
           android:padding="2dip"
           android:gravity="center"/> 
      </TableRow>

    <!-- other table rows -->

  </TableLayout>



As regards the settings for external borders and colors, they are defined in the file table.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <
solid android:color="@android:color/transparent"/>
  <
stroke 

     android:width="2dp"
     android:color="#4682b4" 
     android:dashWidth="5dp" 
     android:dashGap="0dp"/>
  <corners android:radius="20dp"/> 
</shape




The raws of the second table are described in the files pink_item.xml and blue_item.xml, in the folder drawable. For example, in the file pink_item.xml we have:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <
solid android:color="#e6e6fa"/>
  <
stroke 

     android:width="1dp" 
     android:color="#dda0dd" 
     android:dashWidth="5dp" 
     android:dashGap="0dp"/>
  <corners android:radius="10dp"/> 
</shape



You can download the source code from our repository: Download CustomTable.zip

The final result is the following:


Custom Alert Dialog in Android

Let's see how to create custom Alert Dialogs in Android.

The main activity is described in MainActivity.java, and it is made of a button that, if clicked, leads to the visualization of the dialog.

Here's the code for the MainActivity:
public class MainActivity extends ActionBarActivity { 
  Context context;
  Dialog dialog;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main);
    context = this;

    Button button1 =(Button)findViewById(R.id.button1); 
    button1.setOnClickListener(new View.OnClickListener() {

  @Override
  public void onClick(View v) {
    // TODO Auto-generated method stub
    dialog = new Dialog(context); 

    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
    dialog.setContentView(R.layout.custom_dialog);
    dialog.show();

    Button positiveButton = (Button)dialog.findViewById(R.id.positive_button); 
    Button negativeButton = (Button)dialog.findViewById(R.id.negative_button);

    positiveButton.setOnClickListener(new OnClickListener(){
      @Override
      public void onClick(View arg0) { 
        dialog.dismiss();
      } 
    });

    negativeButton.setOnClickListener(new OnClickListener(){
      @Override
      public void onClick(View arg0) { 
        dialog.dismiss();
      } 
    });

... //rest of the code here
}








As regards the custom dialog, its layout is defined in the file custom_dialog.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:layout_height="wrap_content" 
   android:gravity="center_vertical|center_horizontal" 
   android:background="@drawable/dialogs">
   
   <RelativeLayout 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:paddingLeft="20dip" 
      android:paddingRight="20dip" 
      android:paddingTop="10dip" >

      <ImageView android:id="@+id/dialog_title_image" 
         android:layout_alignParentLeft="true" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:background="@drawable/info"/>

      <TextView android:id="@+id/dialog_title" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_marginLeft="10dip" 
         android:layout_marginTop="20dp" 
         android:layout_centerInParent="true" 
         android:text="@string/title" 
         android:layout_toRightOf="@id/dialog_title_image" 
         android:textColor="#00adef" 
         android:textSize="20sp"/>

   </RelativeLayout

   <TextView
      android:layout_width="fill_parent" 
      android:layout_height="2dip" 
      android:background="#00adef"/>

   <TextView android:id="@+id/dialog_msg" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:textColor="@android:color/black" 
      android:textSize="15sp"
      android:text="@string/msg" 
      android:gravity="center" 
      android:layout_marginTop="10dip"/>

   <RelativeLayout 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:paddingTop="10dip" 
      android:paddingLeft="10dp" 
      android:paddingRight="10dp" 
      android:layout_marginLeft="20dp" 
      android:layout_marginRight="20dp" 
      android:gravity="bottom|center_horizontal" 
      android:paddingBottom="20dip">

      <Button android:id="@+id/negative_button" 
         android:layout_width="100dip" 
         android:layout_height="30dp" 
         android:layout_toRightOf="@+id/positive_button" 
         android:layout_marginLeft="5dp" 
         android:background="#00adef" 
         android:text="@string/no"/>

      <Button android:id="@+id/positive_button" 
         android:layout_width="100dip" 
         android:layout_height="30dp" 
         android:layout_alignBaseline="@+id/negative_button"
         android:layout_alignBottom="@+id/negative_button" 
         android:layout_alignParentLeft="true" 
         android:background="#00adef" 
         android:text="@string/yes" />
   </RelativeLayout

</LinearLayout







The shape and the borders are defined in dialogs.xml, in the folder drawable:


<?xml version="1.0" encoding="utf-8"?>
<
shape xmlns:android="http://schemas.android.com/apk/res/android"

  <solid android:color="@android:color/white"/>

  <
stroke android:width="5dp" 

          android:color="#00adef" 
          android:dashWidth="8dp" 
          android:dashGap="0dp"/>

  <
corners android:radius="25dp"/>

</shape





You can download the complete example from our repository: Download CustomDialog.zip


The final result is the following:



Friday 26 September 2014

Android: Gradient Background

In this article we explain how to create different types of gradient background for Android applications.

The application is made of 5 simple activities, each one characterized by a particular background.

To be not redundant, we show just one of the xml files related to the layouts of the activities, for example the one of activity #2, SecondActivity.java:


public class SecondActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) { 
    // TODO Auto-generated method stub 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.second);

    Button button1 = (Button)findViewById(R.id.button1); 
    Button button2 = (Button)findViewById(R.id.button2);

    button1.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        // TODO Auto-generated method stub
        Intent intent = new Intent(SecondActivity.this,
MainActivity.class); 
        startActivity(intent);
      }
    });

    button2.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        // TODO Auto-generated method stub
        Intent intent = new Intent(SecondActivity.this,
ThirdActivity.class); 
        startActivity(intent);
      }
    });
  }
} 

The layout is defined in second.xml:


<RelativeLayout 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:background="@drawable/gradient_2"                 android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context="com.example.gradientbackground.MainActivity" >

   <TextView
     android:layout_width="wrap_content" 

     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:layout_centerHorizontal="true" 
     android:layout_marginTop="164dp" 
     android:textAppearance="?android:attr/textAppearanceMedium" 
     android:text="@string/linear" />

   <Button
     android:id="@+id/button2" 

     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentRight="true" 
     android:layout_marginBottom="38dp" 
     android:layout_marginRight="64dp" 
     android:text="@string/next" />

   <Button
     android:id="@+id/button1" 

     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignBaseline="@+id/button2" 
     android:layout_alignBottom="@+id/button2" 
     android:layout_toLeftOf="@+id/button2" 
     android:text="@string/prev" />
</RelativeLayout> 



The typologies of gradient background are defined in drawable folder, and are the following ones:



  • Radial, in gradient_1.xml:

  • <gradient 
       android:startColor="#87cefa" 
       android:endColor="#edeff6" 
       android:gradientRadius="300" 
       android:type="radial"/> 



  • Linear, in gradient_2.xml:

  • <gradient 
       android:startColor="#87cefa" 
       android:endColor="#edeff6" 
       android:type="linear"/> 



  • Lineare with angle, in gradient_3.xml:

  • <gradient 
       android:startColor="#1e90ff" 
       android:centerColor="#00bfff" 
       android:endColor="#edeff6" 
       android:angle="90" 
       android:type="linear"/> 



  • Sweep, in gradient_4.xml:

  • <gradient 
       android:startColor="#f0f8ff" 
       android:centerColor="#00bfff" 
       android:endColor="#edeff6" 
       android:type="sweep"/> 



  • Reflected, in gradient_5.xml:

  • <gradient 
       android:startColor="#f0f8ff" 
       android:centerColor="#00bfff" 
       android:endColor="#edeff6"/> 




    You can download the complete example from our repository: Download GradientBackground.zip


    The final result is the following: