A Latex class to emulate Kik-messenger UI - found here: https://tex.stackexchange.com/a/239511/139326

demo.tex

\documentclass{kik-android}

\setPartnerName{Dave Johnson}
\setPartnerPic{Man.jpg}
\setHours{12}
\setMinutes{11}

\begin{document}
\you{Knock knock}
\me{Who's there?}
\you{Canoe}
\me{Canoe who?}
\you{Canoe help me with my homework?}
\time{Fri}{12:03 PM}
\you{...please. I'm gonna fail calculus. :-(}
\me{...}
\end{document}

kik-android.cls

% kik-android.cls
%   by Brian Jacobs (fixes by Maximilian Noethe).
%   April 10, 2018
%
% This document class emulates the user interface of the Kik messaging
% application running on an android Moto X.

\ProvidesClass{kik-android}

% Start with article. Eventually this should be removed,
% because I'm not actually using it for much of anything
\LoadClass{article}

% Load all necessary packages
\usepackage{varwidth}
\usepackage{fontspec}
\usepackage{tikz}
\usetikzlibrary{calc}


% Set up the page so that it matches phone size.
\usepackage[top=.55in,         bottom=.55in,
            right=.015in,      left=.015in,
            paperwidth=2.308in,paperheight=4.103in]{geometry}

% Style the page
\pagestyle{empty}
\setmainfont{DroidSans}
\setlength{\parindent}{0pt}

% Color Definitions
\usepackage{xcolor}
\definecolor{backgroundgray}{RGB}{238,238,238}
\definecolor{linegray}{RGB}{212,212,212}
\definecolor{circgray}{RGB}{199,199,199}
\definecolor{circdarkgray}{RGB}{117,117,117}
\definecolor{arrowgray}{RGB}{107,107,107}
\definecolor{msggreen}{RGB}{185,224,97}
\definecolor{androidgray}{RGB}{191,191,191}
\definecolor{repwiregreen}{RGB}{71,146,53}
\definecolor{kikblue}{RGB}{103,142,233}
\definecolor{kiktimepalegray}{RGB}{158,169,184}
\definecolor{kiktimedarkgray}{RGB}{122,133,151}

% Customization Flags
\def\@hours{12}
\def\@minutes{11}
\def\@partnerName{Sample Name}

% Macros to draw the background
\def\@statusbar#1{
  \def\c{androidgray}
  \fill[\c]
    let \p1 = (current page.north east) in
      (\x1 - .42in - #1in, \y1 - 0.0415in - #1in) rectangle (\x1 - .43in -#1in, \y1 - 0.1409 in);
}

% Background Macro
\def\@drawBackground{
  \begin{tikzpicture}[remember picture, overlay]
    % Background
    \fill[backgroundgray] (current page.north east) rectangle (current page.south west);
    \fill[black]
    let \p1 = (current page.north east) in
    let \p2 = (current page.north west) in
    (\x1,\y1) rectangle (\x2,\y2 - 0.1667in);
    \fill[black]
    let \p1 = (current page.south east) in
    let \p2 = (current page.south west) in
    (\x1,\y1) rectangle (\x2,\y2 + 0.3141in);
    \fill[white]
    let \p1 = (current page.north east) in
    let \p2 = (current page.north west) in
    (\x1,\y1 - 0.1667in) rectangle (\x2,\y2 - .5289in);
    \draw[thick,linegray]
    let \p1 = (current page.north east) in
    let \p2 = (current page.north west) in
    (\x1,\y1 - .5289in) -- (\x2,\y2 - .5289in);
    \fill[white]
    let \p1 = (current page.south east) in
    let \p2 = (current page.south west) in
    (\x1,\y1 + 0.3141in) rectangle (\x2,\y2 + .6090in);
    \draw[thick,linegray]
    let \p1 = (current page.south east) in
    let \p2 = (current page.south west) in
    (\x1,\y1 + .6090in) -- (\x2,\y2 + .6090in);

    % Kik Top bar decorations
      % Circles
    \fill[circgray]
      let \p1 = (current page.north east) in
        (\x1 -.1987in,\y1-.359in) circle (0.04065in);
    \fill[circdarkgray]
      let \p1 = (current page.north east) in
        (\x1 -.15805in,\y1-.31835in) circle (0.04065in);

      % Name
    \draw
      let \p1 = (current page.north west) in
        (\x1 + .4647in, \y1 - .3481in) node[anchor=west] {\@partnerName};

      % Arrow
    \draw[thick,circdarkgray]
      let \p1 = (current page.north west) in
        (\x1 + .1314in, \y1 - .3397in) -- (\x1 + .2179in , \y1 - .3397in);
    \draw[thick,circdarkgray]
      let \p1 = (current page.north west) in
        (\x1 + .1795in, \y1 - .2981in) -- (\x1 + .1314in, \y1 - .3397in) --
        (\x1 + .1795in, \y1 - .3846in);

    % Kik Bottom Bar Decorations
      % Type a message...
    \draw
      let \p1 = (current page.south west) in
        (\x1 + .3141in, \y1 + .5524in) node[anchor=north west,scale=.85] {\color{androidgray}Type a message...};

      % Plus
    \draw[thick, androidgray]
      let \p1 = (current page.south west) in
        (\x1 + .1538in, \y1 + .5321in) -- (\x1 + .1538in,\y1 + .4135in);
    \draw[thick, androidgray]
      let \p1 = (current page.south west) in
        (\x1 + .0906in, \y1 + .4728in) -- (\x1 + .2088in, \y1 + .4728in);

    % Android Top Bar Decorations
      % Time
    \draw 
      let \p1 = (current page.north east) in
        (\x1,\y1-0.01in) node[anchor=north east,scale=0.75] {\color{androidgray}\@hours:\@minutes};

      % Republic Wireless
    \draw[very thick,repwiregreen]
      let \p1 = (current page.north west) in
        (\x1 + .0701in, \y1 - .0801in) to[bend left=90] (\x1 + .1603in, \y1 - .0801in);

      % Battery Indicator
    \fill[androidgray]
      let \p1 = (current page.north east) in
        (\x1 - .3974in, \y1 - .1406in) rectangle (\x1 - .3213in,\y1 - .0509in);
    \fill[androidgray]
      let \p1 = (current page.north east) in
        (\x1 - .3784in, \y1 - .0515in) rectangle (\x1 - .3403in,\y1 - .0379in);

      % Status Bars
      \@statusbar{0}
      \@statusbar{.02}
      \@statusbar{.04}
      \@statusbar{.06}
      \@statusbar{.08}

    % Android Bottom Bar Decorations
    % Home
    \draw[very thick,androidgray]
      let \p1 = (current page.south) in
        (\x1 - .1186in, \y1 + .08974in) -- (\x1 + .1186in, \y1 + .08974in) -- 
        (\x1 + .1186in, \y1 + .1795in)  -- (\x1, \y1 + .2115in) -- 
        (\x1 - .1186in, \y1 + .1795in) -- cycle;

    % Pages
    \draw[very thick,androidgray]
      let \p1 = (current page.south east) in
        (\x1 - .4391in, \y1 + .1058in) rectangle (\x1 - .6026in, \y1 + .1795in);
    \draw[very thick,androidgray]
      let \p1 = (current page.south east) in
        (\x1 - .3974in, \y1 + .1346in) -- (\x1 - .3974in, \y1 + .2219in) --
        (\x1 - .5545in, \y1 + .2219in);

    % Back arrow
    \draw[very thick,androidgray]
      let \p1 = (current page.south west) in
        (\x1 + .4199in, \y1 + 0.1635in) -- (\x1 + .5833in, \y1 + 0.1635in) to[bend left=90]
        (\x1 + .5833in, \y1 + .0993in) -- (\x1 + .5032in, \y1 + .0993in);
    \draw[very thick,androidgray]
      let \p1 = (current page.south west) in
        (\x1 + .4487in, \y1 + .1987in) -- (\x1 + .4199in, \y1 + .1635in) -- (\x1 + .4487in, \y1 + .1282in);

  \end{tikzpicture}
}

% Make the background appear on every page
\usepackage{everypage}
\AddEverypageHook{\@drawBackground}


% Commands for use by the user.
\def\setPartnerName#1{
  \def\@partnerName{#1}
}

\def\setPartnerPic#1{
  \def\@partnerPic{#1}
}

\def\setHours#1{
  \def\@hours{#1}
}

\def\setMinutes#1{
  \def\@minutes{#1}
}

\def\me#1{
  \hphantom{.}\hfill\begin{tikzpicture}
    \draw (0,0) node[anchor=north east,rectangle,rounded corners=2,fill=msggreen, scale=0.75,draw=circgray] {
      \hspace{.1in}\begin{varwidth}{1.5in}
        \vphantom{.}
        \raggedright #1\\
        \tiny \color{msggreen}.
      \end{varwidth}
      \hspace{.1in}
    };
    \fill[msggreen] (-0.01in,-0.06in) -- (0.06in,-0.12in) -- (-0.01in,-0.18in) -- cycle;
    \draw[circgray] (0,-0.06in) -- (0.06in,-0.12in) -- (0in,-0.18in);
  \end{tikzpicture}
  \vspace{.05in}\\
}

\def\you#1{
  \begin{tikzpicture}
    \ifdefined\@partnerPic
    \draw (-.6,-.3) node[scale=1.825,circle, path picture={
        \node at (path picture bounding box.center){
          \includegraphics[width=.24in]{\@partnerPic}
        };
      }
    ] {};
    \else\fill[black] (-.6,-.3) circle (.12in);\fi
    \draw (0,0) node[anchor=north west,rectangle,rounded corners=2,fill=white, scale=0.75,draw=linegray] {
      \hspace{.1in}\begin{varwidth}[c]{1.5in}
        \vphantom{.}
        \raggedright #1\\
        \tiny \color{white}.
      \end{varwidth}
      \hspace{.1in}
    };
    \fill[white] (0.01in,-0.06in) -- (-0.06in,-0.12in) -- (0.01in,-0.18in) -- cycle;
    \draw[linegray] (0,-0.06in) -- (-0.06in,-0.12in) -- (0in,-0.18in);
  \end{tikzpicture}
  \vspace{.05in}\\
}

\def\time#1#2{
  \hphantom{.}\hfil\begin{tikzpicture}
    \draw (0,0) node[scale=.65] {\color{kiktimepalegray}#1 \color{kiktimedarkgray}@ #2};
  \end{tikzpicture}\hfil\\
}