I have created a button in Photoshop. The problem is that when I test app from a big screen phone everything is good, but when I test in smaller phone then button is very big. How can I make good size button for every phone sizes?
I suppose by "I designed a button in Photoshop" you mean that you designed its background-image.
The size of a Button is actually not necessarily dependent on the size of the background image. You can control the size of your button via its properties that can be set in the layout.xml file (or in code).
In this simple example the Button will always use up exactly half of the parent layouts width (LinearLyout).
(Watch the "weightSum" and "weight" properties).
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:weightSum="2">
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="Button"
android:layout_weight="1" />
</LinearLayout>
Of course, there are many more ways and properties of how to adjust your layout to different screen sizes, this should just give you a brief example of how it could be done.
For more information, check out this tutorial from the Google-Android-Developer page:
Supporting Multiple Screen Sizes (especially Density-Independence should be interesting for you)
http://developer.android.com/guide/practices/screens_support.html
Related
the upper part of recyclerview item is erased in some phones and is normal in other phones as the images below.
the first image is normal which from samsung phone (android 12 )
the second image has the problem which from huawi phone (android 8)
this is the code
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="70dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:layout_margin="5dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/itemImage"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:riv_oval="true"
/>
<View
android:layout_width="1dp"
android:layout_height="1dp"
android:id="#+id/viewSupporter2"
app:layout_constraintBottom_toBottomOf="#id/itemImage"
app:layout_constraintEnd_toEndOf="#id/itemImage"
app:layout_constraintStart_toStartOf="#id/itemImage"
app:layout_constraintTop_toTopOf="#id/itemImage"
/>
<TextView
android:id="#+id/diseasename"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="disease name"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black"
app:layout_constraintBottom_toTopOf="#id/viewSupporter2"
app:layout_constraintStart_toEndOf="#id/itemImage"
/>
<TextView
android:id="#+id/diseasenickname"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text= "disease nickname"
android:textColor="#color/teal_700"
app:layout_constraintTop_toBottomOf="#id/viewSupporter2"
app:layout_constraintStart_toEndOf="#id/itemImage"
tools:ignore="NotSibling" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
You're doing a basic mistake of having your cards at fixed height of 70dp. Change them to be wrap_content and tweak margins/paddings of your layout instead to achieve the size you need.
While it looks ok on device you designed it for you can see it cannot fit TextViews on the other one so they ends up being clipped (on top). Actually you can even break it on your Samsung if you go into device settings and increase font size.
You have to let your card view "grow" in those cases so unrestraining height it is the way to go. Although you might consider adding maxlines to your textviews so they don't get too out of hand with maximum font size.
The problem here is your second device is set to a larger system font size than the first one. The dp system is designed so that things look consistent on different devices, and you can see that the ImageView takes up pretty much the same amount of space on both - the space around it is the same, the layout looks the same.
But you have to account for the user changing their overall text size, which is what's happening on your second image. See how the text is just bigger? Not just in your list items - the diseases text is taller than the hamburger icon on this one, the tab headers are much closer together because the words are wider...
You have three options in this case
use dp instead of sp for the text sizes (so they're consistent and don't scale to the user's preference)
make sure your fixed layout has enough space for those larger text sizes
make sure it can expand as necessary to fit them
The first option is ok sometimes, when you have text that's already large enough for everyone, and you want to maintain some kind of visual consistency (like a fixed design where things are a certain size etc). Don't do this as a way to get around the limitations of having to provide accessible content, that scales so the user can read it.
The flexible layout approach is what Pawel's suggesting - basically design your layout so it can grow if necessary. You can use the minWidth and minHeight layout attributes for this (and layout_constraintHeight_min in ConstraintLayout) to design how you want it to look, but use things like wrap_content and constraints to allow it to grow beyond that if necessary. That way you get it looking how you like, but if the user needs bigger text, it compromises.
And don't worry if you don't like how it looks with large text - that's not important! What's important is that the user can read it, and everything's visible and accessible. Nothing cut off, nothing overlapping anything, everything clickable etc. The user is the one making the compromise between style and practicality, and they probably don't have a choice, so just making it usable in that situation is the main thing.
The middle option is the fixed layout that has enough space for the larger text settings. This is actually what's recommended in the Material Design spec - I can't link directly to the Two line version, but go here and scroll down - there are some similar to what you're doing:
Those measurements are all in dp - notice that the top line's position is defined by where its baseline is, the line the text "rests" on, relative to the top of the layout. You can do that with:
android:layout_height="wrap_content"
app:firstBaselineToTopHeight="32dp"
app:layout_constraintTop_toTopOf="parent"
And then the text below has its baseline relative to the bottom of the first
app:layout_constraintBaseline_toBaselineOf="#id/firstTextView"
app:layout_marginBaseline="20dp"
or you could constrain it to the top of the layout like the first one, with a value of 32 + 20dp.
Notice that this design leaves space for the text to grow vertically (up from the baseline, which is in a fixed position). If you use the Material Design type scale (which is a bunch of standard text styles and font sizes with names like Subtitle and Body1) then those list item specs should have enough room to hold the text even at the larger font settings. Both lines in that image can pretty much double in height and still fit
The nice thing about these specs is someone's done the work coming up with a design for you! And they're working with fixed sizes, so you get a nice consistent look to your lists
I'm building an app with the Fresco library, by Facebook.
I'm having issues trying to understand how I should implement a view using Fresco, if my App will be usable among different devices. As you can see in the images attached, I have a Nexus6, a NexusOne and a Nexus7.
All of them have the same Fresco Drawee, (200dp x 200dp). As I've read through the documentation of Fresco, it is necessary, and mandatory, to fix the image size. However I'm having trouble understanding how can I achieve something as simple as having an ImageView using 50% of the image width using Fresco.
The desired result would be to have an image that uses half of the screen (in terms of width), and leave the rest of the space for the different texts (title+descriptions shown).
Normally I would do this using weight's, however I'm not sure how to achieve this with the library, or what the best practices would be.
Based on this question (and documentation), I'm not sure if adding a listener is the best option. I'm just failing to understand how Facebook or other applications who use this library, do it for different devices.
Thanks in advance
The code shown of this images is basically the following:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="10">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/my_image_view"
android:layout_width="200dp"
android:layout_height="200dp"
fresco:actualImageScaleType="focusCrop"
fresco:backgroundImage="#drawable/user_icon"
fresco:fadeDuration="300"
fresco:placeholderImage="#color/common_action_bar_splitter"
fresco:placeholderImageScaleType="fitCenter" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toRightOf="#+id/my_image_view">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Title 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="#color/menu_color"
android:text="Description 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Title 2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="#color/menu_color"
android:text="Description 2" />
</LinearLayout>
</RelativeLayout>
UPDATE:
I also don't know how to get a full-screen image. If we must either specify the dimensions, or use match_parent, but using match_parent on both would use the whole parent, how can I get something like the image showing the Facebook image?.
I believe #Gueorgui Obregon's is a good idea, however I'm still wondering if the problem is the design pattern of using 50% of the screen for a picture. For instance, take 2 cell phone models with the same dimensions (MDPI for example), but one of them is a little bit wider than the other. Using the dimensions approach I'd get than on one mobile it takes half of the screen, but on the other one, it would take a little bit more/less.
In summary: Where is the problem? Is thinking in percentages a bad idea when designing views? Should I tell my designer that it's a bad design idea for android to use percentages? More importantly, how can Facebook achieve something like the last photo (where the pictures use a ~33% of the screen)?
Your could use dimensions.xml for different values folder for different screens.
res/values/dimensions.xml
res/values-sw600dp/dimensions.xml -> 7+ inches
res/values-sw720dp/dimensions.xml -> 10+ inches
Add on each dimensions the desire value
res/values/dimensions.xml
<dimen name="my_image_view_width">200dp</dimen>
<dimen name="my_image_view_height">200dp</dimen>
res/values-sw720dp/dimensions.xml
<dimen name="my_image_view_width">400dp</dimen>
<dimen name="my_image_view_height">400dp</dimen>
Then simply use #dimen/my_image_view_width and #dimen/my_image_view_height in your SimpleDraweeView like this
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/my_image_view"
android:layout_width="#dimen/my_image_view_width"
android:layout_height="#dimen/my_image_view_height"
fresco:actualImageScaleType="focusCrop"
fresco:backgroundImage="#drawable/user_icon"
fresco:fadeDuration="300"
fresco:placeholderImage="#color/common_action_bar_splitter"
fresco:placeholderImageScaleType="fitCenter" />
Hope this helps!!
I've had the same problem for a long time now, which is basically what the title says. I have drawn some pictures to visualize what I'm trying to achieve.
Picture of man on ground
So on this first pickture, we have a man(player) standing on the GROUND of the Background image. In a 1024x728 Device this player is positioned somewhere around the Screen Height - 120px. I wan't to support multiple screen resolutions, but when I run the App on a bigger screen, this happens of course:
picture of man not on ground
The height of the background is bigger, therefor the ground is futher away from the bottom and -120px is not enough.
(In the app; pictures are drawn with Canvas as bitmaps)
So my question is, how do I achieve to get this man to always have the position on the ground? What's best practise? And can you show me some examples?
Thanks a lot.
There are two aproaches:
1) Using RelativeLayout child of this layout can be specified in relation to other childern
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<EditText
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/name"> <<<< look at this
</RelativeLayout>
2) Using just added percentage support library. You can specify % position on the screen. Read this for it
Okay this is probably a newb question but I can't find any solutions on google.
I'm a new android programmer and I made a simple hello world type program. I didn't do any funny configurations in the layout xml file but for some reason on certain devices the screen looks really zoomed in and almost kinda pixelated.
Is there some kind of common reason for this? All I have on my linear layout is an EditText widget, a textview widget, and two button widgets.
My Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10px"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<EditText
android:id="#+id/txtUser"
android:layout_height="wrap_content"
android:layout_width="200px"
android:text="" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Submit"
android:onClick="userSubmit" />
</LinearLayout>
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Clear Screen"
android:onClick="clearScreen" />
<TextView
android:id="#+id/txtMain"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="16px"
android:text="Ready\n\n"
/>
</LinearLayout>
It's probably some version of the screen compatibility mode which attempts to make old apps compatible with newer large displays, scaling the UI up as necessary. Scaling causes pixelated look as well.
If you don't specify a targetSdkVersion in your manifest, it defaults to 1, enabling all compatibility modes.
Solution: Specify an actual target SDK version you're developing your app on. Usually it should be the highest one available.
It is because you should use DP dp units instead of Pixels px since DP works with the screen density. Remove things like android:layout_width="200px" and change them to android:layout_width="200dp"
PS: note the following:
Generally you do not want to set dp values, you should do pretty well using wrap_content or match_parent, since the LinearLayout calculate widths and heights for you. Try to resist the temptation of setting fixed values to views, unless is extremely necessary. As an experience Android developer I tell you that cases you wanna set fixed width/height are cases like:
You are downloading images from the Internet and you want the ImageView that will show it to be displayed as a placeholder until the download completes.
You're creating an horizontal gallery and you need to give it a maximum height so it wont surpass the screen.
In resume, complicated stuff like that. If you're starting, try to learn to use wrap_content and match_parent, it will save you a lot of headache later on :)
I am designing an app of which there is an index page that link to several content layouts, and each layout has an imagebutton in the middle of the screen. The code for the ImageButton is as follows:
<ImageButton
android:id="#+id/image_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:background="#drawable/transparent_btn"
android:focusable="false"
android:gravity="center"
android:scaleType="fitCenter"
android:src="#drawable/ice_cream400" />
The ice_cream400 is an png of 400*400px and around 148KB.
Question:
I always come across with problems about images.
The png are already put under the drawable-xhdpi folder as suggested from research as the system will shrink the size automatically.
I am running the app in real phone device and discover that from time to time loading the content layout takes a lot of time (around 2 sec). How could the performance be improved? Need fetching the dimension of the screen and scale down before import? (the imagebutton would occupy around 70% of the screen)
Thanks!