I have a android view with 2 buttons centered. I want to change the button sizes to be bigger when I run the app on a tablet because they look ridiculous small there since it is the same size as for the phones.
How can I do this?
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e9e9e9"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
<ImageView android:id="#+id/imageView1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android_layout_gravity= "center"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:src="#drawable/icon_bakgrund_android">
</ImageView>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/TableLayout01"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
>
<TableRow android:id="#+id/TableRow01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="260dp"
android:layout_height="50dp"
android:background="#drawable/nybutton"
android:layout_below="#+id/button2"
android:text="#string/las_sollefteabladet"
android:textColor="#ffffff"
android:layout_centerHorizontal="true"/>
</TableRow>
<TableRow android:id="#+id/TableRow02" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop">
<Button
android:id="#+id/button2"
android:layout_width="260dp"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:background="#drawable/nybutton"
android:layout_centerInParent="true"
android:text="#string/annonsorer"
android:textColor="#ffffff"
/>
</TableRow>
</TableLayout>
</RelativeLayout>
</RelativeLayout>
Here you go
insert in the button code
android:layout_weight="some integer value according to your need"
Simply make a separate layout file and place it in the folder
'Layout-xlarge'
or
'Layout-large'
You can do either of the following
make separate layout for large screen
use layout:weight for the buttons. Hence the button size will be set depending on the screensize.
You can create different dimen.xml for different screen densities, so you can have only one layout to adjust to multiple screens.
EDIT:
You have to create several folders for diferent densities (values-mdpi, values-hdpi, etc) and in each you create a dimens.xml . Then you add dimension items like this:
<dimen name="title_small_font_size">14sp</dimen>
<dimen name="header_title_font_size">32sp</dimen>
and so, in each file, adjusting the number as you need. And then, in your button you set the button attributes for example:
android:textSize="#dimen/grid_title_text_size"
Hope it helps.
As far as my knowledge goes, giving static width and height for the button will not be good option here. All you have to do is to create a background image for the button for all type of mobile and tablet size and keep these images in appropriate drawable folders, and try to give the textAppearance for the text of the button like this:
android:textAppearance="?android:attr/textAppearanceLarge"
I copy and past my layout-folder, renamed it to layout-large (with a small l) and took in all my xml views and changed them and it works fine.
Thanks!
Related
Im trying to make a Flashlight app for android (being an absolute beginner)
The concept is to make IronMan's chest light as the toggle button for the flash light UI.
I set Iron Man as a background ImageView. And set the chest light photo as the button's image src.
The problem is that, in different screen sizes, the alignment of the button gets changed as you can see in the screenshots below.
This is what it has to look like:
Button displaced when screensize changed:
If someone could help me out on how I could solve this problem, it would be great.
My XML code if that would be of any help:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
tools:context="example.flash.flash">
<!-- view for AdMob Interstitial Ad -->
<TextView
android:id="#+id/app_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/interstitial_ad_sample"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/level"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/app_title"
android:layout_centerHorizontal="true"
android:text="#string/start_level"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/next_level_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/next_level" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/iron"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorBackground"
android:src="#drawable/onn"
android:scaleType="fitCenter"
android:layout_marginBottom="57dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
ads:adSize="BANNER"
ads:adUnitId="#string/banner_home_footer"></com.google.android.gms.ads.AdView>
</RelativeLayout>
The problem is that you are designing the layout specific to one device/screen.
From the docs-
Android supports several configuration qualifiers that allow you to
control how the system selects your alternative resources based on the
characteristics of the current device screen. A configuration
qualifier is a string that you can append to a resource directory in
your Android project and specifies the configuration for which the
resources inside are designed.
See Different values folders in android as to how you can make different values/dimens.xml to suit different screens.
So create different values folder and check the docs - link
What parent layout are you using?
If RelativeLayout then you have to make buttons relative to each other.
These orientations are shown correctly here, but when i run it and changes the orientations the landscape mode doesn't works and all the buttons are misplaced as
what might the solution to this problem be?
XML for landscape mode.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#drawable/flowers"
android:id="#+id/frontpage_layout"
tools:context="com.example.hassidiczaddic.multiplescreensupport.MainActivity">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/scrollView">
<Button
android:layout_width="200dp"
android:layout_height="50dp"
android:text="OPEN"
android:textSize="20sp"
android:id="#+id/button.open"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="200dp"
android:layout_height="50dp"
android:text="LARGE"
android:textSize="20sp"
android:id="#+id/button.large"
android:layout_alignParentRight="true"
android:layout_marginRight="86dp"
android:layout_marginEnd="86dp"
android:layout_toRightOf="#+id/button.rate"
android:layout_toEndOf="#+id/button.rate" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Something"
android:id="#+id/button.something"
android:layout_marginTop="38dp"
android:layout_below="#+id/button.open"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/button.rate"
android:layout_toStartOf="#+id/button.rate" />
<Button
android:layout_width="wrap_content"
android:textSize="20sp"
android:layout_height="wrap_content"
android:text="RATE"
android:id="#+id/button.rate"
android:layout_marginTop="38dp"
android:layout_below="#+id/button.something"
android:layout_toRightOf="#+id/button.open"
android:layout_toEndOf="#+id/button.open" />
<Button
android:layout_width="wrap_content"
android:textSize="20sp"
android:layout_height="wrap_content"
android:text="CLOSE"
android:id="#+id/button.close"
android:layout_alignTop="#+id/button.something"
android:layout_alignRight="#+id/button.large"
android:layout_alignEnd="#+id/button.large"
android:layout_toRightOf="#+id/button.rate"
android:layout_toEndOf="#+id/button.rate" />
</RelativeLayout>
</ScrollView>
There are 6 different layout for the main activity, where the OS will select one most suitable for the current device in accordance to the qualifiers specified for each XML layout, the rules are defined here.
Since you've provided layout for small/normal/large screen sizes, these layout will take priority over your land layout. In fact, the only time your land layout will be used is when you run it on a xlarge screen, since it's only then that layouts defined in layout-land will be used (check the link above for more detail).
You can fix this by either:
Remove layout-small/layout-normal/layout-large, then OS have nothing better to use than the one provided in layout-port & layout-land, note that the use of layout-small/layout-normal/layout-large have been strongly discouraged for years now, you should check the Supporting Multiple Screens article.
Instead of using layout-port & layout-land, use the Available height qualifier (layout-hXXXdp) where XXX is the minimum height where you want this layout to be applied. For example layout-h320dp can contain the layout for phone on portrait mode, and put the side-by-side version of the layout XML in the default folder (layout).
Rework your UI design so none of the above is needed, perhaps by putting the buttons in a ScrollView.
As per your Images shows that you have used RelativeLayout and because No room is available for the buttons so it is overlapping and misplacing.
Better you use ScrollView as parent of RelativeLayout else you have to resize button dynamically by calculating height of the screen and all that parameters.
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
This is my layout file is ::
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="#+id/relativeLayout1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/bg1"
>
<!-- <RelativeLayout android:id="#+id/relativeLayo"
android:layout_width="480dp" android:layout_height="320dp"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_marginLeft="20dp"
android:background="#drawable/bg1"> -->
<ImageView android:src="#drawable/lets_play"
android:layout_width="wrap_content" android:layout_marginLeft="260dp"
android:id="#+id/imageView1" android:layout_height="wrap_content"
android:layout_marginTop="40dp"
></ImageView>
<ImageView android:src="#drawable/show_me"
android:layout_width="wrap_content" android:layout_marginLeft="220dp"
android:id="#+id/imageView1" android:layout_height="wrap_content"
android:layout_marginTop="60dp"
></ImageView>
<ImageButton android:id="#+id/anim_btn_play"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="260dp" android:layout_marginTop="150dp"
android:src="#drawable/play">
</ImageButton>
</RelativeLayout>
And mobile output is like ::
![this][1]
now my problem is :: i would like to set 480 * 320 size screen and layout is starting from left. At right side there is black portion remain.i have approx ten activity and all activity are going to display same direction. now i would like to show in center like ::
![this][2]
so can you tell me solution?
Easiest method is to wrap your Relative layout with something else, probably linear layout would be fine, and then:
<linearlayout gravity=center>
<relativelayout width=480dp height=320dp>
...
It should quick fix your problem on particular 480x320 screen.
BUT, I would suggest you rethink about your background image to make it possible to adopt to screens with different aspect ratio, consider looking nine-patch and make the background 'strecthable' or make a custom drawable that will stay in middle of screen.
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)