GridView с изображением и текстом по центру

Question

Привет, я хочу развить этот тип макета, но я запутался в том, что это gridview или imagesviews выровнены так. Ну мой вопрос, как я могу добиться этого типа меню в моем фрагменте, в котором я работаю

После Реализация Gridview от https://www.learn2crack.com/2014/01/android-custom-gridview.html

я получил это как экран

Как я могу заставить gridView выглядеть на первом изображении?

как текст в центре блока, я действительно хочу его достичь.

grid_single.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:padding="5dp" > 

    <ImageView 
     android:id="@+id/grid_image" 
     android:layout_width="match_parent" 
     android:src="@drawable/denist_3" 
     android:layout_height="50dp"> 
    </ImageView> 

    <TextView 
     android:id="@+id/grid_text" 

     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="15dp" 
     android:layout_gravity="center" 
     android:text="Dentist" 
     android:textSize="9sp" > 
    </TextView> 

</LinearLayout> 

main_act.xml:

<RelativeLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
     <GridView 
     android:numColumns="auto_fit" 
     android:layout_below="@+id/comsp" 
     android:gravity="center" 
     android:columnWidth="150dp" 
     android:stretchMode="columnWidth" 
     android:layout_width="fill_parent" 
     android:layout_height="600dp" 
     android:id="@+id/grid" 
     /> 

</RelativeLayout> 

Adapterclass.java

public class CustomGrid extends BaseAdapter{ 
    private Context mContext; 
    private final String[] web; 
    private final int[] Imageid; 

    public CustomGrid(Context c,String[] web,int[] Imageid) { 
     mContext = c; 
     this.Imageid = Imageid; 
     this.web = web; 
    } 

    @Override 
    public int getCount() { 
     // TODO Auto-generated method stub 
     return web.length; 
    } 

    @Override 
    public Object getItem(int position) { 
     // TODO Auto-generated method stub 
     return null; 
    } 

    @Override 
    public long getItemId(int position) { 
     // TODO Auto-generated method stub 
     return 0; 
    } 

    @Override 
    public View getView(int position, View convertView, ViewGroup parent) { 
     // TODO Auto-generated method stub 
     View grid; 
     LayoutInflater inflater = (LayoutInflater) mContext 
       .getSystemService(Context.LAYOUT_INFLATER_SERVICE); 

     if (convertView == null) { 

      grid = new View(mContext); 
      grid = inflater.inflate(R.layout.grid_single, null); 
      TextView textView = (TextView) grid.findViewById(R.id.grid_text); 
      ImageView imageView = (ImageView)grid.findViewById(R.id.grid_image); 
      textView.setText(web[position]); 
      imageView.setImageResource(Imageid[position]); 
     } else { 
      grid = (View) convertView; 
     } 

     return grid; 
    } 
} 

Mainactivity.java

 CustomGrid adapter = new CustomGrid(getActivity(), web, imageId); 

grid=(GridView)v.findViewById(R.id.grid); 
grid.setAdapter(adapter); 
     grid.setOnItemClickListener(new AdapterView.OnItemClickListener() { 

      @Override 
      public void onItemClick(AdapterView<?> parent, View view, 
            int position, long id) { 
       Toast.makeText(getActivity(), "You Clicked at " +web[+ position], Toast.LENGTH_SHORT).show(); 

      } 
     }); 

Answer 1

Чтобы получить макет наложения, вы можете использовать FrameLayout, поскольку это мнение ребенка будет складываться друг на друг. В вашем случае ваш item_layout.xml будет выглядеть так:

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

    <ImageView 
     android:id="@+id/ivBackground" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:src="@drawable/myimage"/> 

    <TextView 
     android:id="@+id/tvOverlayText" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:text="@string/mytext" 
     android:gravity="center"/> 

</FrameLayout> 

Answer 2

Ваш файл XML является слишком сложным. Вы можете добиться этого, просто используя GridView в макете активности/фрагмента. Тогда вам понадобится специальный класс адаптера для вашего Gridview, чтобы надуть еще один XML-файл, который будет содержать только одно изображение и текстовое представление. Вы можете по этой ссылке, чтобы вы начали с GridView: https://www.learn2crack.com/2014/01/android-custom-gridview.html