Android - Search - Search icon and clear button + UI background matches design

This commit is contained in:
Cristian Luis Duarte 2018-04-23 13:16:27 -03:00
parent 5499787385
commit 8e7d14a8e3
6 changed files with 66 additions and 15 deletions

View file

@ -1,7 +1,6 @@
package io.highfidelity.hifiinterface;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
@ -19,6 +18,7 @@ import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;
import io.highfidelity.hifiinterface.view.DomainAdapter;
@ -41,6 +41,9 @@ public class HomeActivity extends AppCompatActivity implements NavigationView.On
private NavigationView mNavigationView;
private RecyclerView mDomainsView;
private TextView searchNoResultsView;
private ImageView mSearchIconView;
private ImageView mClearSearch;
private EditText mSearchView;
@Override
protected void onCreate(Bundle savedInstanceState) {
@ -94,16 +97,11 @@ public class HomeActivity extends AppCompatActivity implements NavigationView.On
});
mDomainsView.setAdapter(mDomainAdapter);
EditText searchView = findViewById(R.id.searchView);
int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
View searchPlate = searchView.findViewById(searchPlateId);
if (searchPlate != null) {
searchPlate.setBackgroundColor (Color.TRANSPARENT);
int searchTextId = searchPlate.getContext ().getResources ().getIdentifier ("android:id/search_src_text", null, null);
TextView searchTextView = searchView.findViewById(searchTextId);
searchTextView.setTextAppearance(R.style.SearchText);
}
searchView.addTextChangedListener(new TextWatcher() {
mSearchView = findViewById(R.id.searchView);
mSearchIconView = findViewById(R.id.search_mag_icon);
mClearSearch = findViewById(R.id.search_clear);
mSearchView.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}
@ -113,11 +111,18 @@ public class HomeActivity extends AppCompatActivity implements NavigationView.On
@Override
public void afterTextChanged(Editable editable) {
mDomainAdapter.loadDomains(editable.toString());
if(editable.length()>0) {
mSearchIconView.setVisibility(View.GONE);
mClearSearch.setVisibility(View.VISIBLE);
} else {
mSearchIconView.setVisibility(View.VISIBLE);
mClearSearch.setVisibility(View.GONE);
}
}
});
searchView.setOnKeyListener((view, i, keyEvent) -> {
mSearchView.setOnKeyListener((view, i, keyEvent) -> {
if (i == KeyEvent.KEYCODE_ENTER) {
String urlString = searchView.getText().toString();
String urlString = mSearchView.getText().toString();
if (!urlString.trim().isEmpty()) {
urlString = HifiUtils.getInstance().sanitizeHifiUrl(urlString);
}
@ -126,6 +131,7 @@ public class HomeActivity extends AppCompatActivity implements NavigationView.On
}
return false;
});
updateLoginMenu();
}
@ -215,4 +221,8 @@ public class HomeActivity extends AppCompatActivity implements NavigationView.On
public void onBackPressed() {
finishAffinity();
}
public void onSearchClear(View view) {
mSearchView.setText("");
}
}

View file

@ -79,6 +79,7 @@ public class UserStoryDomainProvider implements DomainProvider {
true,
mProtocol,
pageNumber);
Log.d("API-USER-STORY-DOMAINS", "Protocol [" + mProtocol + "] include_actions [" + INCLUDE_ACTIONS_FOR_PLACES + "]");
userStories.enqueue(new retrofit2.Callback<UserStories>() {
@Override
public void onResponse(Call<UserStories> call, Response<UserStories> response) {

View file

@ -0,0 +1,12 @@
<vector android:height="24dp" android:viewportHeight="15.0"
android:viewportWidth="15.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#404040" android:pathData="M7.5,7.5m-7.5,0a7.5,7.5 0,1 1,15 0a7.5,7.5 0,1 1,-15 0"/>
<path android:fillColor="#00000000"
android:pathData="M4.683,4.583L10,10.27"
android:strokeColor="#E3E3E3" android:strokeLineCap="round"
android:strokeLineJoin="bevel" android:strokeWidth="1"/>
<path android:fillColor="#00000000"
android:pathData="M10,4.73L4.683,10.417"
android:strokeColor="#E3E3E3" android:strokeLineCap="round"
android:strokeLineJoin="bevel" android:strokeWidth="1"/>
</vector>

View file

@ -0,0 +1,4 @@
<vector android:height="24dp" android:viewportHeight="18.0"
android:viewportWidth="18.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#F2F2F2" android:fillType="evenOdd" android:pathData="M12.5,11L11.7,11L11.4,10.7C12.4,9.6 13,8.1 13,6.5C13,2.9 10.1,0 6.5,0C2.9,0 0,2.9 0,6.5C0,10.1 2.9,13 6.5,13C8.1,13 9.6,12.4 10.7,11.4L11,11.7L11,12.5L16,17.5L17.5,16L12.5,11ZM6.5,11C4,11 2,9 2,6.5C2,4 4,2 6.5,2C9,2 11,4 11,6.5C11,9 9,11 6.5,11Z"/>
</vector>

View file

@ -17,13 +17,37 @@
android:background="@drawable/search_bg"
android:gravity="center_vertical|end"
android:paddingStart="32dp"
android:paddingEnd="32dp"
android:paddingEnd="56dp"
android:fontFamily="@font/raleway"
android:hint="@string/search_hint"
android:inputType="textUri"
android:imeOptions="actionGo"
/>
<ImageView
android:id="@+id/search_mag_icon"
android:layout_width="24dp"
android:layout_height="24dp"
app:layout_constraintEnd_toEndOf="@id/searchView"
app:layout_constraintTop_toTopOf="@id/searchView"
app:layout_constraintBottom_toBottomOf="@id/searchView"
android:layout_marginEnd="25.5dp"
android:src="@drawable/ic_search"
/>
<ImageView
android:id="@+id/search_clear"
android:layout_width="20dp"
android:layout_height="20dp"
app:layout_constraintEnd_toEndOf="@id/searchView"
app:layout_constraintTop_toTopOf="@id/searchView"
app:layout_constraintBottom_toBottomOf="@id/searchView"
android:layout_marginEnd="25.5dp"
android:visibility="gone"
android:src="@drawable/ic_clear"
android:onClick="onSearchClear"
/>
<TextView
android:id="@+id/searchNoResultsView"
android:layout_width="wrap_content"

View file

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="white_opaque">#ffffff</color>
<color name="colorPrimary">#272727</color>
<color name="colorPrimary">@color/backgroundLight</color>
<color name="colorPrimaryDark">#000000</color>
<color name="colorAccent">#54D7FD</color>
<color name="backgroundEditText">#E3E3E3</color>