Got troubles with designing a layout

Question

I'm trying to build an alarm clock app, however I get trouble on designing the layout.

I want to add a button below the toggle button, but the button is not showing.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Alarm"
        android:paddingTop="10dp"
        android:paddingLeft="10dp"
        android:id="@+id/textView" />

    <TimePicker
        android:id="@+id/timePicker"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <View android:layout_marginLeft="10dp" android:layout_width="340sp" android:layout_height="2dp" android:background="#c0c0c0" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Repeat"
        android:paddingTop="20dp"
        android:paddingLeft="10dp"
        android:id="@+id/textView2" />

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:paddingBottom="10dp"
        android:layout_marginTop="10dp"
        android:layout_height="fill_parent"
        android:orientation="horizontal">

        <ToggleButton

            android:layout_marginLeft="20dp"
            android:layout_width="55sp"
            android:layout_height="wrap_content"
            android:textOn="@string/Sun"
            android:textOff="@string/Sun"
            android:checked="false"
            android:id="@+id/toggleSun" />

        <ToggleButton
            android:layout_marginLeft="-10dp"
            android:layout_width="57sp"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/toggleSun"
            android:layout_toEndOf="@id/toggleSun"
            android:textOn="@string/Mon"
            android:textOff="@string/Mon"
            android:id="@+id/toggleMon"
            android:checked="false" />

        <ToggleButton
            android:layout_marginLeft="-10dp"
            android:layout_width="55sp"
            android:layout_height="wrap_content"
            android:textOn="@string/Tue"
            android:layout_toRightOf="@id/toggleMon"
            android:layout_toEndOf="@id/toggleMon"
            android:textOff="@string/Tue"
            android:id="@+id/toggleTue"
            android:checked="false" />

        <ToggleButton
            android:layout_marginLeft="-10dp"
            android:layout_width="55sp"
            android:layout_height="wrap_content"
            android:textOn="@string/Wed"
            android:layout_toRightOf="@id/toggleTue"
            android:layout_toEndOf="@id/toggleTue"
            android:textOff="@string/Wed"
            android:id="@+id/toggleWed"
            android:checked="false" />

        <ToggleButton
            android:layout_marginLeft="-10dp"
            android:layout_width="55sp"
            android:layout_height="wrap_content"
            android:textOn="@string/Thu"
            android:textOff="@string/Thu"
            android:layout_toRightOf="@id/toggleWed"
            android:layout_toEndOf="@id/toggleWed"
            android:id="@+id/toggleThurs"
            android:checked="false" />

        <ToggleButton
            android:layout_marginLeft="-10dp"
            android:layout_width="55sp"
            android:layout_height="wrap_content"
            android:textOn="@string/Fri"
            android:layout_toRightOf="@id/toggleThurs"
            android:layout_toEndOf="@id/toggleThurs"
            android:textOff="@string/Fri"
            android:id="@+id/toggleFri"
            android:checked="false" />

        <ToggleButton
            android:layout_marginLeft="-10dp"
            android:layout_width="55sp"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/toggleFri"
            android:layout_toEndOf="@id/toggleFri"
            android:textOn="@string/Sat"
            android:textOff="@string/Sat"
            android:id="@+id/toggleSat"
            android:checked="false" />

    </RelativeLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:text="New Button"
        android:id="@+id/button"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />


</LinearLayout>

Edit

Aspicas · Accepted Answer · 2016-03-14T17:47:03.007

Try with this XML file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical" android:layout_width="match_parent"
              android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.20">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Alarm"
            android:paddingTop="10dp"
            android:paddingLeft="10dp"
            android:id="@+id/textView" />

        <TimePicker
            android:id="@+id/timePicker"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <View android:layout_marginLeft="10dp" android:layout_width="340sp" android:layout_height="2dp" android:background="#c0c0c0" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Repeat"
            android:paddingTop="20dp"
            android:paddingLeft="10dp"
            android:id="@+id/textView2" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.60">

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                            android:layout_width="fill_parent"
                            android:paddingBottom="10dp"
                            android:layout_marginTop="10dp"
                            android:layout_height="fill_parent"
                            android:orientation="horizontal">

            <ToggleButton

                android:layout_marginLeft="20dp"
                android:layout_width="55sp"
                android:layout_height="wrap_content"
                android:textOn="@string/Sun"
                android:textOff="@string/Sun"
                android:checked="false"
                android:id="@+id/toggleSun" />

            <ToggleButton
                android:layout_marginLeft="-10dp"
                android:layout_width="57sp"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/toggleSun"
                android:layout_toEndOf="@id/toggleSun"
                android:textOn="@string/Mon"
                android:textOff="@string/Mon"
                android:id="@+id/toggleMon"
                android:checked="false" />

            <ToggleButton
                android:layout_marginLeft="-10dp"
                android:layout_width="55sp"
                android:layout_height="wrap_content"
                android:textOn="@string/Tue"
                android:layout_toRightOf="@id/toggleMon"
                android:layout_toEndOf="@id/toggleMon"
                android:textOff="@string/Tue"
                android:id="@+id/toggleTue"
                android:checked="false" />

            <ToggleButton
                android:layout_marginLeft="-10dp"
                android:layout_width="55sp"
                android:layout_height="wrap_content"
                android:textOn="@string/Wed"
                android:layout_toRightOf="@id/toggleTue"
                android:layout_toEndOf="@id/toggleTue"
                android:textOff="@string/Wed"
                android:id="@+id/toggleWed"
                android:checked="false" />

            <ToggleButton
                android:layout_marginLeft="-10dp"
                android:layout_width="55sp"
                android:layout_height="wrap_content"
                android:textOn="@string/Thu"
                android:textOff="@string/Thu"
                android:layout_toRightOf="@id/toggleWed"
                android:layout_toEndOf="@id/toggleWed"
                android:id="@+id/toggleThurs"
                android:checked="false" />

            <ToggleButton
                android:layout_marginLeft="-10dp"
                android:layout_width="55sp"
                android:layout_height="wrap_content"
                android:textOn="@string/Fri"
                android:layout_toRightOf="@id/toggleThurs"
                android:layout_toEndOf="@id/toggleThurs"
                android:textOff="@string/Fri"
                android:id="@+id/toggleFri"
                android:checked="false" />

            <ToggleButton
                android:layout_marginLeft="-10dp"
                android:layout_width="55sp"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/toggleFri"
                android:layout_toEndOf="@id/toggleFri"
                android:textOn="@string/Sat"
                android:textOff="@string/Sat"
                android:id="@+id/toggleSat"
                android:checked="false" />

        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.20">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="New Button"
            android:id="@+id/button"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />
    </LinearLayout>


</LinearLayout>

EDIT:

Well...the best solution in your way it's use weight like percents, that is, you can divide your layouts in parts (weight using %), in my example, you can see three parts:

android:layout_weight="0.20" (20%)
android:layout_weight="0.60" (60%)
android:layout_weight="0.20" (20%)

TOTAL: 100%

If you put weight tag, you must to put your height or width to 0dp (depends of ur layout its vertical or horizontal).

Then if you want put your button just below the toggle buttons, you only need enlarge the last part, that is, enlarge the button Layout and decrease the second one, in total 100%.

For example, you could prove:

android:layout_weight="0.20" (20%)
android:layout_weight="0.20" (20%)
android:layout_weight="0.60" (60%)

You can put too a "invisible" layout using a FrameLayout with a weight tag.

What if I want to place the button just below the toggle button? — AI., Mar 14 '16 at 16:18
Paint exactly what do you need (use paint, photoshop, real paper....), update your question with the image, I'll provide you the sollution and I'll explain you later whatever you want to know to learn it. — Aspicas, Mar 14 '16 at 16:20

dilaver · Answer 2 · 2016-03-14T15:35:43.303

Height of the RelativeLayout that contains ToggleButtons must be wrap_content. And you cannot use layout_centerVertical and layout_centerHorizontal attributes with LinearLayout.

Edit: I suggest using this, instead of your RelativeLayout. Try to avoid using numbers as much as you can.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:layout_margin="2dp"
        android:weightSum="7">

        <ToggleButton
            android:id="@+id/toggleSun"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:checked="false"
            android:maxLines="1"
            android:textOff="Sun"
            android:textOn="Sun" />

        <ToggleButton
            android:id="@+id/toggleMon"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:checked="false"
            android:maxLines="1"
            android:textOff="Mon"
            android:textOn="Mon" />

        <ToggleButton
            android:id="@+id/toggleTue"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:checked="false"
            android:maxLines="1"
            android:textOff="Tue"
            android:textOn="Tue" />

        <ToggleButton
            android:id="@+id/toggleWed"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:checked="false"
            android:maxLines="1"
            android:textOff="Wed"
            android:textOn="Wed" />

        <ToggleButton
            android:id="@+id/toggleThurs"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:checked="false"
            android:maxLines="1"
            android:textOff="Thu"
            android:textOn="Thu" />

        <ToggleButton
            android:id="@+id/toggleFri"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:checked="false"
            android:maxLines="1"
            android:textOff="Fri"
            android:textOn="Fri" />

        <ToggleButton
            android:id="@+id/toggleSat"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:checked="false"
            android:textOff="Sat"
            android:textOn="Sat" />

    </LinearLayout>

If you use `fill_parent` for a layout, It would fill the available space in the screen with that layout. `wrap_content` uses only the space that layout needs. — dilaver, Mar 14 '16 at 15:37
It is the same for a button as well. You should check out [this](http://www.mkyong.com/android/android-wrap_content-and-fill_parent-example/) link and [this](http://stackoverflow.com/questions/432763/whats-the-difference-between-fill-parent-and-wrap-content) link for understanding layout attributes completely. — dilaver, Mar 14 '16 at 15:46

score 1 · Answer 3 · answered Mar 14 '16 at 15:33

use layout as

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="5">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Alarm"
        android:paddingTop="10dp"
        android:paddingLeft="10dp"
        android:id="@+id/textView"
        android:layout_weight="1" />

    <TimePicker
        android:id="@+id/timePicker"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <View android:layout_marginLeft="10dp" android:layout_width="340sp" android:layout_height="2dp" android:background="#c0c0c0" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Repeat"
        android:paddingTop="20dp"
        android:paddingLeft="10dp"
        android:id="@+id/textView2"
        android:layout_weight="1" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:paddingBottom="10dp" >

        <ToggleButton

            android:layout_marginLeft="20dp"
            android:layout_width="55sp"
            android:layout_height="wrap_content"
            android:textOn="@string/Sun"
            android:textOff="@string/Sun"
            android:checked="false"
            android:id="@+id/toggleSun" />

        <ToggleButton
            android:layout_marginLeft="-10dp"
            android:layout_width="57sp"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/toggleSun"
            android:layout_toEndOf="@id/toggleSun"
            android:textOn="@string/Mon"
            android:textOff="@string/Mon"
            android:id="@+id/toggleMon"
            android:checked="false" />

        <ToggleButton
            android:layout_marginLeft="-10dp"
            android:layout_width="55sp"
            android:layout_height="wrap_content"
            android:textOn="@string/Tue"
            android:layout_toRightOf="@id/toggleMon"
            android:layout_toEndOf="@id/toggleMon"
            android:textOff="@string/Tue"
            android:id="@+id/toggleTue"
            android:checked="false" />

        <ToggleButton
            android:layout_marginLeft="-10dp"
            android:layout_width="55sp"
            android:layout_height="wrap_content"
            android:textOn="@string/Wed"
            android:layout_toRightOf="@id/toggleTue"
            android:layout_toEndOf="@id/toggleTue"
            android:textOff="@string/Wed"
            android:id="@+id/toggleWed"
            android:checked="false" />

        <ToggleButton
            android:layout_marginLeft="-10dp"
            android:layout_width="55sp"
            android:layout_height="wrap_content"
            android:textOn="@string/Thu"
            android:textOff="@string/Thu"
            android:layout_toRightOf="@id/toggleWed"
            android:layout_toEndOf="@id/toggleWed"
            android:id="@+id/toggleThurs"
            android:checked="false" />

        <ToggleButton
            android:layout_marginLeft="-10dp"
            android:layout_width="55sp"
            android:layout_height="wrap_content"
            android:textOn="@string/Fri"
            android:layout_toRightOf="@id/toggleThurs"
            android:layout_toEndOf="@id/toggleThurs"
            android:textOff="@string/Fri"
            android:id="@+id/toggleFri"
            android:checked="false" />

        <ToggleButton
            android:layout_marginLeft="-10dp"
            android:layout_width="55sp"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/toggleFri"
            android:layout_toEndOf="@id/toggleFri"
            android:textOn="@string/Sat"
            android:textOff="@string/Sat"
            android:id="@+id/toggleSat"
            android:checked="false" />

    </RelativeLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:text="New Button"
        android:id="@+id/button"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_weight="1" />


</LinearLayout>

score 1 · Answer 4 · answered Mar 14 '16 at 15:46

1

I think about Linear Layout. Use Linear Layoutinstead of Relative Layout And You Can use Layout:weightfor alignment

answered Mar 14 '16 at 15:46

Rıdvan

720
7
11

Got troubles with designing a layout

4 Answers4