CODEWITHSUNDEEP
androidandroid-linearlayoutoverlapping
Andrew
Andrew

Reputation: 2157

How to make this design android?

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?

Upvotes: 0

Views: 98

Answers (3)

Viswas Kg
Viswas Kg

Reputation: 245

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.

Upvotes: 1

Shubham Mahalkar
Shubham Mahalkar

Reputation: 13

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>

Upvotes: 1

Ruchit Patel
Ruchit Patel

Reputation: 69

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.

Upvotes: 1

Related Questions