Skip to content

Instantly share code, notes, and snippets.

@blackiedm
Forked from nickbutcher/1 search_bar.xml
Last active August 29, 2015 14:16
Show Gist options
  • Select an option

  • Save blackiedm/1db7cccea971724acdd9 to your computer and use it in GitHub Desktop.

Select an option

Save blackiedm/1db7cccea971724acdd9 to your computer and use it in GitHub Desktop.

Revisions

  1. @nickbutcher nickbutcher revised this gist Feb 26, 2015. 6 changed files with 6 additions and 7 deletions.
    2 changes: 1 addition & 1 deletion 1 search_bar.xml
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <?xml version="1.0" encoding="utf-8"?>
    <!--
    Copyright 2015 Google Inc.
    Copyright (C) 2015 The Android Open Source Project
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    2 changes: 1 addition & 1 deletion 2 anim_search_to_bar.xml
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <?xml version="1.0" encoding="utf-8"?>
    <!--
    Copyright 2015 Google Inc.
    Copyright (C) 2015 The Android Open Source Project
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    2 changes: 1 addition & 1 deletion 3 anim_search_empty.xml
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <?xml version="1.0" encoding="utf-8"?>
    <!--
    Copyright 2015 Google Inc.
    Copyright (C) 2015 The Android Open Source Project
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    2 changes: 1 addition & 1 deletion 4 anim_bar_fill.xml
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <?xml version="1.0" encoding="utf-8"?>
    <!--
    Copyright 2015 Google Inc.
    Copyright (C) 2015 The Android Open Source Project
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    2 changes: 1 addition & 1 deletion 5 activity_main.xml
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <?xml version="1.0" encoding="utf-8"?>
    <!--
    Copyright 2015 Google Inc.
    Copyright (C) 2015 The Android Open Source Project
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    3 changes: 1 addition & 2 deletions 6 MainActivity.java
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    /*
    * Copyright 2015 Google Inc.
    * Copyright (C) 2015 The Android Open Source Project
    *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
    @@ -25,7 +25,6 @@
    import android.widget.ImageView;
    import android.widget.TextView;


    public class MainActivity extends Activity {

    private ImageView iv;
  2. @nickbutcher nickbutcher renamed this gist Feb 26, 2015. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.
  3. @nickbutcher nickbutcher revised this gist Feb 26, 2015. 6 changed files with 177 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions 1 search_bar.xml
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,19 @@
    <?xml version="1.0" encoding="utf-8"?>
    <!--
    Copyright 2015 Google Inc.
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    -->

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="150dp"
    15 changes: 15 additions & 0 deletions 2 anim_search_to_bar.xml
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,19 @@
    <?xml version="1.0" encoding="utf-8"?>
    <!--
    Copyright 2015 Google Inc.
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    -->

    <animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    15 changes: 15 additions & 0 deletions 3 anim_search_empty.xml
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,19 @@
    <?xml version="1.0" encoding="utf-8"?>
    <!--
    Copyright 2015 Google Inc.
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    -->

    <objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    15 changes: 15 additions & 0 deletions 4 anim_bar_fill.xml
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,19 @@
    <?xml version="1.0" encoding="utf-8"?>
    <!--
    Copyright 2015 Google Inc.
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    -->

    <objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    46 changes: 46 additions & 0 deletions 5 activity_main.xml
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    <?xml version="1.0" encoding="utf-8"?>
    <!--
    Copyright 2015 Google Inc.
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    -->

    <FrameLayout
    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:background="?android:colorPrimary"
    tools:context=".MainActivity"
    android:onClick="animate">

    <ImageView
    android:id="@+id/search"
    android:layout_gravity="center"
    android:layout_width="150dp"
    android:layout_height="24dp"
    android:src="@drawable/search_bar"
    android:onClick="animate" />

    <EditText
    android:id="@+id/text"
    android:layout_width="150dp"
    android:layout_height="22dp"
    android:layout_gravity="center"
    android:background="@null"
    android:textSize="12sp"
    android:paddingStart="4dp"
    android:textColor="?android:colorAccent"
    android:alpha="0" />

    </FrameLayout>
    71 changes: 71 additions & 0 deletions MainActivity.java
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    /*
    * Copyright 2015 Google Inc.
    *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
    * You may obtain a copy of the License at
    *
    * http://www.apache.org/licenses/LICENSE-2.0
    *
    * Unless required by applicable law or agreed to in writing, software
    * distributed under the License is distributed on an "AS IS" BASIS,
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    * See the License for the specific language governing permissions and
    * limitations under the License.
    */

    package com.android.example.searchbar;

    import android.app.Activity;
    import android.graphics.drawable.AnimatedVectorDrawable;
    import android.os.Bundle;
    import android.view.View;
    import android.view.animation.AnimationUtils;
    import android.view.animation.Interpolator;
    import android.widget.ImageView;
    import android.widget.TextView;


    public class MainActivity extends Activity {

    private ImageView iv;
    private TextView text;
    private AnimatedVectorDrawable searchToBar;
    private AnimatedVectorDrawable barToSearch;
    private float offset;
    private Interpolator interp;
    private int duration;
    private boolean expanded = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    iv = (ImageView) findViewById(R.id.search);
    text = (TextView) findViewById(R.id.text);
    searchToBar = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim_search_to_bar);
    barToSearch = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim_bar_to_search);
    interp = AnimationUtils.loadInterpolator(this, android.R.interpolator.linear_out_slow_in);
    duration = getResources().getInteger(R.integer.duration_bar);
    // iv is sized to hold the search+bar so when only showing the search icon, translate the
    // whole view left by half the difference to keep it centered
    offset = -71f * (int) getResources().getDisplayMetrics().scaledDensity;
    iv.setTranslationX(offset);
    }

    public void animate(View view) {

    if (!expanded) {
    iv.setImageDrawable(searchToBar);
    searchToBar.start();
    iv.animate().translationX(0f).setDuration(duration).setInterpolator(interp);
    text.animate().alpha(1f).setStartDelay(duration - 100).setDuration(100).setInterpolator(interp);
    } else {
    iv.setImageDrawable(barToSearch);
    barToSearch.start();
    iv.animate().translationX(offset).setDuration(duration).setInterpolator(interp);
    text.setAlpha(0f);
    }
    expanded = !expanded;
    }
    }
  4. @nickbutcher nickbutcher revised this gist Feb 26, 2015. 4 changed files with 0 additions and 0 deletions.
    File renamed without changes.
    File renamed without changes.
    File renamed without changes.
    File renamed without changes.
  5. @nickbutcher nickbutcher created this gist Feb 26, 2015.
    10 changes: 10 additions & 0 deletions anim_bar_fill.xml
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <?xml version="1.0" encoding="utf-8"?>

    <objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="trimPathStart"
    android:valueFrom="1"
    android:valueTo="0"
    android:valueType="floatType"
    android:duration="@integer/duration_bar"
    android:interpolator="@android:interpolator/linear_out_slow_in" />
    10 changes: 10 additions & 0 deletions anim_search_empty.xml
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <?xml version="1.0" encoding="utf-8"?>

    <objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="trimPathStart"
    android:valueFrom="0"
    android:valueTo="1"
    android:valueType="floatType"
    android:duration="@integer/duration_search"
    android:interpolator="@android:interpolator/fast_out_slow_in" />
    15 changes: 15 additions & 0 deletions anim_search_to_bar.xml
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    <?xml version="1.0" encoding="utf-8"?>

    <animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/search_bar">

    <target
    android:name="search"
    android:animation="@animator/anim_search_empty" />

    <target
    android:name="bar"
    android:animation="@animator/anim_bar_fill" />

    </animated-vector>
    22 changes: 22 additions & 0 deletions search_bar.xml
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    <?xml version="1.0" encoding="utf-8"?>

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="150dp"
    android:height="24dp"
    android:viewportWidth="150"
    android:viewportHeight="24">
    <path
    android:name="search"
    android:pathData="@string/path_search"
    android:strokeWidth="2"
    android:strokeColor="#ffffff"
    android:strokeAlpha="0.8"
    android:strokeLineCap="round" />
    <path
    android:name="bar"
    android:pathData="M0,23 L149,23"
    android:strokeWidth="2"
    android:strokeColor="#ffffff"
    android:strokeAlpha="0.8"
    android:strokeLineCap="square" />
    </vector>