Agafix Blog http://agafix.org Agafix provides Web Design and Web Development tutorials, tips, and tricks for beginner and advanced. At Agafix we also create themes and develop plugins for Wordpress. Tue, 13 Mar 2012 18:07:56 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Android: How to make a dashboard using a GridView http://agafix.org/android-how-to-make-a-dashboard-using-a-gridview/ http://agafix.org/android-how-to-make-a-dashboard-using-a-gridview/#comments Tue, 13 Mar 2012 15:42:18 +0000 Taoufix http://agafix.org/?p=1870 When your Android application provides many functionalities via different Activities, it is a good UI Design to provide a dashboard for an easy access and navigation. This pattern can be found in major Android applications such as Google+, Twitter, Evernote.

In our use case scenario, you are developing an application which provides maps for the main Paris transportation services (i.e. Metro, RER, Bus, Noctilien).

The main entry to your application will be a dashboard containing icons to access the transportation maps.

The dashboard Activity will be using a GridView of 2 columns in portrait mode and 4 columns in landscape mode.

Here is the code for the dashboard layout:

Dashboard layout: res/layout/dashboard.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:background="@android:color/white">
 
    <GridView
       android:id="@+id/dashboard_grid"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:listSelector="@android:color/transparent"
       android:stretchMode="columnWidth"
       android:verticalSpacing="20.0dip"
       android:layout_centerInParent="true"
       style="@style/dashboard" />
 
</RelativeLayout>

The above layout uses a reference to an external style which is going to provide a different UI depending on the orientation (portrait or landscape).

Dashboard portrait mode style: res/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="dashboard">
        <item name="android:numColumns">2</item>
    </style>
</resources>

Dashboard landscape mode style: res/values-land/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="dashboard">
        <item name="android:numColumns">4</item>
    </style>
</resources>

The GridView will be filled programatically using an inflater for the dashboard entries (icon + text)

Dashboard entry layout: res/layout/dashboard_icon.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="wrap_content"
   android:layout_marginBottom="20.0dip"
   android:gravity="center"
   android:orientation="vertical">
 
    <ImageView
       android:id="@+id/dashboard_icon_img"
       android:layout_width="fill_parent"
       android:layout_height="96.0dip"
       android:scaleType="fitCenter" />
 
    <TextView
       android:id="@+id/dashboard_icon_text"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_marginBottom="20.0dip"
       android:layout_marginTop="2.0dip"
       android:gravity="center"
       android:textAppearance="?android:textAppearanceMedium"
       android:textColor="@android:color/black" />
 
</LinearLayout>

The dashboard Activity where we fill the GridView :

Dashboard Activity: src/org/agafix/metro/DashboardActivity.java

package org.agafix.metro;
 
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
 
public class DashboardActivity extends Activity implements OnItemClickListener {
 
    static final String EXTRA_MAP = "map";
 
    static final LauncherIcon[] ICONS = {
            new LauncherIcon(R.drawable.ic_metro, "Metro", "metro.png"),
            new LauncherIcon(R.drawable.ic_rer, "RER", "rer.png"),
            new LauncherIcon(R.drawable.ic_bus, "Bus", "bus.png"),
            new LauncherIcon(R.drawable.ic_noctilien, "Noctilien", "noctilien.png"),
    };
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dashboard);
 
        GridView gridview = (GridView) findViewById(R.id.dashboard_grid);
        gridview.setAdapter(new ImageAdapter(this));
        gridview.setOnItemClickListener(this);
 
        // Hack to disable GridView scrolling
        gridview.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return event.getAction() == MotionEvent.ACTION_MOVE;
            }
        });
    }
 
    @Override
    public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
        Intent intent = new Intent(this, MapActivity.class);
        intent.putExtra(EXTRA_MAP, ICONS[position].map);
        startActivity(intent);
    }
 
    static class LauncherIcon {
        final String text;
        final int imgId;
        final String map;
 
        public LauncherIcon(int imgId, String text, String map) {
            super();
            this.imgId = imgId;
            this.text = text;
            this.map = map;
        }
 
    }
 
    static class ImageAdapter extends BaseAdapter {
        private Context mContext;
 
        public ImageAdapter(Context c) {
            mContext = c;
        }
 
        @Override
        public int getCount() {
            return ICONS.length;
        }
 
        @Override
        public LauncherIcon getItem(int position) {
            return null;
        }
 
        @Override
        public long getItemId(int position) {
            return 0;
        }
 
        static class ViewHolder {
            public ImageView icon;
            public TextView text;
        }
 
        // Create a new ImageView for each item referenced by the Adapter
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View v = convertView;
            ViewHolder holder;
            if (v == null) {
                LayoutInflater vi = (LayoutInflater) mContext.getSystemService(
                    Context.LAYOUT_INFLATER_SERVICE);
 
                v = vi.inflate(R.layout.dashboard_icon, null);
                holder = new ViewHolder();
                holder.text = (TextView) v.findViewById(R.id.dashboard_icon_text);
                holder.icon = (ImageView) v.findViewById(R.id.dashboard_icon_img);
                v.setTag(holder);
            } else {
                holder = (ViewHolder) v.getTag();
            }
 
            holder.icon.setImageResource(ICONS[position].imgId);
            holder.text.setText(ICONS[position].text);
 
            return v;
        }
    }
}

For the sake of completeness, the map will be displayed using an activity using a WebView.

Map layout: res/layout/map.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">
 
    <WebView
       android:id="@+id/webview"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent" />
 
</LinearLayout>

Map Activity: src/org/agafix/metro/MapActivity.java

package org.agafix.metro;
 
import android.app.Activity;
import android.content.res.Configuration;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
 
public class MapActivity extends Activity {
 
    @Override
    public void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.map);
        WebView webview = (WebView) findViewById(R.id.webview);
 
        WebSettings settings = webview.getSettings();
        webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
        webview.setScrollbarFadingEnabled(true);
 
        settings.setJavaScriptEnabled(true);
        settings.setLoadWithOverviewMode(true);
        settings.setUseWideViewPort(true);
        settings.setBuiltInZoomControls(true);
 
        final String dim;
        if (getResources().getConfiguration().orientation
                == Configuration.ORIENTATION_PORTRAIT) {
            dim = "height";
        } else {
            dim = "width";
        }
 
        final String map = getIntent().getStringExtra(DashboardActivity.EXTRA_MAP);
        final String imgSrc = "<img src=\"" + map + "\" " + dim + "=\"100%\">";
        webview.loadDataWithBaseURL("file:///android_asset/", imgSrc,
                "text/html", "utf-8", null);
    }
 
}

Here are the results:

Portrait mode

Landscape mode

]]> http://agafix.org/android-how-to-make-a-dashboard-using-a-gridview/feed/ 3 WordPress CSS Sprites Generator For Posts Content http://agafix.org/wordpress-css-sprites-generator-for-posts-content/ http://agafix.org/wordpress-css-sprites-generator-for-posts-content/#comments Mon, 13 Feb 2012 12:49:26 +0000 Fayçal http://agafix.org/?p=1852 WordPress CSS Sprites Generator For Posts Content

Are you after reducing your server load and speeding up your web pages? You’ve heard of CSS sprites before but you don’t know how they can bring improvements in your situation?

Well, simply put, each image on a web page is a separate HTTP request to the server, and experience shows that you can dramatically increase the performance of a page by combining multiple images or icons into a larger image sprite sheet. CSS is finally used to select the parts of the composite image to display at different places in the page.

 WordPress CSS Sprites Generator For Posts Content

Download WordPress CSS Sprites Generator For Posts Content

 

Plugin Description

WordPress CSS Sprites Generator for posts content try to offer your pages this performance improvement by automatically creating for you corresponding CSS sprites for images in posts, pages and custom type posts which reduce by the way the amount of image files and then the amount of HTTP requests.

Family galleries, portfolios, news reports with a lot of small and medium photos, manual making of sprites for every post content can be a really tedious task. WordPress CSS Sprites Generator for posts content saves your bandwidth and provides an automated solution to replace all standard tag by the corresponding CSS sprites.

You can compare performance difference between those two pages having the same content with and without CSS Sprites:

Main Features:

  • Ready to use, global options are applied on existing and future posts/pages images
  • Customizing the number of images per sprite for every single post/page
  • Automation of the generated sprites quality compression for better optimization

WP CSS Sprites Generator for posts content is available in the following languages:

  • English
  • French

Requirements:

PHP5 and GD support turned on (which is already the case for 99,99% if you are dealing with images)

Limitations:

  • CSS Sprites generation WILL NOT WORK with PAGED galleries plugin, it’s not possible to automate this generation since every plugin handles the pagination on its own way

 

 

]]> http://agafix.org/wordpress-css-sprites-generator-for-posts-content/feed/ 0 Warm-up Lifts [Android App] http://agafix.org/warm-up-lifts-android-app/ http://agafix.org/warm-up-lifts-android-app/#comments Fri, 04 Nov 2011 22:56:27 +0000 Fahdos http://agafix.org/?p=1814 We proudly present you Taoufix’s first Android app: Warm-up Lifts for gym users.

Warm-up Lifts is a Weight calculator. By providing your target lifting weight and number of repetitions, this app helps you calculate your warm-up lifts weight and reps.

Warm-up Lifts - Android Market

Features:

  • Calculation based on target lifting weight and reps.
  • Rest timer.
  • Check boxes to track your warm-up lifts.
  • Metric/Imperial settings (kg/lbs).
  • Alarm Sound/Vibrate options.

Permissions:

VIBRATE: option to vibrate when the timer is up.
INTERNET,ACCESS_NETWORK_STATE: for ads.

Warm-up Lifts - Android Market

]]> http://agafix.org/warm-up-lifts-android-app/feed/ 0 WordPress Advanced Image Lazy Load http://agafix.org/wordpress-advanced-image-lazy-load/ http://agafix.org/wordpress-advanced-image-lazy-load/#comments Wed, 02 Nov 2011 20:41:12 +0000 Fayçal http://agafix.org/?p=1799 Your website has a lot of image intensive content and take up a lot of resources when loading up? Your boss and your clients consider the pages fluidity a serous matter?

With WP Image Lazy Load plugin, no more need to sacrifice your beautiful images quality!

WordPress Advanced Image Lazy Load

Family galleries, portfolios, news reports with a lot of photos. This plugin provides a better user experience by delaying the load of images in (especially long) web pages. Images outside of the visible portion of the page that the user is viewing wont be loaded before the user scrolls down to them.

Download WordPress Advanced Image Lazy Load

Main Features:

    • Ready to use, no action is needed for existing or future images on posts/pages
    • Improving images selection performance by customizing default selectors for several site sections
    • Cascading enabling/disabling levels :
      • Level 1 : Enable or disable for the whole website
      • Level 2 : Enable or disable for all posts and pages
      • Level 3 : Enable or disable for all images within a specific post or page
      • Level 4 : Enable or disable for a specific post’s or page’s image
    • Customizing the loading of images
    • Possibility to also hack theme images that are not part posts/pages to be lazy loaded

WP Advanced Image Lazy Load is available in the following languages:

      • English
      • French

Theme Hacks

The plugin does its magic for you when it comes to images within posts or pages. If you want to reuse the same mechanism for your own theme’s images that are not part of posts body:

      • Make sure your image belongs to the selector scope
      • Set the src attribute of the img tag with this function helper as value get_wp_lazy_loading_image()
      • Add a “is_lazy” attribute to the img tag
      • Add a “rel” attribute to the img tag with the the original image URI

Example

Instead of having:
< img src="< ? php bloginfo(‘template_directory’).get_post_meta($post->ID, "thumb", $single = true); ? > " alt="< ? php the_title(); ? > " / >

Use:
< img src="< ? php echo get_wp_lazy_loading_image(); ? > " is_lazy="true" rel="< ? php bloginfo(‘template_directory’).get_post_meta($post->ID, "thumb", $single = true); ? > " alt="< ? php the_title(); ? > " / >

Please feel free to contact me if you have any further questions.

]]> http://agafix.org/wordpress-advanced-image-lazy-load/feed/ 0 Show specific thumbnail while sharing on Google+ / Facebook http://agafix.org/show-specific-thumbnail-while-sharing-on-google-facebook/ http://agafix.org/show-specific-thumbnail-while-sharing-on-google-facebook/#comments Wed, 12 Oct 2011 22:09:12 +0000 Fahdos http://agafix.org/?p=1722 The problem while sharing an article on google+ or Facebook is, either they show irrelevant thumbnail or nothing at all. To prevent this, you can force the exact thumbnail to be displayed.
To do so, simply include an additional tag in the .

For Facebook

<meta name="og:image" content="http://www.example.com/image.jpg"/>

Update: thanks to ATJ

<meta property="og:image" content="http://www.example.com/image.jpg"/>

For Google+

<meta property="og:image" content="http://www.example.com/image.jpg"/>

Using Custom Fields ( WordPress )

<?php
            global $wp_query;
            $postid = $wp_query->post->ID;

 ?>
      <meta name="og:image" content="<?php echo get_post_meta($postid, ‘thumbnail’, true); ?>"/>
      <meta property="og:image" content="<?php echo get_post_meta($postid, ‘thumbnail’, true); ?>"/>

PS: where thumbnail is the custom fields’ key

^^ we’re not done yet, this snippet works only with single pages ( post page ), which means you’ll get an empty content=”" on the ( Frond page, archives.php …. ), to avoid this all you need to do is to use the is_single function.

Spicific thumbnail for spicific page types

<?php if (is_single()) { ?>
      <?php
            global $wp_query;
            $postid = $wp_query->post->ID;
      ?>
      <meta name="og:image" content="<?php echo get_post_meta($postid, ‘thumbnail’, true); ?>"/>
      <meta property="og:image" content="<?php echo get_post_meta($postid, ‘thumbnail’, true); ?>"/>
     
<?php } else {?>

      <meta name="og:image" content="http://www.example.com/image.jpg" />
      <meta property="og:image" content="http://www.example.com/image.jpg" />

<?php } ?>

Have Fun ^^

]]> http://agafix.org/show-specific-thumbnail-while-sharing-on-google-facebook/feed/ 1