CODEWITHSUNDEEP
androidxmluser-interface
Jani
Jani

Reputation: 77

How can I create a vertical line with fixed height in Android XML?

Wanted to create a UI like in this picture, I tried View with background in relative layout , which doesn't work for fixed height, what is the best way to build the left red vertical line in the UI given below ?

UI,I wanted to create

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f5f5f5"
android:orientation="vertical"
tools:ignore="MissingPrefix">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#a9382b">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_marginLeft="14dp"
            android:layout_marginTop="14dp"
            android:layout_marginBottom="14dp"
            android:layout_marginRight="9dp"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/globe"/>

        <TextView
            android:layout_marginTop="9dp"
            android:layout_weight="7"
            android:layout_marginBottom="9dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:textSize="13sp"
            android:textColor="#b3ffffff"
            fontPath="fonts/montserrat-medium.ttf"
            android:letterSpacing="-0.03"
            android:lineSpacingExtra="2sp"
            tools:text="Farmer Suicides, Agitations The Indian Agrarian 
    Crisis"
            />

        <LinearLayout
            android:layout_weight="3"
            android:layout_width="0dp"
            android:layout_marginRight="16dp"
            android:layout_height="wrap_content">
        <Button
            android:layout_width="87dp"
            android:layout_height="32dp"
            android:background="@drawable/button"
            android:text="FOLLOW"
            android:textColor="#FFFFFF"
            fontPath="fonts/montserrat-medium.ttf"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="12dp"
            android:textSize="12sp"
            android:lineSpacingExtra="0sp"
            android:gravity="center_horizontal||center_vertical"
            />
        </LinearLayout>



    </LinearLayout>



</RelativeLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="0dp"
    android:layout_marginTop="17dp"
    android:layout_marginLeft="15dp">

    <LinearLayout
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginRight="15dp">

    <ImageView
        android:layout_gravity="center"
        android:layout_width="10dp"
        android:layout_height="10dp"
      android:background="@drawable/ic_radio_button_unchecked_black_24dp"
        />


    </LinearLayout>



<TextView
    android:layout_gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="13sp"
    android:textColor="#757575"
    android:letterSpacing="-0.03"
    android:lineSpacingExtra="0sp"
    tools:text="8 hours ago"
    />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <view
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="19dp"
        android:background="#a9382b"
        android:layout_marginRight="19dp"/>

    <ImageView
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:src="@drawable/background_splash" />

</LinearLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <view
        android:layout_width="2dp"
        android:layout_alignParentTop="true"
        android:layout_height="wrap_content"
        android:layout_marginLeft="19dp"
        android:background="#a9382b" />

    <TextView
        android:id="@+id/seeall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="20dp"
        android:textColor="#a9382b"
        android:textSize="11sp"
        tools:text="SEE ALL" />

    <TextView
        android:id="@+id/articles"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:layout_toLeftOf="@id/seeall"
        android:textColor="#757575"
        android:textSize="11sp"
        tools:text="7 Articles"

        />


</RelativeLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="20dp"
        android:background="#a9382b"/>

</LinearLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="15dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        android:layout_marginRight="15dp">


        <ImageView
            android:layout_gravity="center"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/ic_add_circle_outline_black_24dp"
            />

    </LinearLayout>

    <TextView
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:id="@+id/view_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="11sp"
        android:textColor="#a9382b"
        android:layout_marginRight="20dp"
        android:layout_alignParentRight="true"
        android:gravity="end"
        tools:text="VIEW FULL STORY"
        android:layout_marginTop="15dp"

        />




</RelativeLayout>



</LinearLayout>

Upvotes: 1

Views: 2758

Answers (5)

Savita Sharma
Savita Sharma

Reputation: 344

you can draw line using drawable also like this. 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <stroke android:width="1dp" 
     android:color="@color/red"/>
    <size android:width="2dp" 
     android:height="290dp" />
</shape>

Upvotes: 0

Prabha Karan
Prabha Karan

Reputation: 1329

You can try by two answer

1) You can create the view 

 <View
                android:layout_width="1dp"
                android:layout_height="50dp" 
                android:background="#cdcdcd" />

2) You can create the linear layout and set the left margin color for the linear layout , for this follow the below method.

Create this xml file under the drawable folder margin_color.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


<item>
    <shape android:shape="rectangle" >
        <solid android:color="#FFF" />
    </shape>
</item>

<item android:bottom="-4dp" android:right="-4dp" android:left="1dp"
    android:top="-4dp">
    <shape>
        <solid android:color="@android:color/transparent" />
        <stroke
            android:dashGap="0px"
            android:dashWidth="0px"
            android:width="2dp"
            android:color="#EF5350" />
    </shape>
</item>

Then apply this margin to the linear layout as background

<LinearLayout
            android:layout_width="5dp"
            android:layout_height="100dp"
            android:id="@+id/tactic_linear_layout"
            android:background="@drawable/margin_color"
            android:orientation="horizontal"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="0dp"
            android:paddingBottom="0dp">

This method works for me try this....

Upvotes: 1

AwaisMajeed
AwaisMajeed

Reputation: 2314

you can draw vertical line having fixed height using the code below

   <View
        android:layout_width="specify thickness in dp"
        android:layout_height="specify fixed height in dp"
        android:background="specify color of line"/>

Upvotes: 0

Dhiren Basra
Dhiren Basra

Reputation: 860

use below code in your xml file to draw fixed height line,

<View
    android:id="@+id/view_vertical_line"
    android:layout_width="1sp"
    android:layout_height="500sp"
    android:layout_marginLeft="15sp"
    android:background="@color/black" />

Upvotes: 0

Aman Grover
Aman Grover

Reputation: 1641

Since you haven't given any code, you can draw a straight line like this : 

                 <View
                    android:layout_width="1dp"
                    android:layout_height="50dp" 
                    android:background="#cdcdcd" />

Upvotes: 0

Related Questions