Ligne personnalisée avec ImageView circulaire et textview en android

Question

J'essaie de créer une ligne personnalisée pour mon RecyclerView. Voici ma commande la mise en page de la ligne:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 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="180dp" 
    android:layout_margin="5dp" 
    android:background="#00000000"> 

    <FrameLayout 
     android:id="@+id/customLevelLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

      <ImageView 
       android:id="@+id/levelImage" 
       android:layout_width="160dp" 
       android:layout_height="160dp" 
       android:layout_above="@+id/gameText" 
       android:layout_centerInParent="true" 
       android:scaleType="fitXY" 
       android:src="@drawable/circular_background" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_centerInParent="true" 
       android:text="1" 
       android:textColor="#fff" 
       android:textSize="45sp" /> 

      <TextView 
       android:id="@+id/gameText" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_alignParentBottom="true" 
       android:layout_centerHorizontal="true" 
       android:layout_marginTop="10dp" 
       android:gravity="center" 
       android:textColor="#000" 
       tools:text="Tracing" /> 
     </RelativeLayout> 

     <ProgressBar 
      android:id="@+id/gameProgressBar" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="#fff" 
      android:indeterminate="true" 
      android:padding="45dp" 
      android:visibility="gone" /> 
    </FrameLayout> 

    <ImageView 
     android:id="@+id/lockImage" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@drawable/lock_background" 
     android:padding="45dp" 
     android:src="@drawable/lock" 
     android:visibility="gone" /> 
</RelativeLayout> 

Voici comment il ressemble:

Le problème est, je dois définir une hauteur prédéfinie de la ligne personnalisée i.e. 170dp actuellement. Je suis confronté à 2 problèmes à cause de cela:

1) Si j'ouvre l'application dans un petit écran ou une tablette. La rangée personnalisée est laide, je perds la forme circulaire de ImageView.

2) Le texte ne reste pas au centre s'il y a un léger changement de disposition.

Answer 1

Essayez ceci dans votre code.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 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="wrap_content" 
      android:layout_margin="5dp" 
      android:background="#00000000"> 

<FrameLayout 
    android:id="@+id/customLevelLayout" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

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

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

      <ImageView 
       android:id="@+id/levelImage" 
       android:layout_width="160dp" 
       android:layout_height="160dp" 
       android:layout_centerInParent="true" 
       android:scaleType="fitXY" 
       android:src="@drawable/circular_background" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_centerInParent="true" 
       android:gravity="center" 
       android:text="1" 
       android:textColor="#fff" 
       android:textSize="45sp"/> 
     </RelativeLayout> 


     <TextView 
      android:id="@+id/gameText" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      android:layout_marginTop="10dp" 
      android:gravity="center" 
      android:textColor="#000" 
      tools:text="Tracing"/> 
    </LinearLayout> 

    <ProgressBar 
     android:id="@+id/gameProgressBar" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#fff" 
     android:indeterminate="true" 
     android:padding="45dp" 
     android:visibility="gone"/> 
</FrameLayout> 

<ImageView 
    android:id="@+id/lockImage" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@drawable/lock_background" 
    android:padding="45dp" 
    android:src="@drawable/lock" 
    android:visibility="gone" /> 
</RelativeLayout> 

Answer 2

Utilisez Contraindre la mise en page qui vous aide à définir l'image comme vous voulez juste par glisser-déposer et ajouter contraignent

Answer 3

Pour supporter plusieurs écrans. D'abord, vous devez passer par ce lien enter link description here

Une fois que vous fixer la première question, la deuxième question sera également obtenir fixer

Answer 4

essayer. Vous pouvez utiliser Linearlayout en tant que root que pour l'image et le texte utilisent RelativeLayout

<?xml version="1.0" encoding="utf-8"?> 
    <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:layout_margin="5dp" 
    android:background="#00000000" 
    android:orientation="vertical"> 

    <FrameLayout 
     android:id="@+id/customLevelLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

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

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 

       <ImageView 
        android:id="@+id/levelImage" 
        android:layout_width="160dp" 
        android:layout_height="160dp" 
        android:layout_centerInParent="true" 
        android:scaleType="fitXY" 
        android:src="@drawable/circular_background" /> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_centerInParent="true" 
        android:text="1" 
        android:textColor="#fff" 
        android:textSize="45sp" /> 

      </RelativeLayout> 

      <TextView 
       android:id="@+id/gameText" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_alignParentBottom="true" 
       android:layout_centerHorizontal="true" 
       android:layout_margin="10dp" 
       android:gravity="center" 
       android:textColor="#000" 
       tools:text="Tracing" /> 
     </LinearLayout> 

     <ProgressBar 
      android:id="@+id/gameProgressBar" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="#fff" 
      android:indeterminate="true" 
      android:padding="45dp" 
      android:visibility="gone" /> 
    </FrameLayout> 

    <ImageView 
     android:id="@+id/lockImage" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@drawable/lock_background" 
     android:padding="45dp" 
     android:src="@drawable/lock" 
     android:visibility="gone" /> 
</LinearLayout>