Material design stepper control - android

Could someone give me an idea how to begin implementing vertical, non-linear stepper control described in the Android Material Design guide here:
http://www.google.com/design/spec/components/steppers.html

you can check this library , however this is still in development.
just extend the mobileStepperSimple class and implement the methods init,onFinished.
you can add the steppers as fragments by extending the stepperFragment and implement onNextButtonHandler to handle next button click.
check the demo for more usage.
any contributions and optimization will be helpful.

Well not exactly the same but as per my requirement, I developed custom VERTICAL STEPPER.
Below is the source code of whole demo.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"/>
</LinearLayout>
Single Item for List(Design your single item of your stepper in raw.xml file)
raw.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_upper_line"
android:layout_width="wrap_content"
android:layout_height="20dp"
app:srcCompat="#drawable/order_status_line" />
<ImageView
android:id="#+id/iv_circle"
android:layout_width="30dp"
android:layout_height="30dp"
app:srcCompat="#drawable/circle_o" />
<ImageView
android:id="#+id/iv_lower_line"
android:layout_width="wrap_content"
android:layout_height="20dp"
app:srcCompat="#drawable/order_status_line" />
</LinearLayout>
<LinearLayout
android:id="#+id/ly_status"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tv_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Order Rcived"
android:layout_gravity="left"
android:textSize="18sp"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/ly_orderstatus_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|top"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageview"
android:layout_width="20dp"
android:layout_height="20dp"
app:srcCompat="#drawable/ic_restore_black" />
<TextView
android:id="#+id/tv_orderstatus_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|top"
android:text="8:30am,Jan 31,2018"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
MainActivity
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
orderStatusList();
}
private void orderStatusList() {
ArrayList<OrderStatusModel> arrayOfStatus =OrderStatusModel.getStoreDetail();
OrderStatusAdapter adapter = new OrderStatusAdapter(this, arrayOfStatus);
ListView listView = (ListView) findViewById(R.id.list);
listView.setAdapter(adapter);
}
Adapter Class
class OrderStatusAdapter extends ArrayAdapter<OrderStatusModel> {
Context context;
ArrayList<OrderStatusModel> order_status;
boolean isOn = false;
public OrderStatusAdapter(Contextcontext,ArrayList<OrderStatusModel>order_status{super(context, 0, order_status);
this.context = context;
this.order_status = order_status;
}
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
// Check if an existing view is being reused, otherwise inflate the view if(convertView==null)convertView=LayoutInflater.from(getContext()).inflate(R.layout.raw,parent,false);
}
// Get the data item for this position
OrderStatusModel order_status_data = getItem(position);
// Lookup view for data population
ImageView iv_upper_line = (ImageView)
convertView.findViewById(R.id.iv_upper_line);
ImageView iv_lower_line =(ImageView)
convertView.findViewById(R.id.iv_lower_line);
final ImageView iv_circle = (ImageView) convertView.findViewById(R.id.iv_circle);
TextView tv_status = (TextView) convertView.findViewById(R.id.tv_status);
TextView tv_orderstatus_time =(TextView)
convertView.findViewById(R.id.tv_orderstatus_time);
LinearLayout ly_orderstatus_time = (LinearLayout)
convertView.findViewById(R.id.ly_orderstatus_time);
LinearLayout ly_status = (LinearLayout) convertView.findViewById(R.id.ly_status);
// Populate the data into the template view using the data object
tv_status.setText(order_status_data.getTv_status());
tv_orderstatus_time.setText(order_status_data.getTv_orderstatus_time());
if(position == 0){
iv_upper_line.setVisibility(View.INVISIBLE);
}
else if (position == order_status.size()-1){
iv_lower_line.setVisibility(View.INVISIBLE);
ly_orderstatus_time.setVisibility(View.GONE);
}
convertView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
iv_circle.setBackgroundResource(R.drawable.bullseye);
Toast.makeText(context, "You Clicked at
item"position,Toast.LENGTH_SHORT).show();
}
});
// Return the completed view to render on screen
return convertView;
}
}
Model Class
private String tv_status;
private String tv_orderstatus_time;
public OrderStatusModel(String tv_status, String tv_orderstatus_time) {
this.tv_status = tv_status;
this.tv_orderstatus_time = tv_orderstatus_time;
}
public String getTv_status() {
return tv_status;
}
public void setTv_status(String tv_status) {
this.tv_status = tv_status;
}
public String getTv_orderstatus_time() {
return tv_orderstatus_time;
}
public void setTv_orderstatus_time(String tv_orderstatus_time) {
this.tv_orderstatus_time = tv_orderstatus_time;
}
public static ArrayList<OrderStatusModel> getStoreDetail() {
ArrayList<OrderStatusModel> status = new ArrayList<OrderStatusModel>();
status.add(new OrderStatusModel("Order Rcived", "8:30am,Jan 31,2018"));
status.add(new OrderStatusModel("On The Way", "10:30am,Jan 31,2018"));
status.add(new OrderStatusModel("Delivered", "aaaaaa"));
return status;
}

Because no Support Library solution exists (still) I have tried several of these libraries in a recent project. My favourite (for appearance, smoothness and functionality) was This Project by "ernestoyaquello". I also added some options to it on My Fork.
The only thing to note with this, is that it does not use an 'adapter' class but instead uses a callback interface.
Demo Screen from Git:

Related

How to set id for each item in a view dynamically?

I am new in android and tried to learn how to make an add button which add Views in a certain view dynamically when clicked. But i meet the problem that not sure how to set id for each item in the layout which i want to insert into another view.
Here is the main_view:
<?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:orientation="horizontal"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/container_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<Button
android:id="#+id/add_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/container_layout"
android:text="add"
/>
</RelativeLayout>
Here is my code:
public class MainActivity extends AppCompatActivity {
public int index_num;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button add_button = findViewById(R.id.add_button);
final LayoutInflater layoutInflater = getLayoutInflater();
final ViewGroup insertPoint = findViewById(R.id.container_layout);
index_num = 0;
add_button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
View new_view = layoutInflater.inflate(R.layout.new_layout,insertPoint, false);
insertPoint.addView(new_view);
index_num++;
}
});
}
}
And here is the layout which i want to insert the main view which includes 3 Edittext:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number"/>
</LinearLayout>
Can someone teach me how to set different id for the three edittext when i pressed the add button?
As #Rasoul Miri said, you can use View.generateViewId() to set id for newly inserted views, and you should use a list to record them. And also you should set the id for those three items.
like these:
for the inserted view
<EditText
android:id="#+id/one_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number"/>
<EditText
android:id="#+id/two_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number"/>
<EditText
android:id="#+id/three_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number"/>
for the MainActivity
public ArrayList<InsertedView> list;
public void addView() {
View new_view = layoutInflater.inflate(R.layout.new_layout,insertPoint, false);
insertPoint.addView(new_view);
index_num++;
InsertedView insertedView = new InsertedView(View.generateViewId(), View.generateViewId(), View.generateViewId());
new_view.findViewById(R.id.one_view).setId(insertedView.firstId);
new_view.findViewById(R.id.two_view).setId(insertedView.secondId);
new_view.findViewById(R.id.three_view).setId(insertedView.thirdId);
list.add(insertedView);
}
class InsertedView {
public int firstId;
public int secondId;
public int thirdId;
public InsertedView(int one, int two, int three) {
firstId = one;
secondId = two;
thirdId = three;
}
}
you can use these ways
use View
view.setId(View.generateViewId());
use ViewCompat
ViewCompat.generateViewId()
use ConstraintLayout
ConstraintLayout.generateViewId()

How to change the indicator color every different cardview?

I create a cardview design with indicator in the left (Red, Green) but i have problem, how can i change the indicator color depends on the status from database. If the status say "No" then the indicator turn red and if "Yes" the indicator turn green.
This is the xml file :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView 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"
card_view:cardCornerRadius="6dp"
card_view:cardElevation="3dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.9">
<ImageView
android:layout_marginLeft="22dp"
android:layout_marginTop="14dp"
android:layout_marginBottom="14dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rectangle"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_card_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="#+id/txt_order_date"
android:textSize="13sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/txt_customer_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/txt_order_number"
android:textSize="12sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/txt_product_status"
android:textSize="12sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/txt_notes"
android:textSize="12sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="false"
android:layout_weight="1"
android:maxLines="4"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#drawable/layout_bg"
android:descendantFocusability="blocksDescendants"
android:orientation="horizontal"
android:layout_below="#+id/layout_card_item"
android:gravity="center"
android:weightSum="1">
<Button
android:id="#+id/download_pdf"
android:textSize="14sp"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:background="#e1e3e8"
android:focusable="false"
android:textColor="#000307"
android:focusableInTouchMode="true"
android:drawableLeft="#drawable/ic_pictogram_download_orange"
android:text=" Download PDF"
/>
<!--<ImageButton-->
<!--android:layout_width="10dp"-->
<!--android:layout_height="10dp"-->
<!--android:src="#mipmap/ic_order_download_pdf"/>-->
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
This is the adapter :
public class OrderListAdapter extends RecyclerView.Adapter<OrderListAdapter.OrderListViewHolder> {
private ArrayList<OrderListModel> itemOrderList;
public OrderListAdapter(ArrayList<OrderListModel> itemOrderList) {
this.itemOrderList = itemOrderList;
}
#Override
public OrderListViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
View view = layoutInflater.inflate(R.layout.order_list_item, parent, false);
return new OrderListViewHolder(view);
}
#Override
public void onBindViewHolder(OrderListViewHolder orderListViewHolder, int position) {
orderListViewHolder.txtDate.setText(itemOrderList.get(position).getDate());
orderListViewHolder.txtOrderNumber.setText(itemOrderList.get(position).getOrderNumber());
orderListViewHolder.txtCustomerName.setText(itemOrderList.get(position).getCustomerName());
orderListViewHolder.txtProductStatus.setText(itemOrderList.get(position).getProductStatus());
orderListViewHolder.txtNotes.setText(itemOrderList.get(position).getNotes());
}
#Override
public int getItemCount() {
return (itemOrderList != null) ? itemOrderList.size() : 0;
// return itemOrderList.size();
}
public class OrderListViewHolder extends RecyclerView.ViewHolder{
private TextView txtDate, txtOrderNumber, txtCustomerName, txtProductStatus,
txtNotes;
public OrderListViewHolder(View itemView) {
super(itemView);
txtDate = (TextView) itemView.findViewById(R.id.txt_order_date);
txtOrderNumber = (TextView) itemView.findViewById(R.id.txt_order_number);
txtCustomerName = (TextView) itemView.findViewById(R.id.txt_customer_name);
txtProductStatus = (TextView) itemView.findViewById(R.id.txt_product_status);
txtNotes = (TextView) itemView.findViewById(R.id.txt_notes);
}
}
}
This is the main :
public class OrderListFragment extends Fragment {
private RecyclerView recyclerView;
private OrderListAdapter adapter;
private ArrayList<OrderListModel> OrderListArrayList;
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_order_list, container, false);
getActivity().setTitle(R.string.title_mn_order_list);
addData();
recyclerView = (RecyclerView) view.findViewById(R.id.orderList_recycler_view);
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this.getActivity());
recyclerView.setLayoutManager(layoutManager);
adapter = new OrderListAdapter(OrderListArrayList);
recyclerView.setAdapter(adapter);
return view;
}
void addData(){
OrderListArrayList = new ArrayList<>();
OrderListArrayList.add(new OrderListModel(
"4 Juli 2018 10:54",
"0001",
"Jopa",
"No",
"Notes"));
OrderListArrayList.add(new OrderListModel(
"4 Juli 2018 10:54",
"0001",
"Jopa",
"Yes",
"Notes"));
}
}
Do you have any idea how can i change it?
You must give an id to your ImageView say status
In OrderListViewHolder add in your declarations private ImageView status;
In OrderListViewHolder add status = (ImageView) itemView.findViewById(R.id.status);
In OrderListViewHolder add
if (itemOrderList.get(position).getStatus().equals("Yes")) {
orderListViewHolder.status.setBackgroundColor(0x00ff00);
} else {
orderListViewHolder.status.setBackgroundColor(0xff0000); }
of course you must create the getStatus() method like all the others getSomething()
Assuming, that your ImageView is your indicator bar:
<ImageView
android:id="#+id/ivIndicator" <!-- Add this id -->
android:layout_marginLeft="22dp"
android:layout_marginTop="14dp"
android:layout_marginBottom="14dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rectangle"/>
Get a reference to it in your OrderListViewHolder:
ivIndicator = (ImageView) itemView.findViewById(R.id.ivIndicator);
And then tint your imageview in onBindViewHolder:
if("Yes".equals(itemOrderList.get(position).getStatus())) {
orderListViewHolder.ivIndicator.setColorFilter(ContextCompat.getColor(activity, android.R.color.green))
else {
orderListViewHolder.ivIndicator.setColorFilter(ContextCompat.getColor(activity, android.R.color.red))
}
Make two drawable files like #drawable/rectangle, set it with different color you want.
if(status.equals("No") {
yourView.setBackground(context.getResources().getDrawable(R.drawable.rectangleWithRed));
}
else if (status.equals("Yes") {
yourView.setBackground(context.getResources().getDrawable(R.drawable.rectangleWithGreen);
}
if you want to change the color according to the status, then on onBindViewHolder of your Recycler Adapter, check for the status and set to desired color.
if(status.equals("Yes")
{
rectangleImageView.setColor(Color.GREEN);
}
else
{
rectangleImageView.setColor(Color.RED);
}
public void onBindViewHolder(OrderListViewHolder orderListViewHolder, int position) {
if (OrderListModel.getProductStatus().equals("Yes"))
rectangleImageView.setColorFilter(getContext().getResources().getColor(R.color.green));
} else {
rectangleImageView.setColorFilter(getContext().getResources().getColor(R.color.red));
}
}

Row in listview not preserve the makeover and appears repeated

I have a list that when you click on the row on the right side the layout with the icon is changed by other. This makes it well but when I scrolling in the list, I notice there are rows with the same icon without do click. Also, if I scroll quickly these same icons are lost and are built differently. I think it's on the reuse of cells but I can not find the solution. What I want is that the image stays active only in the row where clicka.
Thanks!!
Adapter class:
public class ListadoVotantesArrayAdapter extends ArrayAdapter<Votante> {
private Context context;
private LayoutInflater inflater;
private ArrayList<Votante> listaVotantes;
private int rowLayout;
private View mConverView;
public ListadoVotantesArrayAdapter(Context context, int resource, ArrayList<Votante> objects) {
super(context, resource,objects);
this.context = context;
this.inflater = LayoutInflater.from(context);
this.listaVotantes = objects;
this.rowLayout = resource;
}
public int getCount(){
return this.listaVotantes.size();
}
public Votante getVotante(int position){
return this.listaVotantes.get(position);
}
private static class ViewHolder {
public TextView lblName;
public TextView lblLastName;
public TextView lblDni;
public TextView lblVoterNumber;
public RelativeLayout lytVoted;
public RelativeLayout lytCanVote;
public RelativeLayout lytUndo;
}
public View getView(int position, View converView, ViewGroup parent) {
final ViewHolder viewHolder;
mConverView = converView;
if (mConverView == null){
viewHolder = new ViewHolder();
this.mConverView = inflater.inflate(this.rowLayout, parent, false);
if (mConverView != null){
viewHolder.lblName = (TextView) mConverView.findViewById(R.id.lblVoterName);
viewHolder.lblLastName = (TextView) mConverView.findViewById(R.id.lblVoterLastName);
viewHolder.lblDni = (TextView) mConverView.findViewById(R.id.lblDni);
viewHolder.lblVoterNumber = (TextView) mConverView.findViewById(R.id.lblNumber);
viewHolder.lytVoted = (RelativeLayout) mConverView.findViewById(R.id.lytVoted);
viewHolder.lytCanVote = (RelativeLayout) mConverView.findViewById(R.id.lytCanVote);
viewHolder.lytUndo = (RelativeLayout) mConverView.findViewById(R.id.lytUndo);
mConverView.setTag(viewHolder);
}
}else{
viewHolder = (ViewHolder) mConverView.getTag();
}
Votante votante = getVotante(position);
viewHolder.lblName.setText(votante.getNombre());
viewHolder.lblLastName.setText(votante.getApellidos());
viewHolder.lblDni.setText(votante.getDni());
viewHolder.lblVoterNumber.setText(""+votante.getNumVotante());
if (votante.getVotado()){
viewHolder.lytVoted.setVisibility(View.VISIBLE);
viewHolder.lytCanVote.setVisibility(View.GONE);
}else{
viewHolder.lytVoted.setVisibility(View.GONE);
viewHolder.lytCanVote.setVisibility(View.VISIBLE);
}
mConverView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
viewHolder.lytUndo.setVisibility(View.VISIBLE);
notifyDataSetChanged();
}
});
return mConverView;
}
}
Layout Row:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lyt_voter"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="1dp">
<RelativeLayout
android:id="#+id/lytVoterNumber"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentLeft="true"
android:background="#color/lightBlueItemList">
<TextView
android:id="#+id/lblNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="1999"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<LinearLayout
android:id="#+id/lytVoterData"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/lytCanVote"
android:layout_toRightOf="#+id/lytVoterNumber"
android:layout_toStartOf="#+id/lytCanVote"
android:background="#color/whiteItemList"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="#+id/lblVoterLastName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Suarez Garcia de la Serna"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/lblVoterName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="José Carlos"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/lblDni"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="44950962S"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<RelativeLayout
android:id="#+id/lytCanVote"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentRight="true"
android:background="#color/yellowItemList"
android:minHeight="30dp"
android:minWidth="30dp">
<ImageView
android:id="#+id/imgVote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/flecha" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/lytVoted"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentRight="true"
android:background="#color/grrenAcceptList"
android:minHeight="30dp"
android:minWidth="30dp"
android:visibility="gone">
<ImageView
android:id="#+id/imgAccept"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/aceptar"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="70dp"
android:layout_height="70dp"
android:minHeight="30dp"
android:minWidth="30dp"
android:background="#color/redD3"
android:id="#+id/lytUndo"
android:layout_alignParentRight="true"
android:visibility="gone">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imgUndo"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/undo"/>
</RelativeLayout>
</RelativeLayout>
You need to follow below Idea
1) this line of code mConverView = converView; doesn't makes sense. directly use converView(View from getView param). Remove mConvertView from the adapter.
2) Add some mechanism which can tell you which row is clicked and save that variable.
Example:- Have an boolean Array of size Rows.size . and set them in onClick.
Boolean[] array = new Boolean[getSize()];
in onClick that you already have in your getview set this.
public void onClick(View v) {
array[position] = !array[position];
viewHolder.lytUndo.setVisibility(View.VISIBLE);
//You do not need to call notifyDatasetChange.
3) in getView(), when you are setting data in to row items/or just before onClick. have a check like below.
if(array[position])// this will tell you if you need to show or hid lytUndo thing
viewHolder.lytUndo.setVisibility(View.VISIBLE); // Show it
else
viewHolder.lytUndo.setVisibility(View.GONE); // hide it or do whatever you want
You might need to set some params as final
I have written this as simple as possible, comment back with your result.

How can I create a dynamic ListView in Android that contains images in between a fixed header and footer?

I'm a beginner to Android development, but not to software development. I've been looking for tutorials on how to create dynamic ListViews with images and have had some trouble.
The tutorial I followed most closely was #2 on this link (the Custom ArrayAdapter example): http://www.mkyong.com/android/android-listview-example/
This works fine if I remove the header and footer from my layout xml file, but I really need those to be included. Below I'll post my source from my Activity java file, my custom array adapter java file, and my layout xml file as well as the output. I think there may be something I'm missing or not understanding about how the layout inflater works.
Thanks for your time.
MainActivity.java
public class MainActivity extends ListActivity {
static final String[] MAIN_MENU =
new String[] { "ICD-10", "EDUCATION", "NEWS", "SERVICES", "CONTACT" };
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setListAdapter(new ImageAdapter(this, MAIN_MENU));
}
#Override
protected void onListItemClick(ListView l, View v, int position, long id) {
//get selected items
String selectedValue = (String) getListAdapter().getItem(position);
// to contact
if(selectedValue.equals(MAIN_MENU[4])) {
contactPressed(v);
}
// to icd-10
else if(selectedValue.equals(MAIN_MENU[0])) {
startActivity(new Intent(MainActivity.this, ICDActivity.class));
}
// to services
else if(selectedValue.equals(MAIN_MENU[3])) {
startActivity(new Intent(MainActivity.this, ServicesActivity.class));
}
}
public void contactPressed(View v) {
startActivity(new Intent(MainActivity.this, ContactActivity.class));
overridePendingTransition(R.anim.slide_in_up, R.anim.stay);
}
}
ImageAdapter.java
public class ImageAdapter extends ArrayAdapter<String>
{
private final Context context;
private final String[] values;
public ImageAdapter(Context context, String[] values) {
super(context, R.layout.activity_main, values);
this.context = context;
this.values = values;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View rowView = inflater.inflate(R.layout.activity_main, parent, false);
TextView textView = (TextView) rowView.findViewById(R.id.lvText);
ImageView imageView = (ImageView) rowView.findViewById(R.id.lvImage);
textView.setText(values[position]);
// Change icon based on name
String s = values[position];
if (s.equals("ICD-10"))
{
imageView.setImageResource(R.drawable.icon_icd10);
}
else if(s.equals("EDUCATION"))
{
imageView.setImageResource(R.drawable.icon_education);
}
else if(s.equals("NEWS"))
{
imageView.setImageResource(R.drawable.icon_news);
}
else if(s.equals("SERVICES"))
{
imageView.setImageResource(R.drawable.icon_services);
}
else if(s.equals("CONTACT"))
{
imageView.setImageResource(R.drawable.icon_contact);
}
return rowView;
}
}
activity_main.xml
<RelativeLayout 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" >
<ImageView
android:id="#+id/custom_background"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/gray">
</ImageView>
<RelativeLayout
android:id="#+id/headerLayout"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_alignParentTop="true" >
<ImageView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:scaleType="fitXY"
android:src="#drawable/logo_header" />
</RelativeLayout>
<!-- Footer aligned to bottom -->
<RelativeLayout
android:id="#+id/footerLayout"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="30dp" >
<ImageView
android:id="#+id/footer"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="30dp"
android:scaleType="center"
android:src="#drawable/footer" />
<TextView
android:id="#+id/footerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="14dp"
android:onClick="contactPressed"
android:layout_marginBottom="5dp"
android:text="#string/footerText" />
</RelativeLayout>
<ScrollView
android:id="#+id/scrollableContents"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/footerLayout"
android:layout_below="#id/headerLayout" >
<LinearLayout
android:id="#+id/linearList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/footerLayout"
android:layout_below="#id/headerLayout"
android:padding="5dp"
tools:context=".MainActivity" >
<!-- Making a dynamic ListView with images with the two attributes below -->
<ImageView
android:id="#+id/lvImage"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:src="#drawable/icon_icd10" >
</ImageView>
<TextView
android:id="#+id/lvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#+id/lvText"
android:textSize="25sp" >
</TextView>
</LinearLayout>
</ScrollView>
</RelativeLayout>
The output I get for this is:
If I comment out the header and footer code in the xml I get:
The goal is for it to look similar to this but with images on the right side of each line:
Thanks for your time.
First looks like you have
android:layout_above="#id/footerLayout"
android:layout_below="#id/headerLayout"
on your #+id/scrollableContents, which is good. But you also have it on the view nested inside it, #+id/linearList which is not right. There may be other layout problems but it is hard to tell. In general this layout looks very complex for what you are trying to achieve.
But I'm not sure really what you mean by "dynamic ListView" and it looks like you are trying to re-create the functionality of a listview using a ScrollView. I don't think you should take that approach. The ListView is very flexible and you can use a custom layout for your items.
So I found the solution to my problem while searching for another tutorial. I finally ended up using this tutorial: http://www.learn2crack.com/2013/10/android-custom-listview-images-text-example.html
My problem was that I tried to replace my ListView with a TextView and ImageView in the same layout.xml file when I should have created my TextView and ImageView in a different layout.xml file. Below is the final code and the correct output I was looking for. Thanks!
list_single.xml (below)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="5dp"
android:layout_marginTop="9dp"
android:layout_alignParentRight="true" />
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="17dp"
android:layout_marginLeft="5dp"
android:textSize="23sp" />
</RelativeLayout>
activity_main.xml (below)
<RelativeLayout 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" >
<ImageView
android:id="#+id/custom_background"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/gray">
</ImageView>
<ImageView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:scaleType="fitXY"
android:src="#drawable/logo_header" />
<!-- Footer aligned to bottom -->
<ImageView
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:scaleType="center"
android:src="#drawable/footer" />
<TextView
android:id="#+id/footerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="5dp"
android:layout_marginLeft="14dp"
android:onClick="contactPressed"
android:text="#string/footerText" />
<ListView
android:id="#+id/mainMenuList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/footer"
android:layout_below="#id/header"
android:divider="#000000"
android:dividerHeight="0.1dp" />
</RelativeLayout>
ImageAdapter.java (below)
public class ImageAdapter extends ArrayAdapter<String>
{
private final Context context;
private final String[] values;
public ImageAdapter(Context context, String[] values) {
super(context, R.layout.list_single, values);
this.context = context;
this.values = values;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View rowView = inflater.inflate(R.layout.list_single, null, true);
TextView textView = (TextView) rowView.findViewById(R.id.txt);
ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
textView.setText(values[position]);
// Change icon based on name
String s = values[position];
if (s.equals("ICD-10"))
{
imageView.setImageResource(R.drawable.icon_icd10);
}
else if(s.equals("EDUCATION"))
{
imageView.setImageResource(R.drawable.icon_education);
}
else if(s.equals("NEWS"))
{
imageView.setImageResource(R.drawable.icon_news);
}
else if(s.equals("SERVICES"))
{
imageView.setImageResource(R.drawable.icon_services);
}
else if(s.equals("CONTACT"))
{
imageView.setImageResource(R.drawable.icon_contact);
}
return rowView;
}
}
MainActivity.java (below)
public class MainActivity extends Activity {
ListView list;
static final String[] MAIN_MENU =
new String[] { "ICD-10", "EDUCATION", "NEWS", "SERVICES", "CONTACT" };
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
list = (ListView)findViewById(R.id.mainMenuList);
list.setAdapter(new ImageAdapter(MainActivity.this, MAIN_MENU));
// register onClickListener to handle click events on each item
list.setOnItemClickListener(new OnItemClickListener() {
// argument position gives the index of item which is clicked
public void onItemClick(AdapterView<?> arg0, View v, int position,
long arg3) {
String selectedValue = MAIN_MENU[position];
// to contact
if(selectedValue.equals(MAIN_MENU[4])) {
contactPressed(v);
}
// to icd-10
else if(selectedValue.equals(MAIN_MENU[0])) {
startActivity(new Intent(MainActivity.this, ICDActivity.class));
}
// to services
else if(selectedValue.equals(MAIN_MENU[3])) {
startActivity(new Intent(MainActivity.this, ServicesActivity.class));
}
}
});
}
public void contactPressed(View v) {
startActivity(new Intent(MainActivity.this, ContactActivity.class));
overridePendingTransition(R.anim.slide_in_up, R.anim.stay);
}
}
And the final output (below)

Is there anything equivalent to setImageResource for buttons?

I am creating a custom adapter so that I can put a button in a listView. I was putting it in just like I would an image and then I got to this line of code in the tutorial:
button.setImageResource(current_item.getButton_id());
I tried changing it to setButtonResource, but there is no method for that.
Thanks for any help.
I want it to look like this where there is a listview with a textview and a button. I got the text put in just fine, but I can't figure out how to get a button in ther listview.
This is my adapter:
private class MyListAdapter extends ArrayAdapter<SchoolsListClass>{
public MyListAdapter() {
super(searchResults.this, R.layout.da_item, mySchools);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
//Make sure we have a view to work with (may have been given null
View itemView = convertView;
if (itemView == null){
itemView = getLayoutInflater().inflate(R.layout.da_item, parent, false);
}
//Find school to work with
SchoolsListClass currentSchoolsListClass = mySchools.get(position);
//Fill the view
//school name
TextView schoolText = (TextView) itemView.findViewById(R.id.item_schoolName);
schoolText.setText(currentSchoolsListClass.getSchool_name());
//subscribe/unsubscribe button
Button button = (Button)itemView.findViewById(R.id.item_subscribeButton);
button..setImageResource(currentSchoolsListClass.getButton_id());//This is the line of code I am having trouble with. I want it to do exactly what it is doing for images, but use buttons instead of images.
return itemView;
}
SchoolsListClass:
package com.parse.starter;
public class SchoolsListClass {
private String school_name;
private int button_id;
public SchoolsListClass(String school, int button){
super();
this.school_name = school;
this.button_id = button;
}
public String getSchool_name() {
return school_name;
}
public int getButton_id() {
return button_id;
}
}
school_results.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listMain"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="18dp"
android:text="Title"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ListView
android:id="#+id/schoolListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true" >
</ListView>
</RelativeLayout>
da_item.xml:(sample for items in my listview)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginLeft="4dp" >
<TextView
android:id="#+id/item_schoolName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/item_subscribeButton"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/item_subscribeButton"
android:ellipsize="end"
android:text="Central Wisconsin Christian School"
android:textSize="#dimen/school_name_size" />
<Button
android:id="#+id/item_subscribeButton"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
</RelativeLayout>
the equivalent is
button.setBackgroundResource(int resid);
you can use but it is debricated in new API
button.setBackgroundDrawable(R.drawable.ic_launcher);

Categories

Resources