Sensorki – material design – #3

Skoro działa i się odświeża – można zająć się wyglądem żeby przestało straszyć.

Na początku zmienię LinearLayout w ConstraintLayout i podniosę go trochę. Dodam też kolor:

	<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="@dimen/margin_size"
	android:background="@color/colorPrimaryLight"
	android:elevation="4dp">
	(…)
	</android.support.constraint.ConstraintLayout>

view raw recycler_view_item.xml hosted with ❤ by GitHub

Wezmę się za nazwę pomieszczenia. Zrobię ciemniejsze tło, podniosę trochę wyżej niż cały kontener i wyśrodkuję:

	<TextView
	android:id="@+id/label_tv"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="@color/colorPrimaryDark"
	android:elevation="6dp"
	android:textAlignment="center"
	android:textAppearance="@style/Base.TextAppearance.AppCompat.Headline"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toTopOf="parent" />

view raw recycler_view_item.xml hosted with ❤ by GitHub

Każda z miar dostanie własną ikonkę prosto z https://www.freepik.com/. Jako że używam constraint layoutu to wszystko musi mieć określone względem czego ma być pozycjonowane.

	<ImageView
	android:id="@+id/temperature_icon"
	android:layout_width="@dimen/image_width"
	android:layout_height="@dimen/item_height"
	android:layout_marginStart="@dimen/margin_size"
	android:layout_marginTop="@dimen/margin_size"
	android:contentDescription="@string/temperature_icon"
	android:src="@drawable/ic_low_temperature"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/label_tv" />
	<TextView
	android:id="@+id/temperature_tv"
	android:layout_width="0dp"
	android:layout_height="@dimen/item_height"
	android:layout_marginEnd="@dimen/margin_size"
	android:layout_marginStart="@dimen/margin_size"
	android:layout_marginTop="@dimen/margin_size"
	android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintStart_toStartOf="@+id/guideline3"
	app:layout_constraintTop_toBottomOf="@+id/label_tv" />

view raw recycler_view_item.xml hosted with ❤ by GitHub

W uproszczeniu pracy pomoże mi guideline, do którego będę ustawiać wszystkie teksty.

	<android.support.constraint.Guideline
	android:id="@+id/guideline3"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:orientation="vertical"
	app:layout_constraintGuide_begin="44dp" />

view raw recycler_view_item.xml hosted with ❤ by GitHub

Ciśnienie jest dostępne tylko dla czujnika na balkonie, więc dla ułatwienia sobie życia zamknę ikonkę i tekst w grupę i ukryję je jeśli jest nullem.

	<android.support.constraint.Group
	android:id="@+id/pressure"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	app:constraint_referenced_ids="bar_press_tv,pressure_icon" />

view raw recycler_view_item.xml hosted with ❤ by GitHub

No i jeszcze można wyróżnić datę. Zrobić jej osobne, białe tło, wyśrodkować i zmniejszyć tekst. Ostatecznie tak wygląda aplikacja w tym momencie. Dla porównania – wersja sprzed zmian 😉 

• 

• 

Kod oczywiście – na githubie

Series Navigation

<< Sensorki – refresh – #2Sensorki – wskaźnik baterii – #4 >>