Percentage widths AND overlapping with xml

Question

I'm trying to replicate this:

enter image description here

in my android app. I would like the three textviews to have a percentage based width (33%) across the screen. The triangle is a separate drawable I've created.

The issue is, I can create the percentage width in a LinearLayout, but I can't have nicely overlapping view in a LinearLayout- the Basic Info textview should be behind the triangle.

Below is the code I've got working without the triangle:

Styles:

<style name="status_selected_textview">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">@dimen/standard_line_height</item>
    <item name="android:layout_weight">0.33</item>
    <item name="android:gravity">center</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">@dimen/font_size_medium</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:padding">5dp</item>
    <item name="android:background">@color/green</item>
</style>

<style name="status_unselected_textview">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">@dimen/standard_line_height</item>
    <item name="android:layout_weight">0.33</item>
    <item name="android:gravity">center</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">@dimen/font_size_medium</item>
    <item name="android:textColor">@color/gray</item>
    <item name="android:padding">5dp</item>
    <item name="android:background">@color/light_header</item>
</style>

Layout:

<LinearLayout 
    android:id="@+id/activate_key_status_header"
    android:layout_below="@+id/activate_key_header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:backround="@color/light_header">

    <TextView
        android:id="@+id/activate_key_textview"
        android:text="Activate Key"
        style="@style/status_selected_textview"/>


    <TextView
        style="@style/status_unselected_textview"
        android:text="Basic Info" />

    <TextView
        android:text="Edit Profile"
        style="@style/status_unselected_textview"/>


</LinearLayout>

Here is the code for my triangle that I'm trying to add somehow:

<View
        android:layout_toRightOf="@+id/activate_key_textview"
        android:layout_width="@dimen/standard_line_height"
        android:layout_height="@dimen/standard_line_height"
        android:background="@drawable/arrow_right" />

It seems like the solution is somehow a combo of a RelativeLayout and LinearLayout, but I can't seem to find the right way.

Any thoughts?

Nelaina · Accepted Answer · 2014-03-24 15:39:15Z

1

Can you wrap the 2nd TextView in a FrameLayout, and add the triangle view to it 2nd? That plus an android:gravity left would do it, I would think.

Something like this:

<FrameLayout
<!-- Whatever styles you need to make it fit 33%-->
    >
    <TextView
        style="@style/status_unselected_textview"
        android:text="Basic Info" />

    <View
        android:gravity="left"
        android:layout_width="@dimen/standard_line_height"
        android:layout_height="@dimen/standard_line_height"
        android:background="@drawable/arrow_right" />

</FrameLayout>

answered Mar 24, 2014 at 15:39

Nelaina

17.9k29 gold badges119 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Percentage widths AND overlapping with xml

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related