I need to create a custom view like this. It is a time bar where the gray sections represent an unavailable time and the blank sections represent an available time. A user can move and expand the blue bar to select a time range
To create the time bar what I did was create a next custom view, where I fill the hour bar in a recyclerview with data I take from a web service. Also in this class I manage the movements for the blue bar. The main problem here is that this blue bar is independent of the recyclerview
What I want is to find a way to synchronize or relate the blue bar to the elements in the recyclerview, so that the blue-bar adjusts to each item of the recycler, to move it along and to have access to the data in each item as Time and availability. Thanks for your help.
My custom view:
public class ReservationsHoraryBar extends FrameLayout implements View.OnTouchListener {
Context context;
ReservationRangeHoraryBarAdapter reservationRangeHoraryBarAdapter;
List<ReservationHoraryItem> reservationHoraryList = new ArrayList<>();
HashMap<Date, Boolean> hashHoursReserv = new HashMap<>();
//Vars related to move blue bar,
ViewGroup root;
private int _xDelta;
private int _yDelta;
public ReservationsHoraryBar(Context context){
super(context);
this.context = context;
init(context);
}
public ReservationsHoraryBar(Context context, AttributeSet attributeSet){
super(context, attributeSet);
this.context = context;
init(context);
}
/****************** INITIALIZE METHODS ************************/
private void init(Context context){
View view = inflate(context, R.layout.bar_reservation_range_horary, null);
addView(view);
RecyclerView recyclerView = view.findViewById(R.id.rv_horary);
root = findViewById(R.id.root);
initializeAdapter(recyclerView);
setRecyclerViewListener(recyclerView);
final View seekBar = findViewById(R.id.view);
seekBar.setOnTouchListener(this);
}
private void initializeAdapter(RecyclerView rv_horaries){
reservationRangeHoraryBarAdapter = new ReservationRangeHoraryBarAdapter(context,reservationHoraryList);
LinearLayoutManager layoutManager = new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false);
rv_horaries.setLayoutManager(layoutManager);
rv_horaries.setAdapter(reservationRangeHoraryBarAdapter);
}
public void createBarWithHoraries(String horaryRange,List<String> reservationHoraries){
/** Horary range example: 10:00-21:00
* ReservationHoraries example: ["19:00-23:59","00:00-10:00"],
*/
reservationRangeHoraryBarAdapter.clearData();
String[] partsHoraryRange = horaryRange.split("-"); /** PART0: 10:00, PART1: 21:00*/
Date initTime = GeneralHelpers.customStringToDate(partsHoraryRange[0], "HH:mm");
Date endTime = GeneralHelpers.customStringToDate(partsHoraryRange[1], "HH:mm");
List<Pair> pairList = new LinkedList<>();
for (String rangeStr: reservationHoraries){
String[] partsHorary = rangeStr.split("-"); /** PART0: 10:00, PART1: 21:00*/
Date initTimeReserv = GeneralHelpers.customStringToDate(partsHorary[0], "HH:mm");
Date endTimeReserv = GeneralHelpers.customStringToDate(partsHorary[1], "HH:mm");
Pair<Date,Date> pair = new Pair<>(initTimeReserv, endTimeReserv);
pairList.add(pair);
}
/** SET RESERVATION HORARY BAR */
Calendar start = Calendar.getInstance();
start.setTime(initTime);
Calendar end = Calendar.getInstance();
end.setTime(endTime);
for (Date date = start.getTime(); start.before(end) || start.equals(end); start.add(Calendar.HOUR, 1), date = start.getTime()) {
//Log.d("JIOTS.INIT.DATE", date.toString());
ReservationHoraryItem reservationHoraryItem = new ReservationHoraryItem();
reservationHoraryItem.setTime(GeneralHelpers.formatDateToString(date, "HH:mm"));
for (Pair pair: pairList){
Date initRes = (Date) pair.first;
Date endRes = (Date) pair.second;
if ( (date.after(initRes) || date.equals(initRes) ) && (date.before(endRes))){
reservationHoraryItem.setAvailable(false);
break;
}
else{
reservationHoraryItem.setAvailable(true);
}
}
reservationHoraryList.add(reservationHoraryItem);
reservationRangeHoraryBarAdapter.notifyDataSetChanged();
}
}
private void setRecyclerViewListener(RecyclerView recyclerView){
ItemClickSupport.addTo(recyclerView).setOnItemClickListener(new ItemClickSupport.OnItemClickListener() {
@Override
public void onItemClicked(RecyclerView recyclerView, int position, View v) {
}
});
}
/****************** VIEW METHODS ************************/
public boolean onTouch(View view, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
_xDelta = X - lParams.leftMargin;
_yDelta = Y - lParams.topMargin;
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
layoutParams.leftMargin = X - _xDelta;
layoutParams.topMargin = Y - _yDelta;
layoutParams.rightMargin = -250;
layoutParams.bottomMargin = -250;
view.setLayoutParams(layoutParams);
break;
}
root.invalidate();
return true;
}
}
This is my bar_reservations_range_horary.xml, where I create the recyclerview and the blue bar to select a range of hours.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/root"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_horary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.v7.widget.RecyclerView>
<View
android:id="@+id/view"
android:layout_width="100dp"
android:layout_height="78dp"
android:background="@color/colorPrimary"
android:layout_centerVertical="true"
>
</View>
</RelativeLayout>
This is my hour_item.xml.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="1dp"
android:background="@color/reservation_bar_lines" />
<LinearLayout
android:id="@+id/ly_parent_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="1dp"
>
<View
android:layout_width="1dp"
android:layout_height="80dp"
android:background="@color/reservation_bar_lines" />
<View
android:layout_width="1dp"
android:layout_height="30dp"
android:layout_marginLeft="50dp"
android:background="@color/reservation_bar_lines" />
<View
android:layout_width="0.5dp"
android:layout_height="80dp"
android:layout_marginLeft="50dp"
android:background="@color/reservation_bar_lines" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="1dp"
android:layout_above="@id/tv_horary"
android:background="@color/reservation_bar_lines" />
<TextView
android:id="@+id/tv_horary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="00:00 am"
android:textColor="@color/colorReservationTime"
android:textSize="13sp" />
</RelativeLayout>
And my model
public class ReservationHoraryItem {
String time;
Boolean available;
public Boolean getAvailable() {
return available;
}
public Boolean isAvailable() {
return available;
}
public void setAvailable(Boolean available) {
this.available = available;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
}