I am using ImageButton in my custom bottom navigation. And I have set icons of 32*32 size as src to them.
here is xml
<ImageButton
android:id="#+id/bottom_nav_profile"
android:layout_width="match_parent"
android:layout_height="50sp"
android:layout_weight="1"
android:src="#drawable/btm_nav_user_act"
android:text="Profile"
android:adjustViewBounds="true"
android:scaleType="center"
android:background="#drawable/bottom_nav_bg"
android:textColor="#000"/>
When I view it on my phone they look pixelated. I'm fine them being smaller but I dont want them to be pixelated. How can I make adujustment so that they look sharper.
Here are the icons
It seems that your image is very small to begin with, you have 2 options:
Remove the hardcoded height (50dp), your original image may be smaller than this, forcing its height may be reducing its quality on certain devices.
Have the same drawable you're using but for different phone densities. I'm guessing you only have one version of your drawable image in the drawable folder, on certain phones with certain densities, this image may display badly (just as it may be displayed just fine on certain other phones).
Lets make custom Image Button with linear layout and imageview
<LinearLayout
android:id="#+id/id"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/btm_nav_user_act"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile"
android:textColor="#000"/>
</LinearLayout>
Now use linear layout as a button.
Related
I create a new ImageButton via the "Resource Chooser" and I end up with this code:
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:layout_marginLeft="14dp"
android:layout_marginTop="94dp"
android:src="#drawable/mybutton" />
Now, I want to make that button way bigger, so I do the following changes:
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:layout_marginLeft="14dp"
android:layout_marginTop="94dp"
android:src="#drawable/aries" />
I also change the android:src="#drawable/mybutton" to android:background="#drawable/mybutton" to get rid of the grey button around my image and stretch the image instead.
Problem:
My problem is that when stretching out the image it still uses the file from the drawable-mdpi (as it should), so I end up with a stretched low resolution image. If I change the image from the drawable-mdpi folder with a high resolution one it looks great, but I am pretty sure that this is not the best solution out there as I would have to put an image with bigger resolution in each folder.
Sound like what you need is a Nine-Patch Drawable.
A NinePatch is a PNG image in which you can define stretchable regions that Android scales when content within the View exceeds the normal image bounds. [...] when the View grows to accomodate the content, the Nine-Patch image is also scaled to match the size of the View.
Try Setting the background to null:
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:src="#drawable/ic_launcher" />
I am trying to create a sort of progress bar for my Android app, however, I would like it to be an image moving from right to left. The image itself needs to preserve its original size.
Basically, what I am looking for is this (don't have enough rep to post image):
http://postimg.org/image/5e7w5vd7h/
The problem is that the image, which is 2000px wide, will not load when run on my device (Sony Xperia S). If I use an image with width <= device width, it works.
I have tried using HorizontalScrollView and ScrollView inside a RelativeLayout, as well as setting scaleType to center, centerCrop, fitXY and all the others, adjustViewBounds true/false etc., basically every combination there is.
First and foremost, I would just like the image to appear on my device - the animation in itself is not prioritized right now, but I am thinking of a solution where I increment the ImageView's paddingRight regularly.
Below is a snippet of my XML thus far:
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/horizontalScrollView"
android:layout_marginLeft="12.5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/rolling_bar"
android:scaleType="center" />
</HorizontalScrollView>
<TextView
android:id="#+id/countdown_time_text"
android:text="01:22:58"
android:textColor="#color/countdown_color"
android:layout_marginTop="3dp"
android:textStyle="bold"
android:textSize="28sp"
android:typeface="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginLeft="10dp" />
I apologize for any syntactical / semantic errors, I am quite new to Android. Thanks in advance!
I want to have two buttons at the top of my program taking users to different activities. I'm having a lot of trouble with the formatting.
How can I make it so that the buttons will stretch proportionally based on the screen size? Right now, they will look OK for one screen size, then I will switch to a different one and it will appear all smushed or stretched. I've tried all of the different ScaleTypes and none seem to make a difference. I also went though and proportionally saved all of the images to the correct sizes regardimg xhdpi, hdpi, etc using Shubhayu's answer.
Here's my code so far:
<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:background="#drawable/brushed_metal_background_dark"
tools:context=".HomeActivity" >
<ImageButton
android:id="#+id/incidentsSelect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/incident_bar2"
android:contentDescription="Incidents"
android:onClick="chooseIncident"
android:scaleType="center" />
<ImageButton
android:id="#+id/operationalPeriodsSelect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/operationalperiod_bar2"
android:contentDescription="Operational Periods"
android:onClick="chooseOperationalPeriod"
android:scaleType="fitCenter" />
Change android:background to android:src that will keep the aspect ratio. Use android:scaleType="centerInside" to fit whole image inside button area and optionally use android:adjustViewBounds=true to remove empty spaces. Example:
<ImageButton
android:id="#+id/incidentsSelect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="Incidents"
android:onClick="chooseIncident"
android:src="#drawable/incident_bar2"
android:scaleType="centerInside"
android:adjustViewBounds="true"/>
<ImageButton
android:id="#+id/operationalPeriodsSelect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="Operational Periods"
android:onClick="chooseOperationalPeriod"
android:src="#drawable/operationalperiod_bar2"
android:scaleType="centerInside"
android:adjustViewBounds="true"/>
I am guessing that you are trying to size the buttons evenly on the top of the screen. If that's the case then you should set android:layout_width="0dp".
Just use android:layout_width = "wrap_content"
I'm building a graph which consists of 2 images: 1 background image and one image containing the actual data points. The data points image show be aligned at the top of the background image.
The layout looks like this:
<RelativeLayout
android:id="#+id/graphImageWrap"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/graphImageBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#android:color/transparent"
android:contentDescription="#string/stroom_grafiek"
/>
<ImageView
android:id="#+id/graphImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/graphImageBackground"
android:layout_centerHorizontal="true"
android:background="#android:color/transparent"
android:contentDescription="#string/stroom_grafiek"
/>
</RelativeLayout>
This works well on a HDPI device:
But on a MDPI device it doesn't align properly:
I hope someone can explain what the problem is.
You may want to use a FrameLayout instead, and make sure the images are the same size.
I am troubled by how the Android OS is handling resizing on an app of mine. Basically I have a background image that is 480x800 (so 480px wide) and an image that goes at the bottom, also 480px wide.
On the Galaxy S (480x800 screen) everything looks fine, as shown below:
On the Galaxy S3 (720x1280), however, the background is getting stretched to 720px wide but the image at the bottom only to 640px wide, as shown below:
I tried to create a xhdpi folder with 640x960 images, but same thing happens (background stretched to 720px, image only to 640px). I also tried to play with "ScaleType", but no luck so far.
Does anyone know why the OS would re-size the two images with a different scale, and how to fix it?
Here's the XML:
<?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"
android:background="#drawable/bg" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/significados"
android:layout_gravity="center"
android:layout_marginTop="216dp"
android:onClick="goToSignificados"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ranking"
android:layout_gravity="center"
android:onClick="goToRanking"
/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/engracados"
android:layout_gravity="center"
android:onClick="goToEngracados"
/>
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="60dp"
android:clickable="true"
android:contentDescription="#string/image"
android:onClick="goToMarket"
android:src="#drawable/googleplay" />
</LinearLayout>
You'll have to post your XMLs to get a more specific answer but basically all "Views" may handle image scaling differently.
In your example,
You can make your button stretch all the way by using width = match-parent.
"Backgrounds" will stretch by default, but can also tile.
"Buttons" will have a min size of the background size but will stretch when needed (button has too much text)
As a side note, you shouldn't depend on the exact pixels of the images. You should look into nine-patch or making tiled backgrounds and make sure you take advantage of things like "match-parent, gravity, etc."