I want to create a Button
like this:
Here is my code:
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:drawablePadding="10dp"
android:id="@+id/button"
android:text="Play Game"
android:background="@drawable/ronaldo"
android:drawableRight="@drawable/messi" />
But the messi.jpeg
is too large, and it doesn’t show the text in this situation. How to decrease the image size to fit the button?
May anyone help me to solve this problem?
Solution 1:
Adding a drawable to a button has very limited functions. You can’t change the drawable size, so the best way to fix it is to add a button with an image view beside it in a linear layout like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/ronaldo"
android:orientation="horizontal">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:background="@null"
android:text="Play Game"
android:textColor="#ff0000"
android:textStyle="italic" />
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:src="@drawable/messi" />
</LinearLayout>
Solution 2:
You can also do the following if you prefer this one, but you will have to add onClickListener() for each one of them:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/ronaldo"
android:orientation="horizontal">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:background="@null"
android:text="Play Game"
android:textColor="#ff0000"
android:textStyle="italic" />
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:src="@drawable/messi" />
</LinearLayout>
Solution 3:
As you have suggested in the comments, you would do something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center"
android:background="@drawable/ronaldo">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_alignLeft="@+id/buttonLayout"
android:layout_alignRight="@+id/buttonLayout"
android:background="@null" />
<LinearLayout
android:id="@+id/buttonLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:gravity="center"
android:text="Play Game"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ff0000"
android:textStyle="italic" />
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:src="@drawable/messi" />
</LinearLayout>
</RelativeLayout>
Answer:
If you are using API >= 23, you can put the drawable resource within a XML file like this
messi_smaller.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/messi"
android:width="smaller_width_in_dp"
android:height="smaller_height_in_dp">
</item>
</layer-list>
You must make sure to keep the drawable ratio when you set the width and the height. And just use this drawable in your button:
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:drawablePadding="10dp"
android:id="@+id/button"
android:text="Play Game"
android:background="@drawable/ronaldo"
android:drawableRight="@drawable/messi_smaller" />
By this way, you can change the drawable size just in xml code
Answer:
I deleted the button
and made a layer like a button
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@android:color/background_light"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="go_map"
android:clickable="true"
android:orientation="vertical">
<ImageView
android:id="@+id/img_m0"
style="@style/menu2img"
app:srcCompat="@drawable/ico_m0" />
<TextView
android:id="@+id/textView2"
style="@style/menu2text"
android:text="@string/men_map" />
</LinearLayout>
[
Answer:
you can use a RelativeLayout like this:
<RelativeLayout
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@drawable/ronaldo">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="play game"
/>
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@drawable/messi"
android:scaleType="fitXY"
/>
</RelativeLayout>
Answer:
Try this :
final Button button = (Button) findViewById(R.id.button1);
ViewTreeObserver vto = button.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
public boolean onPreDraw() {
button.getViewTreeObserver().removeOnPreDrawListener(this);
//scale to 90% of button height
DroidUtils.scaleButtonDrawables(button, 0.9);
return true;
}
});
Tags: androidandroid, button