Create a step-by-step edit text with numbering for users to input with a button to add another edit text. edit text can be removed and the edit text can be sorted by moving it.
Asked
Active
Viewed 93 times
2 Answers
1
You can use Recycler View for this:
For Example, follow below layout design:
Add below code in Main Layout(In Activity/Fragment Layout)
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rvMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
android:nestedScrollingEnabled="true"/>
<Button
android:id="@+id/btnAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add"/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
Add below code for setting adapter to Activity or Fragment
ArrayList<StepsModel> stepsModelArrayList = new ArrayList<>();
stepsModelArrayList.add(new StepsModel(" Lorem ipsum may be used as a placeholder before final copy is available.",""));
stepsModelArrayList.add(new StepsModel(" Lorem ipsum may be used as a placeholder before final copy is available.",""));
rvMain.setLayoutManager(new LinearLayoutManager(this));
StepsRecyclerAdapter stepsRecyclerAdapter = new StepsRecyclerAdapter(this, stepsModelArrayList);
rvMain.setAdapter(stepsRecyclerAdapter);
Add StepsRecyclerAdapter.java file
public class StepsRecyclerAdapter extends RecyclerView.Adapter<StepsRecyclerAdapter.PostViewHolder> {
private static String TAG = StepsRecyclerAdapter.class.getSimpleName();
public static List<StepsModel> stepsList;
public Context mcontext;
View view;
public StepsRecyclerAdapter(Context context, List<StepsModel> uploads) {
stepsList = uploads;
mcontext = context;
}
@NonNull
@Override
public StepsRecyclerAdapter.PostViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view;
view = LayoutInflater.from(mcontext).inflate(R.layout.item_steps, parent, false);
return new StepsRecyclerAdapter.PostViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull StepsRecyclerAdapter.PostViewHolder holder, int position) {
int pos = position+1;
holder.tvStepsPosition.setText(""+pos);
holder.tvStepsDetails.setText(stepsList.get(position).getStepsDetails());
}
@Override
public int getItemCount() {
return stepsList.size();
}
public static class PostViewHolder extends RecyclerView.ViewHolder {
private TextView tvStepsPosition, tvStepsDetails;
private ImageView ivStepsImage;
public PostViewHolder(@NonNull View itemView) {
super(itemView);
tvStepsPosition = itemView.findViewById(R.id.tvStepsPosition);
tvStepsDetails = itemView.findViewById(R.id.tvStepsDetails);
ivStepsImage = itemView.findViewById(R.id.ivStepsImage);
}
}
}
Create Item Layout - item_steps.xml
<?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:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/bg_circular"
android:gravity="center">
<TextView
android:id="@+id/tvStepsPosition"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textColor="@color/black"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tvStepsDetails"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:textSize="15sp"
android:singleLine="true"
android:text="lorem"
android:padding="10dp"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/finestGray"
android:layout_marginTop="8dp"/>
<ImageView
android:id="@+id/ivStepsImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/ic_baseline_camera_alt_24"
android:layout_marginTop="10dp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Model Class - StepsModel
public class StepsModel {
String stepsDetails, stepsImages;
public StepsModel() {
}
public StepsModel(String stepsDetails, String stepsImages) {
this.stepsDetails = stepsDetails;
this.stepsImages = stepsImages;
}
public String getStepsDetails() {
return stepsDetails;
}
public void setStepsDetails(String stepsDetails) {
this.stepsDetails = stepsDetails;
}
public String getStepsImages() {
return stepsImages;
}
public void setStepsImages(String stepsImages) {
this.stepsImages = stepsImages;
}
}
Note: I am using two strings in Model class stepsDetails - for Details of steps, stepsImages - for Image of steps, You can add this model class data to arraylist like - stepsModelArrayList.add(new StepsModel(" Lorem ipsum may be used as a placeholder before final copy is available.",""));
For more info related to RecyclerView, Check these links link1, link2
Adding Items in RecycleView Dynamically using a button - link
Adding Items dynamically:
btnAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
stepsModelArrayList.add(new StepsModel());
stepsRecyclerAdapter.notifyDataSetChanged();
}
});
Android Geek
- 8,956
- 2
- 21
- 35
-
For the model part, besides, stringStepDetails, what should be added too? I havent run it but everything seems ok in coding just the part of the lorem ipsum, im wondering do i just add like String s1,s2? and adding it into s10? as maximum? – Aiden K Aug 31 '21 at 06:50
-
@AidenK, If you have 10 steps then you need to add 10 Model class objects in arraylist and Please check edited anwser - Model class added to answer. – Android Geek Aug 31 '21 at 07:00
-
one more question. so if I wanna change the textview stepdetails into edittext stepdetails where each steps is different and needed to be in different String. i will just have to add 10 strings into the model right? – Aiden K Aug 31 '21 at 07:19
-
-
I wasnt quite sure how to do the recyclerview dynamically using a button. If you can add on that to the coding you have done earlier. I would be much appreaciated. – Aiden K Aug 31 '21 at 07:38
-
@AidenK Okay, code added for adding dynamically items. Please Check this link - https://stackoverflow.com/questions/44719750/adding-items-in-recycleview-dynamically-using-a-button – Android Geek Aug 31 '21 at 07:46
-
I wanted to add the "steps details" into firebase as in step by step ( i think it needed loop for arraylist?) and show it later on another activity. – Aiden K Aug 31 '21 at 07:48
-
You can save data into firebase : 1. On change of text in edittext, on adding image, In this case you don't need any loop. 2. For second option, you need a button, In this case first you need to save whole data into your arraylist then you need a loop to save whole in firebase. Out of these two cases, you can use one case in which you are more comfortable. – Android Geek Aug 31 '21 at 08:08
-
In this case, do I need to call "stepsDetails1" , "stepsDetails2'.... etc in my model? or just one "stepsDetails" is enough? and arraylist will do the rest? – Aiden K Aug 31 '21 at 08:15
-
0
If it is dynamically increasing and decreasing, the best approach is RecyclerView
Here is a simple RecycleView to get start with: Simple RecyclerView
Carlos
- 1