안드로이드 Button style 버튼 꾸미기결과
Show
Layout 코드
파일 생성 - drawable -> resource file을 생성한다. - 스타일을 쉽게 만들기 위하여 아래 사이트를 이용한다. https://angrytools.com/android/button/ 스타일 제작 - 원하는 스타일을 만든 후 해당 부분을 복사하여 파일에 복사해준 후 사용한다. 투명 Style 코드
ㄴ 백그라운드를 투명하게 하기 위해서는 solid 부분을 지워주면 된다. 해당 예제는 투명도를 조절하는 방법을 보이기 위하여 작성하였다. - corners : 사각형 각 모서리부분을 둥글게 만든다. 값이 클수록 각이 없어진다. - solid : 배경 Color를 지정한다. 여기서는 투명하게 하기 위해서 Color를 "#00FFFFFF" 로 주었다. - size : 사이즈를 지정한다. height를 바꾸어주면 높이가 바뀌는것을 확인할 수 있다. - stroke : 테두리 선을 지정한다. width로 길이를 color로 색을 지정한다. Style 코드
- padding : padding 값을 지정해 줄수 도 있다. In this tutorial, we’ll be customizing the Buttons in our Android Application. If you aren’t aware of Android Buttons, check out this tutorial before proceeding. We’ll be setting selectors and shapes on our buttons in xml. Android Button DesignA selector is used to define a different behaviour for different states of the Button. What are drawable states? Each of the following events of a view (Button or any other kind of view) are a type of state:
state_focused is when you hover over the widget. Typically works only on emulators. state_selected is meant to select the view. Doesn’t work with Buttons. Works with RadioButtons. Typically for a button, there are just three important states: normal, pressed and enabled. For each of the states of the selector, we can set a different drawable/color/shape on our button. Let’s get started with the implementation of each of these in a new Android Studio Project. Android Custom Button Project Structurebtn_bg_selector.xml contains the code for setting different background colors on a button for different states.
In the above code, each of the states is represented using item tag. The selector tag behaves like an if - else if statement to an extent. It checks every condition from top to bottom. Whenever the condition matches, it sets the relevant things on the button and stops processing the next item tags. The third item tag is the default one. It’s important that we keep it at the
last. Keeping it at the top would not allow the other two item tags to get executed ever. We set the above drawable selector file on our button in the
The selector is set on the background attribute of the button. Selector for Disabled ButtonThe following selector
For the above selector to work, we need to specify android:enabled as false.
Selector with Different DrawablesWe can set a different drawable image to be displayed based upon the state of the button. The selector code that does so is present in the file
Note: The focused state doesn’t work on smart phones. Now the drawable images when set as the button background can get stretched if it’s width/height is larger than the button’s. So we need to set the Button width/height in accordance with the drawable image. We can do so either by hardcoding in xml or getting the drawable dimensions programmatically and setting it over the button. For the sake of convenience we’ve done the former here:
ImageButton is the ideal View to be used when you need to display a drawable as the button background only since it fits the drawable appropriately. ImageButton comes with the
Android Button ColorWe can
change the text color on the button based on the state in the selector. The following code from
The button in the layout:
Android Button ShapesWe can set custom shapes on our button using the xml tag
Android Round Corner ButtonThe xml code for the btn_shape_round.xml file is given below:
Just like selectors, we can set this on the android:background tag on the Button in our xml layout. Android Button Shape With GradientIn the following btn_shape_gradient.xml file, we’ve set the gradient as a
Android Button Shape and Selector TogetherThe btn_selector_shape.xml holds the selector. Each of the items has a shape specified.
Set this on the Button and the shape would change from rectangle to oval when the button is clicked. A linear gradient should have the angle specified in the multiples of 45, else it’ll crash. Setting the Button shape as capsule
The code for the MainActivity.java class which hosts all of the above button examples is given below.
Android Custom Button Design App OutputThe output of the above application in action is given below. Download Android Button Design Project |