I have researched on many relevant topics but the topics mainly revolve around images. I had understand this: http://developer.android.com/guide/practices/screens_support.html but I don't really get the idea of dynamic resizing for the fonts.
For images there's no problem, I used the ldpi, mdpi, hdpi and xhdpi. However for the fonts, I do not know how to resize them. Anyone?
My codes is as followed:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/headerimage"
android:orientation="horizontal">
<TextView
android:id="#+id/headerTitle"
android:layout_width ="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textColor="#FFF"
android:textSize="28dp"
android:textStyle="bold"
android:text="Some Random Banner Title"
style="#style/headerTextStyle"
/>
<ImageButton
android:id="#+id/btnPlus"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="5dp"
android:layout_marginTop="6dp"
android:background="#0000"
android:scaleType="centerCrop"
android:src="#drawable/plus" />
<ImageButton
android:id="#+id/btnInfo"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="6dp"
android:background="#0000"
android:scaleType="centerCrop"
android:src="#drawable/info" />
<ImageButton
android:id="#+id/btnGuide"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/btnPlus"
android:background="#0000"
android:scaleType="centerCrop"
android:src="#drawable/guide" />
</RelativeLayout>
I would put the text sizes in a style resource, then use alternate style resource files for screen sizes..
so you will have res/values-large/style.xml, res/values-small/style.xml, etc. Each of those styles will contain the item for the text size with different dp values. Remember, hdpi, mdpi, ldpi etc have to do with pixel density, not screen size.
So for instance, if in res/values/style.xml you have:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="headerTextStyle" >
<item name="android:textSize">28dp</item>
...
</style>
</resources>
in another resource file, suppose for large screen (res/values-large/style.xml) :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="headerTextStyle" >
<item name="android:textSize">46dp</item>
...
</style>
</resources>
Then of course apply this style to the element, and the system will pick the correct one based on the device's screen size.. You can provide multiple styles in the same file, one for header text, one for regular text - whatever distinct types of text you need, similar to CSS.
Alternatively, you could duplicate your layout file in similarly qualified resource directories, like res/layout-large/layout.xml, res/layout-small/layout.xml and have different text sizes in each, but this will be duplicating more xml unnecessarily.
Related
I want to have button with icon and text near icon both in center. I managed to do that with padding but since android has a lot of different screen sizes, it is not working well on small screen sizes. This is my code:
<Button
android:id="#+id/scanbtn"
android:text="#string/scan_btn_text"
android:textAlignment="center"
android:fontFamily="#font/open_sans_light"
android:drawableStart="#drawable/ic_photo_camera"
android:paddingStart="100dp"
android:paddingEnd="120dp"
android:textAllCaps="false"
android:layout_width="match_parent"
android:layout_height="65dp"
android:layout_marginEnd="15dp"
android:layout_marginStart="15dp"
android:layout_marginTop="25dp"
android:background="#drawable/border"
android:textColor="#color/white"
android:textSize="19sp"
android:transitionName="use/scanbtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="parent" />
This is my button. Please show me other (better) way to make this button be same on all screen sizes
Just wrap a TextView by FrameLayout and use the Framelayout as a button.
<FrameLayout
android:background="#E06666"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/icon"
android:text="Scan"
android:layout_gravity="center"
android:gravity="center"
/>
</FrameLayout>
Bellow is my result:
Maintain the button padding across various screen size
--- Create different values folders
values, values-sw350dp, values-sw480dp, values-sw600dp, values-sw720dp
-- Add a file dimens.xml in each folder
-- Add a dimension with same name but different values on each file
<!-- Add this to dimens.xml in values folder -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="button_padding_start">100dp</dimen>
</resources>
<!-- Add this to dimens.xml in values-sw350dp folder -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="button_padding_start">150dp</dimen>
</resources>
<!-- Do the same for all other folders and keep increasing the value of button_padding_start -->
Then reference the value from your layout instead of using a fixed dp and let android select the best choice based on the screen size to maintain similar look across various device.
<!-- paddingEnd may not be necessary -->
android:paddingStart="#dimen/button_padding_start"
Learn more about supporting different screens here
Use the following code and remove all paddings from button XML:
android:drawableLeft="#drawable/image
Hope you get the answer. Please select as right answer.
Just use the MaterialButton with the app:iconGravity attribute.
Use the textStart or textEnd value.
<!-- Icon gravity textStart -->
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.Icon"
app:icon="#drawable/...."
app:iconGravity="textStart"
android:text="#string/..."
.../>
<!-- Icon gravity textEnd -->
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.Icon"
app:icon="#drawable/..."
app:iconGravity="textEnd"
android:text="#string/...."/>
I actually have fixed margin_Top, which is 50dp. But when I tested with different size of screens, the imageview will not be in the same position as each other. Therefore, I searched something about how to adjust the dimen.xml in values. But I have no idea how to edit, create new dimen.xml, and calculate the size in different screens.
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:layout_centerInParent="true"
tools:context="com.example.mygames.MainActivity$PlaceholderFragment">
<ProgressBar
android:id="#+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="350dp"
android:layout_height="750dp"
android:indeterminate="false"
android:max="100"
android:progress="50"
android:progressDrawable="#drawable/circular"
android:secondaryProgress="100"
android:layout_marginBottom="110dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#drawable/whitecircle"
android:id="#+id/imageView3"
android:layout_alignTop="#+id/tv"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp" />
<TextView
android:id="#+id/tv"
android:layout_width="250dp"
android:layout_height="250dp"
android:gravity="center"
android:text="25%"
android:textColor="#ffffff"
android:textSize="35sp"
android:textStyle="bold"
android:layout_marginBottom="57dp"
android:layout_alignBottom="#+id/circularProgressbar"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:textSize="20sp"
android:text="Progress" />
</RelativeLayout>
My dimen.xml:
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="fab_margin">16dp</dimen>
<dimen name="appbar_padding_top">8dp</dimen>
</resources>
This is done in a different way.
Like you can put a layout for landscape mode in a folder layout-land you can put values files (like dimens.xml) in different folders too.
Example is the values-w820p folder which is created in a default project.
the -wxxxx is the screen dimension (for tablets and the like).
So you just need copies of your dimens.xml in different values folders, each containing the values for the screen size.
I am not native english, I hope you understand what I mean.
Android will automatically pick the file which fits the currently running device best.
Read through the resource features here: https://developer.android.com/guide/topics/resources/providing-resources.html
Here is a simple example:
in your values folder is dimens.xml which holds
<dimen name="examplewidth">50dp</dimen>
now create a folder values-mdpi and just copy the dimens.xml file into that folder.
in that copy you change the value from 50dp to... say 20dp.
Then examplewidth will be 50dp on all devices except on low-res screens (mdpi) where it will resolve to 20dp. Automatically you do not need to write a single line of code.
I have used a picture in the actionbar for back arrow but I want to resize the picture height and width which is shown below: how I can change the size of that. Also I attached the xml file as well
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:homeAsUpIndicator">#drawable/images</item>
Let's say you have actionbar.xml layout file containing this code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/action_bar_details"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageButton
android:id="#+id/action_bar_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dimen_very_small"
android:background="#color/colorPrimary"
android:padding="#dimen/dimen_medium"
android:src="#drawable/abc_ic_ab_back_mtrl_am_alpha" />
<TextView
android:id="#+id/action_bar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/dimen_medium"
android:text="#string/title_activity_details"
android:textColor="#ffffff"
android:textSize="24sp"
android:textStyle="normal" />
</LinearLayout>
</LinearLayout>
And you want to change size of view with id 'action_bar_back'. Here it's ImageButton, but 'ImageView' also would be good. You can do it i many ways:
change layout_width and layout_height with exact value like 60dp
scale an image using scaleX, scaleY, scaleType. It uses float values.
use this great tool: https://romannurik.github.io/AndroidAssetStudio/ to generate some needed sizes of image and put them in drawable-[density] folders
using programs like GIMP to resize the picture to desired size
Hope this article would be useful: Supporting Multiple Screens
I'm developing an Android 2.2.2 application which will support multiple screens sizes and all screens will be portrait. I won't support landscape.
I have test the following layout on an HTC Desire and on a Samsung Galaxy Tab 7.7.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/no_conectado"
android:orientation="vertical" >
<TextView
android:id="#+id/labelSelGateName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="80dp" />
<TextView
android:id="#+id/labelSelOpened"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<ProgressBar
android:id="#+id/indicatorActivityView"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="22dp"
android:layout_gravity="center_horizontal" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="110dp"
android:layout_marginTop="60dp"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnMyGates"
android:layout_width="50dp"
android:layout_height="110dp"
android:layout_marginLeft="20dp"
android:layout_weight=".33"
android:background="#null"
android:contentDescription="#string/layout_empty"
android:onClick="onGateClick" />
<LinearLayout
android:layout_width="90dp"
android:layout_height="110dp"
android:layout_weight=".33"
android:orientation="vertical" >
<ImageButton
android:id="#+id/btnOpen"
android:layout_width="90dp"
android:layout_height="55dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#null"
android:contentDescription="#string/layout_empty"
android:onClick="onOpenDoorClick" />
<ImageButton
android:id="#+id/btnClose"
android:layout_width="90dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#null"
android:contentDescription="#string/layout_empty"
android:onClick="onCloseDoorClick" />
</LinearLayout>
<ImageButton
android:id="#+id/btnOptions"
android:layout_width="50dp"
android:layout_height="110dp"
android:layout_marginRight="20dp"
android:layout_weight=".33"
android:background="#null"
android:contentDescription="#string/layout_empty"
android:onClick="onOptionClick" />
</LinearLayout>
<ImageButton
android:id="#+id/btnFaqs"
android:layout_width="110dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:background="#null"
android:contentDescription="#string/layout_empty"
android:onClick="onFAQClick" />
<ImageButton
android:id="#+id/btnInfo"
android:layout_width="110dp"
android:layout_height="60dp"
android:layout_gravity="right"
android:layout_marginTop="20dp"
android:background="#null"
android:contentDescription="#string/layout_empty"
android:onClick="onInfoClick" />
</LinearLayout>
I have images for ldpi, mdpi, hdpi and x-hdpi.
Background image looks great, but all widgets (TextView, ProgressBar, ImageButton, etc) aren't in the right position when I test it on Samsung Galaxy Tab.
I have designed this layout on Eclipse using 'Nexus One` as a model.
Here people are recommend me that use only one layout for every screen size and densitiy, but it doesn't work. I'm using dp units and fill_parent, etc. but it is different on Galaxy Tab.
Do I need a layout for x-large screen sizes?
Indeed, the advice you received was good: it's possible to have only one layout file, but as it was already suggested in comments, it's not good to hardcode dimensions, even if you use dp or dip, specially when you are targeting all the screen sizes and densities available.
Instead, you should replace those values with links to dimensions values.
For example, instead of android:layout_marginLeft="10dp", you'll have something like
android:layout_marginLeft="#dimen/textview_margin_left"
where textview_margin_left is defined in the dimens.xml, having different values in different folders;
probably in folder values: <dimen name="textview_margin_left">10dp</dimen>,
in folder values-large: <dimen name="textview_margin_left">20dp</dimen>,
while in values-xlarge: <dimen name="textview_margin_left">30dp</dimen>
But this is just an example, you have to test on all dimensions and resolutions and find the best values for your layout. In Eclipse, in Graphical Layout mode, you can easily get an idea about how your layout looks on various devices, just by clicking on Nexus One, and choosing another model from the list, and the layout will automatically update.
Also, you can move in dimens.xml all the text sizes, and that will be very useful for x-large devices.
Using only one RelativeLayout instead many imbricated LinearLayouts might also be a good idea, and using relative positioning for your objects, instead some of the hardcoded values.
The Problem is following you use in your layout, static values (100dp, 60dp). Now the problem is on a higher resolution this dp isn't the same.
That means you should create a layout for x-large screens. Also I wouldn't use those static values. Than your application will behave good on many diffrent screensizes!
Have a great Day
safari
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 .