0

I want to show two images above an image by clicking.

Desired layout

Actually it will use in the footer for my app. I have made layout for this as: 

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

    <!-- add content menu layout -->
    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="2dp"
        android:layout_marginRight="70dp"
        android:visibility="visible">

        <ImageView
            android:id="@+id/createQuizImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/black"
            android:padding="10dp"
            android:src="@drawable/icon_create_quiz" />

        <ImageView
            android:id="@+id/createPollImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_marginStart="3dp"
            android:layout_toEndOf="@+id/createQuizImage"
            android:layout_toRightOf="@+id/createQuizImage"
            android:background="@android:color/black"
            android:padding="10dp"
            android:src="@drawable/icon_create_poll" />
    </RelativeLayout>

    <!-- single or team leaderboard menu layout -->
    <RelativeLayout
        android:id="@+id/relativeLayout2"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="2dp"
        android:layout_marginRight="25dp"
        android:visibility="invisible">

        <ImageView
            android:id="@+id/individualRankImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/black"
            android:padding="10dp"
            android:src="@drawable/icon_single_leaderboard" />

        <ImageView
            android:id="@+id/groupRankImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_marginStart="3dp"
            android:layout_toEndOf="@+id/individualRankImage"
            android:layout_toRightOf="@+id/individualRankImage"
            android:background="@android:color/black"
            android:padding="10dp"
            android:src="@drawable/icon_team_leaderboard" />
    </RelativeLayout>

    <!-- footer toolbar -->
    <RelativeLayout
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_below="@+id/relativeLayout1"
        android:background="?attr/colorPrimary">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/menuImageView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:src="@drawable/icon_menu" />

            <ImageView
                android:id="@+id/createContentImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@+id/starImageView"
                android:src="@drawable/icon_plus1" />


            <ImageView
                android:id="@+id/starImageView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_toLeftOf="@+id/scheduleImageView"
                android:src="@drawable/icon_star1" />

            <ImageView
                android:id="@+id/scheduleImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:src="@drawable/icon_match_up1" />

            <ImageView
                android:id="@+id/micImageView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:src="@drawable/icon_mic1"
                android:visibility="gone" />
        </RelativeLayout>
    </RelativeLayout>
</RelativeLayout>

But relativeLayout1 is not positioning in right way in different screen sizes. Please somebody tell me a proper way to handle this for all screens.

Let'sRefactor
  • 3,303
  • 4
  • 27
  • 43
Aquib Khan
  • 1
  • 1

4 Answers4

0

You have to make layout for different screen size manually. You should not expect just one layout to look same on all screen sizes. Please refer the following docs for more details.

Supporting Different Screen Sizes

Supporting Multiple Screens

not_so_geek
  • 63
  • 6
0

Hello there! Do one thing .. try to use weightsum and use LinearLayout for your designing. This will surely assist you !

to know about weightsum follow this link : What is android:weightSum in android, and how does it work?

Let me know if you still have confusion regarding this.:)

Community
  • 1
  • 1
Vivek Bhardwaj
  • 530
  • 5
  • 16
0

You have to follow this to support multiple devices as per there resolutions and

Give padding ,margin ,font and all properties as per devices.

Even you use weightSum you need to follow

changes in screen density.

xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp

Make this layout files, so that it will be same for all devices.

res/layout/main_activity.xml           # For handsets (smaller than 600dp available width)
res/layout-sw600dp/main_activity.xml   # For 7” tablets (600dp wide and bigger)
res/layout-sw720dp/main_activity.xml   # For 10” tablets (720dp wide and bigger)
For Layout ,

res/layout/my_layout.xml              // layout for normal screen size ("default")
res/layout-large/my_layout.xml        // layout for large screen size
res/layout-xlarge/my_layout.xml       // layout for extra-large screen size
res/layout-xlarge-land/my_layout.xml  // layout for extra-large in landscape orientation

For Images

res/drawable-mdpi/graphic.png         // bitmap for medium-density
res/drawable-hdpi/graphic.png         // bitmap for high-density
res/drawable-xhdpi/graphic.png        // bitmap for extra-high-density
res/drawable-xxhdpi/graphic.png       // bitmap for extra-extra-high-density

For Icon

res/mipmap-mdpi/my_icon.png         // launcher icon for medium-density
res/mipmap-hdpi/my_icon.png         // launcher icon for high-density
res/mipmap-xhdpi/my_icon.png        // launcher icon for extra-high-density
res/mipmap-xxhdpi/my_icon.png       // launcher icon for extra-extra-high-density
res/mipmap-xxxhdpi/my_icon.png      // launcher icon for extra-extra-extra-high-density

For Launcher icon

36x36 (0.75x) for low-density
48x48 (1.0x baseline) for medium-density
72x72 (1.5x) for high-density
96x96 (2.0x) for extra-high-density
180x180 (3.0x) for extra-extra-high-density
192x192 (4.0x) for extra-extra-extra-high-density (launcher icon only; see note above)

Please visit Supporting Multiple Screens

Amit Vaghela
  • 22,772
  • 22
  • 86
  • 142
0

The idea of creating separate layout folders for different resolutions is worthless if you have same layout design for all devices. It will increase .apk size. Best way is to define dimension values for different resolution devices under 'res' folder and use them in to layout files instead of using direct values.

Create separate dimens.xml files under res/values-swXXXdp folders where value for XXX is (320, 480) for phone models and (600, 720, 800) for tablet models. In this way you can define necessary dimension values for different screen sizes and refer them from a single common layout file.

Hope this helps!!

Arjun Vekariya
  • 966
  • 7
  • 8