0

What I want:

Create a call accept/reject layout for my app like whatsapp.

Whatsapp layout


What I have done till now:

I have created a similar layout.

enter image description here

<RelativeLayout 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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.suvajit.calling.MainActivity">

<LinearLayout
    android:id="@+id/linearLayoutTop"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:background="@color/colorPrimary"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="10dp">

    <TextView
        android:id="@+id/textViewCallStatus"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Incoming"
        android:textColor="@color/colorText"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textViewCallerName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Me"
        android:textColor="@color/colorText"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/textViewCallType"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="MyAppCall"
        android:textColor="@color/colorText"
        android:textSize="20sp" />
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayoutBottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:background="@color/colorPrimary"
    android:orientation="horizontal"
    android:weightSum="2">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="40"
            android:textColor="@color/colorText"
            android:textSize="40sp" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Unlocked Credits"
            android:textColor="@color/colorText"
            android:textSize="15sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView8"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="4:00"
            android:textColor="@color/colorText"
            android:textSize="40sp" />

        <TextView
            android:id="@+id/textView7"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Available Talktime"
            android:textColor="@color/colorText"
            android:textSize="15sp" />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayoutMid"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_above="@+id/linearLayoutBottom"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="10dp"
    android:orientation="horizontal"
    android:weightSum="3">

    <ImageView
        android:id="@+id/imageViewcallAccept"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:srcCompat="@mipmap/call_accept" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:weightSum="3">

        <ImageView
            android:id="@+id/imageViewArrow3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@mipmap/arrows" />

        <ImageView
            android:id="@+id/imageViewArrow2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@mipmap/arrows" />

        <ImageView
            android:id="@+id/imageViewArrow1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@mipmap/arrows" />

    </LinearLayout>

    <ImageView
        android:id="@+id/imageViewCallReject"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:srcCompat="@mipmap/call_reject" />

</LinearLayout>

</RelativeLayout>

Question:

How can I create the swipe animation with call buttons and the arrows will also have a right motion similar to whatsapp call layout.

(N.B: I have created the call buttons in an imageview, should I use something else?)

Sp4Rx
  • 1,498
  • 3
  • 20
  • 37
  • Please, read [this (how to ask)](http://stackoverflow.com/help/how-to-ask) and [this (mcve)](http://stackoverflow.com/help/mcve) before asking, as those will help you get more and better answers from the community. Basically, what you want is an [`OnSwipeTouchListener`](http://stackoverflow.com/questions/4139288/android-how-to-handle-right-to-left-swipe-gestures), and perhaps some animation on your `ImageView`. – Bonatti Oct 19 '16 at 19:10
  • But I guess that works on the whole screen. In my case it should work only if I swipe the Image. – Sp4Rx Oct 19 '16 at 20:25
  • 1
    You are supposed to understand the code, and apply as needed... a `View` has an `onTouch` method. Then, you can interpret the `MotionEvent` and use as needed. Do not expect full working code, for your needs here, but expect guidance on how to solve problems. – Bonatti Oct 20 '16 at 11:36
  • Thanks for the idea I will work on it. – Sp4Rx Oct 20 '16 at 15:18

0 Answers0