イメージボタンを円形にする方法、イメージが表示され、イメージの周りに境界線が表示されます

Question

イメージボタンを円形にしてサークルの内側にイメージを作成する方法を探しています表示されます。しかし、私は何か役立つ情報源を見つけることができませんでした。私はわずか24時間しか持っていません。私のクライアントはそれをチェックします。

私の目的はイメージボタン（黒い色の円、下の図を参照してください）とイメージを作成することです。ここで

私のXMLの一部である...のImageButtonがここに

<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:background="@drawable/backg" android:orientation="vertical" android:weightSum="10" tools:context="sudhirpradhan.example.com.clientpptapp.mainIconFragment"> <LinearLayout android:layout_width="match_parent" android:orientation="vertical" android:layout_height="0dp" android:layout_weight="5" /> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:orientation="horizontal" android:layout_weight="4.5"> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> <!--here is my imageButton need to be look like a circle and within that circle ,a picture will be shown .............. --> <ImageButton android:id="@+id/imageButton" android:layout_width="0dp" android:padding="10dp" android:scaleType="fitCenter" android:layout_height="match_parent" android:layout_gravity="center_horizontal" android:layout_weight="3" android:background="@drawable/roundbutton" android:src="@drawable/frontbutton" /> <!-- ..........................................................--> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:orientation="vertical" android:layout_height="0dp" android:layout_weight="0.5" /> </LinearLayout> 

2つのコメント行との間にあるroundbutton /描画可能なXML @

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <gradient android:startColor="#50d050" 
     android:endColor="#008000" 
     android:angle="270"/> 
    <stroke android:width="5px" 
     android:color="#000000"/> 

</shape> 

です：下の画像を参照してください。

どのように実装することができますか。何か提案していただきありがとうございます。

Answer 1

NEW EDITION

私はあなたが私は（再編集）ここにあなたのために私が持っているソリューションを提供します必要なものの良いアイデアを持って、あなたのコメントを1として。

まず私はこのようなImageViewの拡張：

public class CircleImageView extends AppCompatImageView { 


    private int borderColor; 
    private float borderWidth; 



    public CircleImageView(Context context) { 
     super(context); 
    } 

    public CircleImageView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     parseAttributes(attrs); 
    } 

    public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
     parseAttributes(attrs); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 

     Drawable drawable = getDrawable(); 

     if (drawable == null) { 
      return; 
     } 

     if (getWidth() == 0 || getHeight() == 0) { 
      return; 
     } 
     Bitmap b = ((BitmapDrawable) drawable).getBitmap(); 
     if(b == null || b.isRecycled()) 
      return; 
     Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true); 

     int w = getWidth(), h = getHeight(); 
     int imgRadius = w - 2 * (int)this.borderWidth; 

     final Paint paint = new Paint(); 
     paint.setAntiAlias(true); 
     paint.setColor(this.borderColor); 
     canvas.drawCircle(this.getWidth()/2, 
       this.getHeight()/2, 
       this.getWidth()/2, paint); 
     Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, imgRadius); 
     canvas.drawBitmap(roundBitmap, this.borderWidth, this.borderWidth, null); 

    } 

    public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) { 
     Bitmap finalBitmap; 
     if (bitmap.getWidth() != radius || bitmap.getHeight() != radius) 
      finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius, 
        false); 
     else 
      finalBitmap = bitmap; 
     Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(), 
       finalBitmap.getHeight(), Bitmap.Config.ARGB_8888); 
     Canvas canvas = new Canvas(output); 

     final Paint paint = new Paint(); 
     final Rect rect = new Rect(0, 0, finalBitmap.getWidth(), 
       finalBitmap.getHeight()); 

     paint.setAntiAlias(true); 
     paint.setFilterBitmap(true); 
     paint.setDither(true); 
     canvas.drawARGB(0, 0, 0, 0); 
     paint.setColor(Color.parseColor("#BAB399")); 
     canvas.drawCircle(
       finalBitmap.getWidth()/2, 
       finalBitmap.getHeight()/2, 
       finalBitmap.getWidth()/2, 
       paint); 
     paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); 
     canvas.drawBitmap(finalBitmap, rect, rect, paint); 
     return output; 
    } 


    private void parseAttributes(AttributeSet attrs){ 
     TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.CircleImageView); 

     this.borderColor = ta.getColor(R.styleable.CircleImageView_border_color, 0xffffff); // default color white 
     this.borderWidth = ta.getDimension(R.styleable.CircleImageView_border_width, 1.0f); 
    } 

} 

をその後、我々は、RES /値/ attrs.xmlに置き、BORDERCOLORおよびborderWidthのためのいくつかのstyleable属性を設定する必要があります。

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <declare-styleable name="CircleImageView"> 
     <attr name="border_color" format="color" /> 
     <attr name="border_width" format="dimension" /> 
    </declare-styleable> 
</resources> 

レイアウトに含めることができます：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       xmlns:tools="http://schemas.android.com/tools" 
       xmlns:app="http://schemas.android.com/apk/res-auto" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:orientation="vertical" 
       android:weightSum="10" 
       tools:context=".MainActivity"> 


    <LinearLayout 
     android:layout_width="match_parent" 
     android:orientation="vertical" 
     android:layout_height="0dp" 
     android:layout_weight="5" /> 


    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:orientation="horizontal" 
     android:layout_weight="4.5"> 

     <TextView 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" /> 

     <!--here is my imageButton need to be look like a circle and within that circle ,a picture will be shown .............. --> 

     <com.mucodes.roundbuttonexample.CircleImageView 
      android:layout_width="200dp" 
      android:layout_height="200dp" 
      app:border_color="#ffff0000" 
      app:border_width="7dp" 
      android:src="@drawable/random"/> 

     <!-- ..........................................................--> 



     <TextView 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:orientation="vertical" 
     android:layout_height="0dp" 
     android:layout_weight="0.5" /> 

</LinearLayout> 

クリックしたときにボタンのようにCircleImageViewを動作させるには、setOnClickListenerメソッドを使用します。ここで

は、結果のビデオです：example of using

希望は今、これは何が必要です。

Answer 2

申し訳ありませんが、評判のためにコメントすることはできません。

fancy buttons libraryをご覧ください。 ここでは、ボタン、背景色、画像などに半径を設定できます。 サードパーティライブラリを使用できない場合は、ライブラリのソースコードを確認してください。