Scaling ImageButton for various screen sizes - java

After scaling the image I use for my ImageButton with the Nine-patch Generator to retrieve all of the dpi files as well as maintaining the appropriate ".9" extensions, and referenced the bitmap in the src of the button, I still get the following result with the Nexus 5 virtual emulator (1080X1920, xxhdpi):
... There's no way in hell that the ImageButtons are 227X53 pixels (xxhdpi) here... But rather, the system retrieves a lower dpi like mdpi instead.
Here's the XML code for just one of the buttons:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/demosBtn"
android:src="#drawable/demo_btn"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#android:color/transparent" />
And as for the drawable resource file of the demo button:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed_demo" android:state_pressed="true"/>
<item android:drawable="#drawable/norm_demo"/>
</selector>
P.S. I tried this with ImageView as well, set it as clickable, set adjustViewBounds to true, and set scaleType to centerCrop, and yet it didn't work.

Use SVG (Scalable vector graphics)! You can scale them to any resolution and they still look super HD. :D

Related

Android How to get the height equal the width of an component

I want to to have the height of an ImageView equal to it's width. I already read something about using "app:..." in activity.xml.
But, it says that it couldn't find the namespace. After that, I just found a code which didn't worked for me.
Does anybody has ideas or suggestions to fix this issue? If it has to be done programmatically and it would be good if has an example for this using Kotlin.
If you want to have the height of an ImageView equal to it's width,
Programmatically [Dynamic way]:
int widthOfImage = image_view.getLayoutParams().width;
image_view.getLayoutParams().height = widthOfImage ;
refer to this answer
you can do it in Hard-coded way:
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_launcher_background"/>
or you can define background like this image_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#003778" />
<corners android:radius="6dp" />
<size android:width="100dp"
android:height="100dp"/>
</shape>
and add it as background in imageView. [remember it is also hard-coded]
You have to use this custome view inside you xml file.
Example
<YourPackageName.SquareImageView
android:id="#+id/squareImageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher_background"/>
Now you have to bind this view in you code. Like Fragment or Activity whatever you have used.
Exmple (This is code in java you can change it in kotlin) :-
SquareImageView imageView = findViewById(R.id. squareImageview);

How to set ImageView's tint under (Expandable)ListAdapter?

Preamble
I've been g00gling for half an hour now, and it seems like I'm really missing something important.
Note: I've already tried the solutions for these questions
How to change color of vector drawable path on button click
How to set tint for an image view programmatically in android?
Changing ImageView source
These solutions either recolor ALL ImageView srcs or they don't do anything at all (vector remains black).
My drawable is a vector asset from the material icons directory:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z" />
</vector>
My ImageView:
<ImageView
android:id="#+id/gradeBullet"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="25.5dp"
android:layout_marginTop="25.5dp"
app:srcCompat="#drawable/importantgrade" />
I would like to do this with *Compat, because I'd also like to support earlier APIs (API>17).
My ImageView: ImageView gradeBullet = convertView.findViewById(R.id.gradeBullet);
Try I.
MyAmazingAdapter.java - getChildView(...)
gradeBullet.setColorFilter(ContextCompat.getColor(context, gradeObj.colorId), PorterDuff.Mode.MULTIPLY);
Result: Does nothing.
Try II.
MyAmazingAdapter.java - getChildView(...)
DrawableCompat.setTint(gradeBullet.getDrawable(), ContextCompat.getColor(context, R.color.myColor));
Result: Recolors everything.
Try III.
MyAmazingAdapter.java - getChildView(...)
VectorDrawableCompat drawable = (VectorDrawableCompat) gradeBullet.getDrawable();
drawable.setTint(ContextCompat.getColor(context, gradeObj.colorId));
gradeBullet.setImageDrawable(drawable);
Result: Gives a weird color. (Definitely not what I want, it's closer to the original color)
Try IV.
All the above with a final to the gradeBullet, got the same results.
Some other info
The gradeObj.colorId is different for every childView.
Using shapes and setColor instead of SVG is not what I want.
Currently only tested with API lvl 26
MyAmazingAdapter.java extends BaseExpandableListAdapter
If you'd like more info, just mention it in a comment.
You can try your first method with PorterDuff.Mode.SRC_IN or PorterDuff.Mode.SRC_ATOP instead of PorterDuff.Mode.MULTIPLY.
PorterDuff.mode
Hope this helps.

How to make a text have a "Message Style Apperance"

So, basically I want a Text on android appear in this "message style" or like a speakbubble.
btw that was the first picture to pop up from the old whatsapp style xD.
Does somebody know hot to do this?
Assuming you want something similar to the right side, here is a solution:
First create a new drawable xml
speech_bubble.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#90ee90" />
<corners android:radius="5dp"/>
</shape>
Then in your activity xml you can use it like so:
activity_main.xml
<TextView
android:padding="5dp"
android:background="#drawable/speech_bubble"
android:text="This is a speech bubble"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
You put a background drawable behind the text view, with a bit of padding on all 4 sides (so there's an offset between the text and the start of the image). Preferably a 9-patch so you can stretch the speech bubble.

color-palette or third party plugin in order to set colors in eclipse

Is there easy way to manipulate colors in android ?
In dot.net we have color palette to change the color of
objects(button-background,text-color.. etc)
similarly is there any color palette/or/-any-plugins in object
browser of eclipse IDE at design time
Note:: I am aware of changing the color by adding color codes in styles.xml and referencing it in layout.xml
You can do this in some cases directly,
e.g in TextView you can change the Text Color by applying this statement in
Java code
textView1.setTextColor(Color.Red);
for other objects like buttons etc. you can not change their Color Directly like C#.
You have to create different .xml file and then you will store this .xml file inb drawable folder, in your activity_main(where button is created in your layout file) you have to make reference
e.g
<Button
android:background="#drawable/red_button" />
now the colored button .xml file located in
res/drawable/red_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/red_button_pressed" />
<item android:state_focused="true" android:drawable="#drawable/red_button_focus" />
<item android:drawable="#drawable/red_button_rest" />
</selector>
Check this Link for more Details

How can i draw a circle that compatible with all android device with fixed radius?

I need to create a program, that have 5 radius buttons. When i'm click on these each button i want to adjust my circle radius.(Circle should have same size in all android phones).
pls help me to find this...
Deducting the screen size before you create a circle and act based on that is a elegant way ,
There are difference sizes of screens in android devices,
so find out the screen size place your co-ordinate values according to the found screen size,
If drawing is only one option for you then the following
thread will be helpful for you to achieve this,
Compatible Canvas draw tip
If not, then button backgounds should be 9 patch image is always better.
Hope , you will find it useful.
You could create a circle-shape in xml and set this as background resource to a button or an imageButton, or you could do your own button-class and override onDraw method. A tutorial with shape is here:
http://dandar3.blogspot.de/2012/10/android-custom-round-buttons.html
or here:
http://yekmer.posterous.com/how-to-make-rounded-buttons-on-android
Instead of using "rectangle" at the shape, You could use "oval".
I donĀ“t know if I understand You right, but making a button that had the same size on every phone is not a good way. Views had to be independent, a view should be created in a way, that it is adjusted to the individual screen size. To do so, use "dp" units in your xml layouts.
Now here is my example:
1.) first create a shape-drawable in the drawable folder:
round_button_oval_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#00ced1" />
</shape>
2.) create a second shape in drawable folder:
rounded_button_oval_shape_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#008b8b" />
</shape>
3.) create a selector in the drawable folder:
rounded_button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rounded_button_oval_shape_pressed"
android:state_pressed="true"></item>
<item android:drawable="#drawable/round_button_oval_shape"
android:state_pressed="false"></item>
<item android:drawable="#drawable/round_button_oval_shape"></item>
</selector>
4.)create your main-layout
main.xml
<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="#000000"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:textColor="#ff0000" />
<Button
android:id="#+id/rounded_button"
android:layout_width="250dp"
android:layout_height="250dp"
android:background="#drawable/rounded_button_selector" />
</LinearLayout>
If you have done this parts, you could anything do with that button in your activity.
RoundedButtonDemo.java
public class RoundedButtonDemo extends Activity {
private Button mRoundedButton;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mRoundedButton = (Button) findViewById(R.id.rounded_button); //initialize your button
mRoundedButton.setOnClickListener(new OnClickListener() { // set Button on click listener
#Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
Toast.makeText(RoundedButtonDemo.this, //show a toast when pressing button
R.string.rounded_button_message, Toast.LENGTH_LONG)
.show();
}
});
}
}
The shapes and the selector are needed for showing a pressed behavior of the button. The first shape is a normal button, which is not pressed. the second one is a shape that is pressed. The selector is using the two shapes for showing the pressed state to the user. To get this, set the selector as background to your button in your main.xml .

Categories