I am pretty new to android programming and i was hoping you could help me out with something. I have set a background in an xml file and i am trying to align a image button to a specific area of my background. I have tried using density pixels however it is not precise enough and the button now covers an area of the background i would like to be visible. Any ideas on how i could fix this?
Many thanks,
Alex
My code is as follows:
<?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:orientation="vertical"
android:background="#drawable/home_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="93dp" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="341dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/workbench" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</LinearLayout>
You can always try using px instead of dp, however the whole point of dp is that they will scale automatically for any screen. If you use px I suspect that it will only work well on the current screen resolution that you're testing on. You would have to define px values for numerous screen resolutions/densities to ensure that your app displayed correctly across different devices.
Related
I have designed a splash screen in Adobe XD as shown:
enter image description here
Now when I exported the parts of the image to android studio, I was unable to make all the images stick to the bottom as in XD. enter image description here
Can someone tell me how I would go about doing that and would be the best ViewGroup for such task?
Here is my XML file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/group_1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</LinearLayout>
It can be done with either ViewGroup. But the problem is not the the view group - the problem is that you have a single image for the whole content - it is bad practice.
There should be at least 2 images - one for the background and the other is for the content.
It is due to fragmentation issue regarding device screens - there too many different resolution, aspect ratios and dpis to make the single image work properly on them all.
I will show you an example based on your UI with a background and logo image with small images below logo. You just need to separate it into two files - background could be jpg but logo must be png with transparency. In case you will do it - here is how your layout should look like.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/bg" />
<ImageView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:padding="24dp"
android:src="#drawable/logo" />
</FrameLayout>
You may want to experiment with android:padding and android:scaleType to achieve the best result.
Edit
Changed android:layout_height="match_parent" to android:layout_height="wrap_content" - it will work better this way
Hope it helps.
Screenshot of first image
Screenshot of other phoneI have a LinearLayout ,RelativeLayout,LinearLayout and a ImageView in it.This is basically a landing page of my app,inspite of using the dp my output is not same on the all device. There is the screenshot of two different phones. Thanks in advance
<LinearLayout
android:id="#+id/lb_LinearLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/lb_Relative_HomeScreen"
android:layout_width="match_parent"
android:layout_height="450dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="350dp">
`` <ImageView
android:id="#+id/lb_Background_Image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
</LinearLayout>
<TextView
android:id="#+id/lb_Welcome"
android:text="#string/welcome"
android:gravity="start"
style="#style/Heading2.yellow"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_gravity="start|center_vertical"
android:layout_above="#+id/lb_Descrption"
android:layout_marginLeft="20dp"
/>
...
</RelativeLayout>
</LinearLayout>
You need to create different layout files for the major screen density buckets and screen sizes. This way you will be able to fine tune your layout to look consistent across multiple displays.
You can easily create a new layout for a specific bucket from the preview window:
Click on this icon in the left corner.
Then select Create Other....
A popup window will appear then select from the Available Qualifiers the size item for the different screen sizes of Density for the different density buckets.
After you selected the desired item press the >> key, and you can select the appropriate bucket for witch you wish to create a new layout file.
After this you press ok and the android studio creates for you a copy of the current layout and places it in the appropriate folder for you, all that you need to do is to edit it so that it look the way you want it to look on the specific layout.
You should use ScrollView like this :
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/lb_LinearLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/lb_Relative_HomeScreen"
android:layout_width="match_parent"
android:layout_height="450dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="350dp">
`` <ImageView
android:id="#+id/lb_Background_Image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
</LinearLayout>
<TextView
android:id="#+id/lb_Welcome"
android:text="#string/welcome"
android:gravity="start"
style="#style/Heading2.yellow"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_gravity="start|center_vertical"
android:layout_above="#+id/lb_Descrption"
android:layout_marginLeft="20dp"
/>
...
</RelativeLayout>
</LinearLayout>
And to be more compatible with all the devices, try to use "wrap_content" or "match_parent" for height and width. If images are making you to declare dp in your code, then please go through this link :
https://developer.android.com/guide/practices/screens_support.html
For a game I have six buttons which look good on mdpi. The 4 left buttons are 100x100px:
If I switch to hdpi, it looks like this:
The xml looks like this (I omitted all but one button to keep it simple):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gameContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:orientation="vertical" >
<com.mydomain.mygame.game.GameSurface
android:id="#+id/gameSurface"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_game" >
</com.mydomain.mygame.game.GameSurface>
<RelativeLayout
android:id="#+id/controlButtonContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/button_left"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="100dp"
android:contentDescription="#string/button_left"
android:background="#drawable/control_button" />
</RelativeLayout>
</FrameLayout>
<LinearLayout
android:id="#+id/emptyBar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:baselineAligned="false"
android:gravity="center"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
These attempts didn't work:
I tried to use 100dp instead of wrap_content. I tried src instead of background as well as I tried different scaleType attributes.
Probably I could calculate the scaling factor in code, but I can't imagine that this is the proper way to do that. Why does it not scaled automatically, because what are dp then for? So how can I configure the right ratio in xml?
Please avoid use of specific size like 100dp . Try to use WRAP_CONTENT or MATCH_PARENT . and for different different screen sizes please use drawable-folders like drawable-hdpi and drawable-mdpi etc . And Put corrosponding images of android:background="#drawable/control_button" in all its specific folders .
Refer these linkes for multiple screen sizes :
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/training/multiscreen/screensizes.html
I am using android2.2.I have created drawable-mdpi,drawable-hdpi,res/drawable-xhdpi.
I created layout folder for large,medium,small screen size.I used in the manifest file.Still i am unable to get support for multiple screen size.For example image size and layout margin remain same for large,medium,small screen size.Can anyone help me?
name layout folders with layout-small,layout-normal,layout-large,layout-xlarge.It works according to mobile dpi.It doesnot depend on screen size.
if u want to create layout for all screen, u can use weightsum for manage them.
this sample code may help u.
<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"
android:weightSum="1.0" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.3"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:orientation="vertical"
android:weightSum="1.0">
</LinearLayout>
</LinearLayout>
My android app currently has two layouts for its splash screen, portrait and landscape. Both use the same simple format - an image that's the same size as the screen, held in a simple linear 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="fill_parent"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="#drawable/splash_p"
/>
</LinearLayout>
The image used is 320w x 480h and Android automatically resizes it to fit the screen, irrespective of the screen size of the device. Obviously, the image isn't as sharp when resized for a tablet for example.
I should point out here that my goal is to reduce the installed size of the final application as much as possible, and I'm aware that I could include different layouts and sizes of the same images for each differing screen size.
My splash screen is made up of the app's name in the top third of the screen, and then an image in the bottom two thirds of the screen. In order to save memory, I want to crop the app name and the image into two seperate images, and then display them in a linear vertical layout for devices held in portrait mode. I'll then use a linear horizontal layout of image and then app name for landscape mode.
For the portrait layout I've got this:
<?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="fill_parent" android:orientation="vertical">
<LinearLayout android:id="#+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">
<View android:layout_height="45dp" android:layout_width="45dp" />
<ImageView android:layout_height="fill_parent"
android:src="#drawable/splashtext"
android:scaleType="fitCenter"
android:layout_gravity="center"
android:layout_width="fill_parent"></ImageView>
<View
android:layout_height="35dp"
android:layout_width="35dp" />
<ImageView
android:scaleType="fitCenter"
android:src="#drawable/splashpic"
android:layout_height="fill_parent" android:scaleType="fitCenter" android:layout_width="fill_parent" android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
When I display the above in eclipse, it looks ok for smart phones, but the images are not scaled up when displayed on a tablet, although I'm using the android:scaleType="fitCenter" argument. I've tried using dips instead of fill_parent in the imageview layout_width and layout_height but that doesn't work either.
What am I doing wrong? Is there another way to do this?
Thanks
I've edited the question to include this revised XML based on #KaHa6u 's help below. So now I have:
<?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="fill_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<View
android:layout_height="15dp"
android:layout_width="15dp"
/>
<ImageView android:layout_height="wrap_content"
android:src="#drawable/splashtext"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_weight="1">
</ImageView>
<View
android:layout_height="15dp"
android:layout_width="15dp"
/>
<ImageView
android:scaleType="fitXY"
android:src="#drawable/splashpic"
android:adjustViewBounds="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="4"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
Which scales up vertically, but not horizontally, so I end up with tall thin images when the screen size increases.
#basinbasin
I just encountered a situation very similar to the one you explained. I needed to have an ImageView on top of the layout, which had to be stretched ONLY HORIZONTALLY and retain its height when the phone gets into landscape orientation. I succeeded with just this:
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/main_header"
android:scaleType="fitXY"
/>
and, of course, with activity's attribute:
<activity android:configChanges="keyboardHidden|orientation">
Hope this helps. Thank you.
The fitCenter scaleType maintains the original aspect ratio. Have you tried the fitXY scaleType? Matrix.ScaleToFit Documentation
Did you try "fill_parent" as the android:layout_height and android:layout_width values for the ImageView you want stretched?
I guess that the "wrap_content" setting does not let the system know the bounds to which to resize the image. Please try that and let me know of the results.