CODEWITHSUNDEEP
androidandroid-layout
ydstsh
ydstsh

Reputation: 183

how to design like layout in android

I want to design like layout. for example: when user touch like button then show a layout above it to show stickers.

please see this picture too understand my mean:

enter image description here

Can you guide me?

Upvotes: 4

Views: 70

Answers (3)

Hossein Kurd
Hossein Kurd

Reputation: 4555

Rahul Tiwari has Nice Solution, Also you can have Relative Layout

inside Relative Layout You have Horizontal Linear Layout

And Finally set animation to Hide And Show Horizontal Linear Layout

Horizontal Linear Layout should be Forground of view

read it to learn basic of animation

Upvotes: 3

Rahul Tiwari
Rahul Tiwari

Reputation: 6968

you have to keep a hidden linear layout above your layout for like button, and make it visible when like is clicked.

this hidden layout will contain your stickers:

example :

layout will look something like this:

<LinearLayout
    android:id="@+id/buttonContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:visibility="gone"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/option1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_weight="1"
        android:scaleType="fitCenter"
        android:src="@drawable/image1" />

    <ImageView
        android:id="@+id/option2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_weight="1"
        android:scaleType="fitCenter"
        android:src="@drawable/image2" />

    <ImageView
        android:id="@+id/option3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_weight="1"
        android:scaleType="fitCenter"
        android:src="@drawable/image3" />
</LinearLayout>

place it on top of layout for like button, customize it as per your need

and on click of your like button you have to make it visible like this;

findViewById(R.id.buttonContainer).setVisibility(View.VISIBLE);

and once an image is selected hide the view again like this:

 findViewById(R.id.buttonContainer).setVisibility(View.GONE);

hope this will help.

Upvotes: 3

Sattar Hummatli
Sattar Hummatli

Reputation: 1408

I can guid you as following.

Create your layout as below.

And do visible when you want it on click like button.

And move it to the above of like button as following

lytMenu.setX(x, likeButton.getY() - lytMenu.getHeight());

If you do like this your menu layout will overlap other content as menu when you set visible it. Otherwise it will resize your mainLayout.

<RelativeLayout 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"
    tools:context="com.example.sampleforstack.MainActivity" >

    <!--This is your main layout. Add your content here -->
    <LinearLayout 
        android:id="@+id/lytMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/accent_material_dark">

    </LinearLayout>
    <!--This is your menu layout. Add smile buttons here -->
    <LinerLayout
        android:id="@+id/lytMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone">
    </LinerLayout>

</RelativeLayout>

Upvotes: 1

Related Questions