Androidスタジオでカスタム画像ボタンを作成する方法は？

Question

アンドロイドスタジオにこのような画像ボタンを作成するにはどうすればいいですか？依存関係が必要ですか？または他の方法がありますか？あなたはcardviewとリサイクルビューを使用する必要が

Answer 1

それはさまざまな方法で行うことができます。そのレイアウトはレイアウトのカスタマイズ方法によって異なります。あなたは

2 - ... 1つのイメージ図と内部の1つのTextViewと白い背景でリニアレイアウト

の1- ....によってイメージビューとテキストビューでフレームレイアウトを使用していることを行うことができます。

3 - あなたのイメージのビューはcardviewsとリサイクル図です。リサイクルやカードを使用するために、あなたは、デザインの依存関係をサポートする必要があります..あなたは、このリンクをたどることができます詳しくは

// RecyclerView 
compile 'com.android.support:recyclerview-v7:23.3.+' 

// CardView 
compile 'com.android.support:cardview-v7:23.3.+' 

が...このチュートリアルでは、あなたのイメージと同じである

• Android working with Card View and Recycler View

• Android simple RecyclerView and CardView

• ANDROID RECYCLERVIEW AND CARDVIEW IN MATERIAL DESIGN TUTORIAL

Answer 2

。

build.gradleと同期プロジェクトでCardView依存性を追加し、あなたのアプリにCardViewを使用します。その後

dependencies { 
    compile fileTree(dir: 'libs', include: ['*.jar']) 
    testCompile 'junit:junit:4.12' 
    compile 'com.android.support:appcompat-v7:23.3.0' 
    compile 'com.android.support:design:23.3.0' 
    // RecyclerView 
    compile 'com.android.support:recyclerview-v7:23.3.+' 
    // CardView 
    compile 'com.android.support:cardview-v7:23.3.+' 
    // Glide 
    compile 'com.github.bumptech.glide:glide:3.7.0' 
} 

あなたは、XMLカードビュー

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <android.support.v7.widget.CardView 
     android:id="@+id/card_view" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_gravity="center" 
     android:layout_margin="@dimen/card_margin" 
     android:elevation="3dp" 
     card_view:cardCornerRadius="@dimen/card_album_radius"> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

      <ImageView 
       android:id="@+id/thumbnail" 
       android:layout_width="match_parent" 
       android:layout_height="@dimen/album_cover_height" 
       android:background="?attr/selectableItemBackgroundBorderless" 
       android:clickable="true" 
       android:scaleType="fitXY" /> 

      <TextView 
       android:id="@+id/title" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_below="@id/thumbnail" 
       android:paddingLeft="@dimen/album_title_padding" 
       android:paddingRight="@dimen/album_title_padding" 
       android:paddingTop="@dimen/album_title_padding" 
       android:textColor="@color/album_title" 
       android:textSize="@dimen/album_title" /> 

      <TextView 
       android:id="@+id/count" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_below="@id/title" 
       android:paddingBottom="@dimen/songs_count_padding_bottom" 
       android:paddingLeft="@dimen/album_title_padding" 
       android:paddingRight="@dimen/album_title_padding" 
       android:textSize="@dimen/songs_count" /> 

      <ImageView 
       android:id="@+id/overflow" 
       android:layout_width="@dimen/ic_album_overflow_width" 
       android:layout_height="@dimen/ic_album_overflow_height" 
       android:layout_alignParentRight="true" 
       android:layout_below="@id/thumbnail" 
       android:layout_marginTop="@dimen/ic_album_overflow_margin_top" 
       android:scaleType="centerCrop" 
       android:src="@drawable/ic_dots" /> 

     </RelativeLayout> 

    </android.support.v7.widget.CardView> 

</LinearLayout> 

を作成する次に、あなたがその

public class AlbumsAdapter extends RecyclerView.Adapter<AlbumsAdapter.MyViewHolder> { 

    private Context mContext; 
    private List<Album> albumList; 

    public class MyViewHolder extends RecyclerView.ViewHolder { 
     public TextView title, count; 
     public ImageView thumbnail, overflow; 

     public MyViewHolder(View view) { 
      super(view); 
      title = (TextView) view.findViewById(R.id.title); 
      count = (TextView) view.findViewById(R.id.count); 
      thumbnail = (ImageView) view.findViewById(R.id.thumbnail); 
      overflow = (ImageView) view.findViewById(R.id.overflow); 
     } 
    } 


    public AlbumsAdapter(Context mContext, List<Album> albumList) { 
     this.mContext = mContext; 
     this.albumList = albumList; 
    } 

    @Override 
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
     View itemView = LayoutInflater.from(parent.getContext()) 
       .inflate(R.layout.album_card, parent, false); 

     return new MyViewHolder(itemView); 
    } 

    @Override 
    public void onBindViewHolder(final MyViewHolder holder, int position) { 
     Album album = albumList.get(position); 
     holder.title.setText(album.getName()); 
     holder.count.setText(album.getNumOfSongs() + " songs"); 

     // loading album cover using Glide library 
     Glide.with(mContext).load(album.getThumbnail()).into(holder.thumbnail); 

     holder.overflow.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 
       showPopupMenu(holder.overflow); 
      } 
     }); 
    } 

    /** 
    * Showing popup menu when tapping on 3 dots 
    */ 
    private void showPopupMenu(View view) { 
     // inflate menu 
     PopupMenu popup = new PopupMenu(mContext, view); 
     MenuInflater inflater = popup.getMenuInflater(); 
     inflater.inflate(R.menu.menu_album, popup.getMenu()); 
     popup.setOnMenuItemClickListener(new MyMenuItemClickListener()); 
     popup.show(); 
    } 

    /** 
    * Click listener for popup menu items 
    */ 
    class MyMenuItemClickListener implements PopupMenu.OnMenuItemClickListener { 

     public MyMenuItemClickListener() { 
     } 

     @Override 
     public boolean onMenuItemClick(MenuItem menuItem) { 
      switch (menuItem.getItemId()) { 
       case R.id.action_add_favourite: 
        Toast.makeText(mContext, "Add to favourite", Toast.LENGTH_SHORT).show(); 
        return true; 
       case R.id.action_play_next: 
        Toast.makeText(mContext, "Play next", Toast.LENGTH_SHORT).show(); 
        return true; 
       default: 
      } 
      return false; 
     } 
    } 

    @Override 
    public int getItemCount() { 
     return albumList.size(); 
    } 
} 

用のアダプタを作成することができ、これは、活動main.xml

です

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@android:color/white" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/detail_backdrop_height" 
     android:fitsSystemWindows="true" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleMarginEnd="64dp" 
      app:expandedTitleMarginStart="48dp" 
      app:expandedTitleTextAppearance="@android:color/transparent" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <RelativeLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"> 

       <ImageView 
        android:id="@+id/backdrop" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:fitsSystemWindows="true" 
        android:scaleType="centerCrop" 
        app:layout_collapseMode="parallax" /> 

       <LinearLayout 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_centerInParent="true" 
        android:gravity="center_horizontal" 
        android:orientation="vertical"> 

        <TextView 
         android:id="@+id/love_music" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:text="@string/backdrop_title" 
         android:textColor="@android:color/white" 
         android:textSize="@dimen/backdrop_title" /> 

        <TextView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:text="@string/backdrop_subtitle" 
         android:textColor="@android:color/white" 
         android:textSize="@dimen/backdrop_subtitle" /> 

       </LinearLayout> 
      </RelativeLayout> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 

     </android.support.design.widget.CollapsingToolbarLayout> 

    </android.support.design.widget.AppBarLayout> 

    <include layout="@layout/content_main" /> 

</android.support.design.widget.CoordinatorLayout> 

これは、それが最終的にMainActivityを書く

public class MainActivity extends AppCompatActivity { 

    private RecyclerView recyclerView; 
    private AlbumsAdapter adapter; 
    private List<Album> albumList; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
     setSupportActionBar(toolbar); 

     initCollapsingToolbar(); 

     recyclerView = (RecyclerView) findViewById(R.id.recycler_view); 

     albumList = new ArrayList<>(); 
     adapter = new AlbumsAdapter(this, albumList); 

     RecyclerView.LayoutManager mLayoutManager = new GridLayoutManager(this, 2); 
     recyclerView.setLayoutManager(mLayoutManager); 
     recyclerView.addItemDecoration(new GridSpacingItemDecoration(2, dpToPx(10), true)); 
     recyclerView.setItemAnimator(new DefaultItemAnimator()); 
     recyclerView.setAdapter(adapter); 

     prepareAlbums(); 

     try { 
      Glide.with(this).load(R.drawable.cover).into((ImageView) findViewById(R.id.backdrop)); 
     } catch (Exception e) { 
      e.printStackTrace(); 
     } 
    } 

    /** 
    * Initializing collapsing toolbar 
    * Will show and hide the toolbar title on scroll 
    */ 
    private void initCollapsingToolbar() { 
     final CollapsingToolbarLayout collapsingToolbar = 
       (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); 
     collapsingToolbar.setTitle(" "); 
     AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar); 
     appBarLayout.setExpanded(true); 

     // hiding & showing the title when toolbar expanded & collapsed 
     appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { 
      boolean isShow = false; 
      int scrollRange = -1; 

      @Override 
      public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 
       if (scrollRange == -1) { 
        scrollRange = appBarLayout.getTotalScrollRange(); 
       } 
       if (scrollRange + verticalOffset == 0) { 
        collapsingToolbar.setTitle(getString(R.string.app_name)); 
        isShow = true; 
       } else if (isShow) { 
        collapsingToolbar.setTitle(" "); 
        isShow = false; 
       } 
      } 
     }); 
    } 

    /** 
    * Adding few albums for testing 
    */ 
    private void prepareAlbums() { 
     int[] covers = new int[]{ 
       R.drawable.album1, 
       R.drawable.album2, 
       R.drawable.album3, 
       R.drawable.album4, 
       R.drawable.album5, 
       R.drawable.album6, 
       R.drawable.album7, 
       R.drawable.album8, 
       R.drawable.album9, 
       R.drawable.album10, 
       R.drawable.album11}; 

     Album a = new Album("True Romance", 13, covers[0]); 
     albumList.add(a); 

     a = new Album("Xscpae", 8, covers[1]); 
     albumList.add(a); 

     a = new Album("Maroon 5", 11, covers[2]); 
     albumList.add(a); 

     a = new Album("Born to Die", 12, covers[3]); 
     albumList.add(a); 

     a = new Album("Honeymoon", 14, covers[4]); 
     albumList.add(a); 

     a = new Album("I Need a Doctor", 1, covers[5]); 
     albumList.add(a); 

     a = new Album("Loud", 11, covers[6]); 
     albumList.add(a); 

     a = new Album("Legend", 14, covers[7]); 
     albumList.add(a); 

     a = new Album("Hello", 11, covers[8]); 
     albumList.add(a); 

     a = new Album("Greatest Hits", 17, covers[9]); 
     albumList.add(a); 

     adapter.notifyDataSetChanged(); 
    } 

    /** 
    * RecyclerView item decoration - give equal margin around grid item 
    */ 
    public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration { 

     private int spanCount; 
     private int spacing; 
     private boolean includeEdge; 

     public GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge) { 
      this.spanCount = spanCount; 
      this.spacing = spacing; 
      this.includeEdge = includeEdge; 
     } 

     @Override 
     public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { 
      int position = parent.getChildAdapterPosition(view); // item position 
      int column = position % spanCount; // item column 

      if (includeEdge) { 
       outRect.left = spacing - column * spacing/spanCount; // spacing - column * ((1f/spanCount) * spacing) 
       outRect.right = (column + 1) * spacing/spanCount; // (column + 1) * ((1f/spanCount) * spacing) 

       if (position < spanCount) { // top edge 
        outRect.top = spacing; 
       } 
       outRect.bottom = spacing; // item bottom 
      } else { 
       outRect.left = column * spacing/spanCount; // column * ((1f/spanCount) * spacing) 
       outRect.right = spacing - (column + 1) * spacing/spanCount; // spacing - (column + 1) * ((1f/ spanCount) * spacing) 
       if (position >= spanCount) { 
        outRect.top = spacing; // item top 
       } 
      } 
     } 
    } 

    /** 
    * Converting dp to pixel 
    */ 
    private int dpToPx(int dp) { 
     Resources r = getResources(); 
     return Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics())); 
    } 
} 

後あなたもこのlinkを参照することができcontent_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/viewBg" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:context="info.androidhive.cardview.MainActivity" 
    tools:showIn="@layout/activity_main"> 

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/recycler_view" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:clipToPadding="false" 
     android:scrollbars="vertical" /> 

</RelativeLayout> 

です。