Am a newbie to Android UI...
I got the layout below which is basically a image view, a image button (that is hidden until a certain logic is met) and another image view at the bottom.
This layout works fine in ldpi devices but look bad on other devices... I also had to resize the image by changing its height so it influence the quality of the image.
How can I resolve this by having a standard view that will work?
<?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" >
<ImageView
android:id="#+id/welcomeTutorialImage"
android:layout_width="wrap_content"
android:layout_height="250dp"
android:contentDescription="#string/welcome_tutorial"
android:src="#drawable/welcome_tutorial_browse" />
<ImageButton
android:id="#+id/welcome_tutorial_start_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/welcomeTutorialImage"
android:layout_centerInParent="true"
android:layout_centerVertical="false"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#null"
android:src="#drawable/btn_startsavingstatic" />
<ImageView
android:id="#+id/welcomeTutorialProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/welcome_tutorial_start_btn"
android:layout_centerInParent="true"
android:contentDescription="#string/welcome_tutorial"
android:src="#drawable/welcome_tutorial_bar1" />
</RelativeLayout>
You might want to look at android:fitXY property of ImageView. Also, post screenshots that could explain the issue further. There might be a need to have different sized images for different screen sizes/resolutions (ldpi, mdpi, hdpi, xhdpi)
most of the time, you have to adjust the layout and the image resolution for your application to make it flexible with other devices by placing them to the right folder like:
-drawable
-drawable-1280x752
-drawable-800x480
-drawable-hdpi
-drawable-ldpi
-drawable-mdpi etc.
-layout
-layout-land-1280x752
-layout-800x480
-layout-land
etc.
by placing your layout and image to there designated folder, you have to change each layout and image sizes that will much the requirement of each folder.
and if you need further reference you can check this out
http://developer.android.com/guide/practices/screens_support.html
Related
I have one designing in android that images are showing different in 1440 X 2880 screen and 1440 X 2560 screen. How to do this correctly? Specially for the screen 1440 X 2880. I have created hdpi, mdpi,xhdpi,xxhdpi,xxxhdpi images still i am not getting the result.
<?xml version="1.0enter code here" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/view_toolbar_logo"
android:id="#+id/relToolbar">
</include>
<RelativeLayout
android:layout_width="match_parent"
android:layout_below="#+id/relToolbar"
android:layout_marginRight="#dimen/_12sdp"
android:layout_marginLeft="#dimen/_12sdp"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/test"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/im1"
android:background="#drawable/ranking"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/im1"
android:layout_marginTop="#dimen/_10sdp"
android:background="#drawable/coin"/>
</RelativeLayout>
An images are from the .psd to .png with the help of adobe Xd tool I need design like first snap in image
Based on what has been said on the comments I think your problem comes from misunderstanding how to set constraint to views using android layouts and views, and not from the resolution of the screens you're working on. Reading on the topic will surely help you out.
I see two solutions to your problem, both of them include changing the layout you're using. On one hand, you could change your RelativeLayout for a LinearLayout and google some tutorial on view weights, and on the other hand you could use the more modern ConstraintLayout and read a little about how linear groups and chains work.
I'll leave links to the docs here and here to help you get started
I have a screen on which I need to display a number of images inside a horizontal LinearLayout.
I designed it for an xhdpi. I set the sizes of each ImageView to 100dp, and on an emulator (xhdpi 768x1280 4.7" screen) it looks something like
this while on a tablet emulator (xhdpi 1534x2048 9" screen) it looks like this.
In the latter, the images aren't scaled properly to look like it does on the smaller screen.
Is there a way to make it look the same on both screen sizes?
to make your layout adjust on different screen you need to design it to be responsive. Yes like what G.Dator said, you can use weight attribute. Here's the example :
<LinearLayout
android:layout_height="200dp"
android:layout_width="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_weight="25"/>
<ImageView
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_weight="25"/>
<ImageView
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_weight="25"/>
<ImageView
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_weight="25"/>
</LinearLayout>
Please let me know if you have further question.
Actually, the image is the same size in 2 devices. The problem is the difference between your dp width of your phone (384dp) and your tablet (767dp). There're few ways to resolve it:
using multiple layout files for sw360 and sw720. You can check this Google Guide
Using the same weight for all your ImageView with adjustViewBound=true to keep your image ratios.
Using code to set your ImageView size programmatically.
In addition to implementing a responsive layout structure (like what #Bhimbim mentioned), there is a library (https://github.com/intuit/sdp) which can be useful when you want to code once and use it on multiple different devices, it offers you sdp unit instead of dp which helps your view to scale better.
Example:
layout_width="#dimen/_30sdp"
layout_height="#dimen/_30sdp"
(Sorry i couldn't comment as i have registered recently).
As there are many post about multiple screen size support.
I have a very serious doubt.
I want to display an image twice such that they are side by side in multiple android screen size but the problem is how would I know the width and height of the image to be chosen for this purpose?
I have taken an image 48*48 for mdpi and similarly for others hdpi xhdpi but that is too small for it.
So is there any way to find out that required size?
I am using wrap content for both height and width in image view to display the image but there is some space after having two image side by side. I wanted to make it fit the screen.
I studied about multiple screen sizes and all but how to adjust that image pixel for mdpi?
How would I know the required image size for mdpi????? So that I could make image size according for hdpi and xhdpi.
Layout weight is good if you want 50% each
<?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="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#android:drawable/ic_media_next" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#android:drawable/ic_media_previous" />
</LinearLayout>
Here's an example layout:
<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"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/hello_world" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
On a handset(480x800) and a tablet(1280x800) the layout has different amount of space left from the imageview to the bottom. The image isn't scaled on the tablet and dp values result in relatively same physical values.
Is there a way/tool to save handset proportions for tablets so that images, spaces(dp) get scaled? I guess, I could use values-xlarge/dimen.xml, values-720dp/dimen.xml, but it's a lot of mechanical job to. Any better solution ?
If you want to adjust scaling of ImageView
add
android:scaleType="fitXY"
Here are the ImageView Scale types
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
Try this:
<LinearLayout
:
:
android:focusable="true"
:
/>
If you want your app to be 2 times bigger (all dimentions and font sizes x2) on 2 times larger dispay you can manually change display density (reduce it in a half). Android wont mind and will work as usual. I use this trik when I want my app to be the same and only change scale depending on screen size. Read about Configuration/DisplayMetrics/updateConfiguration. Here is draft code you should run in activity's onCreate. I give you exact code later.
DisplayMetrics dm = context.getResources().getDisplayMetrics();
// fix display density here to scale all activity's dimentions
context.getResources().updateConfiguration(null, dm);
But it isn't proper android way. You should provide different resources for different screen sizes using appropriate resourse folders.
I have a imagebutton placed inside a RelativeLayout.
However I can't seem to figure out what I need to do in order for the button to scale according to different resolutions.
Here's the content of my activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/background" android:scaleType="fitCenter" android:gravity="center"/>
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#null"
android:onClick="startVideo"
android:scaleType="fitCenter"
android:src="#drawable/button" android:layout_marginBottom="50dp"/>
</RelativeLayout>
background.png is an image placed in the mdpi folder (1280x800px), button.png is also placed in the mdpi folder (757x271px).
If I run my app on a 1280x800px resolution (galaxy tab) it looks fine, however when I try to run the app on my phone the ImageButton doesn't scale down - it keeps the original size (757x271px).
Does anyone know a solution for this?
Did you create alternative layout resources with modifiers like layout-large, layout-small and so on? If you only have one layout it's not guaranteed to scale properly on any screen. Also consider specifying dimensions in dp for the related view
I gave up on solving this by only using one big image that were scaled down like I wanted to.
So in the end I had to create different versions of the image for the imagebutton, and place them in the correct folders, ie:
drawable-large-hdpi
drawable-large-mdpi
drawable-normal-hdpi
drawable-normal-mdpi
etc.
I then get the desired result from the ImageButton.
Thanks anyway for the help Maver1ck and talhakosen, your comments helped me understand how the different resource folders work for images and layouts.