Custom View Button Widget

11:06 38 Comments

By using Custom view class We can create custom widget for our Application. Android Studio provides lot of widgets like Button, SearchView, DatePicker etc.. At the time we want some specific designed widgets with logical adjustments means we go for creating custom view widgets. We can create a new view or we also override existing view class.
In this tutorial I override with RelativeLayout. I also tried Controlling the widgets by attributes, and widget auto adjusting logic.

GitHubDownload CodeDownload Apk

1. Start with creating new android Studio Project with an empty Activity.
2. Import necessary drawables

3. Colors used

<color name="Color1a">#95d90b</color>
<color name="Color2a">#de9407</color>
<color name="Colora">#131944</color>

card.xml<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout_bg"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="@color/Color1a">

<ImageView
    android:id="@+id/thumbnail"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:adjustViewBounds="true"
    android:scaleType="centerInside"
    android:src="@drawable/chip_circuit" />

<LinearLayout
    android:id="@+id/linearLayout3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_toRightOf="@+id/thumbnail"
    android:gravity="center_vertical"
    android:orientation="vertical"
    android:paddingLeft="10dp">

    <TextView
        android:id="@+id/header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/thumbnail"
        android:text="TEXTVIEW 1"
        android:textColor="@android:color/white"
        android:textSize="21dp" />

    <TextView
        android:id="@+id/description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/header"
        android:text="TEXTVIEW 2"
        android:textColor="@color/Colora"
        android:textSize="16dp"
        android:textStyle="bold" />
</LinearLayout>

<ImageView
    android:id="@+id/icon"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:padding="25dp"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@+id/linearLayout3"
    android:adjustViewBounds="true"
    android:scaleType="centerInside"
    android:src="@drawable/icon_alarm" />

</RelativeLayout>

attrs.xml<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="Card">
        <attr name="my_title_1" format="string" />
        <attr name="my_title_2" format="string" />
        <attr name="my_icon" format="reference" />
        <attr name="my_bg" format="reference" />
    </declare-styleable>

</resources>

Card.javapackage androidramp.blogspot.customviewbuttonwidget;

/**
 * Created by Thanvandh on 11-11-2015.
 */

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class Card extends RelativeLayout {

    private String stringHeader_1;
    private String stringHeader_2;
    private Drawable drawableIcon;
    private Drawable drawableLoyoutBg;

    private TextView textView1;
    private TextView textView2;
    private ImageView icon;
    private RelativeLayout layout;

    public Card(Context context) {
        super(context);
        init();
    }

    public Card(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    private void init() {
        inflate(getContext(), R.layout.card, this);
        this.textView1 = (TextView) findViewById(R.id.header);
        this.textView2 = (TextView) findViewById(R.id.description);
        this.icon = (ImageView) findViewById(R.id.icon);
        this.layout = (RelativeLayout) findViewById(R.id.layout_bg);
    }

    private void init(Context context, AttributeSet attrs) {

        init();
        // Getting the attributes.
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.Card, 0, 0);
        try {
            stringHeader_1 = a.getString(R.styleable.Card_my_title_1);
            stringHeader_2 = a.getString(R.styleable.Card_my_title_2);
            drawableIcon = a.getDrawable(R.styleable.Card_my_icon);
            drawableLoyoutBg = a.getDrawable(R.styleable.Card_my_bg);

        } finally {
            a.recycle();
        }
        // Setting the attributes to view.
        this.textView1.setText(stringHeader_1);
        this.textView2.setText(stringHeader_2);
        this.icon.setImageDrawable(drawableIcon);
        this.layout.setBackgroundDrawable(drawableLoyoutBg);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        // TODO Auto-generated method stub
        super.onWindowFocusChanged(hasFocus);
        // Getting the height of layout.
        int h = layout.getHeight();
        // I can't set icon height here so I set the padding.
        int p = h / 4;
        this.icon.setPadding(p, p, p, p);
    }
}

activity_main.xml<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <androidramp.blogspot.customviewbuttonwidget.Card
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_margin="10dp"
        app:my_icon="@drawable/icon_alarm"
        app:my_title_1="TextView 1"
        app:my_title_2="TextView 2"
        app:my_bg="@color/Color1a"/>

    <androidramp.blogspot.customviewbuttonwidget.Card
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_margin="10dp"
        app:my_icon="@drawable/icon_heart"
        app:my_title_1="TextView 1"
        app:my_title_2="TextView 2"
        app:my_bg="@color/Color2a" />

</LinearLayout>

MainActivity.javapackage androidramp.blogspot.customviewbuttonwidget;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}