How to data bind GridView with ArrayAdapter in Android

activity_main.xml

<GridView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/gridView"
    android:numColumns="3"
    android:verticalSpacing="8dp"
    android:horizontalSpacing="12dp"
    android:background="#F8F8FF"
    android:columnWidth="100dp">
    <!--content will be generate programmatically-->
</GridView>

MainActivity.java

package com.cfsuman.androidtutorials;

import android.os.Bundle;
import android.app.Activity;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import java.util.ArrayList;
import java.util.Arrays;


public class MainActivity extends Activity {

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

                // Get the context
                MainActivity context = this;

                // Get the widgets reference from XML layout
                GridView gridView = findViewById(R.id.gridView);

                //initializing a String array
                String[] array = new String[]{
                        "Red",
                        "Green",
                        "Blue",
                        "Yellow",
                        "Black",
                        "Pink",
                        "Magenta"
                };

                //initializing an ArrayList from array
                ArrayList<String> list = new ArrayList<>(
                        Arrays.asList(array)
                );

                //Data bind GridView with ArrayAdapter
                gridView.setAdapter(new ArrayAdapter<String>(
                        context,
                        android.R.layout.simple_list_item_1,
                        list)
                );
        }
}

How to convert Hex color to int color in Android

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:background="#DCDCDC"
    android:padding="24dp"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="75dp"
        android:text="Change My Color"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.cfsuman.androidtutorials;

import android.graphics.Color;
import android.os.Bundle;
import android.app.Activity;
import android.widget.Button;


public class MainActivity extends Activity {

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

        // Get the widgets reference from XML layout
        Button button = findViewById(R.id.button);

        // Button click listener
        button.setOnClickListener(view -> {
            // #808000 equal to Olive color
            int deepColor = Color.parseColor("#808000");

            // #FFF5EE equal to SeaShell color
            int lightColor = Color.parseColor("#FFF5EE");

            // set the button background color
            // setBackgroundColor() method require to pass an int color
            button.setBackgroundColor(deepColor);

            // set the button text color
            // setTextColor() method require to pass an int color
            button.setTextColor(lightColor);
        });
    }
}

How to create a transparent background Button with border in Android

Button transparent background with border

In some situations, android developers want to put a transparent background button in their app interface. Totally transparent background colored button can’t define the clicked area. So transparent button should have an opaque border color. It will render a solid color bordered button with a transparent background colored button widget.

This android app development tutorial will show, how can an android developer render a transparent background color button with an opaque colored border.

To achieve this widget, first, we put a Button widget in our XML layout file. Inside the Button tag, we have to put a property name background. The background property has a value that points to a drawable XML file.

The main code is located in this XML drawable file. It has a selector with an item. The item defines the button shape and background color. Simply we can put a solid white color here whose opacity is zero/full transparent. Also here we add a stroke with color and width values. The border color must be fully opaque so the button can specify its area.

Transparent background colored button with an opaque bordered button is a very important feature for an android app. But it is very easy to implement. The following code snippets and output image will help you to understand the full logic.

activity_main.xml code snippet

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:background="#F8F8FF">

    <Button
        android:id="@+id/push_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_bg_transparent"
        android:padding="16dp"
        android:text="Button Background Transparent"
        android:elevation="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

res/drawable/button_bg_transparent.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!--button pressed state background color-->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <!--apply button background transparent, full opacity-->
            <solid android:color="#00ffffff"/>
            <!--make button border solid color, nontransparent-->
            <stroke android:color="#2196F3" android:width="2dp"/>
            <corners android:radius="2dp"/>
        </shape>
    </item>

    <!--button default background color-->
    <item>
        <shape android:shape="rectangle">
            <!--apply button background transparent, full opacity-->
            <solid android:color="#00ffffff"/>
            <!--make button border solid color, nontransparent-->
            <stroke android:color="#3F51B5" android:width="2dp"/>
            <corners android:radius="2dp"/>
        </shape>
    </item>
</selector>

How to create a rounded corners Button in Android

Rounded Corners Button

A rounded corners button is more lucrative than a rectangular-shaped button. So that an android developer seeking a way to make an android button into a rounded corner shape. This tutorial will guide you to make a rounded corners button.

The following code snippets consist of two XML files. The first is an activity XML file and another one is an XML drawable file. In the XML layout file, we put a background property inside the Button tag. The button’s background property value point to an XML drawable file that is located inside the drawable folder.

The actual code snippet is written in that drawable XML file which renders a rounded corners button widget in-app interface. XML drawable file holds a selector with an item tag. The item tag defines the shape of the button widget. Here we put the corners radius value that we want to apply to our button widget. In this tutorial, we also define here the button stroke color and width and the button background color. The following image shows a 15 dp radius rounded corners button widget.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:background="#F8F8FF">

    <Button
        android:id="@+id/push_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_bg_rounded_corners"
        android:padding="15dp"
        android:text="Rounded Corners Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

res/drawable/button_bg_rounded_corners.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!--button pressed state background color-->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#03A9F4"/>
            <stroke
                android:color="#CCEBFA"
                android:width="2dp"
                />
            <!--corners allow us to make the rounded corners button-->
            <corners android:radius="15dp" />
        </shape>
    </item>

    <!--button default background color-->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#03A9F4"/>
            <stroke
                android:color="#3F51B5"
                android:width="2dp"
                />
            <!--corners allow us to make the rounded corners button-->
            <corners android:radius="15dp" />
        </shape>
    </item>
</selector>

How to create a round/circle Button in Android

Round or Circle Button

Android app users like the circle button within the app interface. By default android Button widget shape is rectangular. So to show a round or circle button in an android application, the app developer needs to write some custom code to generate it. In this android app development tutorial, we will show how can a developer easily display a round Button in their app.

By two steps of code, we will make a circle Button. At first, in the XML layout file, we will put a background property inside the Button tag. The background property value point to an XML drawable file that actually draws the circle button in the app interface.

XML drawable file selector holds an item that declares the shape of the actual widget. Here we define an oval shape to generate a circle Button. This oval shape has a five-dp width border and a background color. The height and width must be equal, so the button will render as a circle/round button. The following image shows the output of our coding.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:background="#F8F8FF">

    <Button
        android:id="@+id/push_button"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@drawable/button_bg_round"
        android:padding="15dp"
        android:text="Circle Button"
        android:elevation="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

res/drawable/button_bg_round.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!--button pressed state background color-->
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <stroke android:color="#CDEAEE" android:width="3dp" />
            <solid android:color="#87CEEB"/>
            <size android:width="150dp" android:height="150dp"/>
        </shape>
    </item>

    <!--button default background color-->
    <item>
        <shape android:shape="oval">
            <stroke android:color="#1E90FF" android:width="3dp" />
            <solid android:color="#87CEEB"/>
            <size android:width="150dp" android:height="150dp"/>
        </shape>
    </item>
</selector>

How to set Button pressed state background color in Android

Button background color drawable state

Button control is commonly used to tap on it to perform some tasks within an Android application. The Button shows a default background color when users press it.Android developers can easily change the default background color of the button’s pressed state. In this android app development tutorial, we will see how can we change the button’s pressed state background color.

First of all, we will write the background property on the Button widget XML file. The Button’s background property value points to an XML drawable file which includes a selector with the button’s different states colors and shapes values. Such as, Button’s default state, focused state, and pressed state’s background color.

Within the selector pressed state’s item we will put a background color that we want to replace with the button’s default pressed state background color. Here we can also specify the button’s shape and corner radius.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:background="#F8F8FF">

    <Button
        android:id="@+id/push_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_bg_color_with_state"
        android:padding="15dp"
        android:text="Button Drawable State"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
code>

res/drawable/button_bg_color_with_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!--button pressed state background color-->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#4CAF50" />
            <corners android:radius="5dp"/>
        </shape>
    </item>

    <!--button focused state background color-->
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="#CDDC39" />
            <corners android:radius="5dp"/>
        </shape>
    </item>

    <!--button default background color-->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#CDDC39" />
            <corners android:radius="5dp"/>
        </shape>
    </item>
</selector>