Custom Button with multiple TextViews and ImageViews : Android Studio

Custom Button with multiple TextViews and ImageViews : Android Studio  

In this article we will learn how to make a button with 2-3 TextViews and ImageViews. If we have to add one image and one text then we can directly create a button and set a drawable at left, right, top and bottom. But suppose if we want to create a button with multiple text with different properties. A button doesn't allow to have something like this, but we can create using a another way. We will make a layout clickable and then use it as a button by setting a OnClickListner on the layout. Below is the example code 

Codes:

1. gradient_bg.xml

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

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

    <corners
        android:radius="20dp"/>
    <gradient
        android:startColor="@color/red"
        android:endColor="@color/orange"/>

</shape>

2. clicked_bg.xml

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

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

    <corners
        android:radius="20dp"
        />
    <solid
        android:color="#8D2001"/>

</shape>

3. button_bg_selector.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/clicked_bg"/>
    <item
        android:state_pressed="false"
        android:drawable="@drawable/gradient_bg"/>

</selector>

4. 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    android:gravity="center"
    tools:context=".Main2Activity"
    android:background="@color/blue">

    <RelativeLayout
        android:id="@+id/custom_button"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@drawable/button_bg_selector">

        <LinearLayout
            android:layout_centerVertical="true"
            android:layout_alignParentLeft="true"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text1"
                android:textSize="50dp"
                android:textColor="@color/white"
                android:paddingLeft="10dp"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text2"
                android:textSize="30dp"
                android:textColor="@color/lightblue"
                android:paddingLeft="10dp"/>

        </LinearLayout>

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@drawable/environmental2"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:layout_centerVertical="true"/>
    </RelativeLayout>

</LinearLayout>

5. ActivityMain.java

 package com.example.test;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.Toast;


public class Main2Activity extends AppCompatActivity {

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

        RelativeLayout custom_btn = findViewById(R.id.custom_button);

        custom_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"clicked",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Result :

Video Tutorial: