0

I have this design:

enter image description here

and I can't imagine how to create smth like that. At the beginning I used bottomNavgationview, but it didn't help me because I can't make that overlapping of selected item and align text at the item. Now, I have created my own view which is based on linearLayout:

<LinearLayout
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_marginTop="5dp"
        android:background="@color/white">

        <TextView
            android:id="@+id/received"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_weight="6"
            android:gravity="center"
            android:layout_gravity="end"
            android:textColor="#565D63"
            android:fontFamily="@font/opensans_semibold"
            android:text="@string/received"
            android:textAlignment="center" />

        <TextView
            android:id="@+id/sent"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_weight="6"
            android:gravity="center"
            android:textColor="#565D63"
            android:fontFamily="@font/opensans_semibold"
            android:text="@string/sent"
            android:textAlignment="center" />

        <TextView
            android:id="@+id/draft"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_weight="6"
            android:textColor="#565D63"
            android:fontFamily="@font/opensans_semibold"
            android:gravity="center"
            android:text="@string/drafts"

            android:textAlignment="center" />

    </LinearLayout>

and I tried to set translationZ programmatically, but I didn't manage to reach my design. I have some thought about framelayout from this and this questions but it didn't help me. Maybe someone know how I can solve my problem?

Andrew
  • 1,947
  • 2
  • 23
  • 61

3 Answers3

1

I have modified your code a little bit this should help. 

 <LinearLayout
            android:id="@+id/navigation_view"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:layout_marginTop="5dp"
            android:background="@color/white">

            <TextView
                android:id="@+id/received"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="6"
                android:gravity="center"
                android:layout_gravity="end"
                android:textColor="#565D63"
                android:fontFamily="@font/opensans_semibold"
                android:text="@string/received"
                android:textAlignment="center" />

            <TextView
                android:id="@+id/sent"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="6"
                android:gravity="center"
                android:textColor="#565D63"
                android:fontFamily="@font/opensans_semibold"
                android:text="@string/sent"
                android:textAlignment="center" />

            <TextView
                android:id="@+id/draft"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="6"
                android:textColor="#565D63"
                android:fontFamily="@font/opensans_semibold"
                android:gravity="center"
                android:text="@string/drafts"
                android:textAlignment="center" />

        </LinearLayout>

This code will create all textviews matching the height of your linear layout now after that you can set background color of a textview by default as per your design and if on click is being used then you can do that too.

Ruchit Patel
  • 69
  • 6
  • it didn't solve my problem, view is really strange :( – Andrew Apr 10 '19 at 09:23
  • show me your screen shots you can comment here inside this answer with link of your screenshot – Ruchit Patel Apr 10 '19 at 10:12
  • The height of that linear layout is 180, that is a lot. If you set it to ~50 you get the correct 'tab' height. Then if you want to make text background red, you probably want to wrap each textview in a FrameLayout. Or look into using androids native TabHost and TabWidget, I think their default look is somewhat similar. – IcedLance Apr 11 '19 at 10:22
1

enter image description here 

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_gravity="center"
            android:textColor="#000"
            android:gravity="center"
            android:text="dsgd"
            android:background="#F9E79F"
            android:layout_height="match_parent" />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="2"
            android:textColor="#000"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="dsgd"
            android:layout_height="match_parent" />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="2"
            android:textColor="#000"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="dsgd"
            android:layout_height="match_parent" />

</LinearLayout>
Shubham Mahalkar
  • 13
  • 4
1

Try this one.

 <LinearLayout
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:layout_marginTop="5dp"
        android:orientation="horizontal"
        android:background="@color/white">

        <TextView
            android:id="@+id/received"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="6"
            android:gravity="center"
            android:layout_gravity="end"
            android:textColor="#565D63"
            android:fontFamily="@font/opensans_semibold"
            android:text="@string/received"
            android:textAlignment="center" />

        <TextView
            android:id="@+id/sent"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="6"
            android:gravity="center"
            android:textColor="#565D63"
            android:fontFamily="@font/opensans_semibold"
            android:text="@string/sent"
            android:textAlignment="center" />

        <TextView
            android:id="@+id/draft"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="6"
            android:textColor="#565D63"
            android:fontFamily="@font/opensans_semibold"
            android:gravity="center"
            android:text="@string/drafts"
            android:textAlignment="center" />

    </LinearLayout>

Hope it helps!!!

I think you forgot to add orientation in the parent layout.

Viswas Kg
  • 245
  • 1
  • 13