I Have scoured the site and several others and I am having a problem finding a way to make a clarity nice icon styled image button. The image buttons I keep using fill the content and look just distorted, I want very nice looking icons styled image buttons, and instead its smudged stamps with little clarity. I want them spaced enough you can see the background behind them, Do i need to somehow make the src the image and the background clear?
heres some of my code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/debface"
>
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="4"
android:gravity="bottom"
>
<!-- Images coming out Blurry, I need to compress like a hires icon file -->
<TableRow>
<ImageButton
android:id="#+id/button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/debraidcard"
android:layout_weight="1"
android:padding="25px"
android:paddingLeft="25px"
android:paddingRight="25px"
/>
<ImageButton
android:id="#+id/button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/debraidcard"
android:padding="25px"
android:paddingLeft="25px"
android:paddingRight="25px"
/>
<ImageButton
android:id="#+id/button03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/debraidcard"
android:layout_weight="1"
android:padding="25px"
android:paddingLeft="25px"
android:paddingRight="25px"
/>
</TableRow>
I have used several different sizes on my images, i have switched between .jpg and .png. I follwed several tutorials, didn't like the outcomes. Any help pointing me in the right direction is greatly appreciated
Instead of setting your image to the background set it to src:
android:src="#drawable/cool_drawable"
that will give you your bitmap in the center of what looks like the default button.
If you don't like the button in the back set the background to #00000000 (transparent) and you will end up with only your Drawable as the button.
Related
Id like to achieve the effect seen in the image ive provided below.....possible?
I know how to do a gradient and I know how to set a imagebuttons src/bg to a drawable but i have nooooooo idea where to even start with pulling off both at the same time.
It's actually incredibly simple. To avoid overdraw by layering a bunch of views, just add a ColorFilter to your ImageView:
imageView.setColorFilter(Color.parseColor("#994dace3"), PorterDuff.Mode.SRC_OVER);
No added overdraw, and you can set whatever color you want, and experiment with different PorterDuff blending modes.
Example:
I know how to do a gradient and I know how to set a imagebuttons
src/bg to a drawable but i have nooooooo idea where to even start with
pulling off both at the same time
I think what you are referring to as being a gradient is actually a color with transparency value set. From what I can tell, you are looking for something like this:
You can achieve this using the following layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/the_picture"
android:src="#color/transparent_color" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Message!" />
</RelativeLayout>
The RelativeLayout is used to position the TextView over the ImageButton. The Picture is set as the background. The src is set to a color(any color) with a transparency value between 00(completely transparent) and ff (completely opaque). In the image above, I have used a transparency of 70. So, say you pick Green(#00ff00), add transparent value to it: #7000ff00 and add it to res/values/colors.xml. You can also use it directly as I have done below.
Here's the complete xml code for the activity in the pic above:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/original" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/original"
android:src="#7000ff00" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="Optional Message!"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
You can set a custom font to the TextView(as in the picture you've provided) in code.
I'm novice in android development and still can't understand fully how sizing works with different layouts. I want to place a preview of the book into this template:
I've tried to implement it using FrameLayout. The idea is that the center of preview image will be exactly where the center of the png background is. Here is the code:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
</FrameLayout>
The result in layout builder look exactly like I want it to be:
On real phone it is different:
I think on other resolutions it will also differ from both variants. So my question is how to synchronize these images so after any resizing and distortions the preview will fit the cover correctly?
Possible solution would be to remove border from image and place it on previewImage instead. But there are several similar usecases in application where the border can't be removed, so I'd like to find out a universal solution for all of them.
You have your answer in your question.
What happening in your case image size matter for different screen resolution.
Hard-coded things always gives weird result in your case
android:layout_width="83dp"
android:layout_height="83dp" this piece of code.
Check this link this will guide you to manage drawables for different screens.
and here is another link
So the suitable solution for me was to separate border of inner image into its own ImageView, insert it into layout over the photo and add 1dp padding to the photo.
The layout become like this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/bookFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
<ImageView
android:id="#+id/previewBorder"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/preview_border" />
</FrameLayout>
I have a button where I put a picture ... I must try to resize the image inside the button ... how can I resize it? Can I do it directly from the xml code?
This is the xml code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:orientation="vertical"
android:layout_width="250dp"
android:layout_height="180dp"
android:paddingLeft="4dip"
android:paddingRight="4dip"
android:background="#color/white_trasparent"
android:weightSum="1">
<TextView
android:layout_height="wrap_content"
android:id="#+id/text"
android:textColor="#color/grey"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_marginLeft="15dp">
</TextView>
<Button
android:layout_width="wrap_content"
android:text="Drawable Top"
android:id="#+id/Button03"
android:drawableTop="#drawable/icon"
android:layout_height="wrap_content"
android:textSize="10dp">
</Button>
</LinearLayout>
if my understanding of the drawableTop/left/bottom/right properties is correct that is not going to place your image inside your button, rather it is going to put it on top (north of) your button.
If you're looking to put an image inside a button check out ImageButton.
I don't think either of these things will let you just set the size of only your image though (they will let you change the size of the whole view, in this case the rectangle button box, and the image inside it.)
In order to change the size of the image without affecting the size of the button box graphic I think you'd have to shrink your resource image in photoshop or something.
I'm very new to developing apps to android, so bear with me.
Having said that, I'm trying to make a list with a image to the left and a title and description to the right of the image.
The image is downloaded from the web in the background and then set in the UI as they complete. This all works. However, the images are not aligned properly and I simply cannot understand why. I'm thinking it has something to do with the layout defined in the xml file? I tried using android:layout_alignParentLeft="true" and android:layout_gravity="left" but that got me nowhere.
Then I didn't know how to proceed, even after googling every way I could think of. I'm sorry if this is very basic, but I would really appreciate some help here.
Here's a pic of the situation:
And here's my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget28"
android:layout_width="fill_parent"
android:layout_height="80px"
>
<ImageView
android:id="#+id/imageItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_alignParentLeft="true"
>
</ImageView>
<LinearLayout
android:id="#+id/linearText"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_marginLeft="10px"
android:layout_marginTop="10px"
>
<TextView
android:id="#+id/textTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
>
</TextView>
<TextView
android:id="#+id/textBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
>
</TextView>
</LinearLayout>
</LinearLayout>
I appreciate any help you can offer.
There're two ways to achieve what you desire:
1.Fix the ImageView width and height and use android:scaleType="fitXY". This sounds bad, but actually almost gallery apps I know use it in the thumbnail preview mode.
2.Set android:scaleType="fitStart". No promise this will work, depends on the ratio of width and height of the image source. But if all your image source are landscape style (width > height), this way should work.
I am trying to add a transparent button bars at the top and bottom of my activity, much like in the Android Gallery App.
I have been looking through the Gallery app source code, but I'm not able to see how they did it. When using some snippits of their code, I am able to produce a button bar, but it is a dark grey color with lighter grey buttons:
<LinearLayout android:id="#+id/gridView_multiSelectBar"
android:orientation="horizontal" android:visibility="gone"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_weight="0" android:clickable="false"
android:paddingTop="5dp" android:paddingLeft="4dp"
android:paddingRight="4dp" android:paddingBottom="1dp"
android:background="#android:drawable/bottom_bar"
android:layout_alignParentBottom="true">
<Button android:id="#+id/gridView_multiSelectBar_button_share"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_share" />
<Button android:id="#+id/gridView_multiSelectBar_button_copy"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_copy" />
<Button android:id="#+id/gridView_multiSelectBar_button_delete"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_delete" />
<Button android:id="#+id/gridView_multiSelectBar_button_close"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_close" />
</LinearLayout>
The code implies that they are using Button widgets. The screenshot below almost looks like its using a menu for the bottom, but then I'm not sure how they are drawing the top area.
My app has a black background. I would like these buttons to a thin border to show the boundaries between them, as well as the main content.
Can anyone can point me in the right direction?
Thanks in advance,
Kevin
A similar question was asked and answered in
How to Set Opacity (Alpha) for View in Android.
It is a matter of setting the alpha content of your view. Hope that helps you.
Cheers!!!
nJoshi