CODEWITHSUNDEEP
androidxmlandroid-layout
Artūrs Eimanis
Artūrs Eimanis

Reputation: 596

Android style a View to like a coloured Button

So I want to style a LinearLayout to look like a button. I am using LinearLayout, because I am using "Font awesome" for icons and I need to put icons inside a button, so I have a LinearLayout, which has two TextViews as children. One for the icon and the other for text.

What I want is to make the LinearLayout to look like the default style button, but in a different colour. On Lollipop and newer it also should have the ripple effect.

I managed to do exactly that by adding a backgroundTint, but it only works on Marshmallow, on KitKat the button has default colour. Here is my code:

Layout:

<LinearLayout
        android:id="@+id/btn_register"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        style="@style/MyTheme.Button" >
        <TextView
            android:id="@+id/ic_register"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:text="@string/fa_user_plus"
            android:textSize="16dp"
            android:paddingRight="4dp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:text="Register as a new user"
            android:textSize="16dp" />
  </LinearLayout>

Style:

<style name="MyTheme.Button" parent="@android:style/Widget.DeviceDefault.Button">
    <item name="android:backgroundTint">@color/accent</item>
</style>

Upvotes: 1

Views: 789

Answers (2)

Artūrs Eimanis
Artūrs Eimanis

Reputation: 596

Solution: i created 2 different background selectors - one for API 21 and one for older devices.

drawable/btn_red.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#88FFFFFF" />
            <corners android:radius="2dp"/>
        </shape>
    </item>         

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/accent" />
            <corners android:radius="2dp"/>
        </shape>
    </item>
</selector>

drawable-v21/btn_red.xml:

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#88FFFFFF"> <!-- The ripple color -->

    <!-- the normal bg color will be light white -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/accent" />
            <corners android:radius="2dp"/>
        </shape>
    </item>
</ripple>

Upvotes: 1

Xose Sanchez
Xose Sanchez

Reputation: 318

If this is useful to you:

    <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="103dp"
    android:layout_marginTop="46dp"
    android:textColor="@android:color/white"
    android:background="@drawable/your_icon"
    android:gravity="right|center_horizontal"
    android:text="Register as a new user" />

And you can customize or change it as you wish, changinf the position of the text with the gravity.

Upvotes: 0

Related Questions