Search code examples
androidandroid-layouttextviewandroid-framelayout

Textview under framelayout overrides with another icons


I want my layout to look like this:

image description here

I used framelayout for this. The icons fit well but how can I fit the text as well? I tried textview but it overrides. Any help will be appreciated.

Here is my code so far:

    <FrameLayout
        android:id="@+id/fl_footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#565858"
        android:padding="20dp">

        <Button
            android:id="@+id/button1"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="center"
            android:background="@drawable/ic_wallpaper_black_24dp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SET"
            android:textColor="@color/white"
            ></TextView>

        <Button
            android:id="@+id/button2"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="end|center_vertical"

            android:background="@drawable/ic_share_black_24dp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:text="SHARE"/>

        <ImageButton
            android:id="@+id/downloadimg"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="start|center_vertical"
            android:background="@drawable/ic_file_download_black_24dp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:text="DOWNLOAD"/>

    </FrameLayout>

Solution

  • There are several ways to design this layout. On of them is using ConstraintLayout. You can try this solution.

    <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/fl_footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#565858"
        android:paddingTop="20dp"
        android:paddingBottom="20dp"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    
        <Button
            android:id="@+id/button1"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="center"
            app:layout_constraintStart_toStartOf="@id/tvSet"
            app:layout_constraintEnd_toEndOf="@id/tvSet"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@drawable/ic_wallpaper_black_24dp" />
    
        <TextView
            android:id="@+id/tvSet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SET"
            android:textColor="@color/white"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/button1"/>
    
    
        <Button
            android:id="@+id/button2"
            android:layout_width="35dp"
            android:layout_height="35dp"
            app:layout_constraintEnd_toEndOf="@id/tvShare"
            app:layout_constraintStart_toStartOf="@id/tvShare"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@drawable/ic_share_black_24dp"/>
    
        <TextView
            android:id="@+id/tvShare"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:text="SHARE"
            android:layout_marginEnd="20dp"
            app:layout_constraintTop_toBottomOf="@id/button2"
            app:layout_constraintEnd_toEndOf="parent"/>
    
        <ImageButton
            android:id="@+id/downloadimg"
            android:layout_width="35dp"
            android:layout_height="35dp"
            app:layout_constraintStart_toStartOf="@id/tvDownload"
            app:layout_constraintEnd_toEndOf="@id/tvDownload"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@drawable/ic_file_download_black_24dp" />
    
        <TextView
            android:id="@+id/tvDownload"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:text="DOWNLOAD"
            android:layout_marginStart="20dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/downloadimg"/>
    
    </androidx.constraintlayout.widget.ConstraintLayout>