intA
intA

Reputation: 2671

Number picker in android not showing properly

I'm starting to build an app with android studio and right away I'm having a bit of an issue. Currently my number pickers look like this in the XML preview:

preview

But when I run the app (on the emulator) it looks like this:

emulator

There is a text view that you can't see in the preview but appears when the app is run, that is why you see the text "Time's up" in the emulator screenshot. What I'm wondering is why are the number pickers so close to my textview and off to the left? I don't mind the change in style (in fact I welcome it) but I can't figure out why they moved. Any help is greatly appreciated! Here is my XML code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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"
tools:context="com.skytbest.intervaltrainer.MainActivity">

<TextView
    android:id="@+id/timer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:paddingRight="10dip"
    android:paddinBottom="50dip"
    android:textSize="50dp"
 />

<Button
    android:id="@+id/button"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:text="Start"    />

<NumberPicker
    android:id="@+id/numberPicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/timer"
    android:layout_toLeftOf="@+id/timer"
    android:paddingTop="50dp"   />

<NumberPicker
    android:id="@+id/numberPicker2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/numberPicker"
    android:layout_toRightOf="@+id/numberPicker"
    android:paddingTop="50dp"   />


</RelativeLayout>

Upvotes: 1

Views: 4573

Answers (2)

dasdasd
dasdasd

Reputation: 2031

You need to set setMinValue and setMaxValue otherwise it will get stack on 0.

Upvotes: 2

Clyde
Clyde

Reputation: 7549

Here is a working layout using the suggestion in my comment. Note that it is helpful to put some text in the TextView to better enable the UI designer to show the layout. Even then it sometimes does not match what you see on screen, especially when you have invalid combinations of layout constraints.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.skytbest.intervaltrainer.MainActivity">
<TextView
        android:id="@+id/timer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:text="Label"
        android:paddingBottom="50dp"
        android:paddingTop="50dp"
        android:textSize="50dp"
        />
<Button
        android:id="@+id/button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Start"/>

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/timer">
    <NumberPicker
            android:id="@+id/numberPicker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    <NumberPicker
            android:id="@+id/numberPicker2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
</LinearLayout>

Upvotes: 2

Related Questions