Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DataPicker looks like old design on new API's as well

So the problem is very simple:

I have integrated a DatePicker in my application. Not as a DialogDatePicker but as a View component (more precisely a View inside of a Fragment that is dynamically shown and removed from a FrameLayout contained in my main FragmentActiviy layout.).

now my problem is that this DataPicker looks like this: enter image description here

and not like this:

enter image description here

even when I target the higher API's, I tried setting my Min SDK to 16 or 17 as well but it didn't do any help either.

Some one know why it happens? and how can I show the new look of the data picker? preferably on old versions of Android as well?

Any help would be appreciated.

Thanks.

EDIT: code:

DataPickerFragment xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="6.5dp"
    android:paddingTop="6dp"
    android:paddingRight="8.5dp"
    android:paddingBottom="8.5dp"
    android:background="@drawable/date_picker_background">

    <DatePicker
        android:id="@+id/datePicker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:paddingBottom="40dp" />

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/bCancel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_weight="1.0"
            android:onClick="buttonCanceDatePickerOnclick"
            android:text="@string/cancel" />

        <Button
            android:id="@+id/bSave"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_weight="1.0"
            android:onClick="buttonSaveDatePickerOnclick"
            android:text="@string/save" />

     </LinearLayout>
</FrameLayout>

DataPickerFramgnet class:

public class DatePickerFragment extends Fragment {

    private Button bSave, bCancel;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.date_picker_fragment_layout, 
                                         container, false);
        return rootView;
    }
}

UPDATE:

Manifast file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.emildesign.sgreportmanager"
android:versionCode="1"
android:versionName="1.0">

    <uses-sdk
        android:minSdkVersion="13"
        android:targetSdkVersion="17" />

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

    <!--  Crittercism  -->
    <uses-permission android:name="android.permission.READ_LOGS"/>
    <uses-permission android:name="android.permission.GET_TASKS"/>

    <application
        android:allowBackup="true"
        android:name="com.emildesign.sgreportmanager.SGRaportManagerAppObj"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen">

        <activity
            android:name="com.emildesign.sgreportmanager.activities.LoginScrActivity"
            android:screenOrientation="landscape">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.emildesign.sgreportmanager.activities.ReportsTableActivity"
            android:screenOrientation="landscape">
        </activity>
        <activity
            android:name="com.emildesign.sgreportmanager.activities.ParametersActivity"
            android:screenOrientation="landscape">
        </activity>
        <activity android:name="com.crittercism.NotificationActivity"/>  
</application>

well I found where my problem was, I set:

android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen" 

to make my application full screen and this applied the old style of the data picker changing it to:

android:theme="@android:style/Theme.Holo.Light.NoActionBar.Fullscreen"

Creates the following DataPicker:

enter image description here

It's better then before but this is still not the result I'm looking for.

like image 692
Emil Adz Avatar asked Mar 07 '13 17:03

Emil Adz


2 Answers

Set your android:targetSdkVersion to be 11 or higher. Here is a sample application demonstrating this.


UPDATE

First, your original DatePicker screenshot is from a dark theme (e.g., Theme.Holo), whereas your second screenshot is from a light theme (e.g., Theme.Holo.Light).

Second, the DatePicker documentation has the following opening paragraph:

This class is a widget for selecting a date. The date can be selected by a year, month, and day spinners or a CalendarView. The set of spinners and the calendar view are automatically synchronized. The client can customize whether only the spinners, or only the calendar view, or both to be displayed. Also the minimal and maximal date from which dates to be selected can be customized.

You can get rid of the CalendarView via android:calendarViewShown (or setCalendarViewShown()). When you try that, you will find that your year spinner will appear once the CalendarView is gone.

like image 81
CommonsWare Avatar answered Nov 14 '22 20:11

CommonsWare


You have to use the Holo theme.

So, your theme should look like this:

<style name="AppTheme" parent="@android:style/Theme.Holo">
    ...
</style>
like image 30
Matthias Robbers Avatar answered Nov 14 '22 20:11

Matthias Robbers