!!Beginner alert!!
I designed my app in Adobe XD. Now I started to introduce the design in Android Studio. However, whenever I use a resource from the resource manager and drop it in the designer, the resizable area is way bigger than the image which i think will affect the clickable area of it. Everything looks good in Adobe XD, the resizable area is the border of the button. How can I do this in Android Studio? I will attach images below. Help is greatly appreciated.
How it's supposed to look (the look in Adobe XD)
The resizable area of the button in Adobe XD
The resizable area of the button in Android Studio
How can I make Android Studio have the same resizable area as Adobe XD?
I implemented the XML code below:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
tools:context=".Dashboard">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="10dp"
app:layout_constraintEnd_toStartOf="#+id/imageView5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/resmonevo" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
app:layout_constraintStart_toStartOf="#+id/imageView3"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/red_gradient_line" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="121dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3"
app:srcCompat="#drawable/dashboard" />
<ImageView
android:id="#+id/imageView14"
android:layout_width="0dp"
android:layout_height="115dp"
android:layout_marginStart="5dp"
android:layout_marginTop="7dp"
android:layout_marginEnd="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4"
app:srcCompat="#drawable/rectangle_210" />
<ImageView
android:id="#+id/imageView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView18"
app:srcCompat="#drawable/rectangle_221" />
<ImageView
android:id="#+id/imageView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="18dp"
android:layout_marginBottom="1dp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintStart_toEndOf="#+id/imageView15"
app:srcCompat="#drawable/welcome_" />
<ImageView
android:id="#+id/imageView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="47dp"
android:layout_marginEnd="27dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView14"
app:srcCompat="#drawable/how_are_you_today" />
<ImageView
android:id="#+id/imageView20"
android:layout_width="21dp"
android:layout_height="19dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView15"
app:layout_constraintEnd_toEndOf="#+id/imageView15"
app:layout_constraintStart_toStartOf="#+id/imageView15"
app:layout_constraintTop_toTopOf="#+id/imageView15"
app:srcCompat="#drawable/ic_person_outline_24px" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="32dp"
android:layout_marginEnd="9dp"
android:fontFamily="#font/montserrat"
android:text="Username"
android:textColor="#FFFFFF"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView19"
app:layout_constraintEnd_toStartOf="#+id/imageView19"
app:layout_constraintStart_toStartOf="#+id/imageView18"
app:layout_constraintTop_toBottomOf="#+id/imageView19" />
<ImageView
android:id="#+id/imageView8"
android:layout_width="390dp"
android:layout_height="351dp"
android:adjustViewBounds="true"
app:srcCompat="#drawable/rectangle_187"
tools:layout_editor_absoluteX="-39dp"
tools:layout_editor_absoluteY="158dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
The XML code for the most recent button is :
<ImageView
android:id="#+id/imageView8"
android:layout_width="390dp"
android:layout_height="351dp"
android:adjustViewBounds="true"
app:srcCompat="#drawable/rectangle_187"
tools:layout_editor_absoluteX="-39dp"
tools:layout_editor_absoluteY="158dp" />
Here is how my mess looks
The problem what I can figure out is that you are using static size in width
I will suggest you to use Linear layout as parent and inside it have a Image view as child because you are statically defining the width of image view.
so try something like this:
Kindly use imageView in your case I have used MaterialTextView just for an instance
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal"
android:padding="12dp">
<com.google.android.material.textview.MaterialTextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:fontFamily="#font/cantata_one"
android:text="Email"/>
<com.google.android.material.textview.MaterialTextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.7"
android:id="#+id/layout_recycler_all_cust_email"
android:fontFamily="#font/capriola"
android:textColor="#706E6E"
android:text="Email "/>
</LinearLayout>
and in the above code, you can see i have assigned weightsum to the LinearLayout and accordingly wait to it's children so you should try this. This will make your UI Flexible according to the device size and in the android:layout_height="wrap_content" you can use your value like 350DP or something else.
I face a strange issue when i use "CardView" to create a button with rounded corners. Let me explain you the design issue i face. Here is the code is use to make round corner button:
<androidx.cardview.widget.CardView
android:id="#+id/tv_email_next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_error_message"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_marginTop="20dp"
app:cardBackgroundColor="#f15b5d"
app:cardCornerRadius="34dp"
app:cardElevation="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/submit_btn_bg">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="#string/next"
android:textSize="16sp"
android:textColor="#android:color/white"
android:textStyle="bold"
android:layout_centerVertical="true"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
I use "submit_btn_bg" as backgroudn in RelativeLayout. Here is the code of file "submit_btn_bg":
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#f15b5d" />
<corners android:radius="24dp" />
</shape>
Now when i run app in android 7.0 it look like this("Next Button"):
But when i run same code in Android 10 it look fine like this:
I not this behavior is in Cardview. Anyone know how i solve this?
Its because you should input half of the cardViews height dp in the radius. If your cardview has a height of 50dp, put 25 dp in the submit_btn_bg as a radius.
Also i recommend that you use button as it is much better than using a cardview as button.
This is a better representation of the Button above, the output is very similar to yours and lesser code.
<com.google.android.material.button.MaterialButton
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:backgroundTint="#F44336"
android:padding="8dp"
android:text="Next"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="16sp"
android:theme="#style/Theme.MaterialComponents"
app:cornerRadius="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Output:
I have created a login page which has two editText fields for username and password. I have included an ImageView in the activity also.
I have made an XML file to make rounded white background for the editText fields. However, that did not work and was still transparent. On changing the background from the created XML file to simple white colour, I could still not see the editText fields.
Below is the code I have used for the following:
Login.XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:onClick="Clicked"
android:padding="10dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
tools:context=".MainActivity">
<Button
android:id="#+id/button"
android:layout_width="307dp"
android:layout_height="63dp"
android:layout_marginBottom="17dp"
android:layout_marginEnd="327dp"
android:layout_marginStart="84dp"
android:foreground="#drawable/emailsignup"
android:text="#string/button"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.104"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2"
app:layout_constraintVertical_bias="1.0" />
<Button
android:id="#+id/button2"
android:layout_width="293dp"
android:layout_height="57dp"
android:layout_marginEnd="146dp"
android:layout_marginStart="63dp"
android:layout_marginTop="200dp"
android:foreground="#drawable/gmailsignup"
android:text="#string/button2"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintHorizontal_bias="0.006"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="88dp"
android:layout_height="48dp"
android:layout_marginBottom="269dp"
android:layout_marginEnd="253dp"
android:layout_marginStart="150dp"
android:layout_marginTop="43dp"
android:background="#drawable/loginbg"
android:fontFamily="monospace"
android:text="#string/LoginText"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/imageView"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPassword"
app:layout_constraintVertical_bias="0.0" />
<EditText
android:id="#+id/editTextTextPassword"
android:layout_width="228dp"
android:layout_height="51dp"
android:layout_marginBottom="132dp"
android:layout_marginEnd="95dp"
android:layout_marginStart="179dp"
android:layout_marginTop="430dp"
android:autofillHints=""
android:background="#drawable/edittextround"
android:ems="10"
android:fontFamily="sans-serif-medium"
android:hint="#string/PasswordHint"
android:inputType="textPassword"
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.978"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<EditText
android:id="#+id/editTextTextPersonName"
android:layout_width="281dp"
android:layout_height="54dp"
android:layout_marginBottom="320dp"
android:layout_marginEnd="153dp"
android:layout_marginStart="58dp"
android:layout_marginTop="88dp"
android:autofillHints=""
android:ems="10"
android:background="#drawable/edittextround"
android:hint="#string/LoginTextHint"
android:inputType="textPersonName"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintVertical_bias="0.962" />
<ImageView
android:id="#+id/imageView"
android:layout_width="566dp"
android:layout_height="972dp"
android:adjustViewBounds="false"
android:contentDescription="#string/todo"
android:cropToPadding="false"
android:foreground="?android:attr/selectableItemBackgroundBorderless"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.344"
app:srcCompat="#drawable/picture1_2" />
</androidx.constraintlayout.widget.ConstraintLayout>
edittextround.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<gradient
android:centerY="0.2"
android:startColor="#D3D3D3"
android:centerColor="#65FFFFFF"
android:endColor="#00FFFFFF"
android:angle="270"
/>
<stroke
android:width="0.7dp"
android:color="#BDBDBD" />
<corners
android:radius="15dp" />
</shape>
I tried putting the edittextbackground.xml on the login button and it worked perfectly.
The images related to this activity are below:
Image of the design
Please help me figure out why my editText fields do not show their backgrounds
ok got it
so the problem is below
app:layout_constraintBottom_toTopOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView"
you are setting the constraints to imageView and that imageView also renders in the area of Editext but not in the background because it is at same elevation as of Editexts so if you just increase the elevation of of editexts they will show up , i tried it , it works
just add android:elevation="1dp" in both edittexts the imageview is at 0dp so editext will show above it.
Although it works but your constraints are confusing use parent instead
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/button" will also do
also i want to say if you use constraint layout correctly you will not need to set layout_width and layout_height in most cases you can set them to 0 the constraints will determine the correct width and height also you don't need to use margins your constraint will handle them if you use bias, chains, groups ,barrier, guidelines etc correctly , please learn more about constraint layout and you can reduce the lines in above layout file to half.
this tutorial will give you good start, also watch other videos in that series
have a good day
I would like to achieve the following layout
The bottom layover TextView has a rounded rectangle drawable as a background. I would like to align the text inside the TextView with the top text. Currently what happens is that the rounded edges align with the text and not the actual text.
Any ideas on how to implement this with ConstraintLayout? I tried setting layout_constraintStart_toStartOf the text above and set negative padding but I guess constraints have priority here and ignores the padding.
Here is the full xml layout:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/trip_type_icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:tint="#color/oslo_gray"
app:layout_constraintBottom_toBottomOf="#+id/trip_month"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/trip_date"
app:srcCompat="#drawable/ic_car_pickup" />
<View
android:id="#+id/divider"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginStart="12dp"
android:layout_marginTop="12dp"
android:background="#color/oslo_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/trip_type_icon" />
<TextView
android:id="#+id/trip_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:textColor="#color/shark"
app:layout_constraintEnd_toEndOf="#+id/trip_month"
app:layout_constraintStart_toEndOf="#+id/trip_type_icon"
app:layout_constraintTop_toTopOf="parent"
tools:text="5" />
<TextView
android:id="#+id/trip_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="4dp"
android:textColor="#color/emperor"
app:layout_constraintBottom_toBottomOf="#+id/trip_timeline_subtitle"
app:layout_constraintStart_toEndOf="#+id/trip_type_icon"
app:layout_constraintTop_toBottomOf="#+id/trip_date"
tools:text="Sep" />
<TextView
android:id="#+id/trip_timeline_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:textColor="#color/shark"
app:layout_constraintEnd_toStartOf="#+id/navigate_arrow"
app:layout_constraintStart_toEndOf="#+id/trip_date"
app:layout_constraintTop_toTopOf="parent"
tools:text="PVG -> PEK" />
<TextView
android:id="#+id/trip_timeline_subtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="48dp"
android:textColor="#color/emperor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/trip_timeline_title"
app:layout_constraintStart_toEndOf="#+id/trip_date"
app:layout_constraintTop_toBottomOf="#+id/trip_timeline_title"
tools:text="2:10pm - 4:45pm" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/navigate_arrow"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="24dp"
app:layout_constraintBottom_toBottomOf="#+id/trip_timeline_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/trip_timeline_title"
app:layout_constraintTop_toTopOf="#+id/trip_timeline_title"
app:srcCompat="#drawable/ic_arrow_right_vector" />
<TextView
android:id="#+id/trip_timeline_flight_layover"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/rounded_rectangle_radius_12dp"
android:textColor="#color/emperor"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="#id/navigate_arrow"
app:layout_constraintStart_toStartOf="#+id/trip_timeline_subtitle"
app:layout_constraintTop_toBottomOf="#id/trip_timeline_subtitle"
tools:background="#drawable/rounded_rectangle_radius_12dp"
tools:text="2h 25m Layover at PEK"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
Rounded rectangle drawable rounded_rectangle_radius_12dp:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:tint="#color/porcelain">
<corners android:radius="12dp" />
<padding android:left="12dp"
android:right="12dp"
android:top="2dp"
android:bottom="2dp"/>
</shape>
I would define padding inside your trip_timeline_flight_layover TextView instead of your drawable:
<TextView
android:id="#+id/trip_timeline_flight_layover"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:paddingStart="12dp"
android:paddingEnd="12dp"
android:background="#drawable/rounded_rectangle_radius_12dp"
android:textColor="#color/emperor"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="#id/navigate_arrow"
app:layout_constraintStart_toStartOf="#+id/trip_timeline_subtitle"
app:layout_constraintTop_toBottomOf="#id/trip_timeline_subtitle"
tools:background="#drawable/rounded_rectangle_radius_12dp"
tools:text="2h 25m Layover at PEK"
tools:visibility="visible" />
And then set layout_marginStart of trip_timeline_title equal to the padding of your layover``TextView, in this case, 12dp.
EDIT:
I actually don't think you have to define padding inside your TextView, just making margin of your title equal to the side padding should work.
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?
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
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>
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>
[]
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>
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;
}
});
If you are handling multiple screen sizes, creating alternative version for given screen (drawable-mdpi folder and so on...) can be solution.
If you are importing a vector directly you can use the following:
<vector android:height="30dp" android:tint="#00FF41"
android:viewportHeight="24" android:viewportWidth="24"
android:width="30dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#android:color/white" android:pathData="M20,6h-8l-2,-2L4,4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,8c0,-1.1 -0.9,-2 -2,-2zM20,18L4,18L4,8h16v10zM8,13.01l1.41,1.41L11,12.84L11,17h2v-4.16l1.59,1.59L16,13.01 12.01,9 8,13.01z"/>
</vector>
For API >= 23 and for android.support.design.widget.FloatingActionButton(FAB) , you can put the drawable resource (SVG) within a XML file with the path: File/New/Vector Asset and save the file under the name for example: ic_water_white_24dp.xml
and add app:maxImageSize attribute to the FAB:
<android.support.design.widget.FloatingActionButton
android:id="#+id/btnAddProduct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:clickable="true"
android:focusable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:maxImageSize="40dp" // add this line to increase the icon inside the fab
app:srcCompat="#drawable/ic_water_damage_white_24dp" />
Try using vector files instead of JPEG. Also, you can even convert jpeg to svg format too.
Once you import svg file into Android Studio project, you are going to see <vector> resource then just change the size as you want by width, height attributes.
viewportWidth and viewportHeight is to set size for drawing on virtual canvas.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp" <!-- fix the size here -->
android:height="20dp"
android:viewportWidth="40"
android:viewportHeight="40">
<path .../> <!-- your shapes are here -->
<path .../>
</vector>