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>
ConstraintLayout

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" />
label_tv

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" />
temperature

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" />
guideline

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" />
xml group

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 >>

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.

%d bloggers like this: