<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Picasso</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A powerful image downloading and caching library for Android">
    <link href="static/bootstrap-combined.min.css" rel="stylesheet">
    <link href="static/app.css" rel="stylesheet">
    <link href="static/app-theme.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Roboto:400,300italic,100,100italic,300" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]><script src="static/html5shiv.min.js"></script><![endif]-->
  </head>
  <body data-target=".content-nav">
    <header>
      <div class="container">
        <div class="row">
          <div class="span5">
            <h1>Picasso</h1>
          </div>
          <div class="span7">
            <menu>
              <ul>
                <li><a href="#download" class="menu download">Download <span class="version-tag">Latest</span></a></li>
                <li><a href="http://github.com/square/picasso" data-title="View GitHub Project" class="menu github"><img src="static/icon-github.png" alt="GitHub"/></a></li>
                <li><a href="http://square.github.io/" data-title="Square Open Source Portal" class="menu square"><img src="static/icon-square.png" alt="Square"/></a></li>
              </ul>
            </menu>
          </div>
      </div>
    </header>
    <section id="subtitle">
      <div class="container">
        <div class="row">
          <div class="span12">
            <h2>A powerful <strong>image downloading</strong> and <strong>caching</strong> library for Android</h2>
          </div>
        </div>
      </div>
    </section>
    <section id="body">
      <div class="container">
        <div class="row">
          <div class="span9">
            <h3 id="introduction">Introduction</h3>
            <p>Images add much-needed context and visual flair to Android applications. Picasso allows for hassle-free image loading in your application&mdash;often in one line of code!</p>
            <pre class="prettyprint">Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);</pre>
            <p>Many common pitfalls of image loading on Android are handled automatically by Picasso:</p>
            <ul>
              <li>Handling <code>ImageView</code> recycling and download cancelation in an adapter.</li>
              <li>Complex image transformations with minimal memory use.</li>
              <li>Automatic memory and disk caching.</li>
            </ul>
            <p class="screenshot"><img src="static/sample.png" alt="Sample application screenshot."></p>

            <h3 id="features">Features</h3>

            <h4>Adapter Downloads</h4>
            <p>Adapter re-use is automatically detected and the previous download canceled.</p>
            <pre class="prettyprint">@Override public void getView(int position, View convertView, ViewGroup parent) {
  SquaredImageView view = (SquaredImageView) convertView;
  if (view == null) {
    view = new SquaredImageView(context);
  }
  String url = getItem(position);

  Picasso.with(context).load(url).into(view);
}</pre>

            <h4>Image Transformations</h4>
            <p>Transform images to better fit into layouts and to reduce memory size.</p>
            <pre class="prettyprint">Picasso.with(context)
  .load(url)
  .resize(50, 50)
  .centerCrop()
  .into(imageView)</pre>
            <p>You can also specify custom transformations for more advanced effects.</p>
            <pre class="prettyprint">public class CropSquareTransformation implements Transformation {
  @Override public Bitmap transform(Bitmap source) {
    int size = Math.min(source.getWidth(), source.getHeight());
    int x = (source.getWidth() - size) / 2;
    int y = (source.getHeight() - size) / 2;
    Bitmap result = Bitmap.createBitmap(source, x, y, size, size);
    if (result != source) {
      source.recycle();
    }
    return result;
  }

  @Override public String key() { return "square()"; }
}</pre>
            <p>Pass an instance of this class to the <code>transform</code> method.</p>

            <h4>Place Holders</h4>
            <p>Picasso supports both download and error placeholders as optional features.</p>
            <pre class-"prettyprint">Picasso.with(context)
    .load(url)
    .placeholder(R.drawable.user_placeholder)
    .error(R.drawable.user_placeholder_error)
    .into(imageView);</pre>
            <p>A request will be retried three times before the error placeholder is shown.</p>


            <h4>Resource Loading</h4>
            <p>Resources, assets, files, content providers are all supported as image sources.</p>
            <pre class="prettyprint">Picasso.with(context).load(R.drawable.landing_screen).into(imageView1);
Picasso.with(context).load("file:///android_asset/DvpvklR.png").into(imageView2);
Picasso.with(context).load(new File(...)).into(imageView3);</pre>

            <h4>Debug Indicators</h4>
            <p>For development you can enable the display of a colored ribbon which indicates the image source. Call <code>setIndicatorsEnabled(true)</code> on the Picasso instance.</p>
            <p class="screenshot"><img src="static/debug.png" alt="Debug ribbon indicators"></p>

            <h3 id="download">Download</h3>
            <p><a href="https://search.maven.org/remote_content?g=com.squareup.picasso&a=picasso&v=LATEST" class="dl version-href">&darr; <span class="version-tag">Latest</span> JAR</a></p>
            <p>The source code to the Picasso, its samples, and this website is <a href="http://github.com/square/picasso">available on GitHub</a>.</p>

            <h4>Maven</h4>
            <pre class="prettyprint">&lt;dependency>
  &lt;groupId>com.squareup.picasso&lt;/groupId>
  &lt;artifactId>picasso&lt;/artifactId>
  &lt;version><span class="version pln"><em>(insert latest version)</em></span>&lt;/version>
&lt;/dependency></pre>

            <h4>Gradle</h4>
            <pre class="prettyprint">compile 'com.squareup.picasso:picasso:<span class="version pln"><em>(insert latest version)</em></span>'</pre>

            <h3 id="contributing">Contributing</h3>
            <p>If you would like to contribute code you can do so through GitHub by forking the repository and sending a pull request.</p>
            <p>When submitting code, please make every effort to follow existing conventions and style in order to keep the code as readable as possible. Please also make sure your code compiles by running <code>mvn clean verify</code>.</p>
            <p>Before your code can be accepted into the project you must also sign the <a href="http://squ.re/sign-the-cla">Individual Contributor License Agreement (CLA)</a>.</p>

            <h3 id="license">License</h3>
            <pre>Copyright 2013 Square, Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.</pre>
          </div>
          <div class="span3">
            <div class="content-nav" data-spy="affix" data-offset-top="80">
              <ul class="nav nav-tabs nav-stacked primary">
                <li><a href="#introduction">Introduction</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#download">Download</a></li>
                <li><a href="#contributing">Contributing</a></li>
                <li><a href="#license">License</a></li>
              </ul>
              <ul class="nav nav-pills nav-stacked secondary">
                <li><a href="javadoc/index.html">Javadoc</a></li>
                <li><a href="http://stackoverflow.com/questions/tagged/picasso?sort=active">StackOverflow</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="span12 logo">
            <a href="https://squareup.com"><img src="static/logo-square.png" alt="Square, Inc."/></a>
          </div>
        </div>
      </div>
    </section>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="static/bootstrap.min.js"></script>
    <script src="static/jquery.smooth-scroll.min.js"></script>
    <script src="static/jquery-maven-artifact.min.js"></script>
    <script src="static/prettify.js"></script>
    <script type="text/javascript">
      $(function() {
        // Syntax highlight code blocks.
        prettyPrint();

        // Spy on scroll position for real-time updating of current section.
        $('body').scrollspy();

        // Use smooth-scroll for internal links.
        $('a').smoothScroll();

        // Enable tooltips on the header nav image items.
        $('.menu').tooltip({
          placement: 'bottom',
          trigger: 'hover',
          container: 'body',
          delay: {
            show: 500,
            hide: 0
          }
        });

        // Look up the latest version of the library.
        $.fn.artifactVersion('com.squareup.picasso', 'picasso', function(version, url) {
          $('.version').text(version);
          $('.version-tag').text('v' + version);
          $('.version-href').attr('href', url);
        });
      });
    </script>
  </body>
</html>
