15
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ImageViewを丸くする

Posted at

最近のアプリって、プロフィール画像が丸く表示されてることが多いですよね。
GoogleのMaterial Design GuideLineでも丸くなってるので、標準ライブラリとかコンポーネントが用意されているかと思いきや!無いんです。
◯くするのって需要あると思うんだけど。

ということで、色んな方法はあるけれど、ここでは2つ紹介します。

  • CircleImageViewライブラリを使う
  • Picassoのtransformで丸くする

CircleImageViewライブラリを使う

DataBindingを使いたいときは、レイアウトXMLで丸くなってくれてたらなーって思うこともあるでしょう。

このライブラリを使います。

  1. build.gradleに定義する
build.gradle
dependencies {
    ...
    compile 'de.hdodenhof:circleimageview:2.1.0'
}

2. レイアウトXMLに定義する

layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:src="@drawable/hoge" />

</RelativeLayout>

終わりです。
ImageViewを継承しているようですので、もし何かJavaで制御したい場合はImageViewと同じように扱えば大丈夫です。

Picassoのtransformで丸くする

これを持ってきたら利用可能です。

レイアウトXMLでは普通にImageViewを設置しましょう。

layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

あとはPicassoのtransformで指定したら丸くなります。

MainActivity.java
Picasso.with(context).load(url)
                .transform(new CircleTransform()).into(imageView);

以上

15
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?