Hi
I am reading XML from web and displaying them in a listview. The xml contain an image location so I am displaying the image as well along with text.
The image size is 48*48 px as suggested here. But when I see the list view in actual device, the image looks very small. Any idea about how to make that image a little bit big?? is there any standard image and text size??
This is my layout:-
<ImageView
android:id="#+id/logo"
android:layout_gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/name"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#2B2B2B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:layout_toRightOf="#id/logo"
/>
use dip instead of px. when you use dip, it appears more adjustable and good on different screens.
Use an ImageView like this:
Modify the width and height values to your liking, but use the dip measurement. With the scaleType property you can tell the framework to stretch your image.
Try adding
android:scaleType="center"
to your ImageView XML. This will not scale your image, but center it in your view.
It's bad practice on Android to declare layout size by pixels. This page is straight from Google on the subject: http://developer.android.com/guide/practices/screens_support.html I would do something like this
android:layout_height="wrap_content"
android:layout_width="fill_parent"
and see how that looks. Don't forget to test on multiple screen sizes before you finish. You can do that by creating different AVDs for the emulator.
You can use pixels if you really want to, but remember that its going to look different on different devices.
android:layout_height="96dip"
android:layout_width="fill_parent"
Related
I created an app where I use Google Books API in it.
As part of the attributions they require, I need to add to each query results the following button:
Now, I wanted to use that Image as a background to a button but I got this results:
As you can see it seems to be stretched with bad quality.
The xml I used is:
<ImageButton
android:id="#+id/tv_Link"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_alignStart="#+id/imagecard"
android:layout_alignEnd="#+id/imagecard"
android:layout_alignBottom="#+id/imagecard"
android:background="#drawable/gbs_preview_button"
android:elevation="50dp"
android:fontFamily="#font/assistant_semibold"
android:gravity="center"
android:textColor="#color/colorLightPurple"
android:textSize="8sp" />
In order to fix it, I decided to use bitmap:
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:src="#drawable/gbs_preview_button"
android:tileMode="disabled"/>
The problem is that it became small like this (good quality, but small):
This dimension is too small since they require the height to be 24dp.
Is there any way I can add this image to the button, to make it 24dp height and still to keep the quality of the image?
Thank you
As you want to hardcode the height to 24dp, then you can also hardcode the width to a value that keeps the aspect ratio of the original image size which is (88 x 31).
So, set the width to 68dp instead of wrap_content
In the image above, the black speech bubble and the red background behind it are a single ImageView that spans the width of a vertical phone screen. The "Hello" is a TextView and the layout is relative. Using margins, I was able to position the "Hello" inside the speech bubble in my Android emulator -- but the positioning is off when I emulate a different phone.
Is there a better way to position my TextView
is there a way to make it responsive (so that the Hello is always in
the speech bubble, no matter what the device)?
Here's my xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relativeLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mainGraphic"
android:src="#drawable/finished2"
android:layout_marginBottom="97dp"
android:layout_above="#+id/enterValue"
android:layout_alignParentStart="true" />
<TextView
android:maxWidth="200dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/helloText"
android:textColor="#FFFFFF"
android:layout_marginEnd="29dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="45dp" />
</RelativeLayout>
I would use a FrameLayout instead of the RelativeLayout with same size like the image.
Then use the attributes android:layout_gravity="center" and android:gravity="center" for the TextView.
Try this:
...
<TextView
android:maxWidth="200dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/helloText"
android:textColor="#FFFFFF"
android:layout_alignTop="#+id/mainGraphic"
android:layout_alignBottom="#+id/mainGraphic"
android:layout_alignLeft="#+id/mainGraphic"
android:layout_alignRight="#+id/mainGraphic"
android:gravity="center" />
...
Best approach is to use 9-patch image & set it as the background of the Textview. If you use a normal png file, we can't guarantee that it will align correctly on all resolutions & it can become blurred when stretched.
9-Patch image automatically resize to accommodate the contents of the view and the size of the screen. Android SDK provides a tool for creating 9-patch images which is inside SDK sdk/tools directory. See https://developer.android.com/studio/write/draw9patch.html.
You should use a 9-patch for the message shape. What you can do is make the root view of your layout as a FrameLayout and then add a TextView to it. Set the message shape Nine-patch as the background of the TextView.
For creating the 9-patch visit https://romannurik.github.io/AndroidAssetStudio/nine-patches.html by Roman Nurik. There just upload a png file of the image asset and choose the xhdpi definition for best results. The Nine-patch has 3 main properties -
Stretch regions : Defines which areas of the asset can stretch for accommodating different screen densities.
Content Padding : Defines the padding area for the content (text) that is going to appear inside the image.
Optical Bounds : Defines how much area should be optically visible around the asset.
Pros of using Nine-patches :
Scalable
Easy to use
Lightweight
Any amount of content can be put in it.
Hope this helps.
Ideally, you should be using a complete red background to the RelativeLayout, and a black speech 9patch image for the TextView.
But if you really want the RelativeLayout to have background as red with speech bubble, you have to set it at run time.
Calculate the height and width of RelativeLayout at run time say 150px and 300px respectively.
Carefully look at the background image, and determine the edge points of bubble from top, right, bottom and left. For example, if image height is 100px by 200px, and bubble top starts at 30px and bottom ends at 70px, right edge starts at 150px and left ends at 250px. Also calculate the width and height of TextView.
At run time, change the position of TextView based on the above figures.
I have an image button with a background image .png of a circle. I am testing it on different resolution screens and it looks different on every one. Most of them distort the circle shape by stretching it on one dimension.
What is the correct way to handle this? I am familiar with the 3 density levels needed for the highest quality image, but I think the problem is with the layout type attributes on either the image button itself or the parent container.
Snippet from main.xml...
<LinearLayout
android:id="#+id/buttonArea"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="30dp">
<ImageButton
android:id="#+id/button1"
android:background="#drawable/button_inactive"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"/>
</LinearLayout>
removing the layout_weight attribute from the ImageButton fixed most cases, but not all. It seems that the padding is still changing the ratio of the circle. Scale types have no effect. Is it because my image is set as the background and not the src?
I think android:layout_weight="1" in your ImageButton is the cause of this. It will make your ImageButton the same size of your screen, no matter what size the screen is.
Try to remove that attribute. If that doesn't fix your problem, have a look at android:scaleType attribute
<ImageButton
android:id="#+id/button1"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_gravity="center"
android:background="#null"
android:src="#drawable/button_inactive"
android:scaleType="centerInside"/>
You can set the scaleType attribute of your ImageView, to one that keeps the aspect ratio of your image.
They all behave slightly different, so you'll have to use one that suits your needs (CenterInside is a good one to start with).
If this doesn't work, you can always specify set heigh/widths of your image (e.g. layout_width="128dp).
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
how do i keep the aspect ratio on image buttons in android?
i have 5 square dice as image buttons lined up near the bottom of my layout. i would like them to take up the whole width of the layout, but i can't seem to get them to properly keep that aspect ratio, while taking up the entire width.
currently my code looks like this:
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_margin="1dp"
android:layout_gravity="bottom"
>
<ImageButton
android:id="#+id/die1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_margin="2dp"
android:scaleType="centerInside"
/>
<ImageButton
android:id="#+id/die2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_margin="2dp"
android:scaleType="centerInside"
/> .....
and looks something like this:
if i don't include the
android:layout_height="60dp"
then the dice become skewed and look like this:
however the problem with leaving the "60dp" part in arises when i try to display on a tablet device or something with a high resolution it ends up looking like this:
where am i going wrong?!
You're going to have to do 1 of two things:
1) Provide ldpi, mdpi, hdpi and x-hdpi versions of your dice images. Put those in their respective drawable folder and android will take care of the rest.
Find out how here: http://developer.android.com/guide/practices/screens_support.html
Or
2) Get the screen size and set the imageview sizes manually java. You can get the screen size using:
Display d = ((android.view.WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
screenWidth = d.getWidth();
The rest is up to you. Good luck!
-edit-
Setting ImageView (or any other View's size in Java)
myHeight = screenSize/5; //These are in pixels not dp's
myWidth = screenSize/5;
LinearLayout.LayoutParams myLayoutParams =
new LinearLayout.LayoutParams(myWidth,myHeight);
myView.setLayoutParams(myLayoutParams);
Hope it fares well.
try
android:layout_height="wrap_content"
&
<LinearLayout> attribite is android:layout_height="60dp" replace with android:layout_height="wrap_content"
Set the width of the ImageButtons to fill_parent and use scaletype fitStart for the images that hug the left margin, and fitEnd for the ones on the right. Should do the trick, at least as far as your example image goes. You may have some spacing issues if the proportional width of the images exceed the screen width, but it should work for you.
I'm creating a proportional UI, the thing is that - by different UI resolutions the UI-components get different shapes. I'm using image-text button, which for different resolutions have different dimensions. Could I do so, that the image inside the button resize also proportional depending on button's width/height? (currently the image doesn't change its dimensions and just some parts of it are hidden).
Here is the xml-sorce, I'm using for such kind of button:
<Button
android:id="#+id/today"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/today"
android:drawablePadding="0sp"
android:gravity="center_horizontal|bottom"
android:textSize="8sp"
android:text="#string/today"
android:onClick="getRSSNews"
/>
Try to create mdpi and ldpi drawables too (with same name) and see how will that work.