우선 Constraint View를 사용해서 분과 초를 표시했다. 이번 프로젝트에서 처음 사용한 것은 Constraint Chain Style 과 BaseLine 이다. 두 가지를 적용한 이유는 분과 초를 표시하는 TextView가 붙어있게 구현하기 위해서였다.
첫 번째 사진은 Constraint Chain과 BaseLine을 적용하기 전이다. 분과 초를 표시하는 View 사이에 일정한 간격이 있고 Constraint를 상, 하, 좌, 우 모두 주었기 때문에 중앙에 위치하는 것을 볼 수 있다. 두 번째 사진은 Constraint Chain만 적용했을 때다. 분을 표시하는 TextView를 top, bottom으로 constraint를 걸어놔서 그대로 중앙에 위치한다. 이를 좀 더 보기 좋게 표현하고자 top, bottom의 constraint를 없애고 baseline으로 진행했다. 세 번째 사진이 Constraint Chain과 BaseLine의 적용 사진이다.
상단의 토마토 꼭지 이미지도 .xml을 이용해서 넣어줬다. 가로 세로 40dp 이하의 크기이면 Vector Asset 을 사용해도 괜찮다고 한다. 더 큰 크기의 경우 여러 사이즈의 이미지 정보를 담고 있는 Image Asset 을 사용하도록 하자.
이후 android:src 를 사용해서 불러온다.