How do I add a icons (like search, heart, options) to the top of my android cardviews, like in image?



I've wrote a small application, which shows several android cards each with coloured headers.


I'd like to be able to add icons to the top right of each card, like in the image belo So far although I've found screenshots like the below suggesting that it is possible. I haven't found any information online how to do this. So some help would be fantastic :-)


enter image description here


My code so far is below:


CardAdapter.java



public class CardAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> {

public List<TTItem> posts = new ArrayList<>();

public void addItems(List<TTItem> items) {
posts.addAll(items);
notifyDataSetChanged();
}

public void clear() {
posts.clear();
notifyDataSetChanged();
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
Context context = parent.getContext();
View view = View.inflate(context, R.layout.item_cardview, null);
return new ViewHolder(view);
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.mTextView.setText(posts.get(position).title);
Picasso.with(holder.mImageView.getContext()).load(posts.get(position).images[0]).into(holder.mImageView);
}

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

static class ViewHolder extends RecyclerView.ViewHolder {
public TextView mTextView;
public ImageView mImageView;

public ViewHolder(View view) {
super(view);
mTextView = (TextView) view.findViewById(R.id.textview);
mImageView = (ImageView) view.findViewById(R.id.imageView);
}
}
}


MainActivity.java



public class MainActivity extends ActionBarActivity implements SwipeRefreshLayout.OnRefreshListener {
@InjectView(R.id.mainView)
RecyclerView mRecyclerView;
@InjectView(R.id.refreshContainer)
SwipeRefreshLayout refreshLayout;
private LinearLayoutManager mLayoutManager;
private CardAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.inject(this);
mRecyclerView.setHasFixedSize(true);
refreshLayout.setOnRefreshListener(this);
TypedValue tv = new TypedValue();
int actionBarHeight = 0;
if (getTheme().resolveAttribute(R.attr.actionBarSize, tv, true)) {
actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
}
refreshLayout.setProgressViewEndTarget(true, actionBarHeight);
mAdapter = new CardAdapter();
mRecyclerView.setAdapter(mAdapter);
// use a linear layout manager
mLayoutManager = new GridLayoutManager(this, 1);
mRecyclerView.setLayoutManager(mLayoutManager);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
return super.onOptionsItemSelected(item);
}
@Override
public void onRefresh() {
mAdapter.clear();
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
public void run() {
refreshLayout.setRefreshing(false);
}
}, 2500);
}
}


Activity_main.xml



<LinearLayout xmlns:android="http://ift.tt/nIICcg"
xmlns:tools="http://ift.tt/LrGmb4"
android:layout_width="match_parent"
xmlns:app="http://ift.tt/GEGVYd"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">



<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/refreshContainer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/mainView"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>


</LinearLayout>


item_cardview.xml:



<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://ift.tt/nIICcg"
xmlns:app="http://ift.tt/GEGVYd"
xmlns:card_view="http://ift.tt/GEGVYd"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardElevation="8dp"
card_view:cardCornerRadius="2dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<LinearLayout <!-- This is the specific part you asked to color -->
android:id="@+id/heading_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/teal_500"
android:padding="36dp"
android:orientation="vertical">

<TextView
android:id="@+id/tv_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="22 mins to Ancona"
android:textColor="@color/white"
android:textStyle="bold"
android:textSize="36sp" />

<TextView
android:id="@+id/tv_subheading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_below="@+id/tv_heading"
android:text="Light traffic on ss16"
android:textColor="@color/teal_200"
android:textSize="24sp" />

</LinearLayout>

<ImageView
android:id="@+id/iv_map"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="Assigned delivery boy"
android:scaleType="fitXY"
android:src="@drawable/bg_map" />

<TextView
android:id="@+id/tv_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_below="@+id/tv_heading"
android:text="It is just an example!"
android:textColor="@color/grey_500"
android:textStyle="bold"
android:textSize="24sp" />

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

No comments:

Post a Comment