Fabian Günter Fabian Günter - 4 months ago 33
Android Question

android custom searchView rounded corners

I want to create an Activity with a SearchView that is not in the ActionBar (in fact, I'm using the NoActionBar theme). Now I want this SearchView to have rounded corners (not the EditText inside the actual SearchView, but the SearchView itself),

like this: Mockup

All I can manage is this: actual SearchView.

Can somebody hint me to what I have to change?
XML of the Activity:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="@color/theBlue">

<SearchView
android:id="@+id/search_view"
android:layout_width="1000dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:background="@drawable/bg_white_rounded"
android:clickable="true"/>
</RelativeLayout>




Code of drawable/bg_white_rounded.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff"/>
<corners android:radius="10dp"/>
<padding android:left="0dp"
android:bottom="0dp"
android:right="0dp"
android:top="0dp"/>
</shape>


Code of the Activity:

public class MainActivity extends AppCompatActivity {

SearchView searchView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// Get search view and modify it to our needs
searchView = (SearchView) findViewById(R.id.search_view);
searchView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
searchView.onActionViewExpanded();
}
});
//int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
//int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_badge", null, null);
View searchPlate = searchView.findViewById(searchPlateId);
//View searchPlate = searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
searchPlate.setBackgroundResource(R.drawable.bg_white_rounded);
}
}


The commented lines are things I've already tried but didn't work.
Thanks!

Answer

While rajan ks (Thanks!) answer works, it doesn't resemble the design mockup a 100% (the padding naturally increases the SearchView's size while not increasing the contained EditText's size).

The solution I found is this: In the MainActivity.java, change search_edit_frame, search_plate and search_bar:

    int searchFrameId = searchView.getContext().getResources().getIdentifier("android:id/search_edit_frame", null, null);
    View searchFrame = searchView.findViewById(searchFrameId);
    searchFrame.setBackgroundResource(R.drawable.bg_white_rounded);

    int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
    View searchPlate = findViewById(searchPlateId);
    searchPlate.setBackgroundResource(R.drawable.bg_white_rounded);

    int searchBarId = searchView.getContext().getResources().getIdentifier("android:id/search_bar", null, null);
    View searchBar = findViewById(searchBarId);
    searchBar.setBackgroundResource(R.drawable.bg_white_rounded);

That results in the SearchView looking exactly like the mockup.