CODEWITHSUNDEEP
androidbuttonandroid-appcompatmaterial-design
Muz
Muz

Reputation: 5980

Non-Lollipop Material Flat Buttons

I want to do material style flat buttons for systems before Lollipop. I'm using Android 4.4.4 and my Play Store looks like the following:

Play Store

The buttons and icons are neatly arranged as in the APPS, GAMES, BOOKS.

The MORE button shows buttons a button without an icon.

So how do I do cute buttons like this, which glow when clicked, have the icon neatly arranged there, and have the little rounded corners. Using drawableLeft doesn't work because the icons get too big.

I'm guessing that there's a way to put this into a style sheet, because Google seems to do it quite consistently across their other apps.

Upvotes: 4

Views: 3307

Answers (4)

NarenderNishad
NarenderNishad

Reputation: 1068

Button without icon

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sign_up"
android:background="@drawable/action_button"
android:textColor="@color/primary_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginRight="5dp"
android:id="@+id/fl_btn_signup" />

In Drawable you can use this action_button.xml

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

    <item android:state_pressed="false">
        <shape android:dither="true" android:shape="rectangle">
            <corners android:bottomLeftRadius="3dp" android:bottomRightRadius="3dp" android:topLeftRadius="3dp" android:topRightRadius="3dp" />

            <solid android:color="#689F38" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:dither="true" android:shape="rectangle">
            <corners android:bottomLeftRadius="3dp" android:bottomRightRadius="3dp" android:topLeftRadius="3dp" android:topRightRadius="3dp" />

            <solid android:color="#80689F38" />
        </shape>
    </item>

</selector>

If you want to use icons with this buttons then use android:drawableLeft in your Button xml or you can take a LinearLayout with Horizontal orientation & with ImageView & TextView 

<LinearLayout
                android:orientation="horizontal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:gravity="center_vertical"
                android:background="@drawable/action_button"> //Same xml

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_apps_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="APPS"
                    android:gravity="center"
                    android:padding="5dp"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#FFFFFF" />

            </LinearLayout>

Upvotes: 9

LOG_TAG
LOG_TAG

Reputation: 20589

There is one library called FButton It is a custom Button of Android with Flat UI concept.

enter image description here

One more library called FlatUI

enter image description here

also we can do the same by custom resources like this gist!! by Dmytro

Update: For Material Design flat Button there is tons of custom libraries available

Try with MaterialDesignLibrary enter image description here

Credits:Emrullah Lüleci,Le Van Hoang,Dmytro Danylyk

Upvotes: -1

ductran
ductran

Reputation: 10203

Instead of button, you can consider to use LinearLayout contains icon and text.
Then you can apply round corner drawable resource as background for this layout (each state has its own round drawable).

 <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:gravity="center_vertical"
            android:background="@drawable/round_states"> 

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/white" />

 </LinearLayout>

You can use difference round states when pressed, focus (each state has difference color)

round_states.xml

   <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_pressed="true"
      android:drawable="@drawable/round_bg_pressed" /> <!-- pressed -->
   <item android:state_focused="true"
      android:drawable="@drawable/round_bg_focused" /> <!-- focused -->
   <item android:drawable="@drawable/round_bg" /> <!-- default -->
  </selector>

round_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dip" android:color="#B1BCBE" />
    <corners android:radius="10dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

round_bg_focused.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dip" android:color="#B8B8FF" />
    <corners android:radius="10dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

P/s: There are some libraries support ripple effect when press on view on pre lollipop that you may want to try:
https://github.com/traex/RippleEffect
https://github.com/balysv/material-ripple

Upvotes: 1

Iqbal S
Iqbal S

Reputation: 1154

Get 9 patch images designed, with round corners (green or blue colored), for each of the buttons. Use this as a background drawable for the buttons, and provide the width and height accordingly for each button. This should do the job for you.

Upvotes: 0

Related Questions