Search code examples
androidandroid-layouttextviewimageviewandroid-linearlayout

Center image view and text view in linear layout

I want the search text below the search icon. The search icon + text group should be centered on the screen.

What I want:____________What the screen actually looks like:

enter image description here enter image description here

Note: I used Linear Layout because I need the List View directly underneath. It will be used for the search bar. For those suggesting using TextView's android:drawableTop, I tried that but the image is so small (even when I set the image to 500px) vs when I set the image as "100dpx100dp" in an image view.

Code

<LinearLayout 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"
    android:orientation="vertical">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_horizontal"
            app:srcCompat="@drawable/ic_search_gray_500px" />

        <TextView
            android:id="@+id/searchTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/search_hint"
            android:layout_gravity="center_horizontal"
            tools:layout_editor_absoluteX="130dp"
            tools:text="@string/search_hint" />

    </android.support.constraint.ConstraintLayout>

    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>

Reference

Solution

  • Below code will solve your issue :

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/app_logo_main" />

            <TextView
                android:id="@+id/searchTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Search"
                android:textAlignment="center"
                android:textColor="@color/colorPrimary" />

        </LinearLayout>

    </RelativeLayout>