CODEWITHSUNDEEP
androidbutton
Mickey Tin
Mickey Tin

Reputation: 3543

android flat button

i have buttons with rounded corners, how to make them looks like this : enter image description here

do i need to define my own style? I don't want to change my code, only XML resources, if it possible how to apply this(border radius = 0) style to my buttons?

Upvotes: 6

Views: 19651

Answers (5)

Alex Zaraos
Alex Zaraos

Reputation: 6553

add xml(example.xml) in folder drawable:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:topLeftRadius="4dip"
                android:topRightRadius="4dip"
                android:bottomLeftRadius="4dip"
                android:bottomRightRadius="4dip"/>
            <solid android:color="#1FC1BA"/>
        </shape>
    </item>

    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:topLeftRadius="4dip"
                android:topRightRadius="4dip"
                android:bottomLeftRadius="4dip"
                android:bottomRightRadius="4dip"/>
            <solid android:color="#26262C"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:topLeftRadius="4dip"
                android:topRightRadius="4dip"
                android:bottomLeftRadius="4dip"
                android:bottomRightRadius="4dip"/>
            <solid android:color="#1B978F"/>
        </shape>
    </item>


</selector>

on your folder layout(activity_main.xml) in the button

  • android:background="@drawable/example"

        <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="exampleText"
        android:layout_gravity="center"
        android:background="@drawable/example"
        android:textColor="#ffffffff" />

Upvotes: 2

Stephen
Stephen

Reputation: 10079

Check out this github post here.

Mainly check out the library provided there and added to that source code.

SnapShot:

Flat Button

Upvotes: 2

CinetiK
CinetiK

Reputation: 1758

I think the only way for you to get what you want it to write XML to make it possible.

In the drawable folder, create an xml file that will represent the shape of your button.

for example 

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true" >
    <shape>
      <solid
          android:color="#ff00ff" />
      <stroke
          android:width="1dp"
          android:color="#20f8f6" />
      <corners
          android:radius="6dp" /> // set to 0 or erase it for sharp corners
      <padding
          android:left="10dp"
          android:top="10dp"
          android:right="10dp"
          android:bottom="10dp" />
    </shape>
  </item>
  <item>
    <shape>
      <gradient
          android:startColor="#ff00ff"
          android:endColor="#992f2f"
          android:angle="270" />
      <stroke
          android:width="1dp"
          android:color="#992f2f" />
      <corners
          android:radius="6dp" />
      <padding
          android:left="10dp"
          android:top="10dp"
          android:right="10dp"
          android:bottom="10dp" />
    </shape>
  </item>
</selector>

then you need to create a style in your styles.xml file

<resources>
  <style name="button_text" >
    <item name="android:layout_width" >fill_parent</item>
    <item name="android:layout_height" >wrap_content</item>
    <item name="android:textColor" >#ffffff</item>
    <item name="android:gravity" >center</item>
    <item name="android:layout_margin" >3dp</item>
    <item name="android:textSize" >30dp</item>
    <item name="android:textStyle" >bold</item>
    <item name="android:shadowColor" >#000000</item>
    <item name="android:shadowDx" >1</item>
    <item name="android:shadowDy" >1</item>
    <item name="android:shadowRadius" >2</item>
  </style>
</resources>

and when you declare your button in the xml

 <Button
        android:background="@drawable/red_button"
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Styled Button"
        style="@style/button_text" />

Upvotes: 6

Nirav Ranpara
Nirav Ranpara

Reputation: 13785

I think below code is exactly what you are looking for.

 <?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">


  <item>
    <shape>
      <gradient
          android:startColor="#32a5cf"
          android:endColor="#32a5cf"
          android:angle="270" />
      <stroke
          android:width="7dp"
          android:color="#9032a5cf"
           />
      <corners
          android:radius="6dp" />
      <padding
          android:left="10dp"
          android:top="10dp"
          android:right="10dp"
          android:bottom="10dp" />
    </shape>
  </item>
</selector>

Upvotes: 1

Dmitriy Voronin
Dmitriy Voronin

Reputation: 649

http://android-holo-colors.com/

This service generate Holo-styles for checked components(button is your case) and then you can download zip with xml's.

Use it to fast&easy implement, or code samples.

Upvotes: 11

Related Questions