I'm having a lot of trouble finding references for lockscreen widgets that were introduced in Android 4.2.
I've created a widget that works fine on the launcher and it is sized as I expect. However I've enabled this widget to be on the lockscreen and it doesn't size properly, vertically.
According to http://developer.android.com/guide/topics/appwidgets/index.html#lockscreen it will take up the size available vertically if you set android:resizeMode="vertical"
If the widget marks itself as vertically resizable, then the widget
height shows up as "small" on portrait phones displaying an unlock UI.
In all other cases, the widget sizes to fill the available height.
Also I used the sizing described at http://developer.android.com/guide/practices/ui_guidelines/widget_design.html
Tiles > Size
1 > 40dp
2 > 110dp
3 > 180dp
4 > 250dp
… > …
n > 70 × n − 30
I've set this and at appears to be even smaller than a "small" widget. Basically, does anyone know what is wrong with the widget in image 1 that it won't expand? My code is below.
1) What it looks like in its default state.
2) What it looks like when expanded on another screen.
xml/clock_widget.xml
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:initialKeyguardLayout="#layout/clock_widget"
android:initialLayout="#layout/clock_widget"
android:minHeight="110dp"
android:minWidth="180dp"
android:resizeMode="vertical"
android:updatePeriodMillis="1000"
android:widgetCategory="keyguard|home_screen" >
</appwidget-provider>
layout/clock_widget.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/clock_widget"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/widget_hour"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="36sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=":"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="36sp" />
<TextView
android:id="#+id/widget_minute"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="36sp" />
</LinearLayout>
<TextView
android:id="#+id/widget_date"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
Looks like this only happens in the emulator. Testing on real hardware works fine.
Related
I'm playing around with making a random recipe collection app.
Now I came across a problem: at the moment I have designed it with my mobile's resolution in mind. But what if the app is used on a device with larger resolution eg. a tablet.
What I want to achieve is that I want the buttons to grow shrink depending on the resolution. For example: when holding my phone vertically, there are 2 columns of buttons. When holding it horizontally, there still are 2 columns, but the view gets wider. Then there should be 4 columns to fill as much of the white space as possible.
Two pictures to illustrate my thoughts:
vertical
horizontal with 2 more columns
My code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffcc33"
android:orientation="vertical"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1000" >
<EditText
android:id="#+id/search_box"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1000"
android:ems="5"
android:hint="#string/search_hint" />
<Button
android:id="#+id/search_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/search_button" />
</LinearLayout>
<ScrollView android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<RelativeLayout
android:layout_width="225dp"
android:layout_height="wrap_content"
android:layout_below="#+id/search_box"
android:layout_gravity="center"
android:layout_marginTop="15dp" >
<Button
android:id="#+id/btn_lihatoidud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:drawableTop="#drawable/lihatoidud"
android:layout_alignParentTop="true"
android:text="Lihatoidud"
android:textSize="18sp" />
<Button
android:id="#+id/btn_kypsetised"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_lihatoidud"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/kypsetised"
android:text="Küpsetised"
android:textSize="18sp" />
<Button
android:id="#+id/btn_seenetoidud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_kypsetised"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/seenetoidud"
android:text="Seenetoidud"
android:textSize="18sp" />
<Button
android:id="#+id/btn_juustutoidud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_seenetoidud"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/juustutoidud"
android:text="Juustutoidud"
android:textSize="18sp" />
<Button
android:id="#+id/btn_lisandid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_juustutoidud"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/lisandid"
android:text="Lisandid"
android:textSize="18sp" />
<Button
android:id="#+id/btn_supid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#android:color/transparent"
android:drawableTop="#drawable/supid"
android:text="Supid"
android:textSize="18sp" />
<Button
android:id="#+id/btn_voileivad"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_supid"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/voileivad"
android:text="Võileivad"
android:textSize="18sp" />
<Button
android:id="#+id/btn_pudrud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_voileivad"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/pudrud"
android:text="Pudrud"
android:textSize="18sp" />
<Button
android:id="#+id/btn_joogid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_pudrud"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/joogid"
android:text="Joogid"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Android has a few mechanisms for dealing with this kind of thing. For most people simply having a different layout for different classes of device will be sufficient. i.e:
res/
layout/
my_layout.xml
layout-land/ # landscape
my_layout.xml
layout-sw600dp # bigger devices
my_layout.xml
layout-sw600dp-land # Big and landscape
Android will automatically pick the right layout on the device your app gets loaded on. See the Developer Guide for details there. Alternatively, you might need to define your own custom view that resizes your grid based on the available size. An example of this is a CellLayout, a class written for the grid of apps in Launcher
I would actually reccomend you use the GridView pattern.
https://developer.android.com/guide/topics/ui/layout/gridview.html
Benfits include
Easily customize able if you need multiple rows/columns
Faster performance because you re-use a lot the same views. Scales much better than scrollview approach
Here example with two column for Phones
Here example with four column for tablets
All changing only the number of columns the grid should show. The best way to do this by what "JRaymond" recommended, by having multiple values resposnes depending on if its a tablet/phone. Example
->values ->attrs_arin_view.xml
->values-land->attrs_arin_view.xml
->values-sw600dp -> attrs_arin_view.xml
inside values ->attrs_arin_view.xml
<resources>
<integer name="number_of_column">2</integer>
</resources>
and then change in the values-land to have number_of_column to 4.
Then in your in your xml you mention the integer once
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
>
<GridView
android:id="#+id/gridView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:horizontalSpacing="8dp"
android:numColumns="#integer/number_of_column"
android:padding="8dp"
tools:listitem="#layout/grid_cell_note"
>
</GridView>
</LinearLayout>
You need to create xml files for different screen sizes
http://developer.android.com/guide/practices/screens_support.html
design your XML files to use references instead of hardcoded strings. You can then assign a reference to layouts, buttons and so on which has a different value depending on screen sizes.
(use android:padding="#dimen/pagepadding" instead of android:padding="16dp" and define the dp in values/dimens.xml like this: <dimen name="pagepadding">16dp</dimen>)
To do that you have to create new folders in your Project like values-sw600dp for devices with 600dp smallest width (like Nexus 7 I believe) or values-sw720dp-land for devices with the smallest width of 720dp (10 inch tablets I believe) in landscape.
Do some reading on the developer page and on the internet for that. It's not too difficult
The Layout is looking as expected on the phone and looking different on the emulator. I am using SDK API 10 (Android 2.3). The test phone is a Motorola Milestone with Android 2.3.3 (Cyanogen Mod 7).
The SDK layout preview renders the preview like the Emulator.
The following image shows the expected rendering on the right side (rendered by phone) and the unexpected rendering on the left side (SDK API 10, emulator and preview).
What is the reason for the difference and how do I fix it? Removing margin and padding (by setting it to 0dp at TextView1) did not help.
main layout (parent)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/test_bg_red"
android:padding="20dp"
>
<include
android:layout_width="fill_parent"
android:layout_height="26dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
layout="#layout/test_child" />
/>
<include
android:layout_width="fill_parent"
android:layout_height="26dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
layout="#layout/test_child" />
</RelativeLayout>
child layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="26dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="4dp"
android:gravity="top"
android:includeFontPadding="false"
android:text="42"
android:textSize="32dp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_toRightOf="#+id/textView1"
android:includeFontPadding="false"
android:text="TextView2"
android:textSize="12dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_alignParentTop="true"
android:includeFontPadding="false"
android:text="TextView3"
android:textSize="10dp" />
</RelativeLayout>
I believe this is caused by different screens having different aspect ratios. Since phones have 4x4 cells regardless of physical screen size, each cell must be wider or narrow to fit 4 in a row. Using DP takes care of density, but screens which are more or less square will still require cells to be more or less square. That means the number of DP per cell will vary and cause your views to not look the same on different devices.
The only solution I have found is to make your layouts as flexible as possible.
I want to make a match game layout in android.
I'm having problem with making my layout compitable to all screen resolutions.
What I want, is an image icon of the home team on the left, a strechable home team image name, home team score text, seperator, away team score text, a strechable away team image name, an image icon of the away team on the right.
The score should be in the middle. I just can't get it right. before this try, I've tried to divide the main layout to 3 layouts: home team layout, score layout and away layout - with no success of getting the expected result.
Can someone please help ?
Here is my piece of code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/GamesBGColor" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/homeTeamIcon"
android:layout_width="50dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/holonlogo" />
<ImageView
android:id="#+id/homeTeamText"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/holontext"
android:layout_width="115dip"
android:layout_marginLeft="3dip" />
<TextView
android:id="#+id/homeTeamScore"
android:layout_width="25dip"
android:layout_height="wrap_content"
android:text="123"
android:textColor = "#color/purple"
android:layout_gravity="center"
android:textStyle="bold"
android:layout_marginLeft="5dip" />
<TextView
android:id="#+id/seperator"
android:layout_width="10dip"
android:layout_height="wrap_content"
android:text="-"
android:layout_gravity="center"
android:layout_marginLeft="7dip" />
<TextView
android:id="#+id/awayTeamScore"
android:layout_width="25dip"
android:layout_height="wrap_content"
android:text="122"
android:textColor = "#color/red"
android:layout_gravity="center"
android:textStyle="bold"
android:layout_marginLeft="7dip" />
<ImageView
android:id="#+id/awayTeamText"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/jerusalemtext"
android:layout_width="115dip"
android:layout_marginLeft="3dip"/>
<ImageView
android:id="#+id/awayTeamIcon"
android:layout_width="50dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/jerusalemlogo" />
</LinearLayout>
</LinearLayout>
If you want your layouts to work on different resolution screens your should be sizing them using dip as the unit. For example:
android:layout_marginRight="10dip"
dip stands for Device Independent Pixel and using these in your layout means that Android will automatically scale your layout depending on which display the device running your application has.
You can read about these in the Supporting Multiple Screens page in the Android Developer Documentation. This document also has some other options for handling different displays but I think using dip is probably the easiest.
something happened to my app as i cannot place the widget in the Emulator. It says: no more room on this home screen. I tried to modifiy the layout_width parameters but nothing have changed. Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="200px"
android:layout_height="100px"
android:layout_gravity="left"
android:id="#+id/widgetlayout"
android:background="#drawable/blacktrans"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="200px"
android:layout_height="20dip"
android:id="#+id/widgetlayoutinside3"
android:paddingTop="3px"
android:layout_marginLeft="5px"
>
<TextView android:id="#+id/widget_textview3"
android:text="widget_text"
android:layout_height="wrap_content"
android:layout_width="70px"
android:textColor="#FFFFFF"
android:textSize="13sp"
android:paddingLeft="15px"
android:layout_gravity="fill_horizontal"
android:layout_marginLeft="5px"
/>
<Button
android:id="#+id/ButtonP3"
android:layout_width="28px"
android:layout_height="28px"
android:layout_toRightOf="#+id/widget_textview3"
android:layout_marginLeft="5px">
</Button>
<Button
android:id="#+id/ButtonS3"
android:layout_width="28px"
android:layout_height="28px"
android:layout_marginLeft="5px"
android:layout_toRightOf="#+id/ButtonP3">
</Button>
<Button
android:id="#+id/ButtonM3"
android:layout_width="28px"
android:layout_height="28px"
android:layout_marginLeft="5px"
android:layout_toRightOf="#+id/ButtonS3">
</Button>
</RelativeLayout>
</RelativeLayout>
If there is too many icon on screen and your widget is so big, you can't place it. I think you must move the icons and make smaller widget.
Read the section about widths for widgets again.
http://developer.android.com/guide/practices/ui_guidelines/widget_design.html#sizes
I'd suggest using a standard size, and trying to see how that works for you.
widget screen sizes are in 80x100y dip in portrait per cell and 106x74y dip in landscape. You need to make sure your widget can either statically conform to that size or be dynamically assigned to it (i.e. fill_parent)
Looking at the Facebook widget I realized its a 4x2 cell and this isn't one of the standard sizes. I have tried to re-create a widget of this size (either as 320x200 or 294x146 px) however the widget doesn't look good on all devices. The widget layout is :
<?xml version="1.0" encoding="utf-8"?>
<!-- Portrait -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/widget"
android:background="#drawable/widget_bg"
>
<TextView android:id="#+id/widget_title"
android:layout_width="fill_parent"
android:layout_height="60dip"
android:layout_marginTop="1dip"
android:textSize="20.0sp"
android:maxLines="3"
android:textColor="#000"
android:textStyle="bold"
android:gravity="center"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:ellipsize="end"
/>
<ImageView android:id="#+id/widget_thumb"
android:layout_width="304dip"
android:layout_height="90dip"
android:layout_alignParentLeft="true"
android:layout_marginLeft="7dip"
android:src="#drawable/thumb_placeholder_large"
android:adjustViewBounds="true"
android:layout_below="#+id/widget_title"
android:background="#000"
/>
<!-- previous button -->
<Button
android:id="#+id/widget_previous"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginBottom="35dp"
android:layout_alignParentBottom="true"
android:background="#drawable/left_button"/>
<!-- Next Button -->
<Button
android:id="#+id/widget_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:layout_marginBottom="35dp"
android:layout_alignParentBottom="true"
android:background="#drawable/right_button" />
<!-- Indicator -->
<LinearLayout
android:id="#+id/widget_progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginBottom="33dp"
android:layout_marginRight="50dp"
android:layout_alignParentBottom="true">
<!-- ProgressBar throws exception when it's set invisible from RemoteViews use a layout wrapper instead -->
<ProgressBar
android:layout_width="15dp"
android:layout_height="15dp">
</ProgressBar>
</LinearLayout>
</RelativeLayout>
On the Motorola Droid this layout fits properly, however on other devices the ImageView sits way below. Any help/suggestions are appreciated.
The drawable_bg.png is 294x146px.
Sandeep
The actual size of the widget depends on
the display resolution (pixels) of the device
the used home application (they have different notification bars and bottom bars)
the Android OS version (different versions also have different home apps)
So better make your layout "fill_parent" and your background image a "ninepatch" image.
Also use different background images for different display resolution (dpi) to make the background image look perfect.
i think you should consider creating more layouts for different screen sizes , and test them so you could make sure your widget looks good on all screen sizes .