Show 7 days in android

Question

I am little less experienced in android. I am working on displaying 7 static days on a screen in android as per the attached snapshot below. I tried using a Grid Layout but with my design 7 days appear but they do not occupy full screen width and neither have equal spacing between them. I also want the user to be able to select a date and as shown in the below picture the selected date should be circled out. Any pointers on the best way to deign this.

My UI code is below.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="7"
android:rowCount="3">

<TextView
    android:id="@+id/dayLabel1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_gravity="fill"
    android:gravity="center"
    android:text="M"
    android:textAlignment="center" />

<TextView
    android:id="@+id/dayLabel2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="1"
    android:layout_gravity="fill"
    android:gravity="center"
    android:text="M"
    android:textAlignment="center" />

<TextView
    android:id="@+id/dayLabel3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="2"
    android:layout_gravity="fill"
    android:gravity="center"
    android:text="M"
    android:textAlignment="center" />

<TextView
    android:id="@+id/dayLabel4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="3"
    android:layout_gravity="fill"
    android:gravity="center"
    android:text="M"
    android:textAlignment="center" />

<TextView
    android:id="@+id/dayLabel5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="4"
    android:layout_gravity="fill"
    android:gravity="center"
    android:text="M"
    android:textAlignment="center" />

<TextView
    android:id="@+id/dayLabel6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="5"
    android:layout_gravity="fill"
    android:gravity="center"
    android:text="M"
    android:textAlignment="center" />

<TextView
    android:id="@+id/dayLabel7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="6"
    android:layout_gravity="fill"
    android:gravity="center"
    android:text="M"
    android:textAlignment="center" />

<Button
    android:id="@+id/dateBtn1"
    style="@style/Widget.Sitrion.Button"
    android:layout_width="@dimen/calendar_day_width"
    android:layout_height="@dimen/calendar_day_height"
    android:layout_row="1"
    android:layout_column="0"
    android:background="@drawable/round_button"
    android:text="13" />

<Button
    android:id="@+id/dateBtn2"
    style="@style/Widget.Sitrion.Button"
    android:layout_width="@dimen/calendar_day_width"
    android:layout_height="@dimen/calendar_day_height"
    android:layout_row="1"
    android:layout_column="1"
    android:background="@drawable/round_button"
    android:text="13" />

<Button
    android:id="@+id/dateBtn3"
    style="@style/Widget.Sitrion.Button"
    android:layout_width="@dimen/calendar_day_width"
    android:layout_height="@dimen/calendar_day_height"
    android:layout_row="1"
    android:layout_column="2"
    android:background="@drawable/round_button"
    android:text="13" />

<Button
    android:id="@+id/dateBtn4"
    style="@style/Widget.Sitrion.Button"
    android:layout_width="@dimen/calendar_day_width"
    android:layout_height="@dimen/calendar_day_height"
    android:layout_row="1"
    android:layout_column="3"
    android:background="@drawable/round_button"
    android:text="13" />

<Button
    android:id="@+id/dateBtn5"
    style="@style/Widget.Sitrion.Button"
    android:layout_width="@dimen/calendar_day_width"
    android:layout_height="@dimen/calendar_day_height"
    android:layout_row="1"
    android:layout_column="4"
    android:background="@drawable/round_button"
    android:text="13" />

<Button
    android:id="@+id/dateBtn6"
    style="@style/Widget.Sitrion.Button"
    android:layout_width="@dimen/calendar_day_width"
    android:layout_height="@dimen/calendar_day_height"
    android:layout_row="1"
    android:layout_column="5"
    android:background="@drawable/round_button"
    android:text="13" />

<Button
    android:id="@+id/dateBtn7"
    style="@style/Widget.Sitrion.Button"
    android:layout_width="@dimen/calendar_day_width"
    android:layout_height="@dimen/calendar_day_height"
    android:layout_row="1"
    android:layout_column="6"
    android:background="@drawable/round_button"
    android:text="13" />

<ImageView
    android:id="@+id/dotIcon1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_row="2"
    android:layout_column="0"
    android:layout_gravity="center"
    android:layout_marginTop="5dp"
    app:srcCompat="@drawable/dotindicatoricon" />

<ImageView
    android:id="@+id/dotIcon2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_row="2"
    android:layout_column="1"
    android:layout_gravity="center"
    android:layout_marginTop="5dp"
    app:srcCompat="@drawable/dotindicatoricon" />

<ImageView
    android:id="@+id/dotIcon3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_row="2"
    android:layout_column="2"
    android:layout_gravity="center"
    android:layout_marginTop="5dp"
    app:srcCompat="@drawable/dotindicatoricon" />

<ImageView
    android:id="@+id/dotIcon4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_row="2"
    android:layout_column="3"
    android:layout_gravity="center"
    android:layout_marginTop="5dp"
    app:srcCompat="@drawable/dotindicatoricon" />

<ImageView
    android:id="@+id/dotIcon5"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_row="2"
    android:layout_column="4"
    android:layout_gravity="center"
    android:layout_marginTop="5dp"
    app:srcCompat="@drawable/dotindicatoricon" />

<ImageView
    android:id="@+id/dotIcon6"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_row="2"
    android:layout_column="5"
    android:layout_gravity="center"
    android:layout_marginTop="5dp"
    app:srcCompat="@drawable/dotindicatoricon" />

<ImageView
    android:id="@+id/dotIcon7"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_row="2"
    android:layout_column="6"
    android:layout_gravity="center"
    android:layout_marginTop="5dp"
    app:srcCompat="@drawable/dotindicatoricon" />

</GridLayout>

Answer 1

Please go through this question. What you need is to set width of gridlayout to match_parent i.e android:layout_width="wrap_content"

and set layout gravity of your internal elements to fill and give each column a weight of 1 such as

android:layout_gravity="fill"
android:layout_columnWeight="1"

Answer 2

For this you have to do this for in your code

android:layout_gravity="fill"
android:layout_columnWeight="1"

and also set the grid layout width to the match_parent then may be you will achieve this.

Answer 3

Use Linear with

android:orientation="horizontal"
android:weightSum="7"

Below is the xml layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal"
    android:weightSum="7">

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

        <TextView
            android:id="@+id/dayLabel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="M"
            android:textAlignment="center" />

        <Button
            android:id="@+id/dateBtn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="13" />

        <ImageView
            android:id="@+id/dotIcon1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="5dp"
            app:srcCompat="@drawable/circle_black" />

    </LinearLayout>

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

        <TextView
            android:id="@+id/dayLabe2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="M"
            android:textAlignment="center" />

        <Button
            android:id="@+id/dateBtn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="13" />

        <ImageView
            android:id="@+id/dotIcon2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="5dp"
            app:srcCompat="@drawable/circle_black" />

    </LinearLayout>

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

        <TextView
            android:id="@+id/dayLabe3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="M"
            android:textAlignment="center" />

        <Button
            android:id="@+id/dateBtn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="13" />

        <ImageView
            android:id="@+id/dotIcon3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="5dp"
            app:srcCompat="@drawable/circle_black" />

    </LinearLayout>

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

        <TextView
            android:id="@+id/dayLabe4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="M"
            android:textAlignment="center" />

        <Button
            android:id="@+id/dateBtn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="13" />

        <ImageView
            android:id="@+id/dotIcon4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="5dp"
            app:srcCompat="@drawable/circle_black" />

    </LinearLayout>

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

        <TextView
            android:id="@+id/dayLabel5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="M"
            android:textAlignment="center" />

        <Button
            android:id="@+id/dateBtn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="13" />

        <ImageView
            android:id="@+id/dotIcon5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="5dp"
            app:srcCompat="@drawable/circle_black" />

    </LinearLayout>

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

        <TextView
            android:id="@+id/dayLabel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="M"
            android:textAlignment="center" />

        <Button
            android:id="@+id/dateBtn6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="13" />

        <ImageView
            android:id="@+id/dotIcon6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="5dp"
            app:srcCompat="@drawable/circle_black" />

    </LinearLayout>

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

        <TextView
            android:id="@+id/dayLabel7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:gravity="center"
            android:text="M"
            android:textAlignment="center" />

        <Button
            android:id="@+id/dateBtn7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="13" />

        <ImageView
            android:id="@+id/dotIcon7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="5dp"
            app:srcCompat="@drawable/circle_black" />

    </LinearLayout>

</LinearLayout>