Android -alert dialog design

Question

In my application I want to show popup dialog. I drew sketch for first phase. and here what I want:

I was trying to implement this and here is my code:

<TableLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="*"
    android:stretchColumns="*" 
    android:background="#ffffff"
    tools:context=".CustomMainActivity" >   
    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:gravity="center_horizontal"
        android:background="#b6006a">  
        <ImageView 
            android:id="@+id/ImageView1"
            android:src="@drawable/icon"            
            android:layout_weight="1"       
            android:padding="10dip" 
            android:adjustViewBounds="true"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:scaleType="fitXY"
            android:gravity="right"/> 
            
        <TextView
            android:id="@+id/TextView1"
            android:layout_weight="1"
            android:textSize="18dp" 
            android:text="Nava Messenger"           
            android:padding="10dip"
            android:background="#b6006a"
            android:textColor="#fff"
            android:gravity="left"/>  
        
    </TableRow>
    <TableRow
        android:id="@+id/tableRow0"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">  
        <TextView
            android:id="@+id/TextViewSender"
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:textSize="18dp"
            android:layout_span="3"
            android:maxLines="1"
            android:background="#fff"
            android:textColor="#000"/>  
            

    </TableRow>
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">  
        <TextView
            android:id="@+id/TextView2"
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:textSize="18dp"
            android:layout_span="3"
            android:maxLines="4"
            android:padding="18dip" 
            android:background="#fff"
            android:textColor="#000"/>  
            

    </TableRow>
    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:gravity="center_horizontal">               
        <EditText
            android:id="@+id/EditText1"             
            android:layout_weight="3"
            android:inputType="textCapWords"
            android:layout_width="0dp"                                 
            android:ellipsize="start"           
            android:gravity="center"
            android:textColor="#b6006a"
            android:hint="Write a message..."/>  
        <ImageButton
            android:id="@+id/ImageButton1"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:adjustViewBounds="true"
            android:background="@null"
            android:scaleType="fitXY"
            android:src="@drawable/send_now"            
            android:gravity="right"/>           
    </TableRow>     
        
</TableLayout>

And result of this code is :

I want to modify something such as:

• Decreasing header size(purple area on the top of alert dialog)
• Decreasing image size on header (Real size of logo image is :128*128)
• Decreasing send image (Real size of send image is : 48 * 48)
• Putting send image and EditText on a row

Any suggestion?

Answer 1

• Use RelativeLayout instead TableLayout, it's much easier to use RelativeLayout.
• Change width and height for image sizes triying other values of ScaleType if it were neccesary.
• If you want to control header's size, don't use "wrap_content".
• Define colors in values/colors.xml.

Answer 2

Using LinearLayout Adjust Margin/Padding as required. change icons aswell. rough layout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    tools:context=".CustomMainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#b6006a"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/ImageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:gravity="right"
            android:padding="10dip"
            android:scaleType="fitXY"
            android:src="@android:drawable/ic_dialog_dialer" />

        <TextView
            android:id="@+id/TextView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#b6006a"
            android:gravity="left"
            android:padding="10dip"
            android:text="Nava Messenger"
            android:textColor="#fff"
            android:textSize="18dp" />
    </LinearLayout>

    <TextView
        android:id="@+id/TextViewSender"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:maxLines="1"
        android:text="Farhan"
        android:textColor="#000"
        android:textSize="18dp" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:maxLines="4"
        android:text="FarhanFarhanFarhan"
        android:padding="18dip"
        android:textColor="#000"
        android:textSize="18dp" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/EditText1"
            android:layout_width="0dp"
            android:layout_weight="3"
            android:layout_height="match_parent"
            android:ellipsize="start"
            android:gravity="center"
            android:hint="Write a message..."
            android:inputType="textCapWords"
            android:textColor="#b6006a" />

        <ImageButton
            android:id="@+id/ImageButton1"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:background="@null"
            android:gravity="right"
            android:scaleType="center"
            android:src="@android:drawable/ic_menu_send" />
    </LinearLayout>
</LinearLayout>