Please help me with strange issue. I have simple linear layout with three imageviews, with same sizes. It look normal in Android Studio design, but on the device third imageview has different size. How to fix it? p.s. image resources have same sizes
part of layout:
<LinearLayout android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:gravity="center"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp">
<ImageView android:id="#+id/twitterlb"
android:layout_height="match_parent"
android:layout_width="60dp"
android:src="#drawable/tw_circle" android:scaleType="fitCenter"/>
<ImageView android:id="#+id/facebooklb"
android:layout_height="match_parent"
android:layout_width="60dp"
android:src="#drawable/fb_circle" android:scaleType="fitCenter"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"/>
<ImageView android:id="#+id/linkedinlb"
android:layout_height="match_parent"
android:layout_width="60dp"
android:src="#drawable/in_circle" android:scaleType="fitCenter"/>
</LinearLayout>
in Android studio:
on device:
<ImageView android:id="#+id/linkedinlb"
android:layout_height="match_parent"
android:layout_width="60dp"
android:background="#drawable/in_circle"
android:scaleType="fitXY"/>
You may try to change scaleType's to fitXY.
Thanks guys, I finally solved the problem. The problem was: same similar res for drawable-mdpi, drawable-xxhdpi, drawable-nodpi, drawable-xxxhdpi,
drawable-hdpi, drawable-ldpi, but different for drawable-xhdpi (5 pixels transparent frame)
Related
RecyclerView item layout, padding and margins are conflicts on typical phone screen 480x800 hdpi. Other than 480*800 hdpi, layout design showing perfect for normal screens.
Samsung J1 Ace DisplayMetrics values :
DisplayMetrics{density=1.5, width=480, height=800, scaledDensity=1.1850001, xdpi=217.714, ydpi=216.17}
I have created layout folder for layout-w320dp and replaced below xml, which was working fine on normal layouts (Normal mobile screens).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/cardViewDashboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/paddingDefault"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="#dimen/paddingDefault"
card_view:cardCornerRadius="0dp"
card_view:cardMaxElevation="#dimen/paddingDefault"
card_view:contentPadding="#dimen/paddingDefault">
<LinearLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:padding="15dp">
<LinearLayout
android:id="#+id/circle_layout"
android:layout_width="85dp"
android:layout_height="85dp"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:background="#drawable/ic_legend"
android:gravity="center">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/imgViewDashboard"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_gravity="center|center_horizontal"
android:tint="#color/toolBar"
card_view:srcCompat="#drawable/ic_dashboard" />
</LinearLayout>
<TextView
android:id="#+id/txtViewDashboard"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/imgViewDashboard"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="#string/title_dashboard"
android:textAppearance="#style/TextAppearance"
android:textColor="#color/toolBar" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Layout which having padding and margin problems for 480*800 hdpi screenshots FYR, also i have tried SO answers but i didn't get any ideas.
Anybody knows, how to resolve this issue? Please share your ideas.
You can generate a new layout folder inside res for support.
Regarding dimensions, please check below link. That will help you.
https://developer.android.com/guide/practices/screens_support.html
You can create a new layout-large folder in res. Add your XML in this folder. That way you can manage it.
e.g.
res/layout-large/activity_main.xml
You can create new layout as per your requirement from Android studio.
Right click on layout=>New=> layout resource file
Customize as per your requirement and generate.
I have a listview layout with images
It looks like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="240dp"
android:adjustViewBounds="true"
android:id="#+id/listview_item_imageView"
android:layout_gravity="center_horizontal|top" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FAC308"
android:id="#+id/listview_item_title"
android:text="TITLE"
android:textSize="20sp"
android:paddingBottom="40dp"
android:layout_centerInParent="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:id="#+id/listview_item_subtitle"
android:paddingTop="40dp"
android:text="SUBTITLE"
android:textSize="20sp"
android:layout_centerInParent="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/orangeSeparator"
android:src="#drawable/orangeseparator"
android:layout_centerInParent="true" />
If I run it on device with 720x1280 240dpi it looks like this
If I run it on device with 720x1280 320dpi it looks like this
I get images from the internet, so I cant prepare different versions.
How to make it look similar across all the devices ?
You can use fitXY Android Developer,
android:scaleType="fitXY"
or you can also create different drawable resources from the original one, with Photoshop or any similar program
in your container you have
android:layout_height="match_parent"
and in the image:
android:layout_height="240dp"
you have to have the same height or 'wrap_content' for your container not to have those gaps.
you can also add to the imageview:
android:scaleType="centerCrop"
another thing is that you can use specific library to handle loading of network images.
You can look this article . Make your app supporting different dpi variations and different screen types: Supporting Different Screens
I preview my Android app in a Nexus 4 :). Here it is
But when I try to preview it on a Nexus 7 emulator, :(
I think that I'm having issues on supporting multiple screens on my game.
My question is, how can I make it look bigger on nexus 7 or 10 or any other devices?
By the way, I placed my images (board.png,small_hole.png, big_hole.png and bg.png) on drawable-xhdpi folder (I'm using Android Studio)
Do you think I used the wrong layout or properties in my xml file? Is there something wrong in my code?
This is my xml layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg.png>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/board"
android:orientation="horizontal" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/big_hole" >
</ImageView>
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="2dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/small_hole" >
</ImageView>
// paste 6 more ImageViews here
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="7dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/small_hole" >
</ImageView>
// paste 6 more ImageViews here
</LinearLayout>
</LinearLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="20dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:background="#drawable/big_hole" >
</ImageView>
</FrameLayout>
</LinearLayout>
</RelativeLayout>
thank you guys..
Nexus 4 access drawable-xhdpi resources and
Nexus 7 access drawable-large-tvdpi or drawable-sw600dp-tvdpi resources.
Nexus 10 access drawable-xlarge-xhdpi or drawable-sw720dp-xhdpi resources.
and u should resize ur image and u shud put in respective folders.
and Nexus 4 is 4.7 inch (768*1280) of size and Nexus 7 is 7 inch (800*1280) of size.
more info:
Different resolution support android
Application Skeleton to support multiple screen
Is there a list of screen resolutions for all Android based phones and tablets?
Try placing youre images in res/mdpi they will be streched to fit screens which are bigger (hdpi, xhdpi)
(if i remember correctly the modyfiers are x1.5 and x2 for hdpi and xhdpi).
Alternatevly you can make a layout folder for larger screens ie. layout-sw720dp and create a new layout file there.
I am making a scrollView with a bunch of image buttons. Unfortunately this view takes a very long time to load - so much so that the user would be likely to close the app assuming it is an error.
Any ideas on how I can make this process faster?
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
>
<TableRow>
<ImageButton
android:id="#+id/ImageButtonCone"
android:layout_width="160dp"
android:layout_height="200dp"
android:scaleType="fitCenter"
android:background="#drawable/cone"
/>
<ImageButton
android:id="#+id/ImageButtonCube"
android:layout_width="160dp"
android:layout_height="200dp"
android:scaleType="fitCenter"
android:background="#drawable/cube"
/>
</TableRow>
<TableRow>
<ImageButton
android:id="#+id/ImageButtonCylinder"
android:layout_width="160dp"
android:layout_height="200dp"
android:scaleType="fitCenter"
android:background="#drawable/cylinder"
/>
<ImageButton
android:id="#+id/ImageButtonTrapezoidalprism"
android:layout_width="160dp"
android:layout_height="200dp"
android:scaleType="fitCenter"
android:background="#drawable/trapezoidal_prism"
/>
etc...
I've solved the problem... I only had png's in the drawable-mdpi folder but not the other drawable folders. I've made copies of each png and pasted them in drawable-ldpi, drawable-mdpi and drawable-xhdpi and now it works very quickly on the phone aswell as the emulator.
Presumably the emulator was taking the medium definition .png's but the phone wanted to take from a different resolution and wasn't able to.
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