i wanna put multiple imageview in a row like this
http://imgur.com/wYpAgxE
but there is some bugs, the imageview are overlap on top of each other, i want to place them side by side with each other
http://imgur.com/WUHbzCd
Below is my XML file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/background"
android:clipChildren="false"
android:clipToPadding="false"
tools:context=".MainActivity" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="182dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:scaleType="centerCrop"
android:src="#drawable/music_720p" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imageView1"
android:layout_toEndOf="#+id/imageView1"
android:layout_marginTop="182dp"
android:layout_marginRight="70dp"
android:layout_marginEnd="70dp"
android:scaleType="centerCrop"
android:src="#drawable/video_720p" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imageView2"
android:layout_toEndOf="#+id/imageView2"
android:layout_marginTop="182dp"
android:layout_marginRight="70dp"
android:layout_marginEnd="70dp"
android:scaleType="centerCrop"
android:src="#drawable/photo_720p" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imageView3"
android:layout_toEndOf="#+id/imageView3"
android:layout_marginTop="182dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:scaleType="centerCrop"
android:src="#drawable/web_720p" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imageView4"
android:layout_toEndOf="#+id/imageView4"
android:layout_marginTop="182dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:scaleType="centerCrop"
android:src="#drawable/setting_720p" />
</RelativeLayout>
Any help is appreciated.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:clipChildren="false"
android:clipToPadding="false"
tools:context=".MainActivity" >
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="false"
android:scrollbars="none" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/setupImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left"
android:layout_marginBottom="10dp"
android:layout_marginLeft="20dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/uploadImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="10dp"
android:layout_marginLeft="30dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/visulizationImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="10dp"
android:layout_marginLeft="30dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/setupImageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left"
android:layout_marginBottom="10dp"
android:layout_marginLeft="20dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/uploadImageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="10dp"
android:layout_marginLeft="30dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/visulizationImageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="10dp"
android:layout_marginLeft="30dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</HorizontalScrollView>
</RelativeLayout>
Please try this. I hope help you.
I can see that you have used wrap_content everywhere,so u can either reduce the width and height of your images or you can define it explicitly in layout file or .java file.
For your scenario using GridLayout is better option than using RelativeLayout.try it...
Here is a good example on GridLayout :- http://www.techotopia.com/index.php/Working_with_the_Android_GridLayout_in_XML_Layout_Resources
I would suggest you should go for HorizontalScrollView which provides functionality as you want.
Checkout link shows you how you can implement HorizontolScrollView
I hope this will help you.
You can also check the answer of vijju who have shown implementation totally HERE
Related
I want to create my Toolbar layout like below image.
I written below code for create this view. Please see my xml Code.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:background="#color/black"
android:padding="#dimen/_5sdp">
<ImageView
android:id="#+id/toolbar_default_img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_menu" />
<TextView
android:id="#+id/toolbar_default_textview_title"
style="#style/textview_normal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/toolbar_default_img_menu"
android:layout_toStartOf="#+id/toolbar_default_img_search"
android:text="#string/app_name"
android:textColor="#color/white"
android:textSize="#dimen/_15ssp" />
<ImageView
android:id="#+id/toolbar_default_img_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/toolbar_default_img_filter_tag"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_search" />
<ImageView
android:id="#+id/toolbar_default_img_filter_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/toolbar_default_img_filter"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_filter" />
<ImageView
android:id="#+id/toolbar_default_img_filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_filter" />
</RelativeLayout>
After written this code i can see my view is correct in android studio preview but when i run my project it look like below image.
only left and right imageview on correct position but my textview and other two imageview is not set on correct position after run this code.
May be problem with android:layout_toEndOf and android:layout_toStartOf property of RelativeLayout.
I don't know why this problem create.Thank you for help.
Replace this code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:background="#color/black"
android:padding="#dimen/_5sdp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/toolbar_default_img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/_5sdp"
android:src="#drawable/ic_launcher_background" />
<TextView
android:id="#+id/toolbar_default_textview_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:maxEms="50"
android:text="#string/app_name" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/toolbar_default_img_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_search" />
<ImageView
android:id="#+id/toolbar_default_img_filter_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_filter" />
<ImageView
android:id="#+id/toolbar_default_img_filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_filter" />
</LinearLayout>
</RelativeLayout>
Do changes as per your requirement by padding and margin to make a proper design.
Try using layout_alignParentRight , layout_toLeftOf , layout_toRightOf ,layout_alignParentLeft instead of layout_alignParentEnd , layout_toStartOf , layout_toEndOf and layout_alignParentStart or use Both in the Layout
<?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="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/black"
android:padding="5dp">
<ImageView
android:id="#+id/toolbar_default_img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:padding="5dp"
android:src="#drawable/add_btn" />
<TextView
android:id="#+id/toolbar_default_textview_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/toolbar_default_img_menu"
android:layout_toLeftOf="#+id/toolbar_default_img_search"
android:text="#string/app_name"
android:textColor="#color/white"
android:textSize="15sp" />
<ImageView
android:id="#+id/toolbar_default_img_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/toolbar_default_img_filter_tag"
android:padding="5dp"
android:src="#drawable/add_btn" />
<ImageView
android:id="#+id/toolbar_default_img_filter_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/toolbar_default_img_filter"
android:padding="5dp"
android:src="#drawable/add_btn" />
<ImageView
android:id="#+id/toolbar_default_img_filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:padding="5dp"
android:src="#drawable/add_btn" />
</RelativeLayout>
</RelativeLayout>
you need to add them as action button on the appbar
https://developer.android.com/training/appbar/actions.html
You need to add
android:layout_toLeftOf
along with
android:layout_toStartOf
and
android:layout_toRightOf
with
android:layout_toEndOf
Add
android:layout_toLeftOf:
along with
android:layout_toStartOf:
and
android:layout_toRightOf:
with
android:layout_toEndOf:
because you need to support lower API versions.
I have an activity and a fragment. Where fragment will be loaded dynamically in activity. Fragment has around 20 views and most of them are custom views. For loading the fragment its taking around 3 seconds, this time is just for loading the layout, without any initialization or functionality. I feel 3 seconds is more and want to reduce it to 1 second. What could be the possible ways to achieve this.
Things I did:
** Removed weights and nested layouts.
** Removed unused attributes of view
** Flattened the layout hierarchy.
Layout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:gauge="http://schemas.android.com/apk/res/com.test.app.testApp"
xmlns:customview="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_light_grey" >
<RelativeLayout
android:id="#+id/top_components_dummy"
android:layout_width="match_parent"
android:layout_height="135dp"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/ dummy_layout"
android:layout_width="370dp"
android:layout_toLeftOf="#+id/host_layout"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/dummy_parent"
android:layout_width="280dp"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/water_and_drain_tactile"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/dummy_parent_water"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical"
android:layout_marginLeft="40dp"
android:layout_marginRight="20dp" >
<com.test.app.ui.components.CustomView
android:id="#+id/level_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="16dp"
android:src="#drawable/xyz" />
<ImageView
android:layout_width="85dp"
android:layout_height="4dp"
android:layout_gravity="center|bottom"
android:layout_marginBottom="20dp"
android:background="#drawable/empty_indiactor"
android:contentDescription="#string/empty_string"
android:visibility="gone" />
</FrameLayout>
<FrameLayout
android:id="#+id/dummy_parent_drain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_marginRight="40dp" >
<com.test.app.ui.components.CustomView
android:id="#+id/drain_level_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="45dp"
android:src="#drawable/xyz" />
<ImageView
android:layout_width="85dp"
android:layout_height="4dp"
android:layout_gravity="top|center"
android:layout_marginTop="20dp"
android:background="#drawable/empty_indiactor"
android:contentDescription="#string/empty_string"
android:visibility="gone" />
</FrameLayout>
</LinearLayout>
<TextView
android:id="#+id/Waterdummy_TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginRight="30dp"
android:layout_marginTop="10dp"
android:layout_toLeftOf="#+id/dummyCenter"
android:text="Water"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
android:textStyle="bold" />
<View
android:id="#+id/dummyCenter"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#00ffffff" />
<TextView
android:id="#+id/Draindummy_TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#+id/dummyCenter"
android:text="Drain"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/host_layout"
android:layout_width="400dp"
android:layout_centerHorizontal="true"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/host_Stop_Background"
android:layout_width="120dp"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/xyz"
android:contentDescription="#string/empty_string" />
<ImageView
android:id="#+id/dull_stop_icon"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_above="#+id/host_stop_text"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:contentDescription="#string/empty_string"
android:scaleType="fitXY"
android:src="#drawable/xyz" />
<TextView
android:id="#+id/host_stop_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:text="STOP"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000" />
<RelativeLayout
android:id="#+id/host_Rate_Layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/host_Stop_Background" >
<ImageView
android:id="#+id/host_Rate_Icon"
android:layout_width="120dp"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/xyz"
android:contentDescription="#string/empty_string" />
<TextView
android:id="#+id/host_rate_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/host_rate_unit_textView"
android:layout_centerHorizontal="true"
android:layout_marginBottom="-5dp"
android:gravity="bottom|center_horizontal"
android:text="1.5"
android:textAlignment="gravity"
android:textColor="#000000"
android:textSize="34sp" />
</RelativeLayout>
<ImageView
android:id="#+id/host_system_Icon"
android:layout_width="120dp"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_toRightOf="#+id/host_Stop_Background"
android:background="#drawable/host_system_top_tactile"
android:contentDescription="#string/empty_string"
android:paddingBottom="18dp"
android:paddingTop="18dp"
android:scaleType="fitCenter"
android:src="#drawable/xyz" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/dull_rate_layout"
android:layout_width="350dp"
android:layout_toRightOf="#+id/host_layout"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/dull_rate_layout"
android:layout_width="175dp"
android:layout_height="match_parent" >
<TextView
android:id="#+id/dull_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="#string/dull_rate"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="130dp"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/xyz" />
<TextView
android:id="#+id/dull_rate_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/dull_rate_unit_textView"
android:layout_centerHorizontal="true"
android:layout_marginBottom="-5dp"
android:gravity="bottom|center_horizontal"
android:text="500"
android:textAlignment="gravity"
android:textColor="#000000"
android:textSize="36sp" />
<TextView
android:id="#+id/dull_rate_unit_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:text="mL/min"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/salad_layout"
android:layout_width="175dp"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/dull_rate_layout" >
<TextView
android:id="#+id/salad_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="#string/salad"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
android:textStyle="bold" />
<ImageView
android:id="#+id/salad_Icon"
android:layout_width="130dp"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/dull_salad_tactile"
android:contentDescription="#string/empty_string"
android:paddingBottom="18dp"
android:paddingTop="18dp"
android:scaleType="fitCenter"
android:src="#drawable/xyz" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/midLinear"
android:layout_width="match_parent"
android:layout_height="460dp"
android:layout_below="#+id/top_components_dummy" >
<TextView
android:id="#+id/boomSpeed_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:text="#string/boom_speed"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
android:textStyle="bold" />
<TextView
android:id="#+id/boomSpeed_Value_Text"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_below="#+id/boomSpeed_textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="-5dp"
android:gravity="center"
android:maxLength="3"
android:text="300"
android:textColor="#android:color/black"
android:textSize="50sp"
android:textStyle="normal" />
<ImageView
android:id="#+id/imageView_down"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_alignBottom="#+id/boomSpeed_Value_Text"
android:layout_marginRight="5dp"
android:layout_toLeftOf="#+id/boomSpeed_Value_Text"
android:scaleType="fitXY"
android:src="#drawable/xyz" />
<ImageView
android:id="#+id/imageView_up"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_alignBottom="#+id/boomSpeed_Value_Text"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/boomSpeed_Value_Text"
android:src="#drawable/xyz" />
<TextView
android:id="#+id/boom_Speed_Value_Unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/boomSpeed_Value_Text"
android:layout_centerHorizontal="true"
android:layout_marginTop="-10dp"
android:text="mL/min"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#444444" />
<ImageView
android:id="#+id/IV_boomSpeed"
android:layout_width="240dp"
android:layout_height="240dp"
android:layout_below="#+id/boom_Speed_Value_Unit"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:hapticFeedbackEnabled="true"
android:src="#drawable/xyz" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:layout_toLeftOf="#+id/IV_boomSpeed"
android:gravity="center_vertical" >
<ImageView
android:layout_width="380dip"
android:layout_height="380dip"
android:layout_centerInParent="true"
android:src="#drawable/xyz" />
<com.test.app.ui.components.CustomView1
android:id="#+id/circularprogressbar2"
android:layout_width="345dip"
android:layout_height="345dip"
android:layout_centerInParent="true"
customview:cpb_backgroundColor="#EDEDED"
customview:cpb_borderColor="#22B7B3"
customview:cpb_maintitle="#string/time_remaining"
customview:cpb_progressColor="#22B7B3" />
<RelativeLayout
android:id="#+id/clickablearea"
android:layout_width="180dip"
android:layout_height="80dip"
android:layout_alignTop="#+id/circularprogressbar2"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dip"
android:background="#00fff000" >
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:layout_toRightOf="#+id/IV_boomSpeed"
android:gravity="center_vertical" >
<ImageView
android:layout_width="380dip"
android:layout_height="380dip"
android:layout_centerInParent="true"
android:src="#drawable/dialsbg" />
<ImageView
android:id="#+id/IV_StopML"
android:layout_width="120dip"
android:layout_height="80dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="54dp"
android:src="#drawable/xyz" />
<TextView
android:layout_width="100dip"
android:layout_height="80dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="40dp"
android:layout_marginRight="15dp"
android:gravity="center"
android:text="STOP\n ML"
android:textColor="#android:color/holo_red_dark"
android:textStyle="bold" />
<com.test.app.ui.components.CustomView1
android:id="#+id/circularprogressbar3"
android:layout_width="345dip"
android:layout_height="345dip"
android:layout_centerInParent="true"
customview:cpb_borderColor="#E7AB0F"
customview:cpb_progressColor="#e2a000"
customview:backgroundColor="#EDEDED"
customview:goal="#string/goal"
customview:goal_unit="mL"
customview:goal_value="2800"
customview:ml_unit="mL"
customview:rate="#string/rate"
customview:rate_unit="mL/hr"
customview:rate_value="700"
customview:removed_title="#string/removed"
customview:removed_value="1500" />
<RelativeLayout
android:id="#+id/editMLGoal_clickArea"
android:layout_width="100dip"
android:layout_height="50dip"
android:layout_alignStart="#+id/circularprogressbar3"
android:layout_marginLeft="60dip"
android:layout_marginTop="210dip"
android:background="#00fff000" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/editMLRate_clickArea"
android:layout_width="100dip"
android:layout_height="50dip"
android:layout_alignEnd="#+id/circularprogressbar3"
android:layout_marginRight="60dip"
android:layout_marginTop="210dip"
android:background="#00fff000" >
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/RL_DialView2"
android:layout_width="300dp"
android:layout_height="190dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginBottom="-40dp" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="170dp"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:scaleType="fitXY"
android:src="#drawable/xyz" />
<com.test.app.ui.components.CustomView2
android:id="#+id/gauge_view2"
android:layout_width="match_parent"
android:layout_height="match_parent"
gauge:isFloat="false"
gauge:scaleEndValue="400"
gauge:scaleMaxLimit="350"
gauge:scaleMinLimit="150"
gauge:scaleStartValue="70"
gauge:showLimitText="true"
gauge:showNeedle="true"
gauge:showRanges="true"
gauge:showScale="false"
gauge:showText="true"
gauge:textTitle="#string/ven"
gauge:textUnit="mmHg"
gauge:textUnitColor="#000000"
gauge:textValueColor="#000000" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RL_DialView1"
android:layout_width="220dp"
android:layout_height="140dp"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:layout_marginBottom="-20dp"
android:layout_toLeftOf="#+id/RL_DialView2" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="120dp"
android:layout_height="70dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="#drawable/xyz" />
<com.test.app.ui.components.CustomView2
android:id="#+id/gauge_view1"
android:layout_width="match_parent"
android:layout_height="match_parent"
gauge:isFloat="false"
gauge:scaleEndValue="500"
gauge:scaleMaxLimit="400"
gauge:scaleMinLimit="-200"
gauge:scaleStartValue="-300"
gauge:showLimitText="true"
gauge:showNeedle="true"
gauge:showRanges="true"
gauge:showScale="false"
gauge:showText="true"
gauge:textTitle="#string/art"
gauge:textUnit="mmHg"
gauge:textUnitColor="#000000"
gauge:textValueColor="#000000" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RL_DialView4"
android:layout_width="220dp"
android:layout_height="140dp"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:layout_marginBottom="-20dp"
android:layout_toRightOf="#+id/RL_DialView2" >
<ImageView
android:id="#+id/imageView4"
android:layout_width="120dp"
android:layout_height="70dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="#drawable/xyz" />
<com.test.app.ui.components.CustomView2
android:id="#+id/gauge_view4"
android:layout_width="match_parent"
android:layout_height="match_parent"
gauge:isFloat="true"
gauge:scaleEndValue="40"
gauge:scaleMaxLimit="38"
gauge:scaleMinLimit="36"
gauge:scaleStartValue="34"
gauge:showLimitText="true"
gauge:showNeedle="true"
gauge:showRanges="true"
gauge:showScale="false"
gauge:showText="true"
gauge:textTitle="#string/dt"
gauge:textUnit="\u2103"
gauge:textUnitColor="#000000"
gauge:textValueColor="#000000" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RL_DialView3"
android:layout_width="220dp"
android:layout_height="140dp"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:layout_marginBottom="-20dp"
android:layout_toLeftOf="#+id/RL_DialView1" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="120dp"
android:layout_height="70dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="#drawable/xyz" />
<com.test.app.ui.components.CustomView2
android:id="#+id/gauge_view3"
android:layout_width="match_parent"
android:layout_height="match_parent"
gauge:isFloat="false"
gauge:scaleEndValue="320"
gauge:scaleMaxLimit="300"
gauge:scaleMinLimit="90"
gauge:scaleStartValue="70"
gauge:showLimitText="true"
gauge:showNeedle="true"
gauge:showRanges="true"
gauge:showScale="false"
gauge:showText="true"
gauge:textTitle="#string/tmp"
gauge:textUnit="mmHg"
gauge:textUnitColor="#000000"
gauge:textValueColor="#000000" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RL_DialView5"
android:layout_width="220dp"
android:layout_height="140dp"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:layout_marginBottom="-20dp"
android:layout_toRightOf="#+id/RL_DialView4" >
<ImageView
android:id="#+id/imageView5"
android:layout_width="120dp"
android:layout_height="70dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="#drawable/xyz" />
<com.test.app.ui.components.CustomView2
android:id="#+id/gauge_view5"
android:layout_width="match_parent"
android:layout_height="match_parent"
gauge:isFloat="true"
gauge:scaleEndValue="17"
gauge:scaleMaxLimit="15.9"
gauge:scaleMinLimit="13.1"
gauge:scaleStartValue="12"
gauge:showInnerRim="false"
gauge:showNeedle="true"
gauge:showRanges="true"
gauge:showScale="false"
gauge:showText="true"
gauge:textTitle="#string/cond"
gauge:textUnit="mS/cm"
gauge:textUnitColor="#000000"
gauge:textValueColor="#000000" />
</RelativeLayout>
You can check the Layout Optimizating guide:
Avoid nested ViewGroup. You should make your Layout as low-level hierarchy as possible
Using nested instances of LinearLayout can lead to an excessively deep view hierarchy. Furthermore, nesting several instances of LinearLayout that use the layout_weight parameter can be especially expensive as each child needs to be measured twice. This is particularly important when the layout is inflated repeatedly, such as when used in a ListView or GridView.
It is always good practice to run the lint tool on your layout files to search for possible view hierarchy optimizations.
Using ViewStub:
Sometimes your layout might require complex views that are rarely used. Whether they are item details, progress indicators, or undo messages, you can reduce memory usage and speed up rendering by loading the views only when they are needed
Using RelativeLayouts are expensive, as laying out the views is a 'complex' task - each time you inflate the xml, the inflater must calculate the relations between the views, which is rather expensive.
You should try to use as much LinearLayouts as you can. This will boost things up a bit. LinearLayouts are much more faster to inflates, as the relations are at most 2 nodes per view.
Have you heard from CustomViews?
You can lay out the child views directly. So it don't need calculate again and again and again.
For example:
<RelativeLayout
android:id="#+id/RL_DialView2"
android:layout_width="300dp"
android:layout_height="190dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginBottom="-40dp" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="170dp"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:scaleType="fitXY"
android:src="#drawable/xyz" />
<com.test.app.ui.components.CustomView2
android:id="#+id/gauge_view2"
android:layout_width="match_parent"
android:layout_height="match_parent"
gauge:isFloat="false"
gauge:scaleEndValue="400"
gauge:scaleMaxLimit="350"
gauge:scaleMinLimit="150"
gauge:scaleStartValue="70"
gauge:showLimitText="true"
gauge:showNeedle="true"
gauge:showRanges="true"
gauge:showScale="false"
gauge:showText="true"
gauge:textTitle="#string/ven"
gauge:textUnit="mmHg"
gauge:textUnitColor="#000000"
gauge:textValueColor="#000000" />
</RelativeLayout>
This is 5 times in your Layout.
Change the RelativeLayout to a ImageWithCustomView2Layout which extends from ViewGroup.
Then override onMeasure(int widthMeasureSpec, int heightMeasureSpec) and onLayout(boolean changed, int left, int top, int right, int bottom).
However. When you use CustomViews which know exactly the position (and size) of its Childs it will be much faster.
Learn more about CustomViews at:
DAC or
GitHub Examples (1), (2)
Our can also a look at this post at medium.
Hi I am working on an app which has this design. By using a lot of effort i developed this. But this is still not the same as given design and on other screens I got this. This is the code in xml file. Any help willbe greatly appreciated.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#mipmap/dashboard_bg"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:src="#mipmap/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:src="#mipmap/logo" />
</LinearLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Welcome text of app" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:contentDescription="#null"
android:src="#mipmap/seperator" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_above="#+id/imageView1"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:contentDescription="#null"
android:src="#mipmap/regional_managers" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView3"
android:layout_toEndOf="#+id/imageView1"
android:layout_toRightOf="#+id/imageView1"
android:contentDescription="#null"
android:src="#mipmap/regions" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/imageView3"
android:layout_alignEnd="#+id/imageView3"
android:layout_below="#+id/imageView4"
android:contentDescription="#null"
android:src="#mipmap/graphs" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_alignTop="#+id/imageView1"
android:layout_toLeftOf="#+id/imageView1"
android:layout_toStartOf="#+id/imageView1"
android:contentDescription="#null"
android:src="#mipmap/nationwide" />
</RelativeLayout>
</LinearLayout>
Also tried links from so like
image size (drawable-hdpi/ldpi/mdpi/xhdpi)
and Setting drawable folder to use for different resolutions but unable to get desired results. Any help willbe greatly appreciated.
Try something like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
app:layout_marginTopPercent="10%"
app:layout_widthPercent="30%" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_marginLeftPercent="20%"
app:layout_marginTopPercent="40%"
app:layout_widthPercent="20%" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_marginLeftPercent="60%"
app:layout_marginTopPercent="55%"
app:layout_widthPercent="20%" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_marginLeftPercent="30%"
app:layout_marginTopPercent="70%"
app:layout_widthPercent="20%" />
</android.support.percent.PercentRelativeLayout>
I want to make a header in my layout just like below image:-
enter image description here
here my code:-
<RelativeLayout
android:id="#+id/header_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:text="#string/filter"
android:drawableLeft="#drawable/filter1"
android:textSize="16dp"
android:id="#+id/textView"
android:background="#android:color/white"
android:textColor="#000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sort"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:id="#+id/textview_sort"
android:textSize="16sp"
android:drawableLeft="#drawable/sort1"
android:background="#android:color/white"
android:textColor="#000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/textView"
android:drawableLeft="#drawable/view1"
android:text="#string/view"
android:textSize="16sp"
android:background="#android:color/white"
android:id="#+id/change_view"
android:textColor="#000"/>
</LinearLayout>
</RelativeLayout>
Any one can help me how solve my problem. I am new in android developing please help me.Thanks in advance
It Could be achieved by two manner.
1) Custom Header
2) Actionbar/Toolbar.
Custom header means only height attribute you have to take as#dimen/abs__action_bar_default_height(if you are using appcompat).
For eg. sample demo
`
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="#FF6600"
>
<ImageView
android:id="#+id/menu"
android:layout_width="50dp"
android:layout_height="100dp"
android:src="#drawable/abc_ic_menu_moreoverflow_mtrl_alpha"
android:layout_centerVertical="true"
/>
<Spinner
android:id="#+id/spinner"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/menu"
android:entries="#array/array_name"
>
</Spinner>
<ImageView
android:id="#+id/search"
android:layout_width="50dp"
android:layout_height="100dp"
android:src="#drawable/abc_ic_search_api_mtrl_alpha"
android:layout_toRightOf="#+id/spinner"
android:layout_centerVertical="true"
/>
<ImageView
android:id="#+id/star"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/star_yellow"
android:layout_toRightOf="#+id/search"
android:layout_marginLeft="5dp"
android:layout_centerVertical="true"
/>
<ImageView
android:id="#+id/shop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/abc_ic_menu_copy_mtrl_am_alpha"
android:layout_toRightOf="#+id/star"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
</LinearLayout>
`
Just give it a try.
I am able to take the pictures and put it grid view but, Has a picture is taken i want to place small image button on right corner of a image.
Use something like this
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/image"
android:src="#drawable/ic_launcher"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/image"
android:layout_alignRight="#id/image"
android:src="#android:drawable/btn_dialog"/>
</RelativeLayout>
Try this ..
<ImageView
android:id="#+id/thumbImage"
android:layout_width="134dp"
android:layout_height="121dp"
android:scaleType="fitXY"
android:layout_centerInParent="true"
android:src="#drawable/antartica1" />
<ImageButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/buttonanimation"
android:layout_margin="3dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
I hope this will help you...
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:id="#+id/thumbImage"
android:layout_width="134dp"
android:layout_height="121dp"
android:scaleType="fitXY"
android:layout_centerInParent="true"
android:src="#drawable/antartica1" />
<ImageButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/buttonanimation"
android:layout_margin="3dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
Please use this layout in your Adapter
<Button
android:id="#+id/btnChat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_marginRight="15px"
android:background="#drawable/chatbtn" />
<TextView
android:id="#+id/new_conduct_pd_txt_chat_counter_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="36dp"
android:layout_marginRight="10dp"
android:background="#drawable/msg"
android:gravity="center"
android:maxLength="2"
android:text=""
android:textColor="#color/white"
android:textSize="13dp"
android:textStyle="bold"
android:visibility="visible" />
add My image:
add other image:
i hope this is useful for you...