How to Convert Pixels to DP in Android?

Pixels are the building blocks of any modern display. They are tiny light sources that illuminate in conjunction to form the images visible on the screen. The quality of the image displayed on the screen depends on the number of pixels the display contains.  A display with a higher number of pixels will display sharper images whereas a display with fewer pixels will display a clunky image.

Android devices come with displays having various sizes and pixel counts. Therefore, we cannot design an app using pixels as the measuring unit specific to one device as these measurements will render undesirable images on some other device with different screen specs. To mitigate this issue, android uses Density independent Pixels or DP values as the unit for measuring UI components. DP values don’t depend on the number of pixels that a device has. The android system scales the UI component according to the pixel counts of different devices using the DP values. Pixel values can be converted to DP by dividing the pixel value by the screen pixel density.

Overview

This article will build the following app for converting pixels to DP values.

We will write code to make a utility function that will convert pixels to DP. Using this function, we will display the screen specs in DP and will also convert inputted pixel values to DP values.

Step by Step Implementation

Step 1: Create a new Android project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. 

Note: Select Kotlin as the programming language.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Refer to the comments added for more clarity.

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"
    tools:context=".MainActivity">

    <!--  Linear Layout for displaying screen
          width specs in pixels and in dp  -->
    <LinearLayout
        android:id="@+id/screenWidthLL"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="28dp"
        android:layout_marginTop="60dp"
        android:layout_marginEnd="28dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/widthPixelsTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/widthDpTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:textColor="@color/black"
            android:textSize="16sp" />

    </LinearLayout>

    <!--  Linear layout for displaying screen
          height specs in pixels and dp  -->
    <LinearLayout
        android:id="@+id/screenHeightLL"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="28dp"
        android:layout_marginTop="60dp"
        android:layout_marginEnd="28dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/screenWidthLL">

        <TextView
            android:id="@+id/heightPixelsTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/heightDpTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:textColor="@color/black"
            android:textSize="16sp" />

    </LinearLayout>

    <!--  EditText for inputting the Pixel value
          for conversion to DP value  -->
    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/pixelInputEt"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="20dp"
        android:inputType="numberDecimal"
        app:layout_constraintBottom_toBottomOf="@id/guideline1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

    </com.google.android.material.textfield.TextInputEditText>

    <!--  Guideline for arranging views  -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="365dp" />

    <!--  TextView for displaying the DP value
           converted from entered Pixel value  -->
    <TextView
        android:id="@+id/convertedDpValueTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:visibility="invisible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guideline1" />

    <Button
        android:id="@+id/convertToDpButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="60dp"
        android:text="Convert to DP"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.example.gfgpixelstodp

import android.content.Context
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.textfield.TextInputEditText

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // initializing all the views
        val screenWidthPixelsTv: TextView = findViewById(R.id.widthPixelsTv)
        val screenWidthDpTv: TextView = findViewById(R.id.widthDpTv)
        val screenHeightPixelsTv: TextView = findViewById(R.id.heightPixelsTv)
        val screenHeightDpTv: TextView = findViewById(R.id.heightDpTv)
        val pixelInputEt: TextInputEditText = findViewById(R.id.pixelInputEt)
        val convertToDpButton: Button = findViewById(R.id.convertToDpButton)
        val convertedDpValueTv: TextView = findViewById(R.id.convertedDpValueTv)

        // assigning click listener to ConvertToDp button
        convertToDpButton.setOnClickListener {
            val pixels = pixelInputEt.text.toString().toFloatOrNull()
            if (pixels == null) {
                // if input is invalid, no text is displayed
                convertedDpValueTv.visibility = View.INVISIBLE

                // show a Toast to the user
                Toast.makeText(this@MainActivity, "Enter valid pixel value!", Toast.LENGTH_LONG)
                    .show()
            } else {
                // if the input is valid, convert the pixel
                // value given to dp and show
                // in the TextView
                val dp = convertPixelsToDp(this@MainActivity, pixels)
                convertedDpValueTv.text = "Dp value: $dp"
                convertedDpValueTv.visibility = View.VISIBLE
            }
        }

        // initializing the screen specs in pixels
        val screenWidthInPixels = resources.displayMetrics.widthPixels
        val screenHeightInPixels = resources.displayMetrics.heightPixels

        // converting the pixel values to DP values
        val screenWidthInDp = convertPixelsToDp(this, screenWidthInPixels.toFloat())
        val screenHeightInDp = convertPixelsToDp(this, screenHeightInPixels.toFloat())

        // displaying pixel values in the respective TextViews
        screenWidthPixelsTv.text = "Screen Width in pixels: $screenWidthInPixels"
        screenHeightPixelsTv.text = "Screen Height in pixels: $screenHeightInPixels"

        // displaying dp values in the respective TextViews
        screenWidthDpTv.text = "Screen Width in DP: $screenWidthInDp"
        screenHeightDpTv.text = "Screen Height in DP: $screenHeightInDp"
    }

    private fun convertPixelsToDp(context: Context, pixels: Float): Float {
        val screenPixelDensity = context.resources.displayMetrics.density
        val dpValue = pixels / screenPixelDensity
        return dpValue
    }
}

Output: