Android Custom Dialog With Images and Text

October 21, 2017 Android Dialog 3 minutes, 20 seconds

Android comes default with an alert dialog.Thats good since majority of simple stuff it can asily display,in maybe 4-5 lines of code.But when it comes custom views,it falls short flatly.Luckily its just as easier to display a custom view as a dialog.Its what we show here,using custom layout without any third party libraries.

Intro

  • A simple alert dialog with images and text in android.
  • We have a video tutorial for this example below.You can also view the demo over there.
  • We've used Android Studio as our IDE.
  • The full source code is above for download.The instructions for importing to your android studio is below.

Tools Used

  • IDE : Android Studio
  • OS : Windows 8

Let's go.

1. MainActivity


Here's our MainActivity :    

package com.tutorials.hp.customdialog;

import android.app.Dialog;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    Dialog dialog;
    TextView showBtn,cancelBtn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        //CREATE DIALOG
        createDialog();

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //show
                dialog.show();
            }
        });

        //SHOW BTN CLIKCED
        showBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"CLICKED",Toast.LENGTH_LONG).show();
            }
        });

        //CANCEL
        cancelBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               dialog.dismiss();
            }
        });

    }

    private void createDialog()
    {
        dialog=new Dialog(this);

        //SET TITLE
        dialog.setTitle("Player");

        //set content
        dialog.setContentView(R.layout.custom_layout);

        showBtn= (TextView) dialog.findViewById(R.id.showTxt);
        cancelBtn= (TextView) dialog.findViewById(R.id.cancelTxt);
    }
}

2. Our Layouts

Custom Dialog Layout

Then we have our Custom Dialog layout here.Its this layout that gets inflated to our dialog.So you can customize it to your wishes.  

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:src="@drawable/carrick"
        android:id="@+id/imageView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="20dp"
        android:paddingLeft="24dp"
        android:paddingRight="24dp"
        android:paddingTop="24dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Michael Carrick"
        android:id="@+id/nameTxtt" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="24dp"
        android:paddingLeft="24dp"

        android:paddingRight="24dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Is a Midfielder.Joined from Totenham in 2006. "
        android:id="@+id/contentTxt" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:gravity="center_vertical|end"
        android:orientation="horizontal"
        android:padding="8dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:height="48dp"
            android:clickable="true"
            android:padding="5dp"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:gravity="center_vertical|center_horizontal"
            android:text="Show"
            android:textColor="@color/colorAccent"
            android:id="@+id/showTxt" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:height="48dp"
            android:clickable="true"
            android:padding="5dp"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:gravity="center_vertical|center_horizontal"
            android:text="Cancel"
            android:textColor="@color/colorAccent"
            android:id="@+id/cancelTxt" />

    </LinearLayout>

</LinearLayout>

How To Run

  1. Download the project.
  2. You'll get a zipped file,extract it.
  3. Open the Android Studio.
  4. Now close, already open project.
  5. From the Menu bar click on File >New> Import Project.
  6. Now Choose a Destination Folder, from where you want to import project.
  7. Choose an Android Project.
  8. Now Click on “OK“.
  9. Done, your done importing the project,now edit it.

More Resources

Resource Link
GitHub Browse Browse
GitHub Download Link Download

Best Regards, Oclemy.

Comments