Material Design Layout issue - Photoshop

user44651
March 14, 2016
198 views
2 votes
4 Answers

I am having trouble with Material Design layout.

Here is what I have:

and the code to represent that

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:background="@color/backgroundColor"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main"
    tools:context="com.mycompany.inventory.MainActivity">

    <ImageView
        android:id="@+id/logoView"
        android:layout_width="225dp"
        android:layout_height="90dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/mycompanylogo"
        android:layout_marginBottom="20dp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="USERNAME"
        android:id="@+id/txtUsername"
        android:layout_below="@+id/logoView"

        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="0"
        android:layout_below="@id/txtUsername"
        android:id="@+id/txtScannedCount"/>

    <TextView
        android:text="Scanned Today"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_below="@+id/txtScannedCount"
        android:layout_alignLeft="@+id/txtScannedCount"
        android:layout_alignStart="@+id/txtScannedCount" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="0"
        android:id="@+id/txtInventoryCount"
        android:layout_below="@id/txtUsername"
        android:layout_alignRight="@+id/btnSearch"
        android:layout_alignEnd="@+id/btnSearch" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Inventory"
        android:id="@+id/textView4"
        android:layout_above="@+id/btnSearch"
        android:layout_toRightOf="@+id/textView"
        android:layout_toEndOf="@+id/textView"
        android:layout_marginLeft="153dp"
        android:layout_marginStart="153dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn_searchvehicle"
        android:id="@+id/btnSearch"
        android:layout_below="@+id/textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="46dp"
        android:layout_marginBottom="15dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:background="@color/colorPrimary"
        android:backgroundTint="@color/colorPrimaryDark"
        android:textColor="@color/buttontext"
        android:onClick="NavSearchVechiclesPressed"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn_scanbarcode"
        android:id="@+id/btnScanner"
        android:layout_below="@+id/btnSearch"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignRight="@+id/btnSearch"
        android:layout_alignEnd="@+id/btnSearch"
        android:background="@color/colorPrimary"
        android:backgroundTint="@color/colorPrimaryDark"
        android:textColor="@color/buttontext"
        android:onClick="NavScanBarcodePressed"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/txtVersion"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textColor="@color/divider"/>
</RelativeLayout>

And through the magic of Photoshop here is what I want.

How can I obtain he lay out with the “Scanned Today” and “Inventory” text views as well as the large centered numbers?

Answers

- ZengoTim
- March 14, 2016 at 4:20 pm
- 0 votes
0
I think what you want is for the TextView text to be center justified horizontally, in which case add
```
android:gravity="center_horizontal"
```
to your textViews
Login or Signup to reply.

You can (and probably you should) use other layouts inside your parent relativeLayout. This way you simplify a lot the design and you avoid that all the design is dependant of one item (on your layout, if you remove one of the textViews most of the layout is repositioned, as they were relative to that textView)

A quick example of this with your code could be something like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.mycompany.inventory.MainActivity">

    <Button
        android:id="@+id/btnSearch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:backgroundTint="@color/colorPrimaryDark"
        android:onClick="NavSearchVechiclesPressed"
        android:layout_below="@+id/linearLayout3"
        android:layout_alignParentStart="true"
        android:layout_alignEnd="@+id/linearLayout3"
        android:layout_marginTop="50dp" />

    <Button
        android:id="@+id/btnScanner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/btnSearch"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignRight="@+id/btnSearch"
        android:layout_below="@+id/btnSearch"
        android:background="@color/colorPrimary"
        android:backgroundTint="@color/colorPrimaryDark"
        android:onClick="NavScanBarcodePressed"
        android:layout_marginTop="20dp" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/linearLayout2">

        <ImageView
            android:id="@+id/logoView"
            android:layout_width="225dp"
            android:layout_height="90dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="20dp"
            android:layout_gravity="center_horizontal" />

        <TextView
            android:id="@+id/txtUsername"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/logoView"
            android:layout_centerHorizontal="true"
            android:text="USERNAME"

            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_gravity="center_horizontal" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@+id/linearLayout2"
        android:layout_alignParentEnd="true"
        android:id="@+id/linearLayout3">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <TextView
                android:id="@+id/txtScannedCount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/txtUsername"
                android:text="0"
                android:textSize="50sp"
                android:layout_gravity="center_horizontal" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/txtScannedCount"
                android:layout_alignStart="@+id/txtScannedCount"
                android:layout_below="@+id/txtScannedCount"
                android:text="Scanned Today"
                android:layout_gravity="center_horizontal" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <TextView
                android:id="@+id/txtInventoryCount"
                android:layout_width="wrap_content"
                android:textSize="50sp"
                android:layout_height="wrap_content"
                android:layout_alignEnd="@+id/btnSearch"
                android:layout_alignRight="@+id/btnSearch"
                android:layout_below="@id/txtUsername"
                android:text="0"
                android:layout_gravity="center_horizontal" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@+id/btnSearch"
                android:layout_toEndOf="@+id/textView"
                android:layout_toRightOf="@+id/textView"
                android:text="Inventory"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:layout_gravity="center_horizontal" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

(I removed the text, colors and images, but it looks similar to what you want)
Try playing around with different sub-layouts and it will make your life easier 🙂

use layout as

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:background="@color/backgroundColor"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main"
    tools:context="com.mycompany.inventory.MainActivity">

    <ImageView
        android:id="@+id/logoView"
        android:layout_width="225dp"
        android:layout_height="90dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/mycompanylogo"
        android:layout_marginBottom="20dp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="USERNAME"
        android:id="@+id/txtUsername"
        android:layout_below="@+id/logoView"

        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn_searchvehicle"
        android:id="@+id/btnSearch"
        android:layout_below="@+id/textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="46dp"
        android:layout_marginBottom="15dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:background="@color/colorPrimary"
        android:backgroundTint="@color/colorPrimaryDark"
        android:textColor="@color/buttontext"
        android:onClick="NavSearchVechiclesPressed"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn_scanbarcode"
        android:id="@+id/btnScanner"
        android:layout_below="@+id/btnSearch"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignRight="@+id/btnSearch"
        android:layout_alignEnd="@+id/btnSearch"
        android:background="@color/colorPrimary"
        android:backgroundTint="@color/colorPrimaryDark"
        android:textColor="@color/buttontext"
        android:onClick="NavScanBarcodePressed"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/txtVersion"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textColor="@color/divider"/>

    <TextView
        android:id="@+id/txtInventoryCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView4"
        android:layout_alignEnd="@+id/btnSearch"
        android:layout_toRightOf="@+id/logoView"
        android:text="0"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/txtScannedCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtUsername"
        android:layout_toLeftOf="@+id/logoView"
        android:text="0"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignStart="@+id/txtScannedCount"
        android:layout_below="@+id/txtScannedCount"
        android:text="Scanned Today" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btnSearch"
        android:layout_alignParentRight="true"
        android:layout_marginStart="153dp"
        android:layout_toEndOf="@+id/textView"
        android:text="Inventory"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

Try this one

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:background="@color/backgroundColor"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main"
tools:context="com.mycompany.inventory.MainActivity">

<ImageView
    android:id="@+id/logoView"
    android:layout_width="225dp"
    android:layout_height="90dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:src="@drawable/mycompanylogo"
    android:layout_marginBottom="20dp"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="USERNAME"
    android:id="@+id/txtUsername"
    android:layout_below="@+id/logoView"
    android:layout_centerHorizontal="true" />


<TextView
    android:text="Scanned Today"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:id="@+id/textView"
    android:layout_alignLeft="@+id/btnSearch"
    android:layout_alignStart="@+id/btnSearch"
    android:layout_below="@+id/txtScannedCount" />


<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="0"
    android:textSize="30sp"
    android:layout_below="@id/txtUsername"
    android:gravity="center_horizontal"
    android:id="@+id/txtScannedCount"
    android:layout_alignLeft="@+id/textView"
    android:layout_alignStart="@+id/textView"
    android:layout_alignRight="@+id/textView"
    android:layout_alignEnd="@+id/textView"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="0"
    android:textSize="30sp"
    android:gravity="center_horizontal"
    android:id="@+id/txtInventoryCount"
    android:layout_below="@id/txtUsername"
    android:layout_alignLeft="@+id/textView4"
    android:layout_alignStart="@+id/textView4"
    android:layout_alignRight="@+id/textView4"
    android:layout_alignEnd="@+id/textView4" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:text="Inventory"
    android:id="@+id/textView4"
    android:layout_marginRight="30dp"
    android:gravity="center_horizontal"
    android:layout_above="@+id/btnSearch"
    android:layout_alignRight="@+id/btnSearch"
    android:layout_alignEnd="@+id/btnSearch" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/btn_searchvehicle"
    android:id="@+id/btnSearch"
    android:layout_below="@+id/textView"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="46dp"
    android:layout_marginBottom="15dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:background="@color/colorPrimary"
    android:backgroundTint="@color/colorPrimaryDark"
    android:textColor="@color/buttontext"
    android:onClick="NavSearchVechiclesPressed"/>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/btn_scanbarcode"
    android:id="@+id/btnScanner"
    android:layout_below="@+id/btnSearch"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignRight="@+id/btnSearch"
    android:layout_alignEnd="@+id/btnSearch"
    android:background="@color/colorPrimary"
    android:backgroundTint="@color/colorPrimaryDark"
    android:textColor="@color/buttontext"
    android:onClick="NavScanBarcodePressed"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:text="Small Text"
    android:id="@+id/txtVersion"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:textColor="@color/divider"/>
 </RelativeLayout>

Please signup or login to give your own answer.

Click here to cancel reply.

Material Design Layout issue – Photoshop

Answers