How to implement android frame-Layout functionality

Question

Hi i am new for android and in my app i am working on FrameLayout

My problem is i want to design my screen like my below image 1

but according to my code i am getting like my below image 2 please help me how can do this

my code:-

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="250dp"
        android:orientation="horizontal"
        android:weightSum="3">

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:background="@color/splash"
                android:padding="5dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher" />

            </FrameLayout>

            <TextView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_gravity="top|right"
                android:layout_marginRight="-20dp"
                android:layout_marginTop="-10dp"
                android:background="@android:color/holo_orange_dark"
                android:gravity="center"
                android:text="1"
                android:textColor="@android:color/white" />

        </FrameLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="30dp">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:background="@color/splash"
                android:padding="5dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher" />
            </FrameLayout>

            <TextView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_gravity="top|right"
                android:layout_marginRight="-20dp"
                android:layout_marginTop="-10dp"
                android:background="@android:color/holo_orange_dark"
                android:gravity="center"
                android:text="2"
                android:textColor="@android:color/white" />

        </FrameLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="30dp">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:background="@color/splash"
                android:padding="5dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher" />

            </FrameLayout>

            <TextView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_gravity="top|right"
                android:layout_marginRight="-20dp"
                android:layout_marginTop="-10dp"
                android:background="@android:color/holo_orange_dark"
                android:gravity="center"
                android:text="3"
                android:textColor="@android:color/white" />

        </FrameLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="30dp">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:background="@color/splash"
                android:padding="5dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher" />

            </FrameLayout>

            <TextView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_gravity="top|right"
                android:layout_marginRight="-20dp"
                android:layout_marginTop="-10dp"
                android:background="@android:color/holo_orange_dark"
                android:gravity="center"
                android:text="4"
                android:textColor="@android:color/white" />

        </FrameLayout>

    </LinearLayout>

</LinearLayout>

image1:-

image2:-

score 0 · Answer 1 · edited May 23 '17 at 12:08

Perhaps something like this will be a good starting point:

(You can check this question for creating a circular text view: Android: Creating a Circular TextView?)

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="10dp"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:padding="5dp"
            android:text="1"
            android:textColor="@android:color/white" />
    </FrameLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="10dp"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:padding="5dp"
            android:text="1"
            android:textColor="@android:color/white" />
    </FrameLayout>


    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="10dp"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:padding="5dp"
            android:text="1"
            android:textColor="@android:color/white" />
    </FrameLayout>


    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="10dp"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:padding="5dp"
            android:text="1"
            android:textColor="@android:color/white" />
    </FrameLayout>

</LinearLayout>

you can do that using relative layouts ? why too much of frames ? just have a one frame — Charuක, Jul 13 '16 at 16:12

score 0 · Answer 2 · answered Jul 13 '16 at 19:15

Hope this helps:

                <RelativeLayout
                    android:id="@+id/layout1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">


                    <ImageView
                        android:id="@+id/image"
                        android:layout_width="60dp"
                        android:layout_height="50dp"
                        android:layout_centerHorizontal="true"
                        android:gravity="center"
                        android:src="@drawable/ic_launcher" />


                    <TextView
                        android:id="@+id/badge_notification_1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentTop="true"
                        android:layout_toRightOf="@+id/image"
                        android:background="@drawable/badge_item_count"
                        android:text="3"
                        android:textColor="#FFF"
                        android:textSize="16sp" />
                </RelativeLayout>

Add this to you drawable folder:

Name: badge_item_count

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="6dp" />
    <solid android:color="@color/orange" />
    <stroke
        android:width="2dip"
        android:color="#FFF" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

</shape>

How to implement android frame-Layout functionality

my code:-

image1:-

image2:-

2 Answers2