Still quite new to android and such, I was tasked of making a layout that looks exactly like designers sketch. Tried using linear layout and weight, to make sure the elements are in the same place in relation to background no matter the resolution.
End result should look something like this:
While on the actual device it ends up looking like this http:
The misplacement of Date and Temperature seems to be related to the font size(the bigger the font, the more they get misplaced). Why is this caused?
My code:
<?xml version="1.0"?>
<LinearLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/all"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/monday"
android:includeFontPadding="false"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:id="@+id/hwrap1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.70"
android:orientation="horizontal" >
<!-- wrapper for the first line (Time/day and namedays) -->
<LinearLayout
android:id="@+id/bloat1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.20"
android:orientation="horizontal" >
</LinearLayout>
<!-- empty space before day and time -->
<!-- wrapper around time and day -->
<TextView
android:id="@+id/dayOfWeek"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.90"
android:gravity="top|left"
android:text="PIRMDIENA"
android:textAllCaps="true"
android:textColor="#FFFFFF"
android:textSize="45dp" />
<LinearLayout
android:id="@+id/bloat2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:orientation="horizontal" >
</LinearLayout>
<!-- empty space before namedays -->
<TextView
android:id="@+id/nameDays"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.9"
android:gravity="left|center"
android:text="Arnijs, Jorijs, Blobijs"
android:textColor="#041869"
android:textSize="60dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/hwrap2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.20"
android:orientation="horizontal" >
<!-- wrapper around second line (date and temp) -->
<LinearLayout
android:id="@+id/bloat3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:orientation="horizontal" >
<!-- space before date -->
</LinearLayout>
<TextView
android:id="@+id/date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3.65"
android:gravity="left|center"
android:text="DATE"
android:textAllCaps="true"
android:textColor="#FFFFFF"
android:textSize="80dp" />
<TextView
android:id="@+id/temperature"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.1"
android:gravity="center"
android:text="14c"
android:textColor="#FFFFFF"
android:textSize="80dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/hwrap3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3.9"
android:orientation="horizontal" >
<!-- wrapper around message (3rd line) -->
<LinearLayout
android:id="@+id/bloat4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="horizontal" >
<!-- space before message -->
</LinearLayout>
<TextView
android:id="@+id/msg"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:gravity="center|left"
android:text="Deep text about life... much sense such fullfillment wow"
android:textColor="#FFFFFF"
android:textSize="45dp" />
<LinearLayout
android:id="@+id/bloat5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="horizontal" >
<!-- space after message -->
</LinearLayout>
</LinearLayout>
</LinearLayout>
