Search bar on top

Question

Search bar on top

I am trying to implement a search bar on top of a view, for example in the Google Play Music app. I couldn't find an answer for this anywhere. I tried negative marginBottom but the thumb was cut off. I found a similar post on SO SeekBar at the top of the layout in Android but with no answer so had to post this. Please help. The figurative image from Google reproduces the music below.

 <FrameLayout
    android:id="@+id/rl_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <ViewPager
        android:id="@+id/album_art_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


       <SeekBar
        android:id="@+id/songProgressBar1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="-5dp"
        android:layout_marginLeft="-5dp"
        android:layout_gravity="bottom"
        android:layout_marginBottom="-5dp"
        android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_dark"
        android:thumb= "@drawable/seekbar_thumb"
        />

    <!--<View
    <!--    android:layout_width="match_parent"
     <!--   android:layout_height="1dp"
    <!--    android:layout_gravity="bottom"
    <!--    android:background="@android:color/transparent"
     <!--   />   // Commenting this as this is not bottom view in my case

</FrameLayout>

Bottom view:

 <RelativeLayout
    android:id="@+id/player_footer_bg"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"

    android:layout_below="@+id/rl_pager">

    <ImageButton
        android:id="@+id/btnPlay"
        android:layout_width="@dimen/audio_player_btn_play_dimensions"
        android:layout_height="@dimen/audio_player_btn_play_dimensions"
        android:layout_marginBottom="10dp"
        android:background="@null"
        android:contentDescription="@string/play"
        android:src="@drawable/play"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />


    <ImageButton
        android:id="@+id/btnNext"
        android:layout_width="@dimen/audio_player_btn_play_dimensions"
        android:layout_height="@dimen/audio_player_btn_play_dimensions"
        android:background="@null"
        android:contentDescription="@string/next"
        android:src="@drawable/ic_skip_white"
        android:focusable="true"
        android:scaleType="fitCenter"
        android:layout_alignTop="@+id/btnPlay"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="60dp"
        android:layout_marginEnd="60dp" />


    <ImageButton
        android:id="@+id/btnPrevious"
        android:layout_width="@dimen/audio_player_btn_play_dimensions"
        android:layout_height="@dimen/audio_player_btn_play_dimensions"
        android:background="@null"
        android:contentDescription="@string/next"
        android:src="@drawable/ic_prev_white"
        android:focusable="true"
        android:scaleType="fitCenter"
        android:layout_alignTop="@+id/btnNext"
         android:layout_marginLeft="60dp"
        android:layout_marginStart="60dp" />


</RelativeLayout>

+3

android android-seekbar

SjNerd Jul 27. 15 at 16:42

source to share

1 answer

HexAndBugs · Answer 1 · 2015-07-27T17:58:37+0000

I quickly knocked down the layout to give you an idea of how to do it. I used a simple one View

with background color at the top and bottom of the layout so you can clearly see how it works while SeekBar

overlapping both of them. Then you can replace View

with the top ViewPager

and the bottom with whatever you want at the bottom of the screen. Note that layout_height

the inside FrameLayout

is double negative layout_marginBottom

. These values don't really matter as long as they are large enough to fit your content and the negative margin is half yours layout_height

(for example, you could just set layout_height="50dp"

andlayout_marginBottom="-25dp". on the

FrameLayout` and it will still look right, although you don't want them to be much larger than necessary as this would create unnecessary strikethrough of overlapping views).

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MyActivity">

    <View
        android:id="@+id/album_art_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottomView"
        android:background="#f00"/>

    <View
        android:id="@+id/bottomView"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="#00f"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_above="@id/bottomView"
        android:layout_alignBottom="@id/album_art_viewpager"
        android:layout_marginBottom="-20dp">

        <SeekBar
            android:id="@+id/songProgressBar1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            />
    </FrameLayout>

</RelativeLayout>

Here's a screenshot showing what it looks like:

Search bar on top

More articles: