How to make header with scrollview - android

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.

Related

Shadow in Android

enter image description here
As you can see there is a shadow around the ticket. I cannot make this because I am using the library (TicketView) and there is a problem with Scallops
HERE IS MY CODE
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#f3f6f9">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="18dp"
android:layout_marginTop="52.5dp"
android:layout_marginEnd="18dp"
android:orientation="vertical"
android:elevation="14dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="37.5dp"
android:background="#drawable/gradient_tickets">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_margin="10dp"
android:elevation="2dp"
android:text="Bus 79"
android:textColor="#fefefe"
android:textSize="12sp"
tools:layout_editor_absoluteX="37dp"
tools:layout_editor_absoluteY="69dp" />
<ImageView
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:scaleX="0.6"
android:scaleY="0.6"
android:src="#drawable/arrow_list" />
<TextView
android:id="#id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/text1"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:text="11/03/2017"
android:textColor="#a4158a"
android:textSize="12sp" />
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/img1"
android:layout_alignParentRight="false"
android:layout_alignParentBottom="false"
android:layout_marginTop="40dp"
android:text="$0.30"
android:textColor="#a4158a"
android:textSize="12sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.vipulasri.ticketview.TicketView
android:id="#+id/ticketView"
android:layout_width="wrap_content"
android:layout_height="142dp"
app:ticketBackgroundColor="#FFFFFF"
app:ticketDividerColor="#16191c"
app:ticketDividerDashGap="4dp"
app:ticketDividerDashLength="3dp"
app:ticketDividerPadding="1.5dp"
app:ticketDividerType="dash"
app:ticketDividerWidth="0.5dp"
app:ticketOrientation="horizontal"
app:ticketScallopPositionPercent="25.7"
app:ticketScallopRadius="7dp"
app:ticketShowBorder="false"
app:ticketShowDivider="true"
/>
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20.5dp"
android:layout_marginTop="16.5dp"
android:elevation="2dp"
android:text="12/03/2017"
android:textColor="#a4158a"
android:textSize="10sp" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/ticketView"
android:layout_alignRight="#+id/ticketView"
android:layout_marginTop="16.5dp"
android:layout_marginEnd="17dp"
android:layout_marginRight="17dp"
android:elevation="2dp"
android:text="$0.30"
android:textColor="#a4158a"
android:textSize="10sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="31dp"
android:layout_marginTop="47dp"
android:layout_marginRight="31dp"
android:layout_marginBottom="45dp"
android:elevation="3dp"
android:src="#drawable/barcode_img" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
I need to have a shadow there but I cannot manage to do it. Also I used the TicketView which is for making the form of the ticket. Could u please say what I need to add there in order to have such a shadow?

You can use CardView. There is a parameter which app:cardElevation.
But if it's not possible, You can create a drawable and you can create shadow with using gradient.

Relativelayout property issue

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.

List View inside relative layout and scroll view not covering screen

I have below layout
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/searchScreenBG">
<RelativeLayout
android:id="#+id/title_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="#dimen/_7sdp">
<ImageButton
android:id="#+id/ib_hamburger"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="#dimen/_16sdp"
android:layout_marginRight="#dimen/_16sdp"
android:layout_marginTop="#dimen/_15sdp"
android:background="#android:color/transparent"
android:contentDescription="#null"
app:srcCompat="#drawable/ham_burger" />
<com.rod.com.rod.ui.views.CTextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/ib_hamburger"
android:layout_centerHorizontal="true"
android:text="#string/basic_details"
android:textColor="#color/colorGreen" />
<ImageButton
android:id="#+id/ib_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/ib_hamburger"
android:layout_marginLeft="#dimen/_16sdp"
android:layout_marginStart="#dimen/_16sdp"
android:background="#android:color/transparent"
android:contentDescription="#null"
app:srcCompat="#drawable/left_arrow" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/reg_no_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_5sdp"
android:layout_below="#+id/title_bar"
android:background="#color/colorWhite">
<TextView
android:id="#+id/tv_reg_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="19dp"
android:textColor="#color/colorLightGrey" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/reg_no_layout"
>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:layout_marginRight="#dimen/_10sdp"
android:layout_marginLeft="#dimen/_10sdp"
android:layout_weight="1">
<RelativeLayout
android:id="#+id/basic_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/_10sdp"
android:background="#drawable/list_item_bg"
android:paddingBottom="#dimen/_10sdp">
<TextView
android:id="#+id/tv_district_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="50dp"
android:layout_marginStart="50dp"
android:layout_marginTop="11dp"
android:text="#string/district"
android:textColor="#color/colorBlack"
android:textSize="#dimen/_13sdp" />
<TextView
android:id="#+id/tv_district"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_district_label"
android:layout_alignStart="#+id/tv_district_label"
android:layout_below="#+id/tv_district_label"
android:text="TextView"
android:textColor="#color/colorLightGrey" />
<TextView
android:id="#+id/tv_tehsil_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/tv_district"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="75dp"
android:layout_marginRight="75dp"
android:text="#string/tehsil"
android:textColor="#color/colorBlack" />
<TextView
android:id="#+id/tv_tehsil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/tv_district"
android:layout_alignLeft="#+id/tv_tehsil_label"
android:layout_alignStart="#+id/tv_tehsil_label"
android:text="TextView"
android:textColor="#color/colorLightGrey" />
<TextView
android:id="#+id/tv_date_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_district"
android:layout_alignStart="#+id/tv_district"
android:layout_below="#+id/tv_district"
android:layout_marginTop="13dp"
android:text="#string/date"
android:textColor="#color/colorBlack" />
<TextView
android:id="#+id/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_date_label"
android:layout_alignStart="#+id/tv_date_label"
android:layout_below="#+id/tv_date_label"
android:text="TextView"
android:textColor="#color/colorLightGrey" />
<TextView
android:id="#+id/tv_jild_no_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/tv_date_label"
android:layout_alignLeft="#+id/tv_tehsil"
android:layout_alignStart="#+id/tv_tehsil"
android:text="#string/jild_no"
android:textColor="#color/colorBlack" />
<TextView
android:id="#+id/tv_jild_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_jild_no_label"
android:layout_alignStart="#+id/tv_jild_no_label"
android:layout_below="#+id/tv_jild_no_label"
android:text="TextView"
android:textColor="#color/colorLightGrey" />
<TextView
android:id="#+id/tv_party_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_date"
android:layout_alignStart="#+id/tv_date"
android:layout_below="#+id/tv_date"
android:layout_marginTop="13dp"
android:text="#string/party"
android:textColor="#color/colorBlack" />
<TextView
android:id="#+id/tv_party"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_party_label"
android:layout_alignStart="#+id/tv_party_label"
android:layout_below="#+id/tv_party_label"
android:text="TextView"
android:textColor="#color/colorLightGrey" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:layout_below="#+id/basic_details"
android:layout_marginTop="13dp"
android:background="#drawable/list_item_bg">
<TextView
android:id="#+id/tv_member_details_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="#dimen/_40sdp"
android:layout_marginStart="#dimen/_40sdp"
android:layout_marginTop="14dp"
android:text="#string/member_details"
android:textColor="#color/colorBlack"
android:textSize="#dimen/_16sdp" />
<ListView
android:id="#+id/lv_members"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/tv_member_details_label"
android:layout_marginLeft="#dimen/_40sdp"
android:layout_marginRight="#dimen/_40sdp"
android:layout_marginStart="#dimen/_40sdp"
android:layout_marginTop="16dp"
android:divider="#color/colorLightGrey"
android:dividerHeight="#dimen/_1sdp" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
</FrameLayout>
I want to make the relative layout below basic_layout cover the whole of the rest screen. How can I achieve that. After searching I had found that I should put a linear layout inside my scroll view, and then relative layouts should added. But that's of no help.
I want hierachy something like below:
----RelativeLayout
-------TitleBar
-------TextView
-------ScrollView (rest of screen)
----------RelativeLayout (upper portion of scroll view)
------------TextViews
----------RelativeLayout (rest of scrol view)
-------------TextView
-------------ListView
Any help please?

Actually the problem is that you are using 2 layouts in your scrollview so the listview won't take the scroll of itself and it will limit the list height as well. To go around this you need to pass fix value to your listview then it will show completely within that specified height. And the rest of the layout if you want to get exactly as you have shown in the picture you need to use cardview instead.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:layout_below="#+id/basic_details"
android:layout_marginTop="13dp"
android:layout_marginBottom="10dp"
android:background="#drawable/list_item_bg">
<TextView
android:id="#+id/tv_member_details_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="#dimen/_40sdp"
android:layout_marginStart="#dimen/_40sdp"
android:layout_marginTop="14dp"
android:text="#string/member_details"
android:textColor="#color/colorBlack"
android:textSize="16dp" />
<ListView
android:id="#+id/lv_members"
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/tv_member_details_label"
android:layout_marginLeft="#dimen/_40sdp"
android:layout_marginRight="#dimen/_40sdp"
android:layout_marginStart="#dimen/_40sdp"
android:layout_marginTop="16dp"
android:divider="#color/colorLightGrey"
android:dividerHeight="#dimen/_1sdp" />
</RelativeLayout>

relativelayout align issue about text and image overlap

I have the circle icon , it build up by one text view and one image view .
I want text and image can overlap , so i use relativeLayout.
When i run the app , i found it's align out of my control from different screen size.
Is there any better way to design the layout ?
I set the layout like this:
<LinearLayout 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"
android:orientation="vertical"
tools:context=".PageFragment.ActivityHomePage">
<LinearLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
android:padding="15dp"
android:orientation="vertical">
<TextView
android:id="#+id/activityHpEduin"
android:textSize="15dp"
android:textColor="#66CDAA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test" />
<TextView
android:id="#+id/activityHpTitle"
android:layout_marginTop="5dp"
android:textSize="20dp"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test" />
<TextView
android:textSize="18dp"
android:layout_marginTop="5dp"
android:textColor="#6666ff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7.16.2016-2/12.2017"
android:id="#+id/activityHpDate" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/circleNews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/btn_news" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginTop="70dp"
android:textColor="#android:color/white"
android:gravity="center"
android:text="#string/circleNews" />
<ImageView
android:id="#+id/circleActivityContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/circleNews"
android:src="#drawable/btn_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="140dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleActivityContent" />
<ImageView
android:id="#+id/circleSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/circleActivityContent"
android:src="#drawable/btn_apply" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="252dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleSignUp" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<ImageView
android:id="#+id/circlePresenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/btn_speakers" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circlePresenter" />
<ImageView
android:id="#+id/circleHotel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/circlePresenter"
android:src="#drawable/btn_accommodation" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="138dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleHotel" />
<ImageView
android:id="#+id/circleTransportation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/circleHotel"
android:src="#drawable/btn_traffic" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="252dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleTransportation" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<ImageView
android:id="#+id/circleSponsor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="117dp"
android:src="#drawable/btn_sponsors" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="146dp"
android:layout_marginTop="70dp"
android:textColor="#android:color/white"
android:gravity="center"
android:text="#string/circleSponsor" />
</RelativeLayout>
</LinearLayout>

Try this sample code it is similar to what you want.
First here is the xml file code here i have a imageview and below it a text together they are in relative layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView3"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_weight="1"
android:src="#drawable/user_icon" />
<TextView
android:id="#+id/tv_email"
android:layout_width="200dp"
android:layout_height="45dp"
android:layout_alignStart="#+id/imageView3"
android:layout_below="#+id/imageView3"
android:layout_gravity="center_horizontal"
android:textColor="#color/White"
android:textSize="18sp" />
</RelativeLayout>
The output is like below:
another answer with new requirement:
xml code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="119dp"
android:layout_marginTop="50dp">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#drawable/banner_bg" />
<TextView
android:id="#+id/textView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fontFamily="#string/font_family_universal"
android:gravity="center"
android:padding="20dp"
android:text="hello world"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="25dp"
android:textStyle="normal"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
screenshot of above code:
Remember its a sample code change background path accordingly and other properties.Here there is image and above it there is textview as required.

try to bring your textview on front like this
tv_shimmer_tv_gooffline.bringToFront();

Use SDP. It help me more for such designing to support multiple screen sizes.
SDP - a scalable size unit.
An android SDK that provides a new size unit - sdp (scalable dp). This size unit scales with the screen size. It can help Android developers with supporting multiple screens.
for text views please refer to ssp which is based on the sp size unit for texts.
https://github.com/intuit/sdp

I can't get the button to the bottom of the layout

I'm trying to get the button to the bottom the layout, and it just won't work...
The button is displaying it self on the image that should be above it.
Here is the xml code:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_gravity="center"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp" />
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold" />
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal" />
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:text=""
android:width="600px"
android:maxLines="10"
android:scrollbars = "vertical"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppDesc"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView2"
android:layout_toRightOf="#+id/imageView2" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:layout_toRightOf="#+id/imageView3"
android:visibility="visible" />
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/imageview4"
android:text="Download & Install" />
</RelativeLayout>
</ScrollView>
And the result is:
Thanx upfront.

You used android:layout_alignBottom="#+id/imageview4"
This means you align the bottom of your button with the bottom of your image.
You have to use android:layout_below="#+id/imageview4"
EDIT: I don't say this is the best solution, because of multiple layouts (for optimisation...) but this should work:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_gravity="center"
>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp"/>
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold"/>
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal"/>
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:text=""
android:width="600px"
android:maxLines="10"
android:scrollbars="vertical"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppDesc"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView2"
android:layout_toRightOf="#+id/imageView2"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:layout_toRightOf="#+id/imageView3"
android:visibility="visible"/>
</RelativeLayout>
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Download & Install"/>
</LinearLayout>
</ScrollView>
I added a linear layout in which I put the content, and the button.
Hope this will work.

Do you just want the image that the button is over to shrink in order to make room for it? If so, you need to put the Imageview that contains that image as the very last item in your relative layout. It's going to allocate space for everything but the image, and then give the remaining space to the image, which is why it needs to be last.
Also, I suggest giving your imageViews more informative names than "imageView#", since it's kind of difficult to tell which is which.

You might want to wrap you images in a HorizontalScrollView to maintain full height and width of all your images. I changed a lot of the ViewGroups' widths and heights to accommodate the HorizontalScrollView, finally I set the Button below the images:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fillViewport="true" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp" />
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold" />
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal" />
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:maxLines="10"
android:scrollbars="vertical"
android:text=""
android:width="600px" />
<HorizontalScrollView
android:id="#+id/images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</HorizontalScrollView>
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/images"
android:layout_centerHorizontal="true"
android:text="Download & Install" />
</RelativeLayout>
</ScrollView>
Understand that nesting a HorizontalScrollView inside a ScrollView (or vica versa) does not create a smooth scrolling effect in the x & y directions simultaneously. But you can create this effect as discussed here: Scrollview vertical and horizontal in android.

Categories

Resources