I am Working with the Buttons Which have a background that I have Created in Drawable xml File. The Buttons look Fine in Designing But on Runtime as I Press Click, its size get Shrink and When I Click on Other Button in Design the Previous button Size goes to initial Android...
here is My Button Xml File
<Button
android:id="#+id/btn_facbookid"
android:layout_width="#dimen/_95sdp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_15sdp"
android:layout_marginRight="#dimen/_10sdp"
android:background="#drawable/button_bg_rounded_corners_main"
android:fontFamily="#font/poppins_light"
android:text="#string/url"
android:textColor="#color/textcolorblack"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_facebook"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/btn_facbookurl"
/>
<Button
android:id="#+id/btn_facbookurl"
android:layout_width="#dimen/_180sdp"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/_15sdp"
android:layout_marginTop="#dimen/_15sdp"
android:fontFamily="#font/poppins_light"
android:background="#drawable/button_bg_rounded_corners"
android:text="#string/facebookid"
app:layout_constraintStart_toStartOf="parent"
android:textColor="#color/whitecolor"
app:layout_constraintTop_toBottomOf="#id/tv_facebook"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/btn_facbookid"
/>
The selector drawable Layout layut i have Created for buttons is
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#8420CA"
android:endColor="#46CEFC"
android:angle="45"/>
<stroke android:color="#color/transparent" android:width="4dp" />
<!--corners allow us to make the rounded corners button-->
<corners android:radius="#dimen/_50sdp" />
</shape>
</item>
The Scenario is as i Click on Button It Changes its color, It changes the color but Button get Shrinked
btn_facbookurl.setOnClickListener(View.OnClickListener {
btn_facbookurl.background=
ContextCompat.getDrawable(this,R.drawable.button_bg_rounded_corners)
btn_facbookid.background=
ContextCompat.getDrawable(this,R.drawable.button_bg_rounded_corners_main)
btn_facbookurl.setTextColor(getColor(R.color.whitecolor))
btn_facbookid.setTextColor(getColor(R.color.textcolorblack))
url_facebookedit.setHint("Enter Facebook ID Here")
})
btn_facbookid.setOnClickListener(View.OnClickListener {
btn_facbookid.background=
ContextCompat.getDrawable(this,R.drawable.button_bg_rounded_corners)
btn_facbookurl.background=
ContextCompat.getDrawable(this,R.drawable.button_bg_rounded_corners_main)
btn_facbookid.setTextColor(getColor(R.color.whitecolor))
btn_facbookurl.setTextColor(getColor(R.color.textcolorblack))
url_facebookedit.setHint("Enter Facebook URL Here")
})
here is the UI
As I click on Button Facebook it Shrink and Come to origional Size as I Click on URL and Vice Versa...
You're adding a transparent stroke around the button (which makes the filled area smaller)
<stroke android:color="#color/transparent" android:width="4dp" />
I assume that file is R.drawable.button_bg_rounded_corners, and the stroke isn't there in R.drawable.button_bg_rounded_corners_main.
Also check your corner radius, I don't know what sdp is but if the radius doesn't match in both files, and one is slightly larger, it might affect the size since it's defining the entire shape and not just the corners. Maybe!
For your Button Shrink case, You should add android:layout_height value.
Specifies the basic height of the view. This is a required attribute
for any view inside of a containing layout manager
Don't
<Button
android:layout_height="wrap_content"
Try with
<Button
android:layout_height="#dimen/_50sdp"
Related
I am trying to input an image in a regular button, however it does not show up. My code looks like this
<Button
android:text="#string/buttonexit"
android:layout_width="300dp"
android:layout_height="50dp"
android:id="#+id/buttonexit"
android:layout_marginLeft="50dp"
android:background="#drawable/wood"/>
I also hoped and included src instead of background, however it still did not work.
<Button
android:text="#string/buttonexit"
android:layout_width="300dp"
android:layout_height="50dp"
android:id="#+id/buttonexit"
android:layout_marginLeft="50dp"
android:src="#drawable/wood"/>
Lastly I also tried to make an image button, however once I added an image I cannot adjust the corners anymore.
You can use AppCompatButton instead of Button.
For a Button, the primary color defined in the app theme overrides any custom background that you want to apply to a Button, but it is not the case for the AppCompatButton.
For example:
<androidx.appcompat.widget.AppCompatButton
android:text="test"
android:layout_width="300dp"
android:layout_height="50dp"
android:id="#+id/buttonexit"
android:layout_marginLeft="50dp"
android:background="#drawable/bg"/>
Besides, you can also use ImageButton to achieve this function.
You can add an image by property android:src and adjust the corners with property android:background by creating a shape xml file.
You can refer to the following code:
1.create file button_shape.xml in folder drawable:
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android = "http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--background color-->
<solid android:color="#20a4e5"/>
<!--radius-->
<corners android:radius="10dip"/>
<!--Sets the width and color of the border line-->
<stroke android:width="2dp" android:color="#fffff0" />
</shape>
2.set it for android:background of ImageButton
<ImageButton
android:text="test"
android:layout_width="300dp"
android:layout_height="80dp"
android:layout_marginLeft="50dp"
android:background="#drawable/button_shape"
android:src="#drawable/grass"/>
In my Android Studio application, I have a button for which I set a drawable as the background. The drawable rounds the corners and changes the color of the button.
However, when I look at the resulting design of the activity, the color I want doesn't show up. Instead, the button assumes colorPrimary (orange, #ED3616). The same occurs when I run the application.
Note: the other attributes of the drawable file translate perfectly to the button (i.e. the rounded corners). The problem is only with the color.
I have tried using a MaterialButton, and setting the color with android:backgroundTint. Then, the color does show up as I want to, but the design looks odd (there is a different colored rectangle inside of the button(Picture of MaterialButton if you'd like to see it)
How can I make the regular button have the color I desire?
Button:
<Button
android:background="#drawable/round2"
android:id="#+id/signIn"
android:layout_width="256dp"
android:layout_height="66dp"
android:text="#string/logIn"
android:textColor="#FFFFFF"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.878" />
Drawable: round2.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#B30C44"
android:paddingLeft="6dp"
android:paddingTop="6dp" />
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
<padding
android:bottom="6dp"
android:left="6dp"
android:right="6dp"
android:top="6dp" />
</shape>
What shows up:
What the Button looks like
It happens because the default style of the MaterialButton (the Button is replaced with a MaterialButton automatically if your are using a MaterialComponents theme) tints the background with the colorPrimary.
You have to use:
<Button
android:background="#drawable/round2"
app:backgroundTint="#null"
... />
There are buttons that use the custom style. The distance from the text of the button to its bottom edge differs depending on the length of the text - in case the text is transferred to the second and more lines, the distance to the edge is significantly reduced. Is there a way to somehow make these distances the same? Both buttons are in the LinearLayout. Also i use Calligraphy lib to set custom fonts.
This picture describes the problem.
Buttons in Layout:
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/btn_in_text"
android:textAllCaps="false"
android:text="short text"
android:gravity="left|center_vertical"
style="?android:attr/borderlessButtonStyle"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
/>
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:background="#drawable/btn_in_text"
android:textAllCaps="false"
android:text="Very long text. The longes text that you saw before"
android:gravity="left|center_vertical"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
/>
btn_in_text.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
Tried to use
android:includeFontPadding="false"
android:paddingBottom="2dp"
and
android:lineSpacingMultiplier="1.2"
but it did not help.
The very short answer: add this attribute to both of your <Button> tags:
android:minHeight="0dp"
Because you're using <Buttton> instead of <TextView>, you are getting all of the default styles applied to Buttons by the android framework. One of these is a minimum height. That minimum height, combined with your gravity attribute including center_vertical, means that your text will float in the middle of the button until your text is long enough that it wraps enough times to exceed the button's default height.
Another possible solution is to use <TextView> tags instead of Buttons, and remove the style="?android:attr/borderlessButtonStyle" attribute. This will also let you remove android:textAllCaps="false".
Iam not sure about the specifics of your problem but I had a similar problem where my textsize was changing the button's size as well and fixed it using
android:baselineAligned="false"
In the layout which carries the Buttons since by default the bottom edge of all the text in a row is at the same height.
Here is the link of my solved problem which includes a picture similar to yours :-
In XML Button size changes with its Font size
If that doesn't work try making a fixed button height instead of wrap_content.
Is it possible to specify border in Android button in the main.xml?
[p.s.
without the 'separate xml file containing stroke tag' but in the original file where I define the button and also
without the 'dynamically by programming' solution
and 'images' solution]
<Button
android:background="#FFFFFF"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:text="Player 3"
android:layout_x="0px"
android:layout_y="0px"
android:id="#+id/p3"
android:layout_weight="1"
/>
here I am changing the background dynamically but the problem is, for 2 buttons there is no border.
Try to use shape
my_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"
android:radius="0.1dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#E8E6E7" />
</shape>
And Button
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/my_shape"
android:text="Button" />
Screenshot
I hope this will help you.
This is not the recommended way to do it because it causes overdraw and adds unnecessary views, Gunaseelan has the proper method.
There's no concept of borders as an attribute. The accepted way is to use a separate drawable as the background to the View (using stroke as you've mentioned and as #gunaseelan writes).
The other (not recommended) way is to enclose your Button in another View like a LinearLayout, set the background color to the desired border colour on the encapsulating View and padding on the outer View too.
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#342334"
android:padding="5dp"
>
<Button
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="whatwhaaat"
/>
</LinearLayout>
The value of the padding will indicate the thickness of the border. This method is not recommended as you end up with an extra View in your layout, and another layer of overdraw (it draws the LinearLayout then the Button on top).
Usually, there's a bit effect when we press a button. But when I set gradient background for a button by creating a shape border.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="1px" android:color="#cccccc" />
<corners android:radius="6px" />
<gradient
android:startColor="#d8d8d8"
android:endColor="#f9f2f9"
android:angle="90" />
</shape>
and button:
<Button
android:id="#+id/visibility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:drawableLeft="#drawable/idle"
android:singleLine="true"
android:padding="5px"
android:textSize="14px"
android:textColor="#444444"
android:textStyle="bold"
android:typeface="sans"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:background="#drawable/border"
android:clickable="true">
</Button>
the effect when press the button is lost, the button now is just like a textview, nothing is changed when I click on it.
But if I delete this line in button, everything's ok:
android:background="#drawable/border"
So any solutions to don't be lost the effect when press the button, or any solutions to make a button has border and gradient background without use shape?
Thanks!
You have to use a StateListDrawable for the button background, supplying different background images for each state (pressed, focused, etc.).
It will be much simpler to simply not change the button background at all.