Textview under framelayout overrides with another icons

Question

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>

score 0 · Answer 1 · answered Dec 13 '19 at 08:15

0

You can simply wrap a vertical orientated LinearLayout around each component (button and textview). A much easier way is to start your project with the auto generated layout that Android Studio provides.

answered Dec 13 '19 at 08:15

Captain Allergy

76
10

score 0 · Accepted Answer · answered Dec 13 '19 at 08:29

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>

score 0 · Answer 3 · answered Dec 13 '19 at 08:41

There are several ways to design this layout. On of them is using LinearLayout. Checkout this solution.

 <LinearLayout
    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">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center">

        <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" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center">

        <ImageView
            android:id="@+id/button2"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:background="@drawable/ic_share_black_24dp" />

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

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center">


        <ImageView
            android:id="@+id/downloadimg"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:background="@drawable/ic_file_download_black_24dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="DOWNLOAD"
            android:textColor="@color/white" />

    </LinearLayout>

</LinearLayout>

Textview under framelayout overrides with another icons

3 Answers3